thainv: ghép navigation

2024-06-17 11:48:00 +07:00
parent c2b9208746
commit 3c75c89a8b
30 changed files with 856 additions and 108 deletions
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+const { currentPage } = storeToRefs(useDynamicPageStore());
+const props = defineProps<{
+  type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+}>();
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+//   component: usePageComponentStore(),
+// });
+
+// const { currentPage } = storeToRefs(useCmsPageStore());
+
+const defineTypeRecusive = {
+  TOP_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'],
+  BOTTOM_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'],
+};
+
+const findDataPosition = computed(() => {
+  let result = {};
+  switch (props.type) {
+    case defineTypeRecusive.TOP_NAVIGATION:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+        return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
+      });
+      break;
+    case defineTypeRecusive.BOTTOM_NAVIGATION:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
+        return component.settings && component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
+      });
+      break;
+    default:
+      result = {};
+      break;
+  }
+  console.log(result)
+  return result;
+});
+
+// const selectComponent = (data: any) => {
+//   store.page.selectComponent(data)
+// }
+console.log(findDataPosition, 'findDataPosition')
+</script>
+
+<template>
+  <div>
+      <DynamicComponent 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition?.settings" 
+        :component="findDataPosition"
+        :content="findDataPosition?.content"
+      />
+      <div v-else class="text-center">
+        <span>Hãy tạo thành phần "Thanh điều hướng ở đầu trang" để hiển thị thành điều hướng tại đây</span>
+      </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>