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

dotCMS · Jun 21, 2024 · 74fe74f · 74fe74f
1 parent eaa6b79
commit 74fe74f
Show file tree

Hide file tree

Showing 28 changed files with 806 additions and 209 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 {

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,

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,3 +75,4 @@ 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';
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;
@@ -19,6 +20,11 @@ export interface DotCategory {
     source?: CATEGORY_SOURCE;
     live?: boolean;
     working?: boolean;
+    childrenCount: number;
+    description: string;
+    iDate: number;
+    keywords: string;
+    owner: string;
     parentPermissionable?: {
         hostname: string;
     };

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
@@ -6,93 +6,58 @@
     {{ field.name }}
 </label>
 
-@switch (field.fieldType) {
-    @case (fieldTypes.SELECT) {
-        <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" />
-    }
-    @case (fieldTypes.TEXT) {
-        <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" />
-    }
-    @case (fieldTypes.CHECKBOX) {
-        <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" />
-    }
-    @case (fieldTypes.TAG) {
-        <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" />
-    }
-    @case (fieldTypes.BINARY) {
-        <dot-edit-content-binary-field
-            [formControlName]="field.variable"
-            [contentlet]="contentlet"
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.CUSTOM_FIELD) {
-        <dot-edit-content-custom-field
-            [field]="field"
-            [contentType]="contentType"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.BLOCK_EDITOR) {
-        <dot-block-editor
-            [formControlName]="field.variable"
-            [contentlet]="contentlet"
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.KEY_VALUE) {
-        <dot-edit-content-key-value
-            [formControlName]="field.variable"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.WYSIWYG) {
-        <dot-edit-content-wysiwyg-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.HOST_FOLDER) {
-        <dot-edit-content-host-folder-field
-            [field]="field"
-            [attr.data-testId]="'field-' + field.variable" />
-    }
-    @case (fieldTypes.CATEGORY) {
-        <dot-edit-content-category-field
-            [attr.data-testId]="'field-' + field.variable"
-            [field]="field" />
-    }
-}
-@if (field.hint) {
-    <small [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
+@switch (field.fieldType) { @case (fieldTypes.SELECT) {
+<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" />
+} @case (fieldTypes.TEXT) {
+<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" />
+} @case (fieldTypes.CHECKBOX) {
+<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" />
+} @case (fieldTypes.TAG) {
+<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" />
+} @case (fieldTypes.BINARY) {
+<dot-edit-content-binary-field
+    [formControlName]="field.variable"
+    [contentlet]="contentlet"
+    [field]="field"
+    [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.CUSTOM_FIELD) {
+<dot-edit-content-custom-field
+    [field]="field"
+    [contentType]="contentType"
+    [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.BLOCK_EDITOR) {
+<dot-block-editor
+    [formControlName]="field.variable"
+    [contentlet]="contentlet"
+    [field]="field"
+    [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.KEY_VALUE) {
+<dot-edit-content-key-value
+    [formControlName]="field.variable"
+    [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.WYSIWYG) {
+<dot-edit-content-wysiwyg-field [field]="field" [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.HOST_FOLDER) {
+<dot-edit-content-host-folder-field
+    [field]="field"
+    [attr.data-testId]="'field-' + field.variable" />
+} @case (fieldTypes.CATEGORY) {
+<dot-edit-content-category-field
+    [attr.data-testId]="'field-' + field.variable"
+    [contentlet]="contentlet"
+    [field]="field" />
+} } @if (field.hint) {
+<small [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
 }
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,32 @@
+<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 categories()[index]) {
+    <!--dynamic columns-->
+    <div #categoryColumn class="category-list__category-column">
+        @for (item of column; track item.inode) {
+        <div
+            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
+                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 class="pi pi-chevron-right category-list__item-icon"></i>
+            }
+        </div>
+        }
+    </div>
+    }
+
+    <!--Fake empty columns-->
+    <div *ngFor="let _ of emptyColumns()" class="flex-grow-1 category-list__category-column"></div>
+</div>