chore(UVE): Dropdown selector to switch modes (#31218)

This pull request includes significant updates to the `DotEmaShellComponent` and the `DotEditorModeSelectorComponent`. The changes focus on enhancing the editor mode functionality and improving the user interface. ### Enhancements to Editor Mode Functionality: * Added a new test case to ensure `editorMode` is set to `EDIT` when an invalid mode is passed (`dot-ema-shell.component.spec.ts`). * Updated logic to set `editorMode` to `EDIT` if the provided mode is invalid and to handle `LIVE` mode appropriately (`dot-ema-shell.component.ts`). [[1]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L224-R231) [[2]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L238-R241) ### User Interface Improvements: * Introduced a new `DotEditorModeSelectorComponent` with a dropdown menu for selecting editor modes (`dot-editor-mode-selector.component.html`, `dot-editor-mode-selector.component.scss`, `dot-editor-mode-selector.component.ts`). [[1]](diffhunk://#diff-2051bd8ea2cdd67daf6027f806b9fca15bdac177bae11ec30365c07306c09a98R1-R21) [[2]](diffhunk://#diff-298dd2701dd031311cb7d0bafccf722ea64e0c09b5d827149e977e7e5dc1a37fR1-R28) [[3]](diffhunk://#diff-6f27ece37ce65b48ea79f5a4ffc71c4885dbb2edde6783e16d1810c42b5ae92dR1-R93) * Added a new test suite for the `DotEditorModeSelectorComponent` to ensure proper functionality and UI interactions (`dot-editor-mode-selector.component.spec.ts`). ### Toolbar Updates: * Updated the toolbar to include the new editor mode selector and adjusted the layout for `LIVE` and `PREVIEW` modes (`dot-uve-toolbar.component.html`). [[1]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bR2-R20) [[2]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL26-R29) [[3]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL70-L78) [[4]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL103-L108) ### Minor Adjustments: * Changed the icon for the device selector button to maintain consistency across the UI (`dot-uve-device-selector.component.html`). * Removed an unused import from the `dot-uve-toolbar.component.spec.ts` file (`dot-uve-toolbar.component.spec.ts`).
dotCMS · Jan 27, 2025 · 696dfc1 · 696dfc1
1 parent 3fb9021
commit 696dfc1
Show file tree

Hide file tree

Showing 20 changed files with 726 additions and 187 deletions.
diff --git a/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
@@ -444,6 +444,30 @@ describe('DotEmaShellComponent', () => {
             });
         });
 
+        it('should patch viewParams with the correct params on init with live mode', () => {
+            const patchViewParamsSpy = jest.spyOn(store, 'patchViewParams');
+
+            const withViewParams = {
+                device: 'mobile',
+                orientation: 'landscape',
+                seo: undefined,
+                editorMode: UVE_MODE.LIVE
+            };
+
+            overrideRouteSnashot(
+                activatedRoute,
+                SNAPSHOT_MOCK({ queryParams: withViewParams, data: UVE_CONFIG_MOCK(BASIC_OPTIONS) })
+            );
+
+            spectator.detectChanges();
+
+            expect(patchViewParamsSpy).toHaveBeenCalledWith({
+                orientation: 'landscape',
+                seo: undefined,
+                device: 'mobile'
+            });
+        });
+
         it('should call store.loadPageAsset when the `loadPageAsset` is called', () => {
             const spyloadPageAsset = jest.spyOn(store, 'loadPageAsset');
             const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
@@ -683,11 +707,28 @@ describe('DotEmaShellComponent', () => {
                 });
             });
 
+            it('should set editorMode to EDIT when wrong editorMode is not passed', () => {
+                const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
+                const params = {
+                    ...INITIAL_PAGE_PARAMS,
+                    editorMode: undefined
+                };
+                overrideRouteSnashot(
+                    activatedRoute,
+                    SNAPSHOT_MOCK({ queryParams: params, data: UVE_CONFIG_MOCK(BASIC_OPTIONS) })
+                );
+                spectator.detectChanges();
+                expect(spyStoreLoadPage).toHaveBeenCalledWith({
+                    ...INITIAL_PAGE_PARAMS,
+                    editorMode: UVE_MODE.EDIT
+                });
+            });
+
             it('should add the current date if preview param is true and publishDate is not present', () => {
                 const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
                 const params = {
                     ...INITIAL_PAGE_PARAMS,
-                    editorMode: UVE_MODE.PREVIEW
+                    editorMode: UVE_MODE.LIVE
                 };
 
                 // override the new Date() to return a fixed date

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
@@ -221,11 +221,14 @@ export class DotEmaShellComponent implements OnInit {
             params.clientHost = uveConfig.url;
         }
 
-        if (params.editorMode !== UVE_MODE.EDIT && params.editorMode !== UVE_MODE.PREVIEW) {
+        // If the editor mode is not valid, set it to edit mode
+        const UVE_MODES = Object.values(UVE_MODE);
+
+        if (!params.editorMode || !UVE_MODES.includes(params.editorMode)) {
             params.editorMode = UVE_MODE.EDIT;
         }
 
-        if (params.editorMode === UVE_MODE.PREVIEW && !params.publishDate) {
+        if (params.editorMode === UVE_MODE.LIVE && !params.publishDate) {
             params.publishDate = new Date().toISOString();
         }
 
@@ -235,7 +238,7 @@ export class DotEmaShellComponent implements OnInit {
     #getViewParams(uveMode: UVE_MODE): DotUveViewParams {
         const { queryParams } = this.#activatedRoute.snapshot;
 
-        const isPreviewMode = uveMode === UVE_MODE.PREVIEW;
+        const isPreviewMode = uveMode === UVE_MODE.PREVIEW || uveMode === UVE_MODE.LIVE;
 
         const viewParams: DotUveViewParams = {
             device: queryParams.device,

diff --git a/...t-uve-toolbar/components/dot-editor-mode-selector/dot-editor-mode-selector.component.html b/...t-uve-toolbar/components/dot-editor-mode-selector/dot-editor-mode-selector.component.html
@@ -0,0 +1,21 @@
+<p-button
+    icon="pi pi-angle-down"
+    iconPos="right"
+    [label]="$currentModeLabel() | dm"
+    styleClass="p-button-outlined p-2 p-button-sm mode-selector"
+    (click)="menu.toggle($event)"
+    data-testId="more-button" />
+
+<p-menu #menu [popup]="true" styleClass="more-menu" [model]="$menuItems()" data-testId="more-menu">
+    <ng-template pTemplate="item" let-item>
+        <a
+            pRipple
+            class="flex flex-column p-menuitem-link menu-item align-items-start"
+            [ngClass]="{ 'menu-item--active': item.id === $currentMode() }"
+            (click)="onModeChange(item.id)"
+            [attr.data-testId]="item.id + '-menu-item'">
+            <span class="menu-item__label">{{ item.label | dm }}</span>
+            <span class="menu-item__description">{{ item.description | dm }}</span>
+        </a>
+    </ng-template>
+</p-menu>
diff --git a/...t-uve-toolbar/components/dot-editor-mode-selector/dot-editor-mode-selector.component.scss b/...t-uve-toolbar/components/dot-editor-mode-selector/dot-editor-mode-selector.component.scss
@@ -0,0 +1,28 @@
+@use "variables" as *;
+
+:host {
+    ::ng-deep {
+        .more-menu {
+            padding: $spacing-1;
+        }
+    }
+}
+
+.menu-item {
+    padding: $spacing-2;
+}
+
+.menu-item--active,
+.menu-item--active:hover {
+    background-color: $color-palette-primary-op-20;
+}
+
+.menu-item__label {
+    font-size: $font-size-md;
+    font-weight: $font-weight-bold;
+}
+
+.menu-item__description {
+    font-size: $font-size-md;
+    color: $color-palette-gray-700;
+}