Fix #25926: Template Builder fixing wrong classes deletion (#25928)

* dev (add style classes module): refactor to support remove any class * fix (template builder story): console error due to missing import
dotCMS · Aug 29, 2023 · e894bb1 · e894bb1
1 parent 44fe98b
commit e894bb1
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 28 deletions.
diff --git a/...plate-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.html b/...plate-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.html
@@ -9,7 +9,7 @@
                 [size]="446"
                 [tabindex]="1"
                 (onSelect)="onSelect($event)"
-                (onUnselect)="onUnselect()"
+                (onUnselect)="onUnselect($event)"
                 (completeMethod)="filterClasses($event)"
                 (onKeyUp)="onKeyUp($event)"
                 dataKey="cssClass"

diff --git a/...te-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.spec.ts b/...te-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.spec.ts
@@ -110,16 +110,16 @@ describe('AddStyleClassesDialogComponent', () => {
         expect(addClassMock).toHaveBeenCalled();
     });
 
-    it('should trigger removeLastClass when autocomplete emits onUnselect', () => {
+    it('should trigger removeClass when autocomplete emits onUnselect', () => {
         const autoComplete = spectator.query('p-autocomplete');
 
-        const removeLastClassMock = jest.spyOn(store, 'removeLastClass');
+        const removeClass = jest.spyOn(store, 'removeClass');
 
         spectator.dispatchFakeEvent(autoComplete, 'onUnselect');
 
         spectator.detectChanges();
 
-        expect(removeLastClassMock).toHaveBeenCalled();
+        expect(removeClass).toHaveBeenCalled();
     });
 
     it('should trigger saveClass when clicking on update-btn', () => {

diff --git a/...emplate-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.ts b/...emplate-builder/components/add-style-classes-dialog/add-style-classes-dialog.component.ts
@@ -100,8 +100,8 @@ export class AddStyleClassesDialogComponent implements OnInit, AfterViewInit, On
      *
      * @memberof AddStyleClassesDialogComponent
      */
-    onUnselect(): void {
-        this.store.removeLastClass();
+    onUnselect(deletedClass: StyleClassModel): void {
+        this.store.removeClass(deletedClass);
     }
 
     /**

diff --git a/...-builder/components/add-style-classes-dialog/store/add-style-classes-dialog.store.spec.ts b/...-builder/components/add-style-classes-dialog/store/add-style-classes-dialog.store.spec.ts
@@ -7,6 +7,10 @@ import { DotAddStyleClassesDialogStore } from './add-style-classes-dialog.store'
 
 import { MOCK_STYLE_CLASSES_FILE } from '../../../utils/mocks';
 
+jest.mock('uuid', () => ({
+    v4: () => 'test-id'
+}));
+
 describe('DotAddStyleClassesDialogStore', () => {
     let service: DotAddStyleClassesDialogStore;
     let httpTestingController: HttpTestingController;
@@ -25,7 +29,10 @@ describe('DotAddStyleClassesDialogStore', () => {
     it('should have selected style classes on init when passed classes', (done) => {
         service.init({ selectedClasses: ['class1', 'class2'] });
         service.state$.subscribe((state) => {
-            expect(state.selectedClasses).toEqual([{ cssClass: 'class1' }, { cssClass: 'class2' }]);
+            expect(state.selectedClasses).toEqual([
+                { cssClass: 'class1', id: 'test-id' },
+                { cssClass: 'class2', id: 'test-id' }
+            ]);
             done();
         });
     });
@@ -40,21 +47,24 @@ describe('DotAddStyleClassesDialogStore', () => {
     it('should add a class to selected ', (done) => {
         service.init({ selectedClasses: [] });
 
-        service.addClass({ cssClass: 'class1' });
+        service.addClass({ cssClass: 'class1', id: 'test-id' });
 
         service.state$.subscribe((state) => {
             expect(state.selectedClasses.length).toBe(1);
             done();
         });
     });
 
-    it('should remove last class from selected ', (done) => {
-        service.init({ selectedClasses: ['class1', 'class2'] });
+    it('should remove a class from selected that have the same id', (done) => {
+        service.init({ selectedClasses: ['class1'] });
 
-        service.removeLastClass();
+        service.removeClass({
+            cssClass: 'class1',
+            id: 'test-id'
+        });
 
         service.state$.subscribe((state) => {
-            expect(state.selectedClasses).toEqual([{ cssClass: 'class1' }]);
+            expect(state.selectedClasses).toEqual([]);
             done();
         });
     });
@@ -66,7 +76,7 @@ describe('DotAddStyleClassesDialogStore', () => {
         req.flush(MOCK_STYLE_CLASSES_FILE);
         service.state$.subscribe((state) => {
             expect(state.styleClasses).toEqual(
-                MOCK_STYLE_CLASSES_FILE.classes.map((cssClass) => ({ cssClass }))
+                MOCK_STYLE_CLASSES_FILE.classes.map((cssClass) => ({ cssClass, id: 'test-id' }))
             );
             done();
         });
@@ -106,7 +116,7 @@ describe('DotAddStyleClassesDialogStore', () => {
         service.filterClasses(query);
 
         service.state$.subscribe((state) => {
-            expect(state.selectedClasses).toEqual([{ cssClass: 'align' }]);
+            expect(state.selectedClasses).toEqual([{ cssClass: 'align', id: 'test-id' }]);
             done();
         });
     });
@@ -117,7 +127,7 @@ describe('DotAddStyleClassesDialogStore', () => {
         service.filterClasses(query);
 
         service.state$.subscribe((state) => {
-            expect(state.selectedClasses).toEqual([{ cssClass: 'align' }]);
+            expect(state.selectedClasses).toEqual([{ cssClass: 'align', id: 'test-id' }]);
             done();
         });
     });
@@ -128,7 +138,7 @@ describe('DotAddStyleClassesDialogStore', () => {
         service.filterClasses(query);
 
         service.state$.subscribe((state) => {
-            expect(state.filteredClasses).toEqual([{ cssClass: query }]);
+            expect(state.filteredClasses).toEqual([{ cssClass: query, id: 'test-id' }]);
             done();
         });
     });

diff --git a/...plate-builder/components/add-style-classes-dialog/store/add-style-classes-dialog.store.ts b/...plate-builder/components/add-style-classes-dialog/store/add-style-classes-dialog.store.ts
@@ -1,13 +1,13 @@
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import { Observable } from 'rxjs';
+import { v4 as uuid } from 'uuid';
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 import { switchMap } from 'rxjs/operators';
 
 import { DotAddStyleClassesDialogState, StyleClassModel } from '../../../models/models';
-
 export const STYLE_CLASSES_FILE_URL = '/application/templates/classes.json';
 
 const COMMA_SPACES_REGEX = /(,|\s)(.*)/;
@@ -34,9 +34,7 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
     readonly init = this.updater((state, { selectedClasses }: { selectedClasses: string[] }) => {
         return {
             ...state,
-            selectedClasses: selectedClasses.map((cssClass) => ({
-                cssClass
-            }))
+            selectedClasses: selectedClasses.map((cssClass) => this.buildStyleClass(cssClass))
         };
     });
 
@@ -55,9 +53,9 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
                         // 200 response
                         ({ classes = [] }: { classes: string[] }) => {
                             this.patchState({
-                                styleClasses: classes.map((cssClass) => ({
-                                    cssClass
-                                }))
+                                styleClasses: classes.map((cssClass) =>
+                                    this.buildStyleClass(cssClass)
+                                )
                             });
                         },
                         // Here is the error, if it fails for any reason I just fill the state with an empty array
@@ -92,7 +90,7 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
                 filteredClasses: [], // I need to reset the filter, because I'm doing the selection manually
                 selectedClasses: [
                     ...state.selectedClasses,
-                    { cssClass: query.replace(COMMA_SPACES_REGEX, '') }
+                    this.buildStyleClass(query.replace(COMMA_SPACES_REGEX, ''))
                 ]
             };
 
@@ -112,10 +110,10 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
      *
      * @memberof DotAddStyleClassesDialogStore
      */
-    readonly removeLastClass = this.updater((state) => {
+    readonly removeClass = this.updater((state, { id }: StyleClassModel) => {
         return {
             ...state,
-            selectedClasses: state.selectedClasses.slice(0, -1)
+            selectedClasses: state.selectedClasses.filter((classObj) => classObj.id !== id)
         };
     });
 
@@ -185,7 +183,7 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
 
         // If no classes were found and query is not empty, create a new class based on the query
         if (queryIsNotEmpty && filtered.length === 0) {
-            filtered.push({ cssClass: query.trim() });
+            filtered.push(this.buildStyleClass(query.trim()));
         }
 
         return filtered;
@@ -217,4 +215,19 @@ export class DotAddStyleClassesDialogStore extends ComponentStore<DotAddStyleCla
     ): boolean {
         return selectedClasses.some(({ cssClass }) => cssClass === classObj.cssClass);
     }
+
+    /**
+     * @description This method builds a StyleClassModel
+     *
+     * @private
+     * @param {string} cssClass
+     * @return {*}  {StyleClassModel}
+     * @memberof DotAddStyleClassesDialogStore
+     */
+    private buildStyleClass(cssClass: string): StyleClassModel {
+        return {
+            cssClass,
+            id: uuid()
+        };
+    }
 }
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/models/models.ts b/core-web/libs/template-builder/src/lib/components/template-builder/models/models.ts
@@ -117,6 +117,7 @@ export interface DotTemplateLayoutProperties {
  */
 export interface StyleClassModel {
     cssClass: string;
+    id: string;
 }
 
 /**

diff --git a/...emplate-builder/src/lib/components/template-builder/template-builder.component.stories.ts b/...emplate-builder/src/lib/components/template-builder/template-builder.component.stories.ts
@@ -3,6 +3,7 @@ import { of } from 'rxjs';
 
 import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ButtonModule } from 'primeng/button';
@@ -54,7 +55,8 @@ export default {
                 ButtonModule,
                 ToolbarModule,
                 DividerModule,
-                DropdownModule
+                DropdownModule,
+                FormsModule
             ],
             providers: [
                 DotTemplateBuilderStore,