NSG_PORTAL_V2/components/dynamic-page/page-section/RecusiveSection.vue

<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";

const props = defineProps<{
  type: string; 
  id: any;
}>();

import { useDynamicPageStore } from '~/stores/dynamic-page';
const store = reactive({
  dynamicPage: useDynamicPageStore(),
});

const { currentPage } = storeToRefs(useDynamicPageStore());

const defineTypeRecusive = {
  COMPONENT: "component",
  SECTION: "section",
};

const findDataPosition = computed(() => {
  let result = {};
  switch (props.type) {
    case defineTypeRecusive.COMPONENT:
      result = currentPage.value.components && currentPage.value.components.find((component: any) => component.id === props.id);
      break;
    case defineTypeRecusive.SECTION:
      result = currentPage.value.sections && currentPage.value.sections.find((section: any) => section.id === props.id);
      break;
    default:
      result = {};
      break;
  }
  return result;
});
</script>

<template>
  <div>
    <template v-if="props.type === defineTypeRecusive.COMPONENT">
      <DynamicComponent 
        v-if="findDataPosition && findDataPosition?.id" 
        :settings="findDataPosition.settings" 
        :component="findDataPosition"
        :content="findDataPosition.content"
      />
    </template>
    <template v-else-if="props.type === defineTypeRecusive.SECTION">
      <DynamicSection 
        v-if="findDataPosition && findDataPosition?.id" 
        :settings="findDataPosition.settings" 
        :content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null" 
        :section="findDataPosition"
       />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.collection-container {
  &.vertical {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  &.horizontal {
    grid-template-rows: auto;
    grid-auto-flow: column;
  }
}
</style>