feat(edit-content) changes #28493

dotCMS · Jul 18, 2024 · 10419d2 · 10419d2
1 parent 545084d
commit 10419d2
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 58 deletions.
diff --git a/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts b/core-web/libs/dotcms-models/src/lib/dot-categories.model.ts
@@ -32,8 +32,8 @@ export interface DotCategory {
     parentList?: DotCategoryParent[];
 }
 
-type DotCategoryParent = {
-    categoryName: string;
+export type DotCategoryParent = {
+    name: string;
     key: string;
     inode: string;
 };
diff --git a/...ategory-field/components/dot-category-field-chips/dot-category-field-chips.component.html b/...ategory-field/components/dot-category-field-chips/dot-category-field-chips.component.html
@@ -1,7 +1,7 @@
-<div class="flex gap-3 align-items-center flex-wrap" data-testId="category-list">
+<div class="flex gap-2 align-items-center flex-wrap" data-testId="category-list">
     @for (category of $categoriesToShow(); track category.key) {
     <p-chip
-        [pTooltip]="category.value"
+        [pTooltip]="category.path || category.value"
         [removable]="true"
         [label]="category.value"
         tooltipPosition="top"

diff --git a/...d/components/dot-category-field-search-list/dot-category-field-search-list.component.html b/...d/components/dot-category-field-search-list/dot-category-field-search-list.component.html
@@ -34,7 +34,7 @@
                 <td>{{ category.value }}</td>
                 <td>
                     <span [pTooltip]="category.path" tooltipPosition="top">
-                        {{ category.path }}
+                        {{ category.path || 'edit.content.category-field.category.root-name' | dm }}
                     </span>
                 </td>
             </tr>

diff --git a/...y-field/components/dot-category-field-selected/dot-category-field-selected.component.html b/...y-field/components/dot-category-field-selected/dot-category-field-selected.component.html
@@ -8,7 +8,7 @@
                     [pTooltip]="category.path"
                     tooltipPosition="top"
                     class="category-list__path-content">
-                    {{ category.path }}
+                    {{ category.path || 'edit.content.category-field.category.root-name' | dm }}
                 </span>
             </div>
         </div>

diff --git a/...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html b/...ory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.html
@@ -50,10 +50,16 @@
 
         <div class="category-field__right-pane flex flex-column">
             <div class="category-field__selected-categories-list flex-1">
-                Selected Categories Component
+                <dot-category-field-selected
+                    (removeItem)="store.removeSelected($event)"
+                    [categories]="store.selected()" />
             </div>
             <div class="category-field__actions flex justify-content-end">
-                <button class="p-button p-button-link" data-testId="clear_all-btn" pButton>
+                <button
+                    (click)="store.removeSelected($allCategoryKeys())"
+                    class="p-button p-button-link"
+                    data-testId="clear_all-btn"
+                    pButton>
                     {{ 'edit.content.category-field.sidebar.button.clear-all' | dm }}
                 </button>
             </div>

diff --git a/...egory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts b/...egory-field/components/dot-category-field-sidebar/dot-category-field-sidebar.component.ts
@@ -1,8 +1,8 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { JsonPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     DestroyRef,
     EventEmitter,
     inject,
@@ -21,6 +21,7 @@ import { CategoryFieldStore } from '../../store/content-category-field.store';
 import { DotCategoryFieldCategoryListComponent } from '../dot-category-field-category-list/dot-category-field-category-list.component';
 import { DotCategoryFieldSearchComponent } from '../dot-category-field-search/dot-category-field-search.component';
 import { DotCategoryFieldSearchListComponent } from '../dot-category-field-search-list/dot-category-field-search-list.component';
+import { DotCategoryFieldSelectedComponent } from '../dot-category-field-selected/dot-category-field-selected.component';
 
 /**
  * The DotCategoryFieldSidebarComponent is a sidebar panel that allows editing of content category field.
@@ -42,7 +43,7 @@ import { DotCategoryFieldSearchListComponent } from '../dot-category-field-searc
         InputTextModule,
         DotCategoryFieldSearchComponent,
         DotCategoryFieldSearchListComponent,
-        JsonPipe
+        DotCategoryFieldSelectedComponent
     ],
     templateUrl: './dot-category-field-sidebar.component.html',
     styleUrl: './dot-category-field-sidebar.component.scss',
@@ -71,7 +72,10 @@ export class DotCategoryFieldSidebarComponent implements OnInit {
     @Output() closedSidebar = new EventEmitter<void>();
 
     readonly store: InstanceType<typeof CategoryFieldStore> = inject(CategoryFieldStore);
-
+    /**
+     * Computed property for retrieving all category keys.
+     */
+    $allCategoryKeys = computed(() => this.store.selected().map((category) => category.key));
     readonly #destroyRef = inject(DestroyRef);
 
     ngOnInit(): void {

diff --git a/...c/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts b/...c/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.ts
@@ -86,6 +86,16 @@ export class DotEditContentCategoryFieldComponent implements OnInit {
     readonly #destroyRef = inject(DestroyRef);
     #componentRef: ComponentRef<DotCategoryFieldSidebarComponent>;
 
+    constructor() {
+        effect(() => {
+            const categoryValues = this.store.selectedCategoriesValues();
+
+            if (this.categoryFieldControl) {
+                this.categoryFieldControl.setValue(categoryValues);
+            }
+        });
+    }
+
     /**
      * Retrieve the category field control.
      *
@@ -118,13 +128,6 @@ export class DotEditContentCategoryFieldComponent implements OnInit {
         this.setSidebarListener();
     }
 
-    constructor() {
-        effect(() => {
-            const categoryValues = this.store.selectedCategoriesValues();
-            this.categoryFieldControl.setValue(categoryValues);
-        });
-    }
-
     ngOnInit(): void {
         this.store.load({
             field: this.field(),

diff --git a/...ontent/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts b/...ontent/src/lib/fields/dot-edit-content-category-field/models/dot-category-field.models.ts
@@ -23,7 +23,9 @@ export interface DotCategoryFieldKeyValueObj {
  * It is defined as a subset of the DotCategory type, which includes the categoryName,
  * inode, and parentList properties.
  */
-export type HierarchyParent = Pick<DotCategory, 'categoryName' | 'inode' | 'parentList'>;
+export type HierarchyParent = Pick<DotCategory, 'categoryName' | 'inode' | 'parentList' | 'key'> & {
+    name: string;
+};
 
 /**
  * Represents an clicked item in a DotCategoryField.

diff --git a/...dit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts b/...dit-content/src/lib/fields/dot-edit-content-category-field/services/categories.service.ts
@@ -66,7 +66,7 @@ export class CategoriesService {
      */
     getSelectedHierarchy(keys: string[]): Observable<HierarchyParent[]> {
         return this.#http
-            .post<DotCMSResponse<DotCategory[]>>(`${API_URL}/hierarchy`, { keys })
+            .post<DotCMSResponse<HierarchyParent[]>>(`${API_URL}/hierarchy`, { keys })
             .pipe(pluck('entity'));
     }
 

diff --git a/...tent/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts b/...tent/src/lib/fields/dot-edit-content-category-field/store/content-category-field.store.ts
@@ -23,9 +23,10 @@ import {
     checkIfClickedIsLastItem,
     clearCategoriesAfterIndex,
     clearParentPathAfterIndex,
+    getSelectedFromContentlet,
     removeItemByKey,
     transformCategories,
-    transformSelectedCategories,
+    transformToSelectedObject,
     updateChecked
 } from '../utils/category-field.utils';
 
@@ -118,14 +119,16 @@ export const CategoryFieldStore = signalStore(
                     tap(() => patchState(store, { state: ComponentStatus.LOADING })),
                     switchMap((categoryField) => {
                         const { field, contentlet } = categoryField;
-                        const selected = transformSelectedCategories(field, contentlet);
-
-                        const selectedKeys = selected.map((item) => item.key);
+                        const selectedKeys = getSelectedFromContentlet(field, contentlet).map(
+                            (item) => item.key
+                        );
 
-                        // TODO: Wait for the final working endpoint
                         return categoryService.getSelectedHierarchy(selectedKeys).pipe(
                             tapResponse({
-                                next: () => {
+                                next: (categoryWithParentPath) => {
+                                    const selected =
+                                        transformToSelectedObject(categoryWithParentPath);
+
                                     patchState(store, {
                                         field,
                                         selected,
@@ -135,7 +138,6 @@ export const CategoryFieldStore = signalStore(
                                 error: (error: HttpErrorResponse) => {
                                     patchState(store, {
                                         field,
-                                        selected,
                                         state: ComponentStatus.IDLE
                                     });
 
@@ -156,12 +158,17 @@ export const CategoryFieldStore = signalStore(
             },
 
             /**
-             * Updates the selected items based on the provided item.
+             * Updates the selected items based on the items keyed by the provided selected keys.
+             * This method receives the selected keys from the list of categories, searches in the category array
+             * for the item with all the necessary data and stores it in the state as a selected item.
+             *
+             * @param {string[]} categoryListChecked - An array of selected keys from the category list
+             * @param {DotCategoryFieldKeyValueObj} item - The item containing the data to be stored as a selected item
              */
-            updateSelected(selected: string[], item: DotCategoryFieldKeyValueObj): void {
+            updateSelected(categoryListChecked: string[], item: DotCategoryFieldKeyValueObj): void {
                 const currentChecked: DotCategoryFieldKeyValueObj[] = updateChecked(
                     store.selected(),
-                    selected,
+                    categoryListChecked,
                     item
                 );
 
@@ -171,16 +178,15 @@ export const CategoryFieldStore = signalStore(
             },
 
             /**
-             * Adds the selected item(s) to the store's selected state.
+             * Adds the items directly to the 'selected' in the store. These items are already transformed and formatted in the manner 'selected' requires.
              *
-             * @param {DotCategoryFieldKeyValueObj | DotCategoryFieldKeyValueObj[]} selectedItem - The item(s) to be added.
+             * @param {DotCategoryFieldKeyValueObj | DotCategoryFieldKeyValueObj[]} selectedItem - The fully formed item or items to be added. These item(s) have been transformed from the search results to match the requirements of 'selected'.
              * @returns {void}
              */
             addSelected(
                 selectedItem: DotCategoryFieldKeyValueObj | DotCategoryFieldKeyValueObj[]
             ): void {
                 const updatedSelected = addSelected(store.selected(), selectedItem);
-                // TODO: MAKE A REQUEST TO GET THE parentPath
                 patchState(store, {
                     selected: updatedSelected
                 });

diff --git a/...content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.spec.ts b/...content/src/lib/fields/dot-edit-content-category-field/utils/category-field.utils.spec.ts
@@ -5,9 +5,9 @@ import {
     categoryDeepCopy,
     clearCategoriesAfterIndex,
     clearParentPathAfterIndex,
+    getSelectedFromContentlet,
     removeItemByKey,
     transformCategories,
-    transformSelectedCategories,
     updateChecked
 } from './category-field.utils';
 
@@ -22,7 +22,7 @@ import { DotCategoryFieldKeyValueObj } from '../models/dot-category-field.models
 describe('CategoryFieldUtils', () => {
     describe('getSelectedCategories', () => {
         it('should return an empty array if contentlet is null', () => {
-            const result = transformSelectedCategories(CATEGORY_FIELD_MOCK, null);
+            const result = getSelectedFromContentlet(CATEGORY_FIELD_MOCK, null);
             expect(result).toEqual([]);
         });
 
@@ -31,7 +31,7 @@ describe('CategoryFieldUtils', () => {
                 { key: '1f208488057007cedda0e0b5d52ee3b3', value: 'Electrical' },
                 { key: 'cb83dc32c0a198fd0ca427b3b587f4ce', value: 'Doors & Windows' }
             ];
-            const result = transformSelectedCategories(
+            const result = getSelectedFromContentlet(
                 CATEGORY_FIELD_MOCK,
                 CATEGORY_FIELD_CONTENTLET_MOCK
             );
@@ -543,16 +543,13 @@ describe('CategoryFieldUtils', () => {
     });
     describe('transformSelectedCategories', () => {
         it('should return an empty array if contentlet is not provided', () => {
-            const result = transformSelectedCategories(CATEGORY_FIELD_MOCK, null as never);
+            const result = getSelectedFromContentlet(CATEGORY_FIELD_MOCK, null as never);
             expect(result).toEqual([]);
         });
 
         it('should return an empty array if variable is not provided', () => {
             const variableField: DotCMSContentTypeField = { ...CATEGORY_FIELD_MOCK, variable: '' };
-            const result = transformSelectedCategories(
-                variableField,
-                CATEGORY_FIELD_CONTENTLET_MOCK
-            );
+            const result = getSelectedFromContentlet(variableField, CATEGORY_FIELD_CONTENTLET_MOCK);
             expect(result).toEqual([]);
         });
 
@@ -561,15 +558,12 @@ describe('CategoryFieldUtils', () => {
                 ...CATEGORY_FIELD_MOCK,
                 variable: 'nonexistentField'
             };
-            const result = transformSelectedCategories(
-                variableField,
-                CATEGORY_FIELD_CONTENTLET_MOCK
-            );
+            const result = getSelectedFromContentlet(variableField, CATEGORY_FIELD_CONTENTLET_MOCK);
             expect(result).toEqual([]);
         });
 
         it('should transform selected categories correctly', () => {
-            const result = transformSelectedCategories(
+            const result = getSelectedFromContentlet(
                 CATEGORY_FIELD_MOCK,
                 CATEGORY_FIELD_CONTENTLET_MOCK
             );
@@ -584,7 +578,7 @@ describe('CategoryFieldUtils', () => {
                 ...CATEGORY_FIELD_CONTENTLET_MOCK,
                 [CATEGORY_FIELD_VARIABLE_NAME]: []
             };
-            const result = transformSelectedCategories(
+            const result = getSelectedFromContentlet(
                 CATEGORY_FIELD_MOCK,
                 contentletWithEmptyCategories
             );