From 8a13f050d79002a51881e8f01e4edb4571785750 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 26 Dec 2023 17:40:13 -0300 Subject: [PATCH 1/2] add page properties functionality --- .../edit-ema-navigation-bar.component.html | 28 +++++- .../edit-ema-navigation-bar.component.scss | 5 + .../edit-ema-navigation-bar.component.spec.ts | 8 +- .../dot-ema-shell.component.html | 26 +++++ .../dot-ema-shell.component.spec.ts | 94 ++++++++++++++++++- .../dot-ema-shell/dot-ema-shell.component.ts | 64 +++++++++++-- .../dot-ema-shell/store/dot-ema.store.spec.ts | 40 ++++---- .../lib/dot-ema-shell/store/dot-ema.store.ts | 66 +++++++------ .../edit-ema-editor.component.html | 12 +-- .../edit-ema-editor.component.spec.ts | 22 ++--- .../edit-ema-editor.component.ts | 11 ++- .../src/lib/services/dot-page-api.service.ts | 1 + ema/nextjs/src/components/dotcms-page.js | 2 +- 13 files changed, 295 insertions(+), 84 deletions(-) diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html index ad20b9a594d2..09dbf3d447ea 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html @@ -1,9 +1,16 @@ + + - + + + + + diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.scss b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.scss index f7085cc4dff0..67dca7c45e07 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.scss +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.scss @@ -33,6 +33,11 @@ } } +.edit-ema-nav-bar__item--button { + background-color: transparent; + border: none; +} + .item__image, use { user-select: none; diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts index d751ea167ec3..e371fc061576 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts @@ -69,7 +69,7 @@ describe('EditEmaNavigationBarComponent', () => { describe('DOM', () => { describe('Nav Bar', () => { it('should have 5 items', () => { - const links = spectator.queryAll('a'); + const links = spectator.queryAll(byTestId('nav-bar-item')); expect(links.length).toBe(5); expect(links[0].textContent.trim()).toBe('Content'); @@ -85,6 +85,12 @@ describe('EditEmaNavigationBarComponent', () => { expect(links[4].getAttribute('ng-reflect-router-link')).toBeNull(); }); + it("should be a button if action is defined on last item 'Action'", () => { + const actionLink = spectator.query('button[data-testId="nav-bar-item"]'); + + expect(actionLink).not.toBeNull(); + }); + it("should trigger mockedAction on clicking last item 'Action'", () => { const actionLink = spectator.query(byText('Action')); diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html index e5e5d38ea671..15d05899fbe6 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html @@ -6,3 +6,29 @@ [visible]="pageToolsVisible" [currentPageUrlParams]="sp.seoProperties"> + + + + diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts index 86e42c247a13..6f82baa4a250 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts @@ -1,8 +1,9 @@ import { describe, expect } from '@jest/globals'; -import { SpectatorRouting, createRoutingFactory } from '@ngneat/spectator/jest'; +import { SpectatorRouting, byTestId, createRoutingFactory } from '@ngneat/spectator/jest'; import { of } from 'rxjs'; import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { By } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; @@ -22,6 +23,7 @@ import { EditEmaStore } from './store/dot-ema.store'; import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service'; import { DotPageApiService } from '../services/dot-page-api.service'; import { DEFAULT_PERSONA, WINDOW } from '../shared/consts'; +import { NG_CUSTOM_EVENTS } from '../shared/enums'; describe('DotEmaShellComponent', () => { let spectator: SpectatorRouting; @@ -48,7 +50,8 @@ describe('DotEmaShellComponent', () => { return of({ page: { title: 'hello world', - identifier: '123' + identifier: '123', + inode: '123' }, viewAs: { language: { @@ -147,4 +150,91 @@ describe('DotEmaShellComponent', () => { expect(navigate).toHaveBeenCalledWith(['/pages']); }); }); + + describe('dialog', () => { + it('should open the dialog when triggering store.initEditAction with shell as context', () => { + spectator.detectChanges(); + store.initActionEdit({ + inode: '123', + title: 'hello world', + context: 'shell' + }); + spectator.detectChanges(); + + expect(spectator.query(byTestId('dialog-iframe'))).not.toBeNull(); + }); + + it('should trigger a navigate when saving and the url changed', () => { + const navigate = jest.spyOn(router, 'navigate'); + + spectator.detectChanges(); + store.initActionEdit({ + inode: '123', + title: 'hello world', + context: 'shell' + }); + spectator.detectChanges(); + + const dialogIframe = spectator.debugElement.query( + By.css('[data-testId="dialog-iframe"]') + ); + + spectator.triggerEventHandler(dialogIframe, 'load', {}); // There's no way we can load the iframe, because we are setting a real src and will not load + + dialogIframe.nativeElement.contentWindow.document.dispatchEvent( + new CustomEvent('ng-event', { + detail: { + name: NG_CUSTOM_EVENTS.SAVE_CONTENTLET, + payload: { + htmlPageReferer: '/my-awesome-page' + } + } + }) + ); + spectator.detectChanges(); + + expect(navigate).toHaveBeenCalledWith([], { + queryParams: { + url: 'my-awesome-page' + }, + queryParamsHandling: 'merge' + }); + }); + + it('should trigger a store load if the url is the same', () => { + const loadMock = jest.spyOn(store, 'load'); + + spectator.detectChanges(); + store.initActionEdit({ + inode: '123', + title: 'hello world', + context: 'shell' + }); + spectator.detectChanges(); + + const dialogIframe = spectator.debugElement.query( + By.css('[data-testId="dialog-iframe"]') + ); + + spectator.triggerEventHandler(dialogIframe, 'load', {}); // There's no way we can load the iframe, because we are setting a real src and will not load + + dialogIframe.nativeElement.contentWindow.document.dispatchEvent( + new CustomEvent('ng-event', { + detail: { + name: NG_CUSTOM_EVENTS.SAVE_CONTENTLET, + payload: { + htmlPageReferer: '/index' + } + } + }) + ); + spectator.detectChanges(); + + expect(loadMock).toHaveBeenCalledWith({ + language_id: 1, + url: 'index', + persona_id: DEFAULT_PERSONA.identifier + }); + }); + }); }); diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.ts index c94d377d0f69..f4064d6656a9 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.ts @@ -1,11 +1,12 @@ -import { Observable, Subject } from 'rxjs'; +import { Observable, Subject, fromEvent } from 'rxjs'; import { CommonModule } from '@angular/common'; -import { Component, OnInit, inject, OnDestroy } from '@angular/core'; +import { Component, OnInit, inject, OnDestroy, ViewChild, ElementRef } from '@angular/core'; import { ActivatedRoute, Params, Router, RouterModule } from '@angular/router'; import { ConfirmationService, MessageService } from 'primeng/api'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { DialogModule } from 'primeng/dialog'; import { ToastModule } from 'primeng/toast'; import { map, skip, takeUntil } from 'rxjs/operators'; @@ -17,13 +18,14 @@ import { } from '@dotcms/data-access'; import { SiteService } from '@dotcms/dotcms-js'; import { DotPageToolUrlParams } from '@dotcms/dotcms-models'; +import { SafeUrlPipe } from '@dotcms/ui'; import { EditEmaNavigationBarComponent } from './components/edit-ema-navigation-bar/edit-ema-navigation-bar.component'; import { EditEmaStore } from './store/dot-ema.store'; import { DotPageToolsSeoComponent } from '../dot-page-tools-seo/dot-page-tools-seo.component'; import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service'; -import { DotPageApiService } from '../services/dot-page-api.service'; +import { DotPageApiParams, DotPageApiService } from '../services/dot-page-api.service'; import { DEFAULT_LANGUAGE_ID, DEFAULT_PERSONA, DEFAULT_URL, WINDOW } from '../shared/consts'; import { NavigationBarItem } from '../shared/models'; @@ -36,7 +38,9 @@ import { NavigationBarItem } from '../shared/models'; ToastModule, EditEmaNavigationBarComponent, RouterModule, - DotPageToolsSeoComponent + DotPageToolsSeoComponent, + DialogModule, + SafeUrlPipe ], providers: [ EditEmaStore, @@ -56,21 +60,25 @@ import { NavigationBarItem } from '../shared/models'; styleUrls: ['./dot-ema-shell.component.scss'] }) export class DotEmaShellComponent implements OnInit, OnDestroy { + @ViewChild('dialogIframe') dialogIframe!: ElementRef; private readonly route = inject(ActivatedRoute); private readonly router = inject(Router); private readonly store = inject(EditEmaStore); private readonly siteService = inject(SiteService); private readonly destroy$ = new Subject(); + private queryParams: DotPageApiParams; pageToolsVisible = false; + dialogState$ = this.store.dialogState$; + // We can internally navigate, so the PageID can change // We need to move the logic to a function, we still need to add enterprise logic shellProperties$: Observable<{ items: NavigationBarItem[]; seoProperties: DotPageToolUrlParams; }> = this.store.shellProperties$.pipe( - map(({ currentUrl, pageId, host, languageId, siteId }) => ({ + map(({ currentUrl, page, host, languageId, siteId }) => ({ items: [ { icon: 'pi-file', @@ -85,7 +93,7 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { { icon: 'pi-sliders-h', label: 'Rules', - href: `rules/${pageId}` + href: `rules/${page.identifier}` }, { iconURL: 'experiments', @@ -102,7 +110,13 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { { icon: 'pi-ellipsis-v', label: 'Properties', - href: 'edit-content' + action: () => { + this.store.initActionEdit({ + inode: page.inode, + title: page.title, + context: 'shell' + }); + } } ], seoProperties: { @@ -116,11 +130,13 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { ngOnInit(): void { this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((queryParams: Params) => { - this.store.load({ + this.queryParams = { language_id: queryParams['language_id'] ?? DEFAULT_LANGUAGE_ID, url: queryParams['url'] ?? DEFAULT_URL, persona_id: queryParams['com.dotmarketing.persona.id'] ?? DEFAULT_PERSONA.identifier - }); + }; + + this.store.load(this.queryParams); }); // We need to skip one because it's the initial value @@ -133,4 +149,34 @@ export class DotEmaShellComponent implements OnInit, OnDestroy { this.destroy$.next(true); this.destroy$.complete(); } + + resetDialogIframeData() { + this.store.resetDialog(); + } + + onIframeLoad() { + this.store.setDialogIframeLoading(false); + + fromEvent( + // The events are getting sended to the document + this.dialogIframe.nativeElement.contentWindow.document, + 'ng-event' + ) + .pipe(takeUntil(this.destroy$)) + .subscribe((event: CustomEvent) => { + if (event.detail.name === 'save-page') { + const url = event.detail.payload.htmlPageReferer.split('?')[0].replace('/', ''); + + this.queryParams.url !== url + ? // If the url is different we need to navigate + this.router.navigate([], { + queryParams: { + url + }, + queryParamsHandling: 'merge' + }) + : this.store.load(this.queryParams); // If the url is the same we need to fetch the page + } + }); + } } diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts index 36b2fe1f4bfc..c453f8a915fc 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts @@ -19,7 +19,8 @@ import { ActionPayload } from '../../shared/models'; const mockResponse: DotPageApiResponse = { page: { title: 'Test Page', - identifier: '123' + identifier: '123', + inode: '123-i' }, viewAs: { language: { @@ -43,6 +44,7 @@ const mockResponse: DotPageApiResponse = { describe('EditEmaStore', () => { let spectator: SpectatorService; let dotPageApiService: SpyObject; + const now = Date.now(); const createService = createServiceFactory({ service: EditEmaStore, mocks: [DotPageApiService, DotActionUrlService] @@ -50,7 +52,7 @@ describe('EditEmaStore', () => { beforeEach(() => { spectator = createService(); - mockResponse; + dotPageApiService = spectator.inject(DotPageApiService); dotPageApiService.get.andReturn(of(mockResponse)); @@ -59,14 +61,15 @@ describe('EditEmaStore', () => { describe('selectors', () => { it('should return editorState', (done) => { + jest.useFakeTimers().setSystemTime(now); spectator.service.editorState$.subscribe((state) => { expect(state).toEqual({ editor: mockResponse, apiURL: 'http://localhost/api/v1/page/json/test-url?language_id=1&com.dotmarketing.persona.id=modes.persona.no.persona', - iframeURL: - 'http://localhost:3000/test-url?language_id=1&com.dotmarketing.persona.id=modes.persona.no.persona' + iframeURL: `http://localhost:3000/test-url?language_id=1&com.dotmarketing.persona.id=modes.persona.no.persona&t=${now}` }); done(); + jest.useRealTimers(); }); }); }); @@ -82,7 +85,7 @@ describe('EditEmaStore', () => { dialogIframeURL: '', dialogIframeLoading: true, dialogHeader: '', - dialogVisible: false, + dialogContext: null, dialogType: null }); done(); @@ -101,7 +104,7 @@ describe('EditEmaStore', () => { dialogIframeURL: '', dialogIframeLoading: false, dialogHeader: '', - dialogVisible: false, + dialogContext: null, dialogType: null }); done(); @@ -111,7 +114,8 @@ describe('EditEmaStore', () => { it('should initialize editAction properties', (done) => { spectator.service.initActionEdit({ inode: '123', - title: 'test' + title: 'test', + context: 'editor' }); spectator.service.state$.subscribe((state) => { @@ -121,7 +125,7 @@ describe('EditEmaStore', () => { dialogIframeURL: EDIT_CONTENTLET_URL + '123', dialogIframeLoading: true, dialogHeader: 'test', - dialogVisible: true, + dialogContext: 'editor', dialogType: 'content' }); done(); @@ -130,9 +134,10 @@ describe('EditEmaStore', () => { it('should initialize addAction properties', (done) => { spectator.service.initActionAdd({ - containerId: '123', + containerId: '1234', acceptTypes: 'test', - language_id: '1' + language_id: '1', + context: 'editor' }); spectator.service.state$.subscribe((state) => { @@ -140,10 +145,10 @@ describe('EditEmaStore', () => { editor: mockResponse, url: 'test-url', dialogIframeURL: - '/html/ng-contentlet-selector.jsp?ng=true&container_id=123&add=test&language_id=1', + '/html/ng-contentlet-selector.jsp?ng=true&container_id=1234&add=test&language_id=1', dialogIframeLoading: true, dialogHeader: 'Search Content', - dialogVisible: true, + dialogContext: 'editor', dialogType: 'content' }); done(); @@ -153,7 +158,8 @@ describe('EditEmaStore', () => { it('should initialize createAction properties', (done) => { spectator.service.initActionCreate({ contentType: 'test', - url: 'some/really/long/url' + url: 'some/really/long/url', + context: 'editor' }); spectator.service.state$.subscribe((state) => { @@ -163,7 +169,7 @@ describe('EditEmaStore', () => { dialogIframeURL: 'some/really/long/url', dialogIframeLoading: true, dialogHeader: 'test', - dialogVisible: true, + dialogContext: 'editor', dialogType: 'content' }); done(); @@ -180,7 +186,7 @@ describe('EditEmaStore', () => { expect(state.dialogHeader).toBe('Create Blog Posts'); expect(state.dialogIframeLoading).toBe(true); expect(state.dialogIframeURL).toBe('some/really/long/url'); - expect(state.dialogVisible).toBe(true); + expect(state.dialogContext).toBe('editor'); expect(state.dialogType).toBe('content'); done(); }); @@ -224,7 +230,7 @@ describe('EditEmaStore', () => { expect(state.dialogHeader).toBe('Create Blog'); expect(state.dialogIframeLoading).toBe(true); expect(state.dialogIframeURL).toBe('https://demo.dotcms.com/jsp.jsp'); - expect(state.dialogVisible).toBe(true); + expect(state.dialogContext).toBe('editor'); done(); }); @@ -245,7 +251,7 @@ describe('EditEmaStore', () => { dialogIframeURL: '', dialogIframeLoading: false, dialogHeader: '', - dialogVisible: false, + dialogContext: null, dialogType: null }); done(); diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.ts b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.ts index e60d4a2b0fdf..456e928315df 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/store/dot-ema.store.ts @@ -24,11 +24,13 @@ import { insertContentletInContainer } from '../../utils'; type DialogType = 'content' | 'form' | 'widget' | null; +type DialogContext = 'editor' | 'shell' | null; + export interface EditEmaState { editor: DotPageApiResponse; url: string; dialogIframeURL: string; - dialogVisible: boolean; + dialogContext: DialogContext; dialogHeader: string; dialogIframeLoading: boolean; dialogType: DialogType; @@ -73,7 +75,7 @@ export class EditEmaStore extends ComponentStore { return { apiURL: `${window.location.origin}/api/v1/page/json/${pageURL}`, - iframeURL: `${HOST}/${pageURL}`, + iframeURL: `${HOST}/${pageURL}` + `&t=${Date.now()}`, // The iframe will only reload if the queryParams changes, so we add a timestamp to force a reload when no queryParams change editor: { ...state.editor, viewAs: { @@ -85,11 +87,11 @@ export class EditEmaStore extends ComponentStore { }); readonly dialogState$ = this.select((state) => ({ - dialogIframeURL: state.dialogIframeURL, - dialogVisible: state.dialogVisible, - dialogHeader: state.dialogHeader, - dialogIframeLoading: state.dialogIframeLoading, - dialogType: state.dialogType + iframeURL: state.dialogIframeURL, + context: state.dialogContext, + header: state.dialogHeader, + iframeLoading: state.dialogIframeLoading, + type: state.dialogType })); readonly layoutProperties$ = this.select((state) => ({ @@ -100,7 +102,7 @@ export class EditEmaStore extends ComponentStore { })); readonly shellProperties$ = this.select((state) => ({ - pageId: state.editor.page.identifier, + page: state.editor.page, siteId: state.editor.site.identifier, languageId: state.editor.viewAs.language.id, currentUrl: '/' + state.url, @@ -122,7 +124,7 @@ export class EditEmaStore extends ComponentStore { editor, url, dialogIframeURL: '', - dialogVisible: false, + dialogContext: null, dialogHeader: '', dialogIframeLoading: false, dialogType: null @@ -225,7 +227,7 @@ export class EditEmaStore extends ComponentStore { return { ...state, dialogIframeURL: url, - dialogVisible: true, + dialogContext: 'editor', dialogHeader: `Create ${name}`, dialogIframeLoading: true, dialogType: 'content' @@ -243,7 +245,7 @@ export class EditEmaStore extends ComponentStore { return { ...state, dialogIframeURL: '', - dialogVisible: false, + dialogContext: null, dialogHeader: '', dialogIframeLoading: false, dialogType: null @@ -251,23 +253,33 @@ export class EditEmaStore extends ComponentStore { }); // This method is called when the user clicks on the edit button - readonly initActionEdit = this.updater((state, payload: { inode: string; title: string }) => { - return { - ...state, - dialogVisible: true, - dialogHeader: payload.title, - dialogIframeLoading: true, - dialogIframeURL: this.createEditContentletUrl(payload.inode), - dialogType: 'content' - }; - }); + readonly initActionEdit = this.updater( + (state, payload: { inode: string; title: string; context: DialogContext }) => { + return { + ...state, + dialogContext: payload.context, + dialogHeader: payload.title, + dialogIframeLoading: true, + dialogIframeURL: this.createEditContentletUrl(payload.inode), + dialogType: 'content' + }; + } + ); // This method is called when the user clicks on the [+ add] button readonly initActionAdd = this.updater( - (state, payload: { containerId: string; acceptTypes: string; language_id: string }) => { + ( + state, + payload: { + containerId: string; + acceptTypes: string; + language_id: string; + context: DialogContext; + } + ) => { return { ...state, - dialogVisible: true, + dialogContext: payload.context, dialogHeader: 'Search Content', // Does this need translation? dialogIframeLoading: true, dialogIframeURL: this.createAddContentletUrl(payload), @@ -276,10 +288,10 @@ export class EditEmaStore extends ComponentStore { } ); - readonly initActionAddForm = this.updater((state, _payload: ActionPayload) => { + readonly initActionAddForm = this.updater((state, payload: { context: DialogContext }) => { return { ...state, - dialogVisible: true, + dialogContext: payload.context, dialogHeader: 'Search Forms', // Does this need translation? dialogIframeLoading: true, dialogIframeURL: null, @@ -289,10 +301,10 @@ export class EditEmaStore extends ComponentStore { // This method is called when the user clicks in the + button in the jsp dialog readonly initActionCreate = this.updater( - (state, payload: { contentType: string; url: string }) => { + (state, payload: { contentType: string; url: string; context: DialogContext }) => { return { ...state, - dialogVisible: true, + dialogContext: payload.context, dialogHeader: payload.contentType, dialogIframeLoading: true, dialogIframeURL: payload.url, diff --git a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.html b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.html index 764af27b1dad..dfb2a0893efa 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.html +++ b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.html @@ -100,30 +100,30 @@ - + diff --git a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts index b080591cb461..48f650cc60a2 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts @@ -372,7 +372,8 @@ describe('EditEmaEditorComponent', () => { expect(dialog.getAttribute('ng-reflect-visible')).toBe('true'); expect(initiEditIframeDialogMock).toHaveBeenCalledWith({ inode: 'contentlet-inode-123', - title: 'Hello World' + title: 'Hello World', + context: 'editor' }); const dialogIframe = spectator.debugElement.query( @@ -403,7 +404,7 @@ describe('EditEmaEditorComponent', () => { }); describe('add', () => { - it('should add contentlet after backend emit SAVE_CONTENTLET', (done) => { + it('should add contentlet after backend emit SAVE_CONTENTLET', () => { spectator.detectChanges(); const initAddIframeDialogMock = jest.spyOn(store, 'initActionAdd'); @@ -429,7 +430,7 @@ describe('EditEmaEditorComponent', () => { title: 'Hello World', identifier: '123' }, - pageId: 'test', + pageId: 'test1', language_id: 'test', position: 'before' }; @@ -458,7 +459,8 @@ describe('EditEmaEditorComponent', () => { expect(initAddIframeDialogMock).toHaveBeenCalledWith({ containerId: 'test', acceptTypes: 'test', - language_id: 'test' + language_id: 'test', + context: 'editor' }); const dialogIframe = spectator.debugElement.query( @@ -498,8 +500,6 @@ describe('EditEmaEditorComponent', () => { spectator.detectChanges(); - const iframe = spectator.debugElement.query(By.css('[data-testId="iframe"]')); - expect(savePageMock).toHaveBeenCalledWith({ pageContainers: [ { @@ -509,17 +509,11 @@ describe('EditEmaEditorComponent', () => { personaTag: undefined } ], - pageId: 'test', + pageId: 'test1', whenSaved: expect.any(Function) }); - iframe.nativeElement.contentWindow.addEventListener( - 'message', - (event: MessageEvent) => { - expect(event).toBeTruthy(); - done(); - } - ); + spectator.detectChanges(); }); it('should add contentlet after backend emit CONTENT_SEARCH_SELECT', () => { diff --git a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.ts b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.ts index ac1712cc7655..2d5ce77fbc05 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/edit-ema-editor/edit-ema-editor.component.ts @@ -286,7 +286,8 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { this.store.initActionAdd({ containerId: payload.container.identifier, acceptTypes: payload.container.acceptTypes ?? '*', - language_id: payload.language_id + language_id: payload.language_id, + context: 'editor' }); this.savePayload = payload; } @@ -298,7 +299,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { * @memberof EditEmaEditorComponent */ addForm(payload: ActionPayload): void { - this.store.initActionAddForm(payload); + this.store.initActionAddForm({ context: 'editor' }); this.savePayload = payload; } @@ -370,7 +371,8 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { editContentlet(payload: ActionPayload) { this.store.initActionEdit({ inode: payload.contentlet.inode, - title: payload.contentlet.title + title: payload.contentlet.title, + context: 'editor' }); } @@ -429,7 +431,8 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { [NG_CUSTOM_EVENTS.CREATE_CONTENTLET]: () => { this.store.initActionCreate({ contentType: detail.data.contentType, - url: detail.data.url + url: detail.data.url, + context: 'editor' }); this.cd.detectChanges(); } diff --git a/core-web/libs/portlets/dot-ema/src/lib/services/dot-page-api.service.ts b/core-web/libs/portlets/dot-ema/src/lib/services/dot-page-api.service.ts index 263b66950084..930de2270deb 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/services/dot-page-api.service.ts +++ b/core-web/libs/portlets/dot-ema/src/lib/services/dot-page-api.service.ts @@ -20,6 +20,7 @@ export interface DotPageApiResponse { page: { title: string; identifier: string; + inode: string; }; site: Site; viewAs: { diff --git a/ema/nextjs/src/components/dotcms-page.js b/ema/nextjs/src/components/dotcms-page.js index e595a141e969..abc599f38d07 100644 --- a/ema/nextjs/src/components/dotcms-page.js +++ b/ema/nextjs/src/components/dotcms-page.js @@ -28,7 +28,7 @@ export const DotcmsPage = () => { { action: 'set-url', payload: { - url: url === '/' ? 'index' : url.pop() //TODO: We need to enhance this, this will break for: nested/pages/like/this + url: url === '/' ? 'index' : pathname.replace('/', '') } }, '*' From dc27ae2e10b7088685a2dd1e1223e75c9e9f1977 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Wed, 27 Dec 2023 11:07:03 -0300 Subject: [PATCH 2/2] solve feedback --- .../dot-ema-shell.component.html | 4 ++-- .../dot-ema-shell.component.spec.ts | 8 +++---- .../dot-ema-shell/dot-ema-shell.component.ts | 8 ++----- .../dot-ema-shell/store/dot-ema.store.spec.ts | 19 +++++----------- .../lib/dot-ema-shell/store/dot-ema.store.ts | 22 +++++-------------- .../edit-ema-editor.component.html | 2 +- .../edit-ema-editor.component.spec.ts | 5 ++--- .../edit-ema-editor.component.ts | 10 ++++----- 8 files changed, 26 insertions(+), 52 deletions(-) diff --git a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html index 15d05899fbe6..1de5467a2ede 100644 --- a/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html +++ b/core-web/libs/portlets/dot-ema/src/lib/dot-ema-shell/dot-ema-shell.component.html @@ -9,14 +9,14 @@