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 "@/models/cms";

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

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

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_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 designObject = computed(() => {
  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});

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_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;
    default:
      _classForSection = {
        section_layout: "section_layout basic_column",
      };
      break;
  }
  return _classForSection;
});

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>
.section_layout {
  display: grid;
  gap: 5px; 
  &.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));
  }
  .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;
  }
  .border-custom {
    border-color: #e5e5e5 !important;
  }
}
</style>