From 423db1f56785b8e3071f0c3007a84f8bacacea5f Mon Sep 17 00:00:00 2001 From: Humberto Morera <31667212+hmoreras@users.noreply.github.com> Date: Fri, 20 Oct 2023 08:52:35 -0600 Subject: [PATCH] dotCMS/core#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 --- .../dot-palette/dot-palette.component.spec.ts | 12 +++++++++- .../dot-palette/dot-palette.component.ts | 13 ++++------- .../store/dot-palette.store.spec.ts | 6 +++-- .../dot-palette/store/dot-palette.store.ts | 23 +++++++++++++++---- 4 files changed, 39 insertions(+), 15 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.spec.ts index 8887c03708ba..a2006b6826c5 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.spec.ts +++ b/core-web/apps/dotcms-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/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts index 5ca362b8e40b..075286b23f39 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts +++ b/core-web/apps/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,11 +32,13 @@ 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 = this.store.vm$; @ViewChild('contentlets') contentlets: DotPaletteContentletsComponent; @@ -44,11 +46,6 @@ export class DotPaletteComponent implements OnInit { 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/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.spec.ts index a8d8332e1306..82d10925dd45 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.spec.ts +++ b/core-web/apps/dotcms-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/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.ts index 1d0be3725447..b1dcbb95ffcc 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/store/dot-palette.store.ts +++ b/core-web/apps/dotcms-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 { readonly vm$ = this.state$; @@ -40,8 +43,8 @@ export class DotPaletteStore extends ComponentStore { 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 { 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 { 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 { * @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);