@designcrowd/library.brand-page 5.17.0-upgrade-2 → 5.17.0

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.js

@@ -1,21 +1,47 @@
 import { defineComponent, computed, ref } from 'vue';
 import {} from '../../models';
 import { getPageTitleError } from '../../utils';
-import { ALIGN_CENTERED, ALIGN_JUSTIFIED, ALIGN_LEFT_ALIGNED, } from '../../../../brand-page';
-import { PAGE_SECTION_STYLE_OPTIONS, } from '../../../../brand-page-maker/models/page-section-style.model';
+import { ALIGN_CENTERED, ALIGN_JUSTIFIED, ALIGN_LEFT_ALIGNED, } from '@brand-page';
+import { PAGE_SECTION_STYLE_OPTIONS, } from '@brand-page-maker/models/page-section-style.model';
 import { useUiContentSettingsStore } from '../../../content-settings/store';
 import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, } from '../../../../brand-page-maker/stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../../content-settings/constants';
-import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../../../brand-page-maker/composables/useEventTracker';
-import { pageSettingTr, styleSettingsTr, } from '../../../../composables/useTranslate';
+import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
+import { pageSettingTr, styleSettingsTr } from '@src/composables/useTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
+import { navigateToPageByPageId } from '@brand-page-maker/routing';
 const PAGE_SETTINGS_PAGES = {
     page: 'page',
     logo: 'logo',
 };
+const isRouteNestedInOrders = (orders, routeId) => {
+    for (const order of orders) {
+        if (order.subRoutes.some((subRoute) => subRoute.routeId === routeId)) {
+            return true;
+        }
+        if (order.subRoutes.length > 0) {
+            if (isRouteNestedInOrders(order.subRoutes, routeId)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const findOrderByRouteId = (orders, routeId) => {
+    for (const order of orders) {
+        if (order.routeId === routeId) {
+            return order;
+        }
+        const found = findOrderByRouteId(order.subRoutes, routeId);
+        if (found) {
+            return found;
+        }
+    }
+    return undefined;
+};
 export default defineComponent({
     setup() {
         const brandPageMakerStore = useBrandPageMakerStore();
@@ -33,7 +59,7 @@ export default defineComponent({
         const pageFields = computed({
             get() {
                 return pageSettingsStore.pages.map((page) => {
-                    const pageTitleError = getPageTitleError(page.title);
+                    const pageTitleError = getPageTitleError(page.title, false);
                     return {
                         page,
                         pageTitle: page.title,
@@ -46,17 +72,62 @@ export default defineComponent({
             },
         });
         const isDraggingPage = ref(false);
+        const syncPagesWithOrders = () => {
+            const pageIdOrder = [];
+            const collectPageIds = (orders) => {
+                for (const order of orders) {
+                    const route = pageNavigationStore.routes.find((r) => r.id === order.routeId);
+                    if (route?.pageId) {
+                        pageIdOrder.push(route.pageId);
+                    }
+                    if (order.subRoutes && order.subRoutes.length > 0) {
+                        collectPageIds(order.subRoutes);
+                    }
+                }
+            };
+            collectPageIds(pageNavigationStore.orders);
+            if (!pageIdOrder.length) {
+                return;
+            }
+            const pageMap = new Map();
+            for (const page of pageSettingsStore.pages) {
+                pageMap.set(page.id, page);
+            }
+            const orderedPages = [];
+            for (const pageId of pageIdOrder) {
+                const page = pageMap.get(pageId);
+                if (page) {
+                    orderedPages.push(page);
+                    pageMap.delete(pageId);
+                }
+            }
+            for (const remainingPage of pageMap.values()) {
+                orderedPages.push(remainingPage);
+            }
+            pageSettingsStore.setPages({ pages: orderedPages });
+        };
         const onDraggingStart = () => {
             isDraggingPage.value = true;
         };
-        const onDraggingEnd = (ev) => {
-            if (ev && ev.oldIndex !== ev.newIndex) {
-                eventTracker.sendWebsiteManageReorderPageEvent(pageSettingsStore.pages[ev.newIndex].title);
-                // After drag, the moved page is now at newIndex
-                const pageId = pageSettingsStore.pages[ev.newIndex].id;
-                const navRouteId = pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
-                if (navRouteId) {
-                    pageNavigationStore.updateOrder(navRouteId, ev.newIndex);
+        const onDraggingEnd = (ev, routeId, previousParentRouteId) => {
+            const targetRouteId = routeId || ev?.item?.dataset?.routeId;
+            if (targetRouteId) {
+                const route = pageNavigationStore.routes.find((r) => r.id === targetRouteId);
+                if (route) {
+                    const page = pageSettingsStore.pages.find((p) => p.id === route.pageId);
+                    if (page) {
+                        eventTracker.sendWebsiteManageReorderPageEvent(page.title);
+                    }
+                }
+            }
+            syncPagesWithOrders();
+            // Recalc the moved route's slug to ensure uniqueness at its new depth
+            if (routeId) {
+                pageNavigationStore.recalculateSlugForRoute(routeId, previousParentRouteId);
+                // Navigate to the new route if current page is the active page
+                const route = pageNavigationStore.routes.find((r) => r.id === routeId);
+                if (route && route.pageId === pageNavigationStore.activePageId) {
+                    navigateToPageByPageId(route.pageId);
                 }
             }
             isDraggingPage.value = false;
@@ -64,7 +135,6 @@ export default defineComponent({
         return {
             pageFields,
             items: computed(() => contentSettingsStore.items),
-            currentPageIndex: computed(() => pageSettingsStore.currentPageIndex),
             sectionCollapsedStates: computed(() => pageSettingsStore.sectionCollapsedStates),
             sections: computed(() => pageSettingsStore.sections),
             features: computed(() => userStore.features),
@@ -98,7 +168,7 @@ export default defineComponent({
     data() {
         return {
             isDeleteModalVisible: false,
-            deleteModalPageIndex: undefined,
+            deleteModalPageId: undefined,
             deleteModalPageTitle: undefined,
             currentPageNo: PAGE_SETTINGS_PAGES.page,
             PAGE_SETTINGS_PAGES,
@@ -174,14 +244,37 @@ export default defineComponent({
         }
     },
     methods: {
+        isRootPage(index) {
+            const page = this.pageSettingsStore.pages[index];
+            if (!page) {
+                return true;
+            }
+            const routeId = this.pageNavigationStore.routes.find((route) => route.pageId === page.id)?.id;
+            if (!routeId) {
+                return true;
+            }
+            return !isRouteNestedInOrders(this.pageNavigationStore.orders, routeId);
+        },
+        async onAddSubPageSelected(pageId) {
+            const parentPage = this.pageSettingsStore.pages.find((p) => p.id === pageId);
+            await this.pageSettingsStore.setNewPageModalVisibilityAsync({
+                isNewPageModalVisible: true,
+                parentPageId: parentPage.id,
+            });
+        },
         async onAddNewPageSelected() {
             await this.pageSettingsStore.setNewPageModalVisibilityAsync({
                 isNewPageModalVisible: true,
             });
         },
-        onChangePageVisibility(index) {
-            const currentPageVisibility = Boolean(this.pageSettingsStore.pages[index]?.isHidden);
-            const pageId = this.pageSettingsStore.pages[index]?.id;
+        onChangePageVisibility(pageId) {
+            const page = this.pageSettingsStore.pages.find((p) => p.id === pageId);
+            const currentPageVisibility = Boolean(page?.isHidden);
+            const visiblePageCount = this.pageSettingsStore.pages.filter((page) => !page.isHidden).length;
+            // Do not allow hiding the last visible page
+            if (!currentPageVisibility && visiblePageCount <= 1) {
+                return;
+            }
             // TODO(jyao): Remove this later since we won't be using page id anymore!
             if (pageId) {
                 const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
@@ -191,26 +284,38 @@ export default defineComponent({
             }
             this.pageSettingsStore.setPageVisibility({
                 isHidden: !currentPageVisibility,
-                index: index,
+                pageId,
             });
         },
-        onDeletePageSelected(index) {
-            this.deleteModalPageIndex = index;
-            this.deleteModalPageTitle = this.pageSettingsStore.pages[index].title;
-            this.isDeleteModalVisible = true;
-        },
-        onConfirmDeletePage(pageIndex) {
-            this.pageFields.splice(pageIndex, 1);
-            const pageId = this.pageSettingsStore.pages[pageIndex]?.id;
-            // TODO(jyao): Remove this later since we won't be using page id anymore!
-            if (pageId) {
-                const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
+        onDeletePageSelected(pageId) {
+            const page = this.pageSettingsStore.pages.find((p) => p.id === pageId);
+            if (page) {
+                const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === page.id)?.id;
                 if (navRouteId) {
-                    this.pageNavigationStore.removeNavRoute(navRouteId);
+                    const order = findOrderByRouteId(this.pageNavigationStore.orders, navRouteId);
+                    if (order && order.subRoutes && order.subRoutes.length > 0) {
+                        // Do not allow deleting a page that has subpages.
+                        return;
+                    }
                 }
             }
+            this.deleteModalPageId = pageId;
+            this.deleteModalPageTitle = page.title;
+            this.isDeleteModalVisible = true;
+        },
+        onConfirmDeletePage(pageId) {
+            const pageIndex = this.pageFields.findIndex((pf) => pf.page.id === pageId);
+            if (pageIndex !== -1) {
+                this.pageFields.splice(pageIndex, 1);
+            }
+            const navRouteId = this.pageNavigationStore.routes.find((route) => route.pageId === pageId)?.id;
+            let isRouteNested = false;
+            if (navRouteId) {
+                isRouteNested = this.pageNavigationStore.isRouteASubpage(navRouteId);
+                this.pageNavigationStore.removeNavRoute(navRouteId);
+            }
             this.updatePages(this.pageFields);
-            this.eventTracker.sendWebsiteManageRemovePageEvent(this.deleteModalPageTitle);
+            this.eventTracker.sendWebsiteManageRemovePageEvent(this.deleteModalPageTitle, isRouteNested);
             this.isDeleteModalVisible = false;
         },
         onCancelDeletePage() {
@@ -230,17 +335,11 @@ export default defineComponent({
             this.currentPageNo = PAGE_SETTINGS_PAGES.page;
             this.pageSettingsStore.setSelectedSectionName({ sectionName });
         },
-        onPageTitleInput(index, title) {
-            const page = this.pageSettingsStore.pages[index];
+        onPageTitleInput(pageId, title) {
             this.pageSettingsStore.setPageTitle({
-                pageIndex: index,
+                pageId,
                 pageTitle: title,
             });
-            if (page) {
-                // TODO(jyao): Remove this later since we won't be using page id anymore!
-                const routeId = this.pageNavigationStore.routes.find((route) => route.pageId === page.id)?.id;
-                this.pageNavigationStore.onDisplayNameChange(routeId, title);
-            }
         },
         onBackButtonClick() {
             this.contentSettingsStore.popMode();