NSG_PORTAL_V2/components/dynamic-page/page-component/AssignComponent.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?: any; // [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<any>(() => {
  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>