63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
|
<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;
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|