phongdt:fix paging

Reviewed-on: #8

assets/styles/style.scss

@@ -172,3 +172,11 @@ 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/Audio.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {

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

@@ -9,7 +9,7 @@ const props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {

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/Video.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {

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

@@ -8,7 +8,7 @@ const props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {

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/General.vue

@@ -9,7 +9,7 @@ const _props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: string;
+  label?: any;
 }>();
 const SETTING_OPTIONS = {
   BREADCRUMB_MAX_ELEMENT: 3,

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

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

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

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,10 +5,10 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
-  label?: string;
+  label?: any;
   content?: any;
 }>();
 

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

@@ -5,10 +5,10 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
-  label?: string;
+  label?: any;
   content?: 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/components/RecusiveNavItem.vue

@@ -19,7 +19,9 @@ const setGlobalState = (id: any) => {
         <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
             <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                 <div class="navigation-submenu">
-                    <div class="navigation_title ">{{ record?.title }}</div>
+                    <div class="navigation_title">
+                        <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                    </div>
                     <div class="navigation-item submenu-container dropdown-container">
                         <RecusiveNavItem :records="record.childs" />
                     </div>
@@ -28,7 +30,9 @@ const setGlobalState = (id: any) => {
             <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                 <div class="navigation-submenu">
                     <div class="position-relative ps-3">
-                        <div class="navigation_title ">{{ record?.title }}</div>
+                        <div class="navigation_title ">
+                            <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                        </div>
                     </div>
                     <div class="full-layout dropdown-container">
                         <template v-if="record.data">
@@ -40,7 +44,9 @@ const setGlobalState = (id: any) => {
                 </div>
             </template>
             <template v-else>
-                <div class="navigation_title navigation-item" >{{ record?.title }}</div>
+                <div class="navigation_title navigation-item" >
+                    <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                </div>
             </template>
         </div>
     </div>

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

@@ -34,6 +34,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/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.ts

@@ -1,4 +1,4 @@
 // export { default as Weather_Day } from './weathers/WeatherDay.vue'
 // export { default as Comment_Default } from './comments/Default.vue'
 export { default as Other_Weather } from './weathers/index.vue'
-export { default as Other_Secutities } from './securities/index.vue'
+export { default as Other_Stock } from './stocks/index.vue'

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Other_Weather, Other_Secutities } from "./index";
+import { Other_Weather, Other_Stock } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -9,7 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplate[enumPageComponentKey.OTHER]["WEATHER"]]: Other_Weather,
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]["SECURITIES"]]: Other_Secutities,
+  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']]: Other_Stock,
   // [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]: Article_Detail,
 };
 const getCurrentComponent = computed(() => _props.settings.template);
@@ -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/securities/Securities.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-  <div>chứng khoán</div>
-</template>
-<style lang="scss" scoped>
-div {
-  width: 100%;
-  height: 200px;
-  background-color: #ededed;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

components/dynamic-page/page-component/templates/others/securities/index.ts

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

components/dynamic-page/page-component/templates/others/stocks/334x641.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { nanoid } from 'nanoid';
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "locale": "vi",
+    "width": "334px",
+    "height": "250px",
+    "price_line_color": "#71BDDF",
+    "grid_color": "#999999",
+    "label_color": "#999999",
+  }
+</script>
+<template>
+  <JSWidget 
+    :CONTAINER_ID="nanoid(10)" 
+    :SCRIPT_ID="nanoid(10)" 
+    SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
+    :options="widgetOptions" 
+    :inside="false"
+    widgetKey="FireAnt" 
+  />
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import { nanoid } from 'nanoid';
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "symbols": [
+      {
+        "proName": "FOREXCOM:SPXUSD",
+        "title": "S&P 500 Index"
+      },
+      {
+        "proName": "FOREXCOM:NSXUSD",
+        "title": "US 100 Cash CFD"
+      },
+      {
+        "proName": "FX_IDC:EURUSD",
+        "title": "EUR to USD"
+      },
+      {
+        "proName": "BITSTAMP:BTCUSD",
+        "title": "Bitcoin"
+      },
+      {
+        "proName": "BITSTAMP:ETHUSD",
+        "title": "Ethereum"
+      }
+    ],
+    "isTransparent": false,
+    "showSymbolLogo": true,
+    "colorTheme": "dark",
+    "locale": "en"
+  }
+</script>
+
+<template>
+  <div>
+    <JSWidget 
+      :CONTAINER_ID="nanoid(10)" 
+      :SCRIPT_ID="nanoid(10)" 
+      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" 
+      :options="widgetOptions" 
+      :inside="true"
+      widgetKey="TradingView" 
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+

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

@@ -0,0 +1,2 @@
+export { default as Stock_Default } from './334x641.vue'
+export { default as Stock_FullSize } from './Full.vue'

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

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Stock_Default, Stock_FullSize } from "./index";
 
-// import { Article_Card, Article_Detail_Video, Article_Detail_Podcast, Article_Detail_General, Article_Detail_Image } from "./index";
-import { Securities_Default } from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
   content?: any;
 }>();
 const definedDynamicComponent: Record<string, any> = {
-  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]["SECURITIES"]]["SECURITIES_DEFAULT"]]: Securities_Default,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']]['STOCK_DEFAULT']]: Stock_Default,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]["STOCK"]]["STOCK_FULLSIZE"]]: Stock_FullSize,
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
@@ -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/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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { isEmpty } from "@/utils/lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageComponentTemplates } from "@/definitions/enum";
 const router = useRouter();
 const route = useRoute();
 
 const store = reactive({
-  component: usePageComponentStore(),
+  component: useDynamicPageStore(),
 });
 
 const _props = defineProps<{
@@ -18,8 +18,12 @@ const _props = defineProps<{
 
 const SETTING_OPTIONS = {
   MAX_ELEMENT: 5,
-  TEMPLATE: "Article",
-  LAYOUT: "TYPE:Card",
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_Default",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
 };
 
 const page = ref(1);
@@ -60,14 +64,11 @@ const handleRouteChange = async (query: any) => {
   const param = query[`cpn_${_props.component?.id}`];
   if (param) {
     const [_, value] = param.split(":") || [];
-    page.value = value;
+    page.value = Number(value);
     await loadPage(value);
   }
 };
 
-onBeforeMount(() => {
-  if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
-});
 
 const loadPage = async (page: number) => {
   let newDataQuery = "";
@@ -79,14 +80,17 @@ 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");
+  const {item} = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
+  const data = getInputValue(item?.settings?.dataResult, "OBJECT");
+
   if (Object.keys(data).length > 0) {
     totals.value = data.Total;
     listArticlePaging.value = data?.Data || [];
   }
 };
 
+if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
+
 const handleNextPrev = (type: "+" | "-") => {
   if (listArticleByCategory.value?.length > 0) {
     if (type === "+") {
@@ -107,51 +111,32 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <section>
-    <div class="section-container" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+  <section v-if="listArticleByCategory?.length > 0">
+    <div class="section-container">
       <div class="section-layout" :style="designObject['div.section']">
-        <template v-if="listArticleByCategory?.length > 0">
-          <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
+        <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
           <DynamicComponent
-              :key="index"
-              v-if="!isEmpty(component)"
             :settings="{
               template: SETTING_OPTIONS.TEMPLATE,
               layout: SETTING_OPTIONS.LAYOUT,
               dataResult: { ...component },
               label: mapActivesToItems(Number(index)),
             }"
+            :component="COMPONENT"
           />
         </template>
-        </template>
-        <template v-else>
-          <div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
-        </template>
         <div class="button-page flex">
-          <a class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
-            <i class="el-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                <path
-                  fill="currentColor"
-                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-                ></path>
-              </svg>
-            </i>
-          </a>
-          <a v-if="listArticleByCategory?.length > 0" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</a>
-          <a class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
-            <i class="el-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                <path
-                  fill="currentColor"
-                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
-                ></path>
-              </svg>
-            </i>
-          </a>
+          <span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
+            <Icon name="ooui:previous-ltr"></Icon>
+          </span>
+          <span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
+          <span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
+            <Icon name="ooui:previous-rtl"></Icon>
+          </span>
         </div>
       </div>
     </div>
+    <div v-html="designObject.styleClasses" style="display: none" v-if="designObject.styles"></div>
   </section>
 </template>
 
@@ -161,35 +146,9 @@ const mapActivesToItems = (index: number) => {
     display: flex;
     flex-direction: column;
     /* gap: 10px; */
-    overflow-x: scroll;
     &.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;
-    }
-  }
-  .empty {
-    width: 100%;
-    height: 100%;
-    min-height: 50px;
-    background-color: #409eff;
-    display: flex;
-    white-space: normal;
-    justify-content: center;
-    align-items: center;
-    h6 {
-      color: #fff;
-    }
   }
   .basic-article {
     &.article {
@@ -198,9 +157,6 @@ const mapActivesToItems = (index: number) => {
       pointer-events: none;
     }
   }
-  &.noData {
-    border-radius: 6px;
-  }
 
   .flex {
     display: flex;
@@ -218,17 +174,21 @@ const mapActivesToItems = (index: number) => {
   .btn-page {
     width: 40px;
     height: 40px;
+    padding: 9px 16px;
     text-align: center;
     line-height: 36px;
-    border: 1px solid #409eff;
-    border-radius: 3px;
+    border-radius: 4px;
     margin-left: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    background: #f2f2f2;
     cursor: pointer;
+    color: #222222;
     &.active {
-      background: #409eff;
+      background: #ed1c24;
       color: white;
     }
   }

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/articles/details/Default.vue

@@ -92,7 +92,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
   }
   return null;
 }
-console.log(currentArticle.value, 'currentArticle')
 </script>
 
 <template>

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>

components/widget/JSwidget.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        SCRIPT_ID?: any,
+        SCRIPT_SRC?: any,
+        CONTAINER_ID?: any,
+        options?: any,
+        inside?: boolean,
+        widgetKey?: any
+    }>()
+
+    const widgets : any = {};
+    const instance = getCurrentInstance();
+
+    const canUseDOM = () => {
+        return typeof window !== 'undefined' && window.document && window.document.createElement;
+    };
+    const getScriptElement = () => {
+        return document.getElementById(props.SCRIPT_ID);
+    }
+    const updateOnloadListener = (onload : any) => {
+      const script : any = getScriptElement(); 
+      const oldOnload = script.onload;
+      return script.onload = () => {
+        oldOnload();
+        onload();
+      };
+    }
+    const scriptExists = () => {
+      return getScriptElement() !== null;
+    }
+    const appendScript = (onload : any) => {
+      if (!canUseDOM()) {
+        onload();
+        return;
+      }
+
+      if (scriptExists()) {
+        if (typeof window[props.widgetKey] === 'undefined') {
+          updateOnloadListener(onload);
+          return;
+        }
+        onload();
+        return;
+      }
+      const script = document.createElement('script');
+      script.id = props.SCRIPT_ID;
+      script.type = 'text/javascript';
+      script.async = true;
+      script.src = props.SCRIPT_SRC;
+      script.onload = onload;
+      if (props.inside) document.getElementById(props.CONTAINER_ID) && document.getElementById(props.CONTAINER_ID).appendChild(script);
+      else {
+        document.getElementsByTagName('body')[0].appendChild(script);
+      }
+    }
+    const initWidget = (key: any) => {
+      if (typeof widgets[key].key === 'undefined') {
+        return;
+      }
+      widgets[key].script()
+    }
+
+    onMounted(async () => {
+      await Object.assign(widgets, { 
+        FireAnt: {
+          script: () => new window.FireAnt.MarketsWidget({ container_id: props.CONTAINER_ID, ...props.options }),
+          key: window.FireAnt
+        },
+        TradingView: {
+          script: () => new window.TradingView.widget({ container_id: props.CONTAINER_ID, ...props.options }),
+          key: window.TradingView
+        }
+      })
+      appendScript(initWidget(props.widgetKey));
+    })
+</script>
+
+<template>
+  <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
+</template>

components/widget/index.txt

@@ -0,0 +1,33 @@
+// <div class="tradingview-widget-container">
+//   <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
+//   {
+//   "symbols": [
+//     {
+//       "proName": "FOREXCOM:SPXUSD",
+//       "title": "S&P 500 Index"
+//     },
+//     {
+//       "proName": "FOREXCOM:NSXUSD",
+//       "title": "US 100 Cash CFD"
+//     },
+//     {
+//       "proName": "FX_IDC:EURUSD",
+//       "title": "EUR to USD"
+//     },
+//     {
+//       "proName": "BITSTAMP:BTCUSD",
+//       "title": "Bitcoin"
+//     },
+//     {
+//       "proName": "BITSTAMP:ETHUSD",
+//       "title": "Ethereum"
+//     }
+//   ],
+//   "showSymbolLogo": true,
+//   "isTransparent": false,
+//   "displayMode": "adaptive",
+//   "colorTheme": "dark",
+//   "locale": "en"
+// }
+//   </script>
+// </div>

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,8 @@ 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'] },
+    { title: "Chứng khoán Full Size", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_FULLSIZE'] }  
   ],
 };

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',
@@ -317,7 +318,7 @@ export const enumPageComponentTemplate = {
   },
   [enumPageComponentKey.OTHER]: {
     "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
+    "STOCK": "TYPE:Stock"
   },
 };
 
@@ -379,8 +380,9 @@ export const enumPageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: {
     'WEATHER_DEFAULT': "TYPE:Weather_Default",
   },
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: {
-    'SECURITIES_DEFAULT': "TYPE:Securities_Default",
+  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: {
+    'STOCK_DEFAULT': "TYPE:Stock_Default",
+    'STOCK_FULLSIZE': "TYPE:Stock_Fullsize",
   },
 };
 

package.json

@@ -26,6 +26,7 @@
     "@vueuse/nuxt": "10.5.0",
     "axios": "^1.5.1",
     "cheerio": "^1.0.0-rc.12",
+    "nanoid": "^5.0.7",
     "nuxt-delay-hydration": "latest",
     "sass": "latest",
     "sass-loader": "latest",

pages/[categories]/index.vue

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

server/models/dynamic-page/index.ts

@@ -5,7 +5,7 @@ interface Base {
     updatedOn?: string
 }
 interface PageSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
     layout?: string; // Bố cục
     template?: string; // Bản mẫu
     mainLink?: boolean; // Liên kết chính
@@ -17,12 +17,12 @@ interface PageSettings {
     dataResult?: string; // Kết quả dữ liệu (Json)
 }
 interface PageSectionSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
     layout?: string; // Bố cục
     template?: string; // Bản mẫu
 }
 interface PageComponentSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
     layout?: string; // Bố cục
     template?: string; // Bản mẫu
     dataType?: string; // Loại dữ liệu: Section, Category, Topic, Event, Collection, Article, Tag, Author, Poll, Quiz, Survey, Advertising, Other
@@ -97,7 +97,7 @@ interface Page extends Base {
     sections?: PageSection[];
 }
 
-export const getDynamicPageByCode = async (event : any) => {
+export const getDynamicPageByCode = async (event: any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const slug = event.context.params.slug;
@@ -112,7 +112,7 @@ export const getDynamicPageByCode = async (event : any) => {
     }
 }
 
-export const getDynamicPageById = async (event : any) => {
+export const getDynamicPageById = async (event: any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const id = event.context.params.id;
@@ -122,3 +122,18 @@ export const getDynamicPageById = async (event : any) => {
         handleError(error);
     }
 }
+export async function getOverviewPageComponentById(event: any) {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { componentId, dataQuery } = getQuery(event)
+        return await $fetch(`${apiUrl}/cms/overview-page-component/${componentId}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: dataQuery,
+        });
+    } catch (err) {
+        handleError(err);
+    }
+}

stores/dynamic-page.ts

@@ -60,6 +60,23 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
       } catch (error: any) {}
     }
 
+    async function getOverviewPageComponentById(componentId, dataQuery) {
+      try {
+        const { apiUrl } = useRuntimeConfig().public
+        const res =  await $fetch(`${apiUrl}/cms/page-component/overview-page-component/${componentId}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(dataQuery),
+        });
+        return res
+      } catch (err) {
+        throw err;
+      }
+    }
+    
+
     return {
         currentPage,
         sectionPublished,
@@ -69,6 +86,7 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
         setSectionPublished,
         setComponentPublished,
         setDataQuery,
+        getOverviewPageComponentById
     };
 });