thainv-dev

assets/styles/style.scss

@@ -171,4 +171,12 @@ div[layout="ARTICLE_PAGE"] {
 
 .container {
     max-width: 1385px;
+}
+
+.layout_container {
+
+    & > .section_layout {
+        @apply mt-12 first:mt-0;
+
+    }
 }

components/dynamic-page/page-component/AssignComponent.vue

@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage } = storeToRefs(useDynamicPageStore());
 const props = defineProps<{
-  type?: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+  type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
 const defineTypeRecusive = {

components/dynamic-page/page-component/templates/advertisings/advertisings/index.vue

@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/advertisings/index.vue

@@ -30,5 +30,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue

@@ -44,11 +44,11 @@ const drop = (e: any) => {
 </script>
 
 <template>
-  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
+  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
     <div class="article_miss">
       <template v-if="parseData">
         <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
-        <div class="article_miss_content">
+        <div class="article_miss_content" :style="LAYOUT_PARSE['content']">
           <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
             {{ parseData.title?.replace(/<[^>]+>/g, "") }}
           </h3>
@@ -57,7 +57,7 @@ const drop = (e: any) => {
       <div v-else class="empty-box"></div>
     </div>
 
-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"  style="display: none"></div>
   </article>
 </template>
 

components/dynamic-page/page-component/templates/articles/cards/index.vue

@@ -37,5 +37,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

components/dynamic-page/page-component/templates/articles/details/Image.vue

@@ -2,7 +2,7 @@
 import { isEmpty } from "@/utils/lodash";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
 }>();
 const SETTING_OPTIONS = {
   BREADCRUMB_MAX_ELEMENT: 3,

components/dynamic-page/page-component/templates/articles/details/index.vue

@@ -33,5 +33,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

components/dynamic-page/page-component/templates/articles/index.vue

@@ -32,5 +32,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

components/dynamic-page/page-component/templates/categories/categories/Default.vue

@@ -3,7 +3,7 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   label?: any;
 }>();

components/dynamic-page/page-component/templates/categories/categories/Vertical.vue

@@ -3,7 +3,7 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   label?: any;
 }>();

components/dynamic-page/page-component/templates/categories/categories/index.vue

@@ -31,5 +31,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/categories/index.vue

@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
   />

components/dynamic-page/page-component/templates/collections/articles/Audio.vue

@@ -5,7 +5,7 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
   label?: any;

components/dynamic-page/page-component/templates/collections/articles/Default.vue

@@ -5,7 +5,7 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
   label?: any;

components/dynamic-page/page-component/templates/collections/articles/index.vue

@@ -30,5 +30,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/collections/categories/index.ts

@@ -0,0 +1 @@
+export { default as Misses_Default } from './misses/Default.vue'

components/dynamic-page/page-component/templates/collections/categories/index.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Misses_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]}`]["MISSES_COLLECTION_DEFAULT"]]: Misses_Default,
+};
+
+const getCurrentComponent = computed(() => _props.settings.layout);
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+      return props;
+    }
+  };
+});
+</script>
+
+<template>
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue

@@ -0,0 +1,182 @@
+<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, groupBy } from "lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 6,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_MissHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  // console.log(_props.label);
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+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 mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+    <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
+      <DynamicComponent
+        class="abc"
+        :settings="{
+          template: SETTING_OPTIONS.TEMPLATE,
+          layout: SETTING_OPTIONS.LAYOUT,
+          label: { ...mapActivesToItems(Number(index)) },
+          dataResult: !isEmpty(component) ? { ...component } : null,
+        }"
+        :component="COMPONENT"
+        @drop-data="dropData"
+      />
+    </div>
+  </section>
+  <!-- <conllection
+    class="collection-container border-custom overflow-hidden"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :class="[index === 0 || index === 1 ? 'row-span-3' : index === 2 || index === 3 ? 'row-span-2' : 'row-span-1']"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: { ...mapActivesToItems(Number(index)) },
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+      @drop-data="dropData"
+    />
+  </conllection> -->
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display: none"></div>
+</template>
+
+<style lang="scss" scoped>
+.gallery {
+  column-count: 4;
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  gap: 16px;
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    &:nth-child(1),
+    &:nth-child(2) {
+      padding-top: 615px;
+    }
+    &:nth-child(3),
+    &:nth-child(5) {
+      padding-top: 358px;
+    }
+
+    &:nth-child(4),
+    &:nth-child(6) {
+      margin-top: 16px;
+      padding-top: 241px;
+    }
+
+    & > .abc {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 30px;
+      // margin: 10px 0;
+    }
+  }
+  .row-span-3 {
+    // grid-row: span 3 / span 3;
+    // height: 585px;
+
+    // margin: 10px 0;
+    // &:nth-child(1) {
+    //   background-color: red;
+    // }
+    // &:nth-child(2) {
+    //   background-color: yellow;
+    // }
+  }
+  .row-span-2 {
+    // margin: 10px 0;
+    // grid-row: span 2 / span 2;
+    // height: 328px;
+    // background-color: aqua;
+    // .basic-article {
+    // }
+  }
+  .row-span-1 {
+    // grid-row: span 1 / span 1;
+    // height: 211px;
+    // background-color: green;
+
+    // .basic-article {
+    // }
+  }
+}
+
+.image img {
+  height: auto;
+  width: 100%;
+}
+.collection-container {
+  // display: grid;
+  // grid-template-columns: repeat(4, 1fr);
+  // grid-template-rows: repeat(3, 1fr);
+  gap: 20px;
+  column-count: 4;
+}
+</style>

components/dynamic-page/page-component/templates/collections/index.ts

@@ -1 +1,2 @@
 export { default as Article_Collection } from './articles/index.vue'
+export { default as Category_Collection } from './categories/index.vue'

components/dynamic-page/page-component/templates/collections/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Collection } from "./index";
+import { Article_Collection, Category_Collection } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -9,6 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]]: Article_Collection,
+  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]]: Category_Collection,
 };
 
 const getCurrentComponent = computed(() => _props.settings.template);
@@ -30,5 +31,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/index.vue

@@ -36,5 +36,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>

components/dynamic-page/page-component/templates/navigations/bottoms/Default.vue

@@ -6,7 +6,7 @@ import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/
 import { buildTree } from "@/utils/recusive";
 
 const _props = defineProps<{
-  content?: any[];
+  content?: any;
   component?: any;
 }>();
 </script>

components/dynamic-page/page-component/templates/navigations/bottoms/index.vue

@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/navigations/directions/Default.vue

@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   component?: any;
 }>();

components/dynamic-page/page-component/templates/navigations/directions/index.vue

@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/navigations/index.vue

@@ -33,7 +33,8 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component 
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/navigations/tops/Default.vue

@@ -3,7 +3,7 @@ import { buildTree } from "@/utils/recusive";
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
 
 const _props = defineProps<{
-  content?: any[];
+  content?: any;
   component?: any;
 }>();
 

components/dynamic-page/page-component/templates/navigations/tops/index.vue

@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/others/index.vue

@@ -30,5 +30,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>

components/dynamic-page/page-component/templates/others/stocks/index.vue

@@ -29,6 +29,9 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
-</template>
-../stocks/index
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>

components/dynamic-page/page-component/templates/others/weathers/index.vue

@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
   />

components/dynamic-page/page-component/templates/sections/articles/Default.vue

@@ -5,12 +5,12 @@ import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
 const route = useRoute();
 
-const store = reactive({
-  component: usePageComponentStore(),
-});
+// const store = reactive({
+//   component: usePageComponentStore(),
+// });
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   component?: any;
   label?: any;
@@ -79,12 +79,12 @@ const loadPage = async (page: number) => {
   } else {
     newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
   }
-  const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
-  const data = getInputValue(res?.settings?.dataResult, "OBJECT");
-  if (Object.keys(data).length > 0) {
-    totals.value = data.Total;
-    listArticlePaging.value = data?.Data || [];
-  }
+  // const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
+  // const data = getInputValue(res?.settings?.dataResult, "OBJECT");
+  // if (Object.keys(data).length > 0) {
+  //   totals.value = data.Total;
+  //   listArticlePaging.value = data?.Data || [];
+  // }
 };
 
 const handleNextPrev = (type: "+" | "-") => {

components/dynamic-page/page-component/templates/sections/articles/index.vue

@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
   />

components/dynamic-page/page-component/templates/sections/index.vue

@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
     :is="definedDynamicComponent[getCurrentComponent]" 
     v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
   />

components/dynamic-page/page-section/layouts/index.vue

@@ -15,6 +15,7 @@ const definedDynamicSection: Record<string, any> = {
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
   [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]]: NONE_DEFAULT_LAYOUT,
@@ -65,6 +66,7 @@ const GET_PROPS = computed(() => {
 <template>
 
   <component
+    v-if="definedDynamicSection[getCurrentSection]"
     :is="definedDynamicSection[getCurrentSection]"
     v-bind="{
       ...GET_PROPS(),

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

@@ -23,6 +23,138 @@ const designObject = computed(() => {
   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) {
@@ -59,6 +191,15 @@ const CLASS_FOR_SECTION = computed(() => {
         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",
@@ -150,7 +291,7 @@ const mapActivesToItems = (index: number) => {
   <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({})"
+      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']"
@@ -170,6 +311,20 @@ const mapActivesToItems = (index: number) => {
 }
 .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;
   }
@@ -193,6 +348,24 @@ const mapActivesToItems = (index: number) => {
   &.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;
   }
@@ -202,6 +375,30 @@ const mapActivesToItems = (index: number) => {
   .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;
   }

components/dynamic-page/page-section/layouts/sections/misses/Default.vue

@@ -1,5 +0,0 @@
-<template>
-   <div>
-     aaaaaaaa
-   </div>
-</template>

components/dynamic-page/page-section/templates/articles/index.vue

@@ -33,7 +33,11 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
     <slot />
   </component>
 </template>

components/dynamic-page/page-section/templates/category/index.vue

@@ -34,6 +34,7 @@ const GET_PROPS = computed(() => {
 
 <template>
   <component 
+    v-if="definedDynamicSection[getCurrentSection]"
     :is="definedDynamicSection[getCurrentSection]" 
     v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
   >

components/dynamic-page/page-section/templates/category/misses/index.vue

@@ -33,7 +33,11 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
     <slot />
   </component>
 </template>

components/dynamic-page/page-section/templates/index.vue

@@ -36,7 +36,7 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component v-if="definedDynamicSection[getCurrentSection]" :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
     <slot />
   </component>
 </template>

components/dynamic-page/page-section/templates/none/index.vue

@@ -32,7 +32,11 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
     <slot />
   </component>
 </template>

components/dynamic-page/page-section/templates/sections/index.ts

@@ -1 +0,0 @@
-export { default as Misses_Section } from './misses/index.vue'

components/dynamic-page/page-section/templates/sections/index.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import type { PageSection } from "@/server/models/dynamic-page/index";
-
-import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
-import { Misses_Section } from "./index";
-
-const _props = defineProps<{
-  settings?: any;
-  content?: any;
-  section: PageSection;
-}>();
-
-const definedDynamicSection: Record<string, any> = {
-  // [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']]: Misses_Section,
-};
-
-const getCurrentSection = computed(() => _props.settings.template);
-
-const GET_PROPS = computed(() => {
-  return () => {
-    let props: any = {};
-    if (_props.settings) {
-      for (const [key, value] of Object.entries(_props.settings)) {
-        props = {
-          ...props,
-          [key]: value,
-        };
-      }
-    }
-    return props;
-  };
-});
-</script>
-
-<template>
-  <component 
-    :is="definedDynamicSection[getCurrentSection]" 
-    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
-  >
-    <slot />
-  </component>
-</template>

components/dynamic-page/page-section/templates/sections/misses/Default.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
-import type { PageSection } from "@/server/models/dynamic-page/index";
-
-const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
-
-const props = defineProps<{
-  label?: any;
-  layout?: string;
-  settings?: any;
-  content?: any;
-  section: PageSection;
-}>();
-</script>
-
-<template>
-  <DynamicLayout :layout="props.layout" :content="props.content" :settings="props.settings" :section="props.section" />
-</template>
-
-<style lang="scss" scoped>
-.border-custom {
-  border-color: #e5e5e5 !important;
-}
-</style>

components/dynamic-page/page-section/templates/sections/misses/index.ts

@@ -1 +0,0 @@
-export { default as Default } from './Default.vue'

components/dynamic-page/page-section/templates/sections/misses/index.vue

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-import type { PageSection } from "@/server/models/dynamic-page/index";
-
-import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
-import { Default } from "./index";
-
-const _props = defineProps<{
-  settings?: any;
-  content?: any;
-  section: PageSection;
-}>();
-
-const definedDynamicSection: Record<string, any> = {
-  // [enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISS']['DEFAULT']]: Default,
-};
-
-const getCurrentSection = computed(() => _props.settings.template);
-
-const GET_PROPS = computed(() => {
-  return () => {
-    let props: any = {};
-    if (_props.settings) {
-      for (const [key, value] of Object.entries(_props.settings)) {
-        props = {
-          ...props,
-          [key]: value,
-        };
-      }
-    }
-    return props;
-  };
-});
-</script>
-
-<template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
-    <slot />
-  </component>
-</template>

components/dynamic-page/page/layouts/index.vue

@@ -44,7 +44,11 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-    <component :is="definedDynamicPageLayout[getCurrentLayout]" v-bind="GET_PROPS()">
+    <component 
+        v-if="definedDynamicPageLayout[getCurrentLayout]"
+        :is="definedDynamicPageLayout[getCurrentLayout]" 
+        v-bind="GET_PROPS()"
+    >
         <slot />
     </component>
 </template>

components/dynamic-page/page/templates/index.vue

@@ -32,7 +32,11 @@ const GET_PROPS = computed(() => {
 </script>
 
 <template>
-    <component :is="definedDynamicPage[getCurrentTemplate] || null" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+    <component 
+        v-if="definedDynamicPage[getCurrentTemplate]" 
+        :is="definedDynamicPage[getCurrentTemplate]" 
+        v-bind="{...(GET_PROPS()), settings: _props.settings}"
+    >
         <slot />
     </component>
 </template>

definitions/cms/page.type copy.ts

@@ -1,232 +0,0 @@
-import { enumPageComponentLayouts, enumPageSectionLayouts, templates, enumPageComponentKey, enumPageComponentTemplate, enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
-
-export const pageTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Home", value: 1 }, // Trang chủ
-  { title: "Section", value: 2 }, // Chuyên trang
-  { title: "Category", value: 3 }, // Trang danh mục
-  { title: "Topic", value: 4 }, // Trang chủ đề
-  { title: "Event", value: 5 }, // Trang sự kiện
-  { title: "Collection", value: 6 }, // Trang sưu tập
-  { title: "Article", value: 7 }, // Trang bài viết
-  { title: "Tag", value: 8 }, // Trang từ khóa
-  { title: "Author", value: 9 }, // Trang tác giả
-  { title: "Search", value: 10 }, // Trang tìm kiếm
-  { title: "Contact", value: 11 }, // Trang liên hệ
-  { title: "About", value: 12 }, // Trang giới thiệu
-  { title: "Service", value: 13 }, // Trang dịch vụ
-  { title: "Policy", value: 14 }, // Trang chính sách
-  { title: "Terms", value: 15 }, // Trang điều khoản
-  { title: "Privacy", value: 16 }, // Trang bảo mật
-  { title: "Error", value: 97 }, // Trang lỗi
-  { title: "Maintenance", value: 98 }, // Trang bảo trì
-  { title: "Custom", value: 99 }, // Trang tùy chỉnh
-];
-// LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
-
-export const pageLayouts = (key: string) => {
-  if (key === templates.ARTICLE) {
-    return [
-      { title: "None", key: 0, value: "ARTICLE_NONE" },
-      { title: "Normal", key: 1, value: "ARTICLE_NORMAL" },
-      { title: "Short", key: 2, value: "ARTICLE_SHORT" },
-      { title: "Long", key: 3, value: "ARTICLE_LONG" },
-      { title: "Page", key: 4, value: "ARTICLE_PAGE" },
-    ];
-  } else {
-    return [
-      { title: "None", value: 0 },
-      { title: "Cơ bản", value: "Default" },
-      { title: "Full Page", value: "Full_Page" }, // full with 100%
-      { title: "Center Page", value: "Center_Page" }, // ở giữa
-      { title: "Backgroud Page", value: "Backgroud_Page" }, // Phân trang
-    ];
-  }
-};
-
-export const pageTemplates = [
-  { title: "None", value: "None" }, // Không xác định
-  { title: "Home", value: "Home" }, // Trang chủ
-  { title: "Section", value: "Section" }, // Chuyên trang
-  { title: "Category", value: "Category" }, // Trang danh mục
-  { title: "Topic", value: "Topic" }, // Trang chủ đề
-  { title: "Event", value: "Event" }, // Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Trang sưu tập
-  { title: "Article", value: "Article" }, // Trang bài viết
-  { title: "Tag", value: "Tag" }, // Trang từ khóa
-  { title: "Author", value: "Author" }, // Trang tác giả
-  { title: "Search", value: "Search" }, // Trang tìm kiếm
-  { title: "Contact", value: "Contact" }, // Trang liên hệ
-  { title: "About", value: "About" }, // Trang giới thiệu
-  { title: "Service", value: "Service" }, // Trang dịch vụ
-  { title: "Policy", value: "Policy" }, // Trang chính sách
-  { title: "Terms", value: "Terms" }, // Trang điều khoản
-  { title: "Privacy", value: "Privacy" }, // Trang bảo mật
-  { title: "Error", value: "Error" }, // Trang lỗi
-  { title: "Maintenance", value: "Maintenance" }, // Trang bảo trì
-  { title: "Custom", value: "Custom" }, // Trang tùy chỉnh
-];
-
-export const pageComponentTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Individual", value: 1 }, // Đơn lẻ
-  { title: "Collection", value: 2 }, // Sưu tập
-  { title: "Pagination", value: 3 }, // Phân trang
-];
-
-export const pageSectionTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Block", value: 1 }, // Khối
-];
-
-export const pageDataType = [
-  { title: "Section", value: "Section" },
-  { title: "Category", value: "Category" },
-  { title: "Topic", value: "Topic" },
-  { title: "Event", value: "Event" },
-  { title: "Collection", value: "Collection" },
-  { title: "Article", value: "Article" },
-  { title: "Tag", value: "Tag" },
-  { title: "Author", value: "Author" },
-  { title: "Poll", value: "Poll" },
-  { title: "Quiz", value: "Quiz" },
-  { title: "Survey", value: "Survey" },
-  { title: "Advertising", value: "Advertising" },
-  { title: "Other", value: "Other" },
-];
-
-export const pageDataQuery = [
-  { title: "IDS", value: "IDS" },
-  { title: "NEW", value: "NEW" },
-  { title: "VIEW", value: "VIEW" },
-  { title: "SQL", value: "SQL" },
-  { title: "REQUEST", value: "REQUEST" },
-];
-
-export const pageTaxonomy = [
-  { title: "Home", value: "Home" }, // Trang khác
-  { title: "Section", value: "Section" }, // Chuyên trang
-  { title: "Category", value: "Category" }, // Trang danh mục
-  { title: "Topic", value: "Topic" }, // Trang chủ đề
-  { title: "Event", value: "Event" }, // Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Trang sưu tập
-  { title: "Article", value: "Article" }, // Trang bài viết
-  { title: "Tag", value: "Tag" }, // Trang từ khóa
-  { title: "Author", value: "Author" }, // Trang tác giả
-  { title: "Poll", value: "Poll" }, // Trang poll
-  { title: "Quiz", value: "Quiz" }, // Trang quiz
-  { title: "Survey", value: "Survey" }, // Trang survey
-  { title: "Advertising", value: "Advertising" }, // Trang quảng cáo
-  { title: "Other", value: "Other" }, // Trang khác
-  { title: "Navigation", value: "Navigation" }, // Navigation
-];
-
-/* SECTION SETTINGS */
-export const pageSectionTaxonomy = [
-  { title: "None", value: "None" }, // Phân vùng của Chuyên trang
-  { title: "Section", value: "Section" }, // Phân vùng của Chuyên trang
-  { title: "Category", value: "Category" }, // Phân vùng của Trang danh mục
-  { title: "Topic", value: "Topic" }, // Phân vùng của Trang chủ đề
-  { title: "Event", value: "Event" }, // Phân vùng của Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Phân vùng của Trang sưu tập
-  { title: "Article", value: "Article" }, // Phân vùng của Trang bài viết
-  { title: "Tag", value: "Tag" }, // Phân vùng của Trang từ khóa
-  { title: "Author", value: "Author" }, // Phân vùng của Trang tác giả
-  { title: "Poll", value: "Poll" }, // Phân vùng của Trang poll
-  { title: "Quiz", value: "Quiz" }, // Phân vùng của Trang quiz
-  { title: "Survey", value: "Survey" }, // Phân vùng của Trang survey
-  { title: "Advertising", value: "Advertising" }, // Phân vùng của Trang quảng cáo
-  { title: "Other", value: "Other" }, // Phân vùng của Trang khác
-  { title: "Navigation", value: "Navigation" }, // Phân vùng của Navigation
-];
-
-export const pageSectionTempaltes = {
-  [enumPageSectionKey.NONE]: [
-    { title: "Thẻ trống", value: enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE'] },
-  ],
-};
-
-export const pageSectionLayouts = {
-  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: [
-    { title: "2 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO'] },
-    { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO'] },
-    { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO'] },
-    { title: "3 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE'] },
-    { title: "4 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR'] },
-    { title: "4 Cột, giữa 2 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO'] },
-    { title: "5 Cột, giữa 3 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE'] },
-    { title: "6 Cột, giữa 4 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR'] },
-    { title: "1 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE'] },
-    { title: "2 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO'] },
-    { title: "3 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE'] },
-    { title: "4 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR'] },
-    { title: "5 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE'] },
-    { title: "6 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX'] },
-    { title: "7 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN'] },
-    { title: "8 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT'] },
-    { title: "9 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE'] },
-    { title: "10 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN'] }
-  ],
-};
-
-/* COMPONENT SETTINGS */
-export const pageComponentTaxonomy = [
-  { title: "Section", value: "Section" }, // Component loại Chuyên trang
-  { title: "Category", value: "Category" }, // Component loại danh mục
-  { title: "Topic", value: "Topic" }, // Component loại chủ đề
-  { title: "Event", value: "Event" }, // Component loại sự kiện
-  { title: "Collection", value: "Collection" }, // Component loại sưu tập
-  { title: "Article", value: "Article" }, // Component loại bài viết
-  { title: "Tag", value: "Tag" }, // Component loại từ khóa
-  { title: "Author", value: "Author" }, // Component loại tác giả
-  { title: "Poll", value: "Poll" }, // Component loại poll
-  { title: "Quiz", value: "Quiz" }, // Component loại quiz
-  { title: "Survey", value: "Survey" }, // Trang survey
-  { title: "Advertising", value: "Advertising" }, // Component loại quảng cáo
-  { title: "Other", value: "Other" }, // Component loại khác
-  { title: "Navigation", value: "Navigation" }, // Component loại Navigation
-];
-
-export const pageComponentTemplates = {
-  [`${enumPageComponentKey.ARTICLE}`]: [
-    { title: "Thẻ bài viết", value: enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD'] },
-    { title: "Chi tiết bài viết", value: enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL'] },
-  ],
-  [`${enumPageComponentKey.OTHER}`]: [
-    { title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
-    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
-  ],
-  [`${enumPageComponentKey.ADVERTISING}`]: [
-    { title: "Quảng cáo", value: enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING'] },
-  ],
-};
-
-export const pageComponentLayouts = {
-  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]: [
-    { title: "Thẻ bài viết cơ bản", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_DEFAULT'] },
-    { title: "Thẻ bài viết audio ", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_AUDIO'] }
-    // { title: "Thẻ bài viết hình ảnh ", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_AUDIO'] },
-    // { title: "Thẻ bài viết có lồng chữ trong ảnh", value: '2' },
-    // { title: "Thẻ bài viết Video", value: '3' },
-    // { title: "Thẻ bài viết Audio", value: '4' },
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]: [
-    { title: "Chi tiết bài viết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_GENERAL'] },
-    { title: "Chi tiết podcast", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_PODCAST'] },
-    { title: "Chi tiết video", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_VIDEO'] },
-    { title: "Chi tiết image", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_IMAGE'] },
-    // { title: "Chi tiết bài viết cơ bản", value: '1' },
-    // { title: "Chi tiết bài viết Video", value: '2' },
-    // { title: "Chi tiết bài viết Podcast ", value: '3' },
-    // { title: "Chi tiết bài viết Image ", value: '4' },
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']]: [
-    { title: "Thời tiết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']]['WEATHER_DEFAULT'] }
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']]: [
-    { title: "Chứng khoán", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']]['SECURITIES_DEFAULT'] }
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']]: [
-    { title: "Quảng cáo", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']]['ADVERTISING_DEFAULT'] }
-  ],
-};

definitions/cms/page.type.ts

@@ -160,6 +160,7 @@ export const pageSectionLayouts = {
     { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_LEFT_TWO'] },
     { title: "6 Cột, phải 5 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FIVE'] },
     { title: "5-3-2-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_THREE_TWO_TWO'] },
+    { title: "5-2-2-3", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_TWO_TWO_THREE'] },
     { title: "2-5-3-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO_FIVE_THREE_TWO'] },
     { title: "5 Cột, phải 4 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FOUR'] },
     { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_RIGHT_TWO'] },
@@ -231,7 +232,7 @@ export const pageComponentTemplates = {
   ],
   [`${enumPageComponentKey.OTHER}`]: [
     { title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
-    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
+    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK'] },
   ],
 };
 
@@ -292,7 +293,7 @@ export const pageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: [
     { title: "Thời tiết", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]['WEATHER_DEFAULT'] }
   ],
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: [
-    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]['SECURITIES_DEFAULT'] }
+  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: [
+    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_DEFAULT'] }
   ],
 };

definitions/enum/page.enum copy.ts

@@ -1,316 +0,0 @@
-export const templates = {
-  NONE: "None", // Không xác định
-  HOME: "Home", // Trang chủ
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  SEARCH: "Search", // Trang tìm kiếm
-  CONTACT: "Contact", // Trang liên hệ
-  ABOUT: "About", // Trang giới thiệu
-  SERVICE: "Service", // Trang dịch vụ
-  POLICY: "Policy", // Trang chính sách
-  TERMS: "Terms", // Trang điều khoản
-  PRIVACY: "Privacy", // Trang bảo mật
-  ERROR: "Error", // Trang lỗi
-  MAINTENANCE: "Maintenance", // Trang bảo trì
-  CUSTOM: "Custom", // Trang tùy chỉnh
-};
-
-export const layouts = {
-  NONE: "None", // Không xác định
-  FULL_PAGE: "Full_Page", // full width 100%
-  CENTER_PAGE: "Center_Page", // ở giữa
-  BACKGROUND_PAGE: "Background_Page", // Phân trang
-};
-
-export const dataTypes = {
-  SECTION: "Section",
-  CATEGORY: "Category",
-  TOPIC: "Topic",
-  EVENT: "Event",
-  COLLECTION: "Collection",
-  ARTICLE: "Article",
-  TAG: "Tag",
-  AUTHOR: "Author",
-  POLL: "Poll",
-  QUIZ: "Quiz",
-  SURVEY: "Survey",
-  ADVERTISING: "Advertising",
-  OTHER: "Other",
-};
-
-export const dataQuery = {
-  IDS: "IDS",
-  NEW: "NEW",
-  VIEW: "VIEW",
-  SQL: "SQL",
-  REQUEST: "REQUEST",
-};
-
-export const sectionTypes = {
-  NONE: 0, // Không xác định
-  BLOCK: 1, // Khối
-};
-
-export const sectionTaxonomy = {
-  BLOCK: "Block",
-  MODULE: "Module",
-  NAVIGATION: "Navigation",
-};
-
-export const enumPageType = {
-  NONE: 0, // Không xác định
-  HOME: 1, // Trang chủ
-  SECTION: 2, // Chuyên trang
-  CATEGORY: 3, // Trang danh mục
-  TOPIC: 4, // Trang chủ đề
-  EVENT: 5, // Trang sự kiện
-  COLLECTION: 6, // Trang sưu tập
-  ARTICLE: 7, // Trang bài viết
-  TAG: 8, // Trang từ khóa
-  AUTHOR: 9, // Trang tác giả
-  SEARCH: 10, // Trang tìm kiếm
-  CONTACT: 11, // Trang liên hệ
-  ABOUT: 12, // Trang giới thiệu
-  SERVICE: 13, // Trang dịch vụ
-  POLICY: 14, // Trang chính sách
-  TERMS: 15, // Trang điều khoản
-  PRIVACY: 16, // Trang bảo mật
-  ERROR: 97, // Trang lỗi
-  MAINTENANCE: 98, // Trang bảo trì
-  CUSTOM: 99, // Trang tùy chỉnh
-};
-
-export const enumPageComponentTemplates = { // KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const dataTypeSort = [
-  { title: "Tăng dần", value: "+" },
-  { title: "Giảm dần", value: "-" },
-];
-export const dataTypeKeyInSort = [
-  { title: "Views", value: "Views" },
-  { title: "Shares", value: "Shares" },
-];
-export const dataTypeKeyInWith = [
-  { title: "Ids", value: "Ids" },
-  { title: "Sites", value: "Sites" },
-  { title: "Categories", value: "Categories" },
-  { title: "Topics", value: "Topics" },
-  { title: "Events", value: "Events" },
-  { title: "Collections", value: "Collections" },
-];
-export const dataSelectQuery = [
-  { title: "COMMAND", value: "COMMAND" },
-  { title: "SQL", value: "SQL" },
-  { title: "REQUEST", value: "REQUEST" },
-  { title: "STATIC", value: "STATIC" },
-];
-export const dataTypeTTL = [
-  { title: "None", value: "" },
-  { title: "Day", value: "Day" },
-  { title: "Month", value: "Month" },
-  { title: 86400, value: 86400 },
-];
-export const dataMethodRequest = [
-  { title: "Get", value: "Get" },
-  { title: "Post", value: "Post" },
-];
-export const dataDesignLayout = [
-  { title: "Ngang", value: "row" },
-  { title: "Dọc", value: "column" },
-];
-export const dataBorderDesign = [
-  { title: "Top", value: "border-top:1px solid;" },
-  { title: "Right", value: "border-right:1px solid;" },
-  { title: "Bottom", value: "border-bottom:1px solid;" },
-  { title: "Left", value: "border-left:1px solid;" },
-];
-export const dataPaddingDesign = [
-  { title: "Top", value: "paddingTop" },
-  { title: "Right", value: "paddingRight" },
-  { title: "Bottom", value: "paddingBottom" },
-  { title: "Left", value: "paddingLeft" },
-];
-export const dataHideDesign = [
-  { title: "Ảnh", value: "div.basic-article_thumbnail" },
-  { title: "Tiêu đề", value: "h3.title" },
-  { title: "Mô tả", value: "p.paragraph" },
-];
-export const dataFontWeightDesign = [
-  { title: "100", value: 100 },
-  { title: "200", value: 200 },
-  { title: "300", value: 300 },
-  { title: "400", value: 400 },
-  { title: "500", value: 500 },
-  { title: "600", value: 600 },
-  { title: "700", value: 700 },
-  { title: "800", value: 800 },
-];
-
-export const dataStaticType = [
-  {
-    title: "Danh sách bài viết liên quan (Dành cho chi tiết bài viết)",
-    value: 1
-  },
-  {
-    title: "Danh sách bài viết cùng danh mục (Dành cho chi tiết bài viết)",
-    value: 2
-  },
-  {
-    title: "Tùy chỉnh",
-    value: 3
-  }
-]
-export const enumPageComponentStaticChild = {
-  LAYOUT: "Layout", // Không xác định
-  DEFAULT: "Default", // Chuyên trang
-};
-
-
-/* SECTION SETTINGS */
-// KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-export const enumPageSectionKey = {
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const enumPageSectionTemplate = {
-  [enumPageSectionKey.NONE]: {
-    'NONE': "TYPE:None",
-  },
-};
-
-export const enumPageSectionLayouts = {
-  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: {
-    'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
-    'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
-    'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
-    'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
-    'VERTICAL_FOUR': 'LAYOUT:vertical-TYPE:Default-MAX:4',
-    'VERTICAL_CENTER_TWO': 'LAYOUT:vertical-TYPE:CENTER-MAX:2',
-    'VERTICAL_CENTER_THREE': 'LAYOUT:vertical-TYPE:CENTER-MAX:3',
-    'VERTICAL_CENTER_FOUR': 'LAYOUT:vertical-TYPE:CENTER-MAX:4',
-    'HORIZONTAL_ONE': 'LAYOUT:horizontal-TYPE:Default-MAX:1',
-    'HORIZONTAL_TWO': 'LAYOUT:horizontal-TYPE:Default-MAX:2',
-    'HORIZONTAL_THREE': 'LAYOUT:horizontal-TYPE:Default-MAX:3',
-    'HORIZONTAL_FOUR': 'LAYOUT:horizontal-TYPE:Default-MAX:4',
-    'HORIZONTAL_FIVE': 'LAYOUT:horizontal-TYPE:Default-MAX:5',
-    'HORIZONTAL_SIX': 'LAYOUT:horizontal-TYPE:Default-MAX:6',
-    'HORIZONTAL_SEVEN': 'LAYOUT:horizontal-TYPE:Default-MAX:7',
-    'HORIZONTAL_EIGHT': 'LAYOUT:horizontal-TYPE:Default-MAX:8',
-    'HORIZONTAL_NINE': 'LAYOUT:horizontal-TYPE:Default-MAX:9',
-    'HORIZONTAL_TEN': 'LAYOUT:horizontal-TYPE:Default-MAX:10',
-  }
-};
-
-/* COMPONENT SETTINGS */
-// KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-export const enumPageComponentKey = {
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const enumPageComponentTemplate = {
-  [enumPageComponentKey.ARTICLE]: {
-    'ARTICLE_CARD': "TYPE:Card",
-    'ARTICLE_DETAIL': 'TYPE:Detail',
-  },
-  [enumPageComponentKey.NAVIGATION]: {
-    'TOP': "TYPE:Top",
-    'BOTTOM': 'TYPE:Bottom',
-    'DIRECTION': 'TYPE:Direction',
-  },
-  [enumPageComponentKey.OTHER]: {
-    "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
-  },
-  [enumPageComponentKey.ADVERTISING]: {
-    "ADVERTISING": "TYPE:Advertising",
-  }
-};
-
-export const enumPageComponentLayouts = {
-  [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]: {
-    'CARD_DEFAULT': "TYPE:Card_Default",
-    'CARD_AUDIO': "TYPE:Card_Audio",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]: {
-    'DETAIL_GENERAL': "TYPE:Detail_General",
-    'DETAIL_PODCAST': "TYPE:Detail_Podcast",
-    'DETAIL_VIDEO': "TYPE:Detail_Video",
-    'DETAIL_IMAGE': "TYPE:Detail_Image",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: {
-    'NAVIGATION_TOP_DEFAULT': "TYPE:Navigation_Top_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]: {
-    'NAVIGATION_BOTTOM_DEFAULT': "TYPE:Navigation_Bottom_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']}`]: {
-    'NAVIGATION_DIRECTION_DEFAULT': "TYPE:Navigation_Direction_Default",
-  },
-
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: {
-    'WEATHER_DEFAULT': "TYPE:Weather_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: {
-    'SECURITIES_DEFAULT': "TYPE:Securities_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: {
-    'ADVERTISING_DEFAULT': "TYPE:Advertising_Default",
-  },
-
-};

definitions/enum/page.enum.ts

@@ -237,6 +237,7 @@ export const enumPageSectionLayouts = {
     'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
     'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3-MAX:3',
     'VERTICAL_FIVE_THREE_TWO_TWO': 'LAYOUT:vertical-TYPE:5;3;2;2-MAX:4',
+    'VERTICAL_FIVE_TWO_TWO_THREE': 'LAYOUT:vertical-TYPE:5;2;2;3-MAX:4',
     'VERTICAL_TWO_FIVE_THREE_TWO': 'LAYOUT:vertical-TYPE:2;5;3;2-MAX:4',
     'VERTICAL_ONE_FOUR': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:4-Max:2',
     'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5-MAX:2',

pages/[categories]/index.vue

@@ -36,3 +36,4 @@ useHead({
     </DynamicTemplate>
   </main>
 </template>
+