feat(edit-content) show and navigate categories #28831 (#28977)

### Proposed Changes * Part of Custom Component Category-Field. Get, show and navigate categories ### Checklist - [x] Tests - [x] Translations - [ ] Security Implications Contemplated (add notes if applicable) ### Additional Info ### Walkthrough video https://github.com/dotCMS/core/assets/1909643/0793a077-62e3-4d11-bd46-f72d7f2dcd31 --------- Co-authored-by: Freddy Montes <[email protected]>
dotCMS · Jun 27, 2024 · 2b6105d · 2b6105d
1 parent 5affeb6
commit 2b6105d
Show file tree

Hide file tree

Showing 40 changed files with 1,573 additions and 338 deletions.
diff --git a/core-web/apps/dotcms-ui/proxy-dev.conf.mjs b/core-web/apps/dotcms-ui/proxy-dev.conf.mjs
@@ -12,7 +12,8 @@ export default [
             '/application',
             '/assets',
             '/dotcms-block-editor',
-            '/dotcms-binary-field-builder'
+            '/dotcms-binary-field-builder',
+            '/categoriesServlet'
         ],
         target: 'http://localhost:8080',
         secure: false,

diff --git a/core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.spec.ts b/core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.spec.ts
@@ -3,12 +3,9 @@ import { of } from 'rxjs';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 
-import {
-    CATEGORY_SOURCE,
-    DotCategory
-} from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
 import { DotHttpErrorManagerService } from '@dotcms/data-access';
 import { CoreWebService } from '@dotcms/dotcms-js';
+import { CATEGORY_SOURCE, DotCategory } from '@dotcms/dotcms-models';
 import { CoreWebServiceMock } from '@dotcms/utils-testing';
 
 import {
@@ -18,6 +15,12 @@ import {
 } from './dot-categories.service';
 
 const mockCategory: DotCategory = {
+    active: false,
+    childrenCount: 0,
+    description: '',
+    iDate: 0,
+    keywords: '',
+    owner: '',
     categoryId: '1222',
     categoryName: 'Test',
     key: 'adsdsd',

diff --git a/core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts b/core-web/apps/dotcms-ui/src/app/api/services/dot-categories/dot-categories.service.ts
@@ -4,9 +4,9 @@ import { Injectable } from '@angular/core';
 
 import { LazyLoadEvent } from 'primeng/api';
 
-import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
 import { OrderDirection, PaginatorService } from '@dotcms/data-access';
 import { CoreWebService } from '@dotcms/dotcms-js';
+import { DotCategory } from '@dotcms/dotcms-models';
 
 export const CATEGORY_API_URL = 'v1/categories';
 

diff --git a/...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts b/...src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.spec.ts
@@ -21,9 +21,9 @@ import { TableModule } from 'primeng/table';
 import { DotEmptyStateModule } from '@components/_common/dot-empty-state/dot-empty-state.module';
 import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
 import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/dot-categories.service';
-import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
 import { DotMessageService } from '@dotcms/data-access';
 import { CoreWebService } from '@dotcms/dotcms-js';
+import { DotCategory } from '@dotcms/dotcms-models';
 import {
     DotActionMenuButtonComponent,
     DotMenuComponent,
@@ -58,7 +58,13 @@ xdescribe('DotCategoriesListingTableComponent', () => {
             working: false,
             name: 'dsdsd',
             friendlyName: 'dfdf',
-            type: 'ASD'
+            type: 'ASD',
+            active: false,
+            childrenCount: 0,
+            description: '',
+            iDate: 0,
+            keywords: '',
+            owner: ''
         },
         {
             categoryId: '9e882f2a-ada2-47e3-a441-bdf9a7254216',
@@ -72,7 +78,13 @@ xdescribe('DotCategoriesListingTableComponent', () => {
             working: false,
             name: 'dsdsd',
             friendlyName: 'dfdf',
-            type: 'ASD'
+            type: 'ASD',
+            active: false,
+            childrenCount: 0,
+            description: '',
+            iDate: 0,
+            keywords: '',
+            owner: ''
         }
     ];
     beforeEach(() => {

diff --git a/...s-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts b/...s-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.ts
@@ -5,7 +5,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { LazyLoadEvent } from 'primeng/api';
 import { Table } from 'primeng/table';
 
-import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
+import { DotCategory } from '@dotcms/dotcms-models';
 
 import { DotCategoriesListState, DotCategoriesListStore } from './store/dot-categories-list-store';
 
@@ -24,6 +24,7 @@ export class DotCategoriesListComponent {
     dataTable: Table;
     @ViewChild('gf')
     globalSearch: ElementRef;
+
     constructor(private store: DotCategoriesListStore) {}
 
     /**

diff --git a/...ui/src/app/portlets/dot-categories/dot-categories-list/store/dot-categories-list-store.ts b/...ui/src/app/portlets/dot-categories/dot-categories-list/store/dot-categories-list-store.ts
@@ -8,9 +8,8 @@ import { LazyLoadEvent, MenuItem } from 'primeng/api';
 import { map, take } from 'rxjs/operators';
 
 import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/dot-categories.service';
-import { DotCategory } from '@dotcms/app/shared/models/dot-categories/dot-categories.model';
 import { DotMessageService, OrderDirection } from '@dotcms/data-access';
-import { DotActionMenuItem } from '@dotcms/dotcms-models';
+import { DotActionMenuItem, DotCategory } from '@dotcms/dotcms-models';
 import { DataTableColumn } from '@models/data-table';
 
 export interface DotCategoriesListState {
@@ -29,27 +28,7 @@ export interface DotCategoriesListState {
 
 @Injectable()
 export class DotCategoriesListStore extends ComponentStore<DotCategoriesListState> {
-    constructor(
-        private dotMessageService: DotMessageService,
-        private categoryService: DotCategoriesService
-    ) {
-        super();
-        this.setState({
-            categoriesBulkActions: this.getCategoriesBulkActions(),
-            categoriesActions: this.getCategoriesActions(),
-            tableColumns: this.getCategoriesColumns(),
-            selectedCategories: [],
-            categories: [],
-            categoryBreadCrumbs: [],
-            currentPage: this.categoryService.currentPage,
-            paginationPerPage: this.categoryService.paginationPerPage,
-            totalRecords: this.categoryService.totalRecords,
-            sortField: null,
-            sortOrder: OrderDirection.ASC
-        });
-    }
     readonly vm$ = this.select((state: DotCategoriesListState) => state);
-
     /**
      * Get categories breadcrumbs
      * @memberof DotCategoriesListStore
@@ -61,7 +40,6 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
             };
         }
     );
-
     /**
      * A function that updates the state of the store.
      * @param state DotCategoryListState
@@ -76,7 +54,6 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
             };
         }
     );
-
     /** A function that updates the state of the store.
      * @param state DotCategoryListState
      * @param categories DotCategory[]
@@ -95,7 +72,6 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
             };
         }
     );
-
     /**
      * Add cateogry in breadcrumb
      * @memberof DotCategoriesListStore
@@ -128,9 +104,6 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
             };
         }
     );
-
-    // EFFECTS
-
     /**
      * > This function returns an observable of an array of DotCategory objects
      * @returns Observable<DotCategory[]>
@@ -150,6 +123,7 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
         );
     });
 
+    // EFFECTS
     /**
      * > This function returns an observable of an array of DotCategory objects
      * @returns Observable<DotCategory[]>
@@ -169,6 +143,26 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
         );
     });
 
+    constructor(
+        private dotMessageService: DotMessageService,
+        private categoryService: DotCategoriesService
+    ) {
+        super();
+        this.setState({
+            categoriesBulkActions: this.getCategoriesBulkActions(),
+            categoriesActions: this.getCategoriesActions(),
+            tableColumns: this.getCategoriesColumns(),
+            selectedCategories: [],
+            categories: [],
+            categoryBreadCrumbs: [],
+            currentPage: this.categoryService.currentPage,
+            paginationPerPage: this.categoryService.paginationPerPage,
+            totalRecords: this.categoryService.totalRecords,
+            sortField: null,
+            sortOrder: OrderDirection.ASC
+        });
+    }
+
     /**
      * It returns an array of objects with a label property
      * @returns An array of objects with a label property.

diff --git a/core-web/libs/dotcms-models/src/index.ts b/core-web/libs/dotcms-models/src/index.ts
@@ -75,4 +75,5 @@ export * from './lib/dot-message-type.model';
 export * from './lib/dot-dialog.model';
 export * from './lib/dot-content-compare.model';
 export * from './lib/dot-action-menu-item.model';
+export * from './lib/dot-categories.model';
 export * from './lib/dot-ai.model';
diff --git a/...ls/dot-categories/dot-categories.model.ts → ...ms-models/src/lib/dot-categories.model.ts b/...ls/dot-categories/dot-categories.model.ts → ...ms-models/src/lib/dot-categories.model.ts
@@ -4,6 +4,7 @@ export enum CATEGORY_SOURCE {
 }
 
 export interface DotCategory {
+    active: boolean;
     categoryId?: string;
     categoryName: string;
     key: string;
@@ -14,11 +15,17 @@ export interface DotCategory {
     path?: string;
     identifier: string;
     inode: string;
-    name: string;
+    name?: string;
     type: string;
     source?: CATEGORY_SOURCE;
     live?: boolean;
     working?: boolean;
+    childrenCount: number;
+    description: string;
+    iDate: number;
+    keywords: string;
+    owner: string;
+    modDate?: number;
     parentPermissionable?: {
         hostname: string;
     };

diff --git a/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts b/core-web/libs/dotcms-models/src/lib/dot-content-types.model.ts
@@ -59,6 +59,7 @@ export interface DotCMSContentTypeField {
     unique: boolean;
     values?: string;
     variable: string;
+    forceIncludeInApi?: boolean;
     metadata?: { [key: string]: string | number | boolean };
 }
 

diff --git a/core-web/libs/edit-content/.eslintrc.json b/core-web/libs/edit-content/.eslintrc.json
@@ -4,7 +4,12 @@
     "overrides": [
         {
             "files": ["*.ts"],
+            "extends": [
+                "plugin:@nx/angular",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
             "rules": {
+                "@angular-eslint/no-host-metadata-property": 0,
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -21,11 +26,7 @@
                         "style": "kebab-case"
                     }
                 ]
-            },
-            "extends": [
-                "plugin:@nx/angular",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ]
+            }
         },
         {
             "files": ["*.html"],

diff --git a/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -8,49 +8,33 @@
 
 @switch (field.fieldType) {
     @case (fieldTypes.SELECT) {
-        <dot-edit-content-select-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-select-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.RADIO) {
-        <dot-edit-content-radio-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-radio-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.TEXT) {
-        <dot-edit-content-text-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-text-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.TEXTAREA) {
-        <dot-edit-content-text-area
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-text-area [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.CHECKBOX) {
-        <dot-edit-content-checkbox-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-checkbox-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.MULTI_SELECT) {
         <dot-edit-content-multi-select-field
             [field]="field"
             [attr.data-testId]="'field-' + field.variable" />
     }
     @case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') {
-        <dot-edit-content-calendar-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-calendar-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.TAG) {
-        <dot-edit-content-tag-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-tag-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.JSON) {
-        <dot-edit-content-json-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-json-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.BINARY) {
         <dot-edit-content-binary-field
@@ -78,9 +62,7 @@
             [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.WYSIWYG) {
-        <dot-edit-content-wysiwyg-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
+        <dot-edit-content-wysiwyg-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
     }
     @case (fieldTypes.HOST_FOLDER) {
         <dot-edit-content-host-folder-field
@@ -90,6 +72,7 @@
     @case (fieldTypes.CATEGORY) {
         <dot-edit-content-category-field
             [attr.data-testId]="'field-' + field.variable"
+            [contentlet]="contentlet"
             [field]="field" />
     }
 }

diff --git a/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html b/...mponents/dot-category-field-category-list/dot-category-field-category-list.component.html
@@ -0,0 +1,40 @@
+<div class="w-full category-list__header">Root</div>
+<div
+    [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" />
+
+            <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
+            >
+
+            @if (item.childrenCount > 0) {
+            <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>