feat(edit-content): add remove functionality to category chips

core-web/.prettierrc

@@ -6,6 +6,7 @@
     "trailingComma": "none",
     "arrowParens": "always",
     "bracketSameLine": true,
+    "htmlWhitespaceSensitivity": "ignore",
     "overrides": [
         {
             "files": "*.scss",

core-web/libs/dotcms-models/src/lib/dot-categories.model.ts

@@ -29,4 +29,11 @@ export interface DotCategory {
     parentPermissionable?: {
         hostname: string;
     };
+    parentList?: DotCategoryParent[];
 }
+
+type DotCategoryParent = {
+    categoryName: string;
+    key: string;
+    inode: string;
+};

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html

@@ -3,41 +3,41 @@
     [ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
     class="flex-1 category-list__category-list">
     @for (column of categories(); let index = $index; track index) {
-        <!--dynamic columns-->
-        <div #categoryColumn class="category-list__category-column" data-testId="category-column">
-            @for (item of column; track item.inode) {
-                <div
-                    data-testId="category-item"
-                    class="flex align-content-center align-items-center category-list__item"
-                    [ngClass]="{ 'category-list__item--selected': item.checked }"
-                    (click)="itemClicked.emit({ index, item })">
-                    <p-checkbox
-                        [(ngModel)]="itemsSelected"
-                        [value]="item.key"
-                        (onChange)="itemChecked.emit({ selected: $event.checked, item })" />
+    <!--dynamic columns-->
+    <div #categoryColumn class="category-list__category-column" data-testId="category-column">
+        @for (item of column; track item.key) {
+        <div
+            data-testId="category-item"
+            class="flex align-content-center align-items-center category-list__item"
+            [ngClass]="{ 'category-list__item--selected': item.clicked }"
+            (click)="rowClicked.emit({ index, item })">
+            <p-checkbox
+                [(ngModel)]="itemsSelected"
+                [value]="item.key"
+                (onChange)="itemChecked.emit({ selected: $event.checked, item })" />
 
-                    <label
-                        data-testId="category-item-label"
-                        class="flex flex-grow-1 category-list__item-label"
-                        [ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
-                        [for]="item.key"
-                        >{{ item.categoryName }}</label
-                    >
+            <label
+                data-testId="category-item-label"
+                class="flex flex-grow-1 category-list__item-label"
+                [class.cursor-pointer]="item.hasChildren"
+                [for]="item.key">
+                {{ item.value }}
+            </label>
 
-                    @if (item.childrenCount > 0) {
-                        <i
-                            data-testId="category-item-with-child"
-                            class="pi pi-chevron-right category-list__item-icon"></i>
-                    }
-                </div>
+            @if (item.hasChildren) {
+            <i
+                data-testId="category-item-with-child"
+                class="pi pi-chevron-right category-list__item-icon"></i>
             }
         </div>
+        }
+    </div>
     }
 
     <!--Fake empty columns-->
     @for (_ of emptyColumns(); track _) {
-        <div
-            class="flex-grow-1 category-list__category-column"
-            data-testId="category-column-empty"></div>
+    <div
+        class="flex-grow-1 category-list__category-column"
+        data-testId="category-column-empty"></div>
     }
 </div>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.spec.ts

@@ -8,7 +8,12 @@ import {
     MINIMUM_CATEGORY_COLUMNS
 } from './dot-category-field-category-list.component';
 
-import { CATEGORY_LIST_MOCK, SELECTED_LIST_MOCK } from '../../mocks/category-field.mocks';
+import {
+    CATEGORY_LIST_MOCK,
+    CATEGORY_LIST_MOCK_TRANSFORMED,
+    CATEGORY_MOCK_TRANSFORMED,
+    SELECTED_LIST_MOCK
+} from '../../mocks/category-field.mocks';
 
 describe('DotCategoryFieldCategoryListComponent', () => {
     let spectator: Spectator<DotCategoryFieldCategoryListComponent>;
@@ -21,7 +26,7 @@ describe('DotCategoryFieldCategoryListComponent', () => {
     beforeEach(() => {
         spectator = createComponent({
             props: {
-                categories: CATEGORY_LIST_MOCK,
+                categories: CATEGORY_LIST_MOCK_TRANSFORMED,
                 selected: SELECTED_LIST_MOCK
             }
         });
@@ -62,25 +67,35 @@ describe('DotCategoryFieldCategoryListComponent', () => {
     });
 
     it('should emit the correct item when clicked', () => {
-        const emitSpy = jest.spyOn(spectator.component.itemClicked, 'emit');
+        const emitSpy = jest.spyOn(spectator.component.rowClicked, 'emit');
         const items = spectator.queryAll(byTestId('category-item'));
         spectator.click(items[0]);
 
         expect(emitSpy).toHaveBeenCalledWith({
             index: 0,
-            item: CATEGORY_LIST_MOCK[0][0]
+            item: CATEGORY_LIST_MOCK_TRANSFORMED[0][0]
         });
     });
 
     it('should apply selected class to the correct item', () => {
+        spectator = createComponent({
+            props: {
+                categories: CATEGORY_MOCK_TRANSFORMED,
+                selected: SELECTED_LIST_MOCK
+            }
+        });
+
+        spectator.detectChanges();
+
         const items = spectator.queryAll(byTestId('category-item'));
-        expect(items[1].className).toContain('category-list__item--selected');
-        expect(items[2].className).toContain('category-list__item--selected');
+
+        expect(items[0].className).toContain('category-list__item--selected');
+        expect(items[1].className).not.toContain('category-list__item--selected');
     });
 
     it('should not render any empty columns when there are enough categories', () => {
         const minColumns = 4;
-        const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK[0]);
+        const testCategories = Array(minColumns).fill(CATEGORY_LIST_MOCK_TRANSFORMED[0]);
 
         spectator = createComponent({
             props: {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts

@@ -21,9 +21,7 @@ import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { TreeModule } from 'primeng/tree';
 
-import { DotCategory } from '@dotcms/dotcms-models';
-
-import { DotCategoryFieldCategory } from '../../models/dot-category-field.models';
+import { DotCategoryFieldKeyValueObj } from '../../models/dot-category-field.models';
 
 export const MINIMUM_CATEGORY_COLUMNS = 4;
 
@@ -54,7 +52,7 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     /**
      * Represents the variable 'categories' which is of type 'DotCategoryFieldCategory[][]'.
      */
-    categories = input.required<DotCategoryFieldCategory[][]>();
+    categories = input.required<DotCategoryFieldKeyValueObj[][]>();
 
     /**
      * Represent the selected item saved in the contentlet
@@ -76,12 +74,15 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     /**
      * Emit the item clicked to the parent component
      */
-    @Output() itemClicked = new EventEmitter<{ index: number; item: DotCategory }>();
+    @Output() rowClicked = new EventEmitter<{ index: number; item: DotCategoryFieldKeyValueObj }>();
 
     /**
      * Emit the item checked or selected to the parent component
      */
-    @Output() itemChecked = new EventEmitter<{ selected: string[]; item: DotCategory }>();
+    @Output() itemChecked = new EventEmitter<{
+        selected: string[];
+        item: DotCategoryFieldKeyValueObj;
+    }>();
 
     /**
      * Model of the items selected
@@ -115,12 +116,14 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
                 return;
             }
 
+            const lastColumnIndex = columnsArray.length - 1;
+
             if (
                 columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING - 1] &&
                 columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING - 1].nativeElement.children.length >
                     0
             ) {
-                columnsArray[columnsArray.length - 1].nativeElement.scrollIntoView({
+                columnsArray[lastColumnIndex].nativeElement.scrollIntoView({
                     behavior: 'smooth',
                     block: 'end',
                     inline: 'end'

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.html

@@ -5,7 +5,8 @@
         [removable]="true"
         [label]="category.value"
         tooltipPosition="top"
-        styleClass="p-chip-sm" />
+        styleClass="p-chip-sm"
+        (onRemove)="onRemove(category)" />
     } @if ($showAllBtn()) {
     <button
         (click)="toogleShowAll()"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.spec.ts

@@ -1,4 +1,4 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 
 import { ButtonModule, ButtonDirective } from 'primeng/button';
 import { ChipModule, Chip } from 'primeng/chip';
@@ -85,15 +85,33 @@ describe('DotCategoryFieldChipsComponent', () => {
 
     describe('toogleShowAll', () => {
         it('should set showAll to true', () => {
+            spectator.setInput('max', 2);
+            spectator.component.$showAll.set(true);
+            spectator.detectChanges();
+            const showBtn = spectator.query(byTestId('show-btn'));
+            spectator.click(showBtn);
+            expect(spectator.component.$showAll()).toBe(false);
+        });
+
+        it('should set showAll to false', () => {
+            spectator.setInput('max', 2);
             spectator.component.$showAll.set(false);
-            spectator.component.toogleShowAll();
+            spectator.detectChanges();
+            const showBtn = spectator.query(byTestId('show-btn'));
+            spectator.click(showBtn);
             expect(spectator.component.$showAll()).toBe(true);
         });
+    });
 
-        it('should set showAll to false', () => {
+    describe('onRemove', () => {
+        it('should call the output', () => {
+            const removeSpy = jest.spyOn(spectator.component.remove, 'emit');
+            spectator.setInput('max', 2);
             spectator.component.$showAll.set(true);
-            spectator.component.toogleShowAll();
-            expect(spectator.component.$showAll()).toBe(false);
+            spectator.detectChanges();
+            const chips = spectator.queryAll(Chip);
+            chips[0].onRemove.emit();
+            expect(removeSpy).toHaveBeenCalledWith(CATEGORIES_KEY_VALUE[0].key);
         });
     });
 });

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-chips/dot-category-field-chips.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    EventEmitter,
+    inject,
+    input,
+    Output,
+    signal
+} from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
 import { ChipModule } from 'primeng/chip';
@@ -96,6 +105,7 @@ export class DotCategoryFieldChipsComponent {
 
         return null;
     });
+    @Output() remove = new EventEmitter<string>();
     /**
      * Method to toogle the show all categories.
      *
@@ -104,4 +114,13 @@ export class DotCategoryFieldChipsComponent {
     toogleShowAll(): void {
         this.$showAll.update((showAll) => !showAll);
     }
+    /**
+     * Method to remove a category.
+     *
+     * @param {DotCategoryFieldKeyValueObj} category
+     * @memberof DotCategoryFieldChipsComponent
+     */
+    onRemove(category: DotCategoryFieldKeyValueObj): void {
+        this.remove.emit(category.key);
+    }
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.html

@@ -0,0 +1,48 @@
+<div #tableContainer class="category-field__search-list">
+    @if (!isLoading()) {
+    <p-table
+        data-testId="categories-table"
+        [scrollHeight]="$scrollHeight()"
+        [scrollable]="true"
+        [value]="categories()"
+        dataKey="key"
+        selectionMode="multiple"
+        [(selection)]="itemsSelected"
+        (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)"
+        (onRowSelect)="onSelectItem($event)"
+        (onRowUnselect)="onRemoveItem($event)"
+        styleClass="dotTable ">
+        <ng-template pTemplate="header">
+            <tr data-testId="table-header">
+                <th id="checkbox" scope="col" data-testId="table-header-checkbox">
+                    <p-tableHeaderCheckbox style="width: 4rem"></p-tableHeaderCheckbox>
+                </th>
+                <th data-testId="table-header-category-name" id="category-name" scope="col">
+                    {{ 'edit.content.category-field.search.name' | dm }}
+                </th>
+                <th id="parents" data-testId="table-header-parents" scope="col">
+                    {{ 'edit.content.category-field.search.assignee' | dm }}
+                </th>
+            </tr>
+        </ng-template>
+
+        <ng-template let-category pTemplate="body">
+            <tr data-testId="table-row">
+                <td>
+                    <p-tableCheckbox [value]="category"></p-tableCheckbox>
+                </td>
+                <td>{{ category.value }}</td>
+                <td>{{ category.path }}</td>
+            </tr>
+        </ng-template>
+    </p-table>
+    } @else {
+    <dot-table-skeleton
+        data-testId="categories-skeleton"
+        [columns]="[
+            '',
+            'edit.content.category-field.search.name' | dm,
+            'edit.content.category-field.search.assignee' | dm
+        ]" />
+    }
+</div>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.scss

@@ -0,0 +1,11 @@
+.category-field__search-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+:host ::ng-deep .dotTable.p-datatable > .p-datatable-wrapper {
+    border-radius: 0;
+    border: none;
+}