minhnt-dev: navigation

components/dynamic-page/page-component/AssignComponent.vue

@@ -27,6 +27,7 @@ const findDataPosition = computed(() => {
       result = currentPage.value.components && currentPage.value.components.find((component: any) => {
         return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
       });
+      console.log(result)
       break;
     case defineTypeRecusive.BOTTOM_NAVIGATION:
       result = currentPage.value.components && currentPage.value.components.find((component: any) => {
@@ -37,13 +38,9 @@ const findDataPosition = computed(() => {
       result = {};
       break;
   }
-  console.log(result)
   return result;
 });
 
-// const selectComponent = (data: any) => {
-//   store.page.selectComponent(data)
-// }
 console.log(findDataPosition, 'findDataPosition')
 </script>
 

components/dynamic-page/page-component/templates/index.ts

@@ -3,7 +3,6 @@
 export { default as BasicCategories } from './categories/BasicCategories.vue'
 export { default as CollectionPaging } from './pageCategories/collection_page.vue'
 
-
 export { default as Dynamic_Other } from './other/index.vue'
 export { default as Dynamic_Section } from './sections/index.vue';
 export { default as Dynamic_Advertising } from './advertising/index.vue'

components/dynamic-page/page-component/templates/index.vue

@@ -13,7 +13,7 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplates.SECTION]: Dynamic_Section,
   [enumPageComponentTemplates.OTHER]: Dynamic_Other,
   [enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
-  [enumPageComponentTemplates.NONE]: Dynamic_Navigation,
+  [enumPageComponentTemplates.NAVIGATION]: Dynamic_Navigation,
 };
 // console.log(_props.settings.template, 'template')
 const getCurrentComponent = computed(() => `${_props.settings.template}`);

components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue

@@ -1,44 +1,27 @@
 <script lang="ts" setup>
-// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
+import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
-// import RecusiveSection from "@/components/cms/page-section/RecusiveSection.vue";
+import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
-// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
+import { enumPageComponentStaticChild, enumPageComponentLayouts } from "@/definitions/enum";
 
-// const props = defineProps<{
+const props = defineProps<{
-//     records?: any[]
+    records?: any[]
-//     component: any;
+    component: any;
-// }>();
+}>();
 
-// const store = reactive({
+const globalState = ref({})
-//   page: useCmsPageStore(),
+const setGlobalState = (id: any) => {
-//   section: usePageSectionStore(),
+    globalState.value[id] = !globalState.value[id];
-//   component: usePageComponentStore(),
+}
-// });
-
-// const globalState = ref({})
-// const setGlobalState = (id: any) => {
-//     globalState.value[id] = !globalState.value[id];
-// }
-
-// const selectNavigationComponent = () => {
-//   store.page.selectComponentNavigation(props.component);
-// }
-
-// const dropSection = (event: any, child: any) => {
-//   if (event.dataTransfer.getData("section")) {
-//     const section = JSON.parse(event.dataTransfer.getData("section"));
-//     store.component.updateNavigationItemInfor(props.component, child, { data: section.id });
-//     store.section.updatePublishedSectionInGeneralPage(section.id, 9999999999);
-//   }
-// };
 </script>
 
 <template>
-    ábsabda
+    <div class="navigation-container flex gap-4 justify-center items-center">
-    <!-- <div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
         <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
             <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                 <div class="navigation-submenu">
-                    <div class="" @click="selectNavigationComponent">{{ record?.title }}</div>
+                    <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
+                        <div class="">{{ record?.title }}</div>
+                    </nuxt-link>
                     <div class="navigation-item submenu-container dropdown-container">
                         <RecusiveNavItem :records="record.childs" />
                     </div>
@@ -46,37 +29,32 @@
             </template>
             <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                 <div class="navigation-submenu">
-                    <div class="position-relative ps-3">
+                    <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
-                        <span class="position-absolute " style="left: -10px; top: -7px" @click="() => setGlobalState(record.id)">
+                        <div class="">{{ record?.title }}</div>
-                            <i v-if="!globalState[record.id]" class="ri-eye-2-line fs-3"></i>
+                    </nuxt-link>
-                            <i v-else class="ri-eye-close-line fs-3"></i>
+                    <div class="full-layout dropdown-container">
-                        </span>
-                        <span @click="selectNavigationComponent">{{ record?.title }}</span>
-                    </div>
-                    <div class="full-layout dropdown-container" :class="[!globalState[record.id] && 'show-menu']">
                         <template v-if="record.data">
                             <div class="p-2">
                                 <RecusiveSection type="section" :id="record.data" />
                             </div>
                         </template>
-                        <template v-else>
-                            <el-empty description="Kéo Section vào đây" @dragover.prevent @drop.stop.prevent="dropSection($event, record)" />
-                        </template>
                     </div>
                 </div>
             </template>
             <template v-else>
-                <div class="navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
+                <nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
+                    <div class="navigation-item">{{ record?.title }}</div>
+                </nuxt-link>
             </template>
         </div>
-    </div> -->
+    </div>
 </template>
 
 <style lang="scss" scoped>
     .navigation-branch {
         .navigation-submenu {
             position: relative;
-            padding: 15px 5px;
+            padding: 12px 5px;
             &:hover {
                 > .dropdown-container {
                     opacity: 1;

components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-// import { nanoid } from "nanoid"
-// import RecusiveTopChild from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue";
-// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
-
-// const props = defineProps<{
-//     records?: any[]
-//     currentComponent?: any
-// }>()
-
-// const store = reactive({
-//   page: useCmsPageStore(),
-//   section: usePageSectionStore(),
-//   component: usePageComponentStore(),
-// });
-
-// const showChildItem = ref<boolean>(false)
-
-// const toggleStatusBar = (type: "section", id?: any) => {
-//   // if (type === "section") {
-//   //   store.section.setCurrentSection(id);
-//   // } else {
-//   //   store.section.setCurrentSection(null);
-//   // }
-//   // store.section.toggleStatusSectionBar(true);
-// };
-
-// const removeStaticRecord = (currentChild: any) => {
-//   store.component.removeChildtNavigation(props.currentComponent, currentChild);
-// };
-
-// const addChildRecord = (currentChild: any) => {
-//   const newChildItem = {
-//       id: nanoid(10),
-//       title: 'Mới mới',
-//       slug: '',
-//       childs: [],
-//       parentId: currentChild.id,
-//       data: null,
-//       typeChild: enumPageComponentStaticChild.DEFAULT,
-//   }
-//   store.component.setChildForComponentNavigation(props.currentComponent, newChildItem);
-// }
-
-// const setNavigationItem = (currentChild: any) => {
-//   console.log(currentChild)
-//   store.component.setNavigationItem(currentChild);
-// }
-</script>
-
-<template>
-  ádasd
-    <!-- <div class="lists-record">
-        <div v-for="(record) in props.records" :key="record.id">
-            <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
-                <div class="record-item child">
-                    <div class="record-infor d-flex align-items-center gap-2">
-                        <span @click="() => showChildItem = !showChildItem" class="cursor-pointer">
-                          <i :class="[showChildItem ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line']"></i>
-                        </span>
-                        <h6>{{ record.title || '' }}</h6>
-                    </div>
-                    <div class="record-action">
-                        <span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
-                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
-                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
-                    </div>
-                </div>
-                <div class="ps-4 mt-2" :class="[showChildItem ? 'is-show-item' : 'is-hidden-item']">
-                    <RecusiveTopChild :records="record.childs" :currentComponent="props.currentComponent" />
-                </div>
-            </template>
-            <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
-                <div class="record-item child">
-                    <div class="record-infor d-flex align-items-center gap-2">
-                        <h6>{{ record.title || '' }}</h6>
-                    </div>
-                    <div class="record-action">
-                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
-                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
-                    </div>
-                </div>
-            </template>
-            <template v-else>
-                <div class="record-item">
-                    <div class="record-infor d-flex align-items-center gap-2">
-                        <h6>{{ record.title || '' }}</h6>
-                    </div>
-                    <div class="record-action">
-                        <span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
-                        <span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
-                        <span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
-                    </div>
-                </div>
-            </template>
-        </div>
-    </div> -->
-</template>
-
-<style lang="scss" scoped>
-.lists-record {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 14px;
-
-  .record-item {
-    padding: 3px 15px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    cursor: move;
-    position: relative;
-    z-index: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &.child {
-        padding: 3px 15px 3px 10px;
-    }
-    &:hover {
-      > .record-action {
-        opacity: 1;
-      }
-    }
-    > .record-action {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      cursor: pointer;
-      gap: 10px;
-      font-size: 18px;
-      opacity: 0;
-      transition: 0.3s;
-      color: #7e7e7e;
-
-      > span:hover {
-        color: #409eff;
-        transition: 0.3s all;
-      }
-    }
-    > .record-infor {
-        span i {
-            font-size: 18px;
-            cursor: point;
-        }
-      h6 {
-        font-size: 13px;
-        font-weight: 600;
-        margin-bottom: 0px;
-      }
-    }
-  }
-  .is-show-item {
-    height: auto;
-  }
-  .is-hidden-item {
-    height: 0px;
-    overflow: hidden;
-  }
-}
-</style>

components/dynamic-page/page-component/templates/navigations/layouts/Top.vue

@@ -1,86 +1,19 @@
 <script setup lang="ts">
-// import { isEmpty } from "lodash";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-// import { nanoid } from "nanoid"
+import { buildTree } from "@/utils/recusive";
-// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
+import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
-// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
-// import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/cms/page/parseSQL";
-// import { buildTree } from "@/utils/cms/page/recusive";
-// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
 
-// const emit = defineEmits(["selectComponent"]);
+const _props = defineProps<{
-
+  content?: any[];
-// const _props = defineProps<{
+  component?: any;
-//   content?: any[];
+}>();
-//   component?: any;
-// }>();
-
-// const store = reactive({
-//   page: useCmsPageStore(),
-//   section: usePageSectionStore(),
-//   component: usePageComponentStore(),
-// });
-
-// const SETTING_OPTIONS = {
-//   MAX_ELEMENT: 10,
-// };
-
-// const _dataResult = computed(() => {
-//   let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill({});
-//   const result = getInputValue(_props.content, "ARRAY");
-//   result &&
-//     result.length > 0 &&
-//     _components.map((_: any, index: any) => {
-//       _components[index] = result[index] || null;
-//     });
-//   return _components;
-// });
-
-// async function dropData(event: any, data: any) {
-//   if (event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`)) {
-//     const data = event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`);
-//     const { dataResult } = JSON.parse(data);
-//     const dataInsert = {
-//       id: nanoid(10),
-//       title: dataResult.title,
-//       slug: dataResult.code,
-//       childs: [],
-//       parentId: null,
-//       data: null,
-//       typeChild: enumPageComponentStaticChild.DEFAULT,
-//     };
-//     const getJSonContent = JSON.parse(_props.content)
-//     const checkDataResult = getInputValue(getJSonContent, "ARRAY");
-//     const result: any = _props.content ? [...checkDataResult, { ...dataInsert }] : [{ ...dataInsert }];
-//     store.component.setStaticData(result, _props.component.id);
-//   }
-// }
 </script>
 
 <template>
-  <!-- <nav>
+  <nav class="border-y-1px border-y-[#dddddd] border-solid">
-    <div class="d-flex gap-3 justify-content-center align-items-center">
+    <div class="">
-      <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
+      <RecusiveNavItem :records="_props.content && buildTree(_props.content)" :component="_props.component" />
-
-      <div class="empty" @dragover.prevent @drop.stop.prevent="dropData">
-        <i class="ri-add-fill"></i>
     </div>
-    </div>
+  </nav>
-  </nav> -->
-  ád
 </template>
 
-<style lang="scss" scoped>
-.empty {
-  width: 100px;
-  min-height: 20px;
-  border-radius: 4px;
-  background: #409eff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-size: 18px;
-  color: white;
-  margin: 5px 0px;
-}
-</style>

utils/recusive.ts

@@ -14,7 +14,7 @@ export function buildTree(data: any) {
             }
         });
 
-        return _array.filter(item => !item.parentId);
+        return _array.filter((item : any) => !item.parentId);
     } else {
         return []
     }