boursecu_user/src/views/base/home/layouts/HomeLayoutRenderer.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'
import HomeSkeleton from '../components/HomeSkeleton.vue'
import { getHomeLayoutConfig } from './registry'
import { HOME_SECTION_COMPONENTS } from './sections'
import type { HomeLayoutConfig, HomeSectionId } from './types'

const props = defineProps<{
  layoutConfig?: HomeLayoutConfig
}>()

const userStore = useUserStore()
const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())

const outerSections = computed(() =>
  (layoutConfig.value.outerSections ?? []).filter((section) => section.visible !== false)
)

const innerSections = computed(() =>
  layoutConfig.value.sections.filter((section) => section.visible !== false)
)

function resolveSectionComponent(sectionId: HomeSectionId) {
  return HOME_SECTION_COMPONENTS[sectionId]
}
</script>

<template>
  <div v-if="userStore.userInfo && !loading">
    <component
      :is="resolveSectionComponent(section.id)"
      v-for="section in outerSections"
      :key="`outer-${section.id}`"
    />

    <div v-if="layoutConfig.wrapperClass" :class="layoutConfig.wrapperClass">
      <component
        :is="resolveSectionComponent(section.id)"
        v-for="section in innerSections"
        :key="section.id"
      />
    </div>

    <template v-else>
      <component
        :is="resolveSectionComponent(section.id)"
        v-for="section in innerSections"
        :key="section.id"
      />
    </template>
  </div>

  <HomeSkeleton v-if="loading" class="w-full" />
</template>