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 { breakpoint } from "~/definitions";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize()
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);

// const store = reactive({
//   section: usePageSectionStore(),
// });
// const { currentScreenMode } = storeToRefs(useCmsPageStore());

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

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

const LAYOUT_PARSE = 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(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;
});

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");
};

const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
  const updatedDesignObject = { ...designObject };

  const dataDefault = {
    fontSizeTitle: "defaultFontSizeTitle",
    fontWeightTitle: "defaultFontWeightTitle",
  };

  for (let i = 0; i < listKeyActive.length; i++) {
    const keyActive = listKeyActive[i];
    const key = listKey[i];
    const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];

    if (Array.isArray(designObject[keyActive])) {
      const isActive = designObject[keyActive].includes(index + 1);
      updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
    } else {
      delete updatedDesignObject[key];
    }
  }

  return updatedDesignObject;
};

const mapActivesToItems = (index: number) => {
  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
  const output = {};

  designObject.layoutGrid?.forEach((item: any) => {
    item.actives.forEach((active: any) => {
      output[active] = { ...item };
    });
  });

  return output[index + 1] || {};
};
</script>

<template>
  <div
    class="collection-container border-custom"
    :class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
    @click="selectComponent"
    :style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
  >
    <DynamicComponent
      v-for="(component, index) in _dataResult"
      :key="index"
      :style="[
        mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
        mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
        mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
      ]"
      :settings="{
        template: SETTING_OPTIONS.TEMPLATE,
        layout: SETTING_OPTIONS.LAYOUT,
        label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
        dataResult: !isEmpty(component) ? { ...component } : null,
      }"
      @drop-data="dropData"
    />
  </div>
</template>

<style lang="scss" scoped>
.collection-container {
  display: grid;
  &.border-custom {
    border-color: #e5e5e5 !important;
  }
  &.borderLeft {
    border-left: 1px solid;
  }
  &.borderRight {
    border-right: 1px solid;
  }
  &.borderTop {
    border-top: 1px solid;
  }
  &.borderBottom {
    border-bottom: 1px solid;
  }
  &.vertical {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  &.horizontal {
    grid-template-rows: auto;
    grid-auto-flow: column;
  }

  &.noData {
    border-radius: 6px;
  }
}
</style>