Add State Management to palette #21507

apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.html

@@ -1,6 +1,5 @@
 <dot-palette-input-filter
     #inputFilter
-    [value]="filter"
     [goBackBtn]="true"
     (goBack)="backHandler()"
     (filter)="filterContentlets($event)"
@@ -34,14 +33,17 @@
         [rows]="itemsPerPage"
         [showFirstLastIcon]="false"
         [totalRecords]="totalRecords"
-        (onPageChange)="paginate($event)"
+        (onPageChange)="onPaginate($event)"
     ></p-paginator>
 </div>
 
 <ng-template #Loading>
-    <dot-spinner *ngIf="hideNoResults" [size]="'40px'" [borderSize]="'8px'"></dot-spinner>
+    <dot-spinner *ngIf="loading" [size]="'40px'" [borderSize]="'8px'"></dot-spinner>
 </ng-template>
 
-<span *ngIf="!hideNoResults" data-testId="emptyState" class="dot-content-palette__empty">{{
-    'No-Results' | dm
-}}</span>
+<span
+    *ngIf="totalRecords < 1 && !loading"
+    data-testId="emptyState"
+    class="dot-content-palette__empty"
+    >{{ 'No-Results' | dm }}</span
+>

apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.ts

@@ -1,37 +1,26 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
-import { ESContent } from '@dotcms/app/shared/models/dot-es-content/dot-es-content.model';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { DotContentletEditorService } from '@dotcms/app/view/components/dot-contentlet-editor/services/dot-contentlet-editor.service';
-import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models';
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotESContentService } from '@services/dot-es-content/dot-es-content.service';
 import { PaginatorService } from '@services/paginator';
 import { LazyLoadEvent } from 'primeng/api';
-import { take } from 'rxjs/operators';
 import { DotPaletteInputFilterComponent } from '../dot-palette-input-filter/dot-palette-input-filter.component';
 
 @Component({
     selector: 'dot-palette-contentlets',
     templateUrl: './dot-palette-contentlets.component.html',
     styleUrls: ['./dot-palette-contentlets.component.scss']
 })
-export class DotPaletteContentletsComponent implements OnChanges {
-    @Input() contentTypeVariable: string;
-    @Input() languageId: string;
+export class DotPaletteContentletsComponent {
+    @Input() items: DotCMSContentlet[];
+    @Input() loading: boolean;
+    @Input() totalRecords: number;
+
     @Output() back = new EventEmitter();
+    @Output() filter = new EventEmitter<string>();
+    @Output() paginate = new EventEmitter<LazyLoadEvent>();
 
-    items: DotCMSContentlet[] | DotCMSContentType[] = [];
-    isFormContentType: boolean;
-    hideNoResults = true;
-    filter: string;
     itemsPerPage = 25;
-    totalRecords = 0;
 
     @ViewChild('inputFilter') inputFilter: DotPaletteInputFilterComponent;
 
@@ -41,66 +30,14 @@ export class DotPaletteContentletsComponent implements OnChanges {
         private dotContentletEditorService: DotContentletEditorService
     ) {}
 
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes?.contentTypeVariable?.currentValue) {
-            this.isFormContentType = changes?.contentTypeVariable?.currentValue === 'forms';
-
-            if (this.isFormContentType) {
-                this.paginationService.url = `v1/contenttype`;
-                this.paginationService.paginationPerPage = this.itemsPerPage;
-                this.paginationService.sortField = 'modDate';
-                this.paginationService.setExtraParams('type', 'Form');
-                this.paginationService.sortOrder = 1;
-            }
-
-            this.loadData();
-        }
-    }
-
-    /**
-     * Loads data through pagination service
-     *
-     * @param LazyLoadEvent [event]
-     * @memberof DotPaletteContentletsComponent
-     */
-    loadData(event?: LazyLoadEvent): void {
-        if (this.isFormContentType) {
-            this.paginationService.setExtraParams('filter', this.filter);
-            this.paginationService
-                .getWithOffset((event && event.first) || 0)
-                .pipe(take(1))
-                .subscribe((data: DotCMSContentType[] | DotCMSContentlet[]) => {
-                    data.forEach((item) => (item.contentType = item.variable = 'FORM'));
-                    this.items = data;
-                    this.totalRecords = this.paginationService.totalRecords;
-                    this.hideNoResults = !!data?.length;
-                });
-        } else {
-            this.paginatorESService
-                .get({
-                    itemsPerPage: this.itemsPerPage,
-                    lang: this.languageId || '1',
-                    filter: this.filter || '',
-                    offset: (event && event.first.toString()) || '0',
-                    query: `+contentType: ${this.contentTypeVariable}`
-                })
-                .pipe(take(1))
-                .subscribe((response: ESContent) => {
-                    this.totalRecords = response.resultsSize;
-                    this.items = response.jsonObjectView.contentlets;
-                    this.hideNoResults = !!response.jsonObjectView.contentlets?.length;
-                });
-        }
-    }
-
     /**
      * Loads data with a specific page
      *
      * @param LazyLoadEvent event
      * @memberof DotPaletteContentletsComponent
      */
-    paginate(event: LazyLoadEvent): void {
-        this.loadData(event);
+    onPaginate(event: LazyLoadEvent): void {
+        this.paginate.emit(event);
     }
 
     /**
@@ -109,9 +46,7 @@ export class DotPaletteContentletsComponent implements OnChanges {
      * @memberof DotPaletteContentletsComponent
      */
     backHandler(): void {
-        this.filter = '';
         this.back.emit();
-        this.items = null;
     }
 
     /**
@@ -133,14 +68,7 @@ export class DotPaletteContentletsComponent implements OnChanges {
      */
     filterContentlets(value: string): void {
         value = value.trim();
-        this.filter = value;
-
-        if (this.isFormContentType) {
-            this.paginationService.searchParam = 'variable';
-            this.paginationService.filter = value;
-        }
-
-        this.loadData({ first: 0 });
+        this.filter.emit(value);
     }
 
     /**
@@ -149,6 +77,7 @@ export class DotPaletteContentletsComponent implements OnChanges {
      * @memberof DotPaletteContentletsComponent
      */
     focusInputFilter(): void {
+        this.inputFilter.value = '';
         this.inputFilter.focus();
     }
 }

apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.html

@@ -1,13 +1,18 @@
-<div [@inOut]="stateContentlet" (@inOut.done)="onAnimationDone($event)" data-testId="wrapper">
-    <dot-palette-content-type
-        #contentTypes
-        (selected)="switchView($event)"
-        [items]="items"
-    ></dot-palette-content-type>
-    <dot-palette-contentlets
-        #contentlets
-        (back)="switchView()"
-        [contentTypeVariable]="contentTypeVariable"
-        [languageId]="languageId"
-    ></dot-palette-contentlets>
-</div>
+<ng-container *ngIf="vm$ | async as vm">
+    <div [@inOut]="vm.viewContentlet" (@inOut.done)="onAnimationDone($event)" data-testId="wrapper">
+        <dot-palette-content-type
+            #contentTypes
+            (selected)="switchView($event)"
+            [items]="vm.contentTypes"
+        ></dot-palette-content-type>
+        <dot-palette-contentlets
+            #contentlets
+            [items]="vm.contentlets"
+            [loading]="vm.loading"
+            [totalRecords]="vm.totalRecords"
+            (back)="switchView()"
+            (filter)="filterContentlets($event)"
+            (paginate)="paginateContentlets($event)"
+        ></dot-palette-contentlets>
+    </div>
+</ng-container>

apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts

@@ -1,13 +1,17 @@
 import { animate, state, style, transition, trigger, AnimationEvent } from '@angular/animations';
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { DotCMSContentType } from '@dotcms/dotcms-models';
+import { LazyLoadEvent } from 'primeng/api';
+import { Observable } from 'rxjs';
 import { DotPaletteContentTypeComponent } from './dot-palette-content-type/dot-palette-content-type.component';
 import { DotPaletteContentletsComponent } from './dot-palette-contentlets/dot-palette-contentlets.component';
+import { DotPaletteStore } from './store/dot-palette.store';
 
 @Component({
     selector: 'dot-palette',
     templateUrl: './dot-palette.component.html',
     styleUrls: ['./dot-palette.component.scss'],
+    providers: [DotPaletteStore],
     animations: [
         trigger('inOut', [
             state(
@@ -22,19 +26,29 @@ import { DotPaletteContentletsComponent } from './dot-palette-contentlets/dot-pa
                     transform: 'translateX(0%)'
                 })
             ),
-            transition('* => *', animate('200ms ease-in')),
+            transition('* => *', animate('200ms ease-in'))
         ])
     ]
 })
-export class DotPaletteComponent {
-    @Input() items: DotCMSContentType[] = [];
+export class DotPaletteComponent implements OnInit {
+    @Input() set items(items: DotCMSContentType[]) {
+        if (items != null && items.length) {
+            this.store.loadContentTypes(items);
+        }
+    }
     @Input() languageId: string;
     contentTypeVariable = '';
-    stateContentlet = 'contentlet:out';
+    vm$: Observable<any> = this.store.vm$;
 
     @ViewChild('contentlets') contentlets: DotPaletteContentletsComponent;
     @ViewChild('contentTypes') contentTypes: DotPaletteContentTypeComponent;
 
+    constructor(private store: DotPaletteStore) {}
+
+    ngOnInit(): void {
+        this.store.languageId(this.languageId);
+    }
+
     /**
      * Sets value on contentTypeVariable variable to show/hide components on the UI
      *
@@ -43,7 +57,31 @@ export class DotPaletteComponent {
      */
     switchView(variableName?: string): void {
         this.contentTypeVariable = variableName ? variableName : '';
-        this.stateContentlet = variableName ? 'contentlet:in' : 'contentlet:out';
+        const viewContentlet = variableName ? 'contentlet:in' : 'contentlet:out';
+
+        this.store.viewContentlet(viewContentlet);
+        this.store.filter('');
+        this.store.loadContentlets(variableName);
+    }
+
+    /**
+     * Event to filter contentlets data on the store
+     *
+     * @param {string} value
+     * @memberof DotPaletteComponent
+     */
+    filterContentlets(value: string): void {
+        this.store.filterContentlets(value);
+    }
+
+    /**
+     * Event to paginate contentlets data on the store
+     *
+     * @param {LazyLoadEvent} event
+     * @memberof DotPaletteComponent
+     */
+    paginateContentlets(event: LazyLoadEvent): void {
+        this.store.getContentletsData(event);
     }
 
     /**

apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.module.ts

@@ -1,13 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { DotPaletteComponent } from '@dotcms/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component';
 import { DotPaletteContentTypeModule } from './dot-palette-content-type/dot-palette-content-type.module';
 import { DotPaletteContentletsModule } from './dot-palette-contentlets/dot-palette-contentlets.module';
 
 @NgModule({
-    imports: [
-        DotPaletteContentTypeModule,
-        DotPaletteContentletsModule
-    ],
+    imports: [CommonModule, DotPaletteContentTypeModule, DotPaletteContentletsModule],
     declarations: [DotPaletteComponent],
     exports: [DotPaletteComponent]
 })