NSG_PORTAL_V2/components/dynamic-page/page-section/layouts/none/Default.vue

<script setup lang="ts">
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { getInputValue } from "@/utils/parseSQL";
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
import type { PageSection } from "@/server/models/dynamic-page/index";

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

const props = defineProps<{
  layout?: string;
  content?: any;
  settings: any;
  section: PageSection;
}>();

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

const designObject = computed(() => {
  // không truyền lable là chữ lên sẽ lỗi
  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});

const SETTING_OPTIONS = computed(() => {
  let _setting_options = {};
  switch (props.layout) {
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]:
      _setting_options = {
        MAX_ELEMENT: 1,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]:
      _setting_options = {
        MAX_ELEMENT: 5,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]:
      _setting_options = {
        MAX_ELEMENT: 6,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]:
      _setting_options = {
        MAX_ELEMENT: 7,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]:
      _setting_options = {
        MAX_ELEMENT: 8,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]:
      _setting_options = {
        MAX_ELEMENT: 9,
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]:
      _setting_options = {
        MAX_ELEMENT: 10,
      };
      break;
    default:
      _setting_options = {
        MAX_ELEMENT: 1,
      };
      break;
  }
  return _setting_options;
});

const CLASS_FOR_SECTION = computed(() => {
  let _classForSection = {};
  switch (props.layout) {
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
      _classForSection = {
        section_layout: "section_layout two_col_layout",
      };
      break;

    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
        0: "col-span-2",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
        1: "col-span-2",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
      _classForSection = {
        section_layout: "section_layout six_col_layout",
        1: "col-span-5",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
      _classForSection = {
        section_layout: "section_layout twelve_col_layout",
        0: "col-span-5",
        1: "col-span-3",
        2: "col-span-2",
        3: "col-span-2",
      };
      break;
      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
      _classForSection = {
        section_layout: "section_layout twelve_col_layout",
        0: "col-span-5",
        1: "col-span-2",
        2: "col-span-2",
        3: "col-span-3",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
      _classForSection = {
        section_layout: "section_layout twelve_col_layout",
        0: "col-span-2",
        1: "col-span-5",
        2: "col-span-3",
        3: "col-span-2",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
      _classForSection = {
        section_layout: "section_layout five_col_layout",
        1: "col-span-4",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
      _classForSection = {
        section_layout: "section_layout four_col_layout",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
      _classForSection = {
        section_layout: "section_layout four_col_layout",
        1: "col-span-2",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
      _classForSection = {
        section_layout: "section_layout five_col_layout",
        1: "col-span-3",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
      _classForSection = {
        section_layout: "section_layout six_col_layout",
        1: "col-span-4",
      };
      break;
    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
      _classForSection = {
        section_layout: "section_layout six_col_layout",
        1: "col-span-2",
        2: "col-span-3",
      };
      break;
    default:
      _classForSection = {
        section_layout: "section_layout basic_column",
      };
      break;
  }
  return _classForSection;
});

const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
  const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
  const updatedDesignObject = { ...designObject };

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

  delete updatedDesignObject[key];
  return updatedDesignObject;
};

const LAYOUT_PARSE = computed(() => {
  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});

const mapActivesToItems = (index: number) => {
  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
    return LAYOUT_PARSE.value.listCss[index] || {};
  }
  return {};
};
</script>

<template>
  <div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
    <div
      class="section_child"
      v-for="(position, index) in props.content || Array(SETTING_OPTIONS?.MAX_ELEMENT).fill({})"
      :key="index"
      :class="['border-custom', CLASS_FOR_SECTION[index]]"
      :style="mapActivesToItems(index)['div.section_child']"
      @dragover.prevent
      @drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
    >
      <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border-pri {
  &.section_layout {
    gap: 5px;
  }
}
.section_layout {
  display: grid;
  position: relative;

  .section_child {
    z-index: 1;
  }
  .attributeBackground {
    position: absolute;
    height: 100%;
    z-index: 0;
    display: none;
    left: -50vw;
    width: 150vw;
  }

  &.smartphone_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  &.basic_column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  &.two_col_layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  &.three_col_layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  &.four_col_layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  &.five_col_layout {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  &.six_col_layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  &.seven_col_layout {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  &.eight_col_layout {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  &.nine_col_layout {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  &.ten_col_layout {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  &.eleven_col_layout {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  &.twelve_col_layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-span-5 {
    grid-column: span 5 / span 5;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-7 {
    grid-column: span 7 / span 7;
  }
  .col-span-8 {
    grid-column: span 8 / span 8;
  }
  .col-span-9 {
    grid-column: span 9 / span 9;
  }
  .col-span-10 {
    grid-column: span 10 / span 10;
  }
  .col-span-11 {
    grid-column: span 11 / span 11;
  }
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .border-custom {
    border-color: #e5e5e5 !important;
  }
}
</style>