NSG_PORTAL_V2/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue

<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { getInputValue } from '@/utils/parseSQL';
import { isEmpty } from "lodash";

const _props = defineProps<{
  dataResult?: any[];
  dataQuery?: string;
  layout?: string;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 5,
  TEMPLATE: "Article",
  LAYOUT: "LAYOUT:vertical"
};

const LAYOUT_PARSE = computed(() => {
  const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
    const parseItem = _layout.split(":");
    return {
      [parseItem[0]]: parseItem[1],
    };
  });
  return Object.assign({}, ...parseLayout);
}); 

const _dataResult = computed(() => {
  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
  const result = getInputValue(_props.dataResult, 'ARRAY');
  result && result.length > 0 && _components.map((_ : any, index : any) => {
    _components[index] = result[index] || null;
  })
  return _components;
});
</script>

<template>
  <div>
    <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
    :style="`grid-template-columns: repeat(${LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`">
      <div v-for="(component, index) in _dataResult" :key="index">
        <template v-if="!isEmpty(component)">
          <DynamicComponent
            :settings="{
              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
              layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
              dataResult: { ...component },
            }"
          />
        </template>
      </div>
    </div>
  </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>