NSG_PORTAL_V2/components/dynamic-page/page-component/templates/collections/layouts/Article.vue

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

const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);

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

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

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

const _dataResult = computed(() => {
  let _components = Array(Number(layoutParse.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;
});

async function dropData(data: any) {
  if (data) {
    const { dataResult, dataType } = data;
    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);

    emit("dropData", {
      dataResult: result,
      dataType,
      dataQuery: getDataQuery,
    });
  }
}

const selectComponent = () => {
  emit("selectComponent");
};
</script>

<template>
  <div>
    <div
      class="collection-container p-2 border-custom"
      :class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
      @click="selectComponent"
      :style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
    >
      <DynamicComponent
        class="h-full"
        v-for="(component, index) in _dataResult"
        :key="index"
        :settings="{
          template: SETTING_OPTIONS.TEMPLATE,
          layout: SETTING_OPTIONS.LAYOUT,
          label,
          dataResult: !isEmpty(component) ? { ...component } : null,
        }"
        @drop-data="dropData"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.collection-container {
  display: grid;
  gap: 10px;

  &.border-custom {
    border-color: #e5e5e5 !important;
  }
  &.borderLeft {
    border-left: 1px solid;
    padding-left: 10px;
  }
  &.borderRight {
    border-right: 1px solid;
    padding-right: 10px;
  }
  &.borderTop {
    border-top: 1px solid;
    padding-top: 10px;
  }
  &.borderBottom {
    border-bottom: 1px solid;
    padding-bottom: 10px;
  }
  &.vertical {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  &.horizontal {
    grid-template-rows: auto;
    grid-auto-flow: column;
  }
  .empty {
    min-height: 100px;
    border-radius: 6px;
    background: #409eff;
  }
  &.noData {
    border-radius: 6px;
  }
}
</style>