chore(uve): Add sort navigation to traditional and nextjs example

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts

@@ -80,7 +80,6 @@ import {
     VTLFile,
     DeletePayload,
     InsertPayloadFromDelete,
-    ReorderPayload,
     DialogAction,
     PostMessage
 } from '../shared/models';
@@ -89,6 +88,7 @@ import { ClientRequestProps } from '../store/features/client/withClient';
 import {
     SDK_EDITOR_SCRIPT_SOURCE,
     TEMPORAL_DRAG_ITEM,
+    createReorderMenuURL,
     compareUrlPaths,
     deleteContentletFromContainer,
     getDragItemData,
@@ -801,6 +801,15 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
 
                 this.uveStore.reload();
                 this.dialog.resetDialog();
+
+                // This is a temporary solution to "reload" the content by reloading the window
+                // we should change this with a new SDK reload strategy
+                this.contentWindow?.postMessage(
+                    {
+                        name: NOTIFY_CLIENT.UVE_RELOAD_PAGE
+                    },
+                    this.host
+                );
             },
             [NG_CUSTOM_EVENTS.ERROR_SAVING_MENU_ORDER]: () => {
                 this.messageService.add({
@@ -995,9 +1004,22 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
             [CLIENT_ACTIONS.EDIT_CONTENTLET]: (contentlet: DotCMSContentlet) => {
                 this.dialog.editContentlet({ ...contentlet, clientAction: action });
             },
-            [CLIENT_ACTIONS.REORDER_MENU]: ({ reorderUrl }: ReorderPayload) => {
+            [CLIENT_ACTIONS.REORDER_MENU]: ({
+                startLevel,
+                depth
+            }: {
+                startLevel: number;
+                depth: number;
+            }) => {
+                const urlObject = createReorderMenuURL({
+                    startLevel,
+                    depth,
+                    pagePath: this.uveStore.params().url,
+                    hostId: this.uveStore.pageAPIResponse().site.identifier
+                });
+
                 this.dialog.openDialogOnUrl(
-                    reorderUrl,
+                    urlObject,
                     this.dotMessageService.get('editpage.content.contentlet.menu.reorder.title')
                 );
             },

core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts

@@ -24,6 +24,9 @@ import {
 
 export const SDK_EDITOR_SCRIPT_SOURCE = '/html/js/editor-js/sdk-editor.js';
 
+const REORDER_MENU_BASE_URL =
+    'c/portal/layout?p_l_id=2df9f117-b140-44bf-93d7-5b10a36fb7f9&p_p_id=site-browser&p_p_action=1&p_p_state=maximized&_site_browser_struts_action=%2Fext%2Ffolders%2Forder_menu';
+
 export const TEMPORAL_DRAG_ITEM: EmaDragItem = {
     baseType: 'dotAsset',
     contentType: 'dotAsset',
@@ -510,3 +513,46 @@ export const getDragItemData = ({ type, item }: DOMStringMap) => {
         return null;
     }
 };
+
+/**
+ * Adds missing query parameters `pagePath` and `hostId` to the given URL if they are not already present.
+ *
+ * @param {Object} params - The parameters object.
+ * @param {string} params.url - The URL to which the parameters will be added.
+ * @param {string} params.pagePath - The page path to be added as a query parameter if missing.
+ * @param {string} params.hostId - The host ID to be added as a query parameter if missing.
+ * @returns {string} - The updated URL with the missing parameters added.
+ */
+export const createReorderMenuURL = ({
+    startLevel,
+    depth,
+    pagePath,
+    hostId
+}: {
+    startLevel: number;
+    depth: number;
+    pagePath: string;
+    hostId: string;
+}) => {
+    const urlObject = new URL(REORDER_MENU_BASE_URL, window.location.origin);
+
+    const params = urlObject.searchParams;
+
+    if (!params.has('startLevel')) {
+        params.set('startLevel', startLevel.toString());
+    }
+
+    if (!params.has('depth')) {
+        params.set('depth', depth.toString());
+    }
+
+    if (!params.has('pagePath')) {
+        params.set('pagePath', pagePath);
+    }
+
+    if (!params.has('hostId')) {
+        params.set('hostId', hostId);
+    }
+
+    return urlObject.toString();
+};

core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts

@@ -15,7 +15,8 @@ import {
     areContainersEquals,
     compareUrlPaths,
     createFullURL,
-    getDragItemData
+    getDragItemData,
+    createReorderMenuURL
 } from '.';
 
 import { dotPageContainerStructureMock } from '../shared/mocks';
@@ -709,4 +710,32 @@ describe('utils functions', () => {
             expect(result).toBeNull();
         });
     });
+
+    describe('createReorderMenuURL', () => {
+        it('should add the missing params', () => {
+            const url = 'some-url?language_id=1';
+            const result = createReorderMenuURL({
+                url,
+                pagePath: '123',
+                hostId: '456'
+            });
+
+            expect(result).toEqual(
+                'http://localhost/some-url?language_id=1&pagePath=123&hostId=456'
+            );
+        });
+
+        it('should not add the missing params', () => {
+            const url = 'some-url?language_id=1&pagePath=111&hostId=333';
+            const result = createReorderMenuURL({
+                url,
+                pagePath: '123',
+                hostId: '456'
+            });
+
+            expect(result).toEqual(
+                'http://localhost/some-url?language_id=1&pagePath=111&hostId=333'
+            );
+        });
+    });
 });

core-web/libs/sdk/client/src/index.ts

@@ -9,6 +9,7 @@ import { NOTIFY_CLIENT } from './lib/editor/models/listeners.model';
 import {
     destroyEditor,
     editContentlet,
+    reorderMenu,
     initEditor,
     isInsideEditor,
     updateNavigation
@@ -20,6 +21,7 @@ export {
     getPageRequestParams,
     isInsideEditor,
     editContentlet,
+    reorderMenu,
     DotCmsClient,
     DotCMSPageEditorConfig,
     CLIENT_ACTIONS,

core-web/libs/sdk/client/src/lib/editor/models/client.model.ts

@@ -1,4 +1,4 @@
-import { editContentlet } from '../sdk-editor';
+import { editContentlet, reorderMenu } from '../sdk-editor';
 declare global {
     interface Window {
         dotUVE: DotUVE;
@@ -7,6 +7,7 @@ declare global {
 
 export const INITIAL_DOT_UVE: DotUVE = {
     editContentlet,
+    reorderMenu,
     lastScrollYPosition: 0
 };
 
@@ -105,5 +106,6 @@ export function postMessageToEditor<T = unknown>(message: PostMessageProps<T>) {
 
 export interface DotUVE {
     editContentlet: typeof editContentlet;
+    reorderMenu: typeof reorderMenu;
     lastScrollYPosition: number;
 }

core-web/libs/sdk/client/src/lib/editor/models/editor.model.ts

@@ -51,3 +51,18 @@ export interface DotCMSPageEditorConfig {
      */
     onReload?: () => void;
 }
+
+/**
+ * Configuration for reordering a menu.
+ */
+export interface ReorderMenuConfig {
+    /**
+     * The starting level of the menu to be reordered.
+     */
+    startLevel: number;
+
+    /**
+     * The depth of the menu levels to be reordered.
+     */
+    depth: number;
+}

core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts

@@ -27,6 +27,7 @@ jest.mock('./models/client.model', () => {
         },
         INITIAL_DOT_UVE: {
             editContentlet: jest.fn(),
+            reorderMenu: jest.fn(),
             lastScrollYPosition: 0
         }
     };
@@ -102,6 +103,7 @@ describe('DotCMSPageEditor', () => {
             expect(scrollHandler).toHaveBeenCalled();
             expect(window.dotUVE).toEqual({
                 editContentlet: expect.any(Function),
+                reorderMenu: expect.any(Function),
                 lastScrollYPosition: 0
             });
         });

core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts

@@ -6,7 +6,7 @@ import {
     subscriptions
 } from './listeners/listeners';
 import { CLIENT_ACTIONS, INITIAL_DOT_UVE, postMessageToEditor } from './models/client.model';
-import { DotCMSPageEditorConfig } from './models/editor.model';
+import { DotCMSPageEditorConfig, ReorderMenuConfig } from './models/editor.model';
 
 import { Contentlet } from '../client/content/shared/types';
 
@@ -43,6 +43,25 @@ export function editContentlet<T>(contentlet: Contentlet<T>) {
     });
 }
 
+/**
+ * Reorders the menu based on the provided configuration.
+ *
+ * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
+ * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
+ * @param {number} [config.depth=2] - The depth of the menu to reorder.
+ *
+ * This function constructs a URL for the reorder menu page with the specified
+ * start level and depth, and sends a message to the editor to perform the reorder action.
+ */
+export function reorderMenu(config?: ReorderMenuConfig): void {
+    const { startLevel = 1, depth = 2 } = config || {};
+
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.REORDER_MENU,
+        payload: { startLevel, depth }
+    });
+}
+
 /**
  * Checks if the code is running inside an editor.
  *

dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm

@@ -172,29 +172,18 @@
     #if ($EDIT_MODE && $PUBLISH_HTMLPAGE_PERMISSION)
         #set($menuLevel = $VTLSERVLET_URI.split('/').size() - 1)
 
-        <a href="#" onclick="openReorderDialog(event)" class="btn btn-primary btn-xs normaltip" data-original-title="Reorder Menu">
+        <a href="#" onclick="window.dotUVE.reorderMenu({startLevel: $menuLevel, depth: 2})" class="btn btn-primary btn-xs normaltip" data-original-title="Reorder Menu">
             <i class="fa fa-arrow-up"></i>
             <i class="fa fa-arrow-down"></i>
         </a>
-        <script>
-            function openReorderDialog(event) {
-                event.preventDefault();
-                var reorderUrl = "${directorURL}&startLevel=${menuLevel}&depth=2&pagePath=${VTLSERVLET_URI}&hostId=${host.identifier}";
-                var customEvent = window.top.document.createEvent("CustomEvent");
-                customEvent.initCustomEvent("ng-event", false, false,  {
-                    name: "reorder-menu",
-                    data: reorderUrl
-                });
-                window.top.document.dispatchEvent(customEvent);
-            }
-        </script>
     #end
 #end
 
 #macro(sortNavigation)
     #if ($EDIT_MODE && $PUBLISH_HTMLPAGE_PERMISSION)
+      #set($menuLevel = $VTLSERVLET_URI.split('/').size() - 1)
       <button
-    onclick="openReorderDialog(event)"
+    onclick='window.dotUVE.reorderMenu({startLevel: $menuLevel, depth: 2})'
     style="
         background-color: #426BF0;
         border-radius: 3px;
@@ -223,27 +212,6 @@
             width: 36px;
         "></span>
 </button>
-<script>
-    function openReorderDialog(event) {
-        event.preventDefault();
-        var reorderUrl =
-            '${directorURL}&startLevel=1&depth=2&pagePath=${VTLSERVLET_URI}&hostId=${host.identifier}';
-
-        window.parent.postMessage(
-            {
-                action: 'reorder-menu',
-                payload: { reorderUrl }
-            },
-            '*'
-        );
-        var customEvent = window.top.document.createEvent('CustomEvent');
-        customEvent.initCustomEvent('ng-event', false, false, {
-            name: 'reorder-menu',
-            data: reorderUrl
-        });
-        window.top.document.dispatchEvent(customEvent);
-    }
-</script>
 
     #end
 #end

examples/nextjs/src/components/graphql-page.js

@@ -8,7 +8,7 @@ import CalendarEvent from "./content-types/calendarEvent";
 import Product from "./content-types/product";
 import ImageComponent from "./content-types/image";
 
-import Header from "./layout/header";
+import Header from "./layout/header/header";
 import Footer from "./layout/footer/footer";
 import Navigation from "./layout/navigation";
 import { usePathname, useRouter } from "next/navigation";