#25901 Unable to reuse content inside the variants (#26450)

* refresh the content palette when the languge change * make a couple of less state updates * clean up
dotCMS · Oct 20, 2023 · 423db1f · 423db1f
1 parent 4b7b189
commit 423db1f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 15 deletions.
diff --git a/...ms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.spec.ts b/...ms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.spec.ts
@@ -107,7 +107,8 @@ const storeMock = jasmine.createSpyObj(
         'filterContentlets',
         'filterContentTypes',
         'loadContentlets',
-        'switchView'
+        'switchView',
+        'switchLanguage'
     ],
     {
         vm$: of({
@@ -234,4 +235,13 @@ describe('DotPaletteComponent', () => {
 
         expect(store.setAllowedContent).toHaveBeenCalledWith(allowedContent);
     });
+
+    it('should switch language', async () => {
+        comp.languageId = '2';
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(store.switchLanguage).toHaveBeenCalledWith('2');
+    });
 });
diff --git a/.../dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts b/.../dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts
@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 
 import { LazyLoadEvent } from 'primeng/api';
 
@@ -32,23 +32,20 @@ import { DotPaletteState, DotPaletteStore } from './store/dot-palette.store';
         ])
     ]
 })
-export class DotPaletteComponent implements OnInit {
+export class DotPaletteComponent {
     @Input() set allowedContent(items: string[]) {
         this.store.setAllowedContent(items);
     }
-    @Input() languageId: string;
+    @Input() set languageId(languageId: string) {
+        this.store.switchLanguage(languageId);
+    }
     vm$: Observable<DotPaletteState> = this.store.vm$;
 
     @ViewChild('contentlets') contentlets: DotPaletteContentletsComponent;
     @ViewChild('contentTypes') contentTypes: DotPaletteContentTypeComponent;
 
     constructor(private store: DotPaletteStore) {}
 
-    ngOnInit(): void {
-        this.store.setLanguageId(this.languageId);
-        this.store.getContenttypesData();
-    }
-
     /**
      * Sets value on store to show/hide components on the UI
      *

diff --git a/...-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.spec.ts b/...-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.spec.ts
@@ -143,9 +143,11 @@ describe('DotPaletteStore', () => {
     });
 
     it('should update languageId', () => {
-        dotPaletteStore.setLanguageId('1');
+        dotPaletteStore.setLanguage('4');
         dotPaletteStore.state$.subscribe((data) => {
-            expect(data.languageId).toEqual('1');
+            expect(data.languageId).toEqual('4');
+            expect(data.filter).toEqual('');
+            expect(data.viewContentlet).toEqual('contentlet:out');
         });
     });
 

diff --git a/...otcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.ts b/...otcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.ts
@@ -32,6 +32,9 @@ export interface DotPaletteState {
     loading: boolean;
 }
 
+const CONTENTLET_VIEW_IN = 'contentlet:in';
+const CONTENTLET_VIEW_OUT = 'contentlet:out';
+
 @Injectable()
 export class DotPaletteStore extends ComponentStore<DotPaletteState> {
     readonly vm$ = this.state$;
@@ -40,8 +43,8 @@ export class DotPaletteStore extends ComponentStore<DotPaletteState> {
         return { ...state, filter: data };
     });
 
-    readonly setLanguageId = this.updater((state: DotPaletteState, data: string) => {
-        return { ...state, languageId: data };
+    readonly setLanguage = this.updater((state: DotPaletteState, languageId: string) => {
+        return { ...state, languageId, viewContentlet: CONTENTLET_VIEW_OUT, filter: '' };
     });
 
     readonly setViewContentlet = this.updater((state: DotPaletteState, data: string) => {
@@ -61,6 +64,7 @@ export class DotPaletteStore extends ComponentStore<DotPaletteState> {
             loading: !(ComponentStatus.LOADED === ComponentStatus.LOADED)
         };
     });
+
     readonly setAllowedContent = this.updater((state: DotPaletteState, data: string[]) => {
         return { ...state, allowedContent: data };
     });
@@ -168,11 +172,22 @@ export class DotPaletteStore extends ComponentStore<DotPaletteState> {
             filter: '',
             languageId: '1',
             totalRecords: 0,
-            viewContentlet: 'contentlet:out',
+            viewContentlet: CONTENTLET_VIEW_OUT,
             loading: false
         });
     }
 
+    /**
+     * Switch language and request Content Types data.
+     * @param languageId
+     *
+     * @memberof DotPaletteStore
+     */
+    switchLanguage(languageId: string): void {
+        this.setLanguage(languageId);
+        this.getContenttypesData();
+    }
+
     /**
      * Request contentlets data with filter and pagination params.
      *
@@ -289,7 +304,7 @@ export class DotPaletteStore extends ComponentStore<DotPaletteState> {
      * @memberof DotPaletteContentletsComponent
      */
     switchView(variableName?: string): void {
-        const viewContentlet = variableName ? 'contentlet:in' : 'contentlet:out';
+        const viewContentlet = variableName ? CONTENTLET_VIEW_IN : CONTENTLET_VIEW_OUT;
         this.setViewContentlet(viewContentlet);
         this.setFilter('');
         this.loadContentlets(variableName);