MoreStrive
53 lines
2.0 KiB
Vue
53 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } 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 defineTypeRecusive = {
|
|
TOP_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]]['NAVIGATION_TOP_DEFAULT'],
|
|
BOTTOM_NAVIGATION: enumPageComponentLayouts[[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]]['NAVIGATION_BOTTOM_DEFAULT'],
|
|
};
|
|
|
|
const findDataPosition = computed(() => {
|
|
let result = {};
|
|
switch (props.type) {
|
|
case defineTypeRecusive.TOP_NAVIGATION:
|
|
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
|
|
return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
|
|
});
|
|
break;
|
|
case defineTypeRecusive.BOTTOM_NAVIGATION:
|
|
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
|
|
return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
|
|
});
|
|
break;
|
|
default:
|
|
result = {};
|
|
break;
|
|
}
|
|
return result;
|
|
});
|
|
</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>
|