From dffbe39fa6603203c8a5cb348082ec33a31da2a9 Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 12 Jul 2024 19:13:34 +0700
Subject: [PATCH] minhnt-dev: fix page template

---
 .../dynamic-page/page/layouts/Default.vue     |  78 -------
 .../page/layouts/homes/Default.vue            |  76 +++++++
 components/dynamic-page/page/layouts/index.ts |   2 +-
 .../dynamic-page/page/layouts/index.vue       |  59 +++--
 .../{Default.vue => DetailDefault.vue}        |   2 +-
 .../page/templates/articles/index.ts          |   1 +
 .../page/templates/articles/index.vue         |  37 ++++
 .../templates/homes/{Basic.vue => Home.vue}   |  21 +-
 .../page/templates/homes/index.ts             |   1 +
 .../page/templates/homes/index.vue            |  37 ++++
 .../dynamic-page/page/templates/index.ts      |   3 +-
 .../dynamic-page/page/templates/index.vue     |  46 ++--
 definitions/cms/index.ts                      |   7 +-
 definitions/cms/page.type.ts                  |  88 +++-----
 definitions/enum/index.ts                     |   5 +-
 definitions/enum/page.enum.ts                 | 209 +++++++++++++-----
 pages/[categories]/index.vue                  |   2 +-
 pages/bai-viet/[slug].vue                     |   2 +-
 pages/index.vue                               |   2 +-
 19 files changed, 413 insertions(+), 265 deletions(-)
 delete mode 100644 components/dynamic-page/page/layouts/Default.vue
 create mode 100644 components/dynamic-page/page/layouts/homes/Default.vue
 rename components/dynamic-page/page/templates/articles/{Default.vue => DetailDefault.vue} (93%)
 create mode 100644 components/dynamic-page/page/templates/articles/index.ts
 create mode 100644 components/dynamic-page/page/templates/articles/index.vue
 rename components/dynamic-page/page/templates/homes/{Basic.vue => Home.vue} (63%)
 create mode 100644 components/dynamic-page/page/templates/homes/index.ts
 create mode 100644 components/dynamic-page/page/templates/homes/index.vue

diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
deleted file mode 100644
index f3dffec..0000000
--- a/components/dynamic-page/page/layouts/Default.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { getInputValue } from "@/utils/parseSQL";
-const props = defineProps<{
-    layout?: any,
-    label?:any
-}>()
-
-const CLASS_FOR_LAYOUT = computed(() => {
-    let _classForLayout = {};
-    switch (props.layout) {
-        case 'Full_Page':
-            _classForLayout = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container full-size-layout',
-            };
-            break;
-        case 'Center_Page':
-            _classForLayout = {
-                page_container: 'page_container full-size-page',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        case 'Background_Page':
-            _classForLayout = {
-                page_container: 'page_container full-size-page background-container',
-                layout_container: 'layout_container center-layout',
-            };
-            break;
-        default: 
-            _classForLayout = {
-                page_container: 'page_container',
-                layout_container: 'layout_container',
-            };
-            break;
-    }
-    return _classForLayout;
-})
-
-const LAYOUT_PARSE = computed(() => {
-  return props?.label ? getInputValue(props.label, "OBJECT") : {};
-});
-</script>
-
-<template>
-    <div :class="[CLASS_FOR_LAYOUT.page_container]" :style="LAYOUT_PARSE['div.page_container']">
-        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
-            <slot />
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-    .page_container {
-        // padding: 20px 0;
-        &.full-size-page {
-            width: 100%;
-        }
-        // .full-size-layout {
-        //     padding-left: 20px;
-        //     padding-right: 20px;
-        // }
-    }
-
-    .layout_container {
-        padding-top: 20px;
-
-        &.center-layout {
-            max-width: 1440px;
-            padding: 0 27.5px;
-            margin: auto;
-        }
-    }
-
-    .grid-container {
-        display: grid;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-</style>
diff --git a/components/dynamic-page/page/layouts/homes/Default.vue b/components/dynamic-page/page/layouts/homes/Default.vue
new file mode 100644
index 0000000..af7ec2c
--- /dev/null
+++ b/components/dynamic-page/page/layouts/homes/Default.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";
+
+const props = defineProps<{
+    layout?: any,
+    label?:any
+}>()
+
+const CLASS_FOR_LAYOUT = computed(() => {
+  let _classForLayout = {};
+  switch (props.layout) {
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
+      _classForLayout = {
+        page_container: "page_container full-size-page",
+        layout_container: "layout_container center-layout",
+      };
+      break;
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
+      _classForLayout = {
+        page_container: "page_container full-size-page",
+        layout_container: "layout_container full-size-layout",
+      };
+      break;
+    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['BACKGROUND_PAGE']:
+      _classForLayout = {
+        page_container: "page_container full-size-page background-container",
+        layout_container: "layout_container center-layout",
+      };
+      break;
+    default:
+      _classForLayout = {
+        page_container: "page_container",
+        layout_container: "layout_container",
+      };
+      break;
+  }
+  return _classForLayout;
+});
+</script>
+
+<template>
+    <div :class="[CLASS_FOR_LAYOUT.page_container]">
+        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        // padding: 20px 0;
+        &.full-size-page {
+            width: 100%;
+        }
+        // .full-size-layout {
+        //     padding-left: 20px;
+        //     padding-right: 20px;
+        // }
+    }
+
+    .layout_container {
+        padding-top: 20px;
+
+        &.center-layout {
+            max-width: 1440px;
+            padding: 0 27.5px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/index.ts b/components/dynamic-page/page/layouts/index.ts
index 23a9eb3..b9396cd 100644
--- a/components/dynamic-page/page/layouts/index.ts
+++ b/components/dynamic-page/page/layouts/index.ts
@@ -1,4 +1,4 @@
-export { default as BASE_LAYOUT } from './Default.vue'
+export { default as Home_Default } from './homes/Default.vue'
 
 // Article
 export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
diff --git a/components/dynamic-page/page/layouts/index.vue b/components/dynamic-page/page/layouts/index.vue
index 60b64c5..3938904 100644
--- a/components/dynamic-page/page/layouts/index.vue
+++ b/components/dynamic-page/page/layouts/index.vue
@@ -1,46 +1,37 @@
 <script lang="ts" setup>
-import { layouts } from "@/definitions/enum";
-
-import { 
-    BASE_LAYOUT,
-    ARTICLE_SHORT_LAYOUT,
-    ARTICLE_PAGE_LAYOUT,
-    ARTICLE_NORMAL_LAYOUT,
-    ARTICLE_NONE_LAYOUT,
-    ARTICLE_LONG_LAYOUT,
-} from './index';
+import { enumPageKey, enumPageTemplate, enumPageLayouts } from "@/definitions/enum";
+import { Home_Default, ARTICLE_LONG_LAYOUT, ARTICLE_NONE_LAYOUT, ARTICLE_NORMAL_LAYOUT, ARTICLE_PAGE_LAYOUT, ARTICLE_SHORT_LAYOUT } from "./index";
 
 const _props = defineProps<{
-    settings?: any,
-}>()
+  settings?: any;
+}>();
 
 const definedDynamicPageLayout: Record<string, any> = {
-    'Default': BASE_LAYOUT,
-    [layouts.FULL_PAGE]: BASE_LAYOUT,
-    [layouts.CENTER_PAGE]: BASE_LAYOUT,
-    [layouts.BACKGROUND_PAGE]: BASE_LAYOUT,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["DEFAULT"]]: Home_Default,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["FULL"]]: Home_Default,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.HOME]["DEFAULT"]]["BACKGROUND_PAGE"]]: Home_Default,
 
-    'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
-    'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
-    'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
-    'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
-    'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
-}
+  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_SHORT"]]: ARTICLE_SHORT_LAYOUT,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_PAGE"]]: ARTICLE_PAGE_LAYOUT,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NORMAL"]]: ARTICLE_NORMAL_LAYOUT,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_NONE"]]: ARTICLE_NONE_LAYOUT,
+  [enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]["DETAIL"]]["ARTICLE_LONG"]]: ARTICLE_LONG_LAYOUT,
+};
 
-const getCurrentLayout = computed(() => _props.settings.layout);
+const getCurrentLayout = computed(() => _props.settings?.layout);
 
 const GET_PROPS = computed(() => {
-    return () => {
-        let props: any = {};
-        for (const [key, value] of Object.entries(_props.settings)) {
-            props = {
-                ...props,
-                [key]: value
-            }
-        }
-        return props;
-    };
-})
+  return () => {
+    let props: any = {};
+    for (const [key, value] of Object.entries(_props.settings)) {
+      props = {
+        ...props,
+        [key]: value,
+      };
+    }
+    return props;
+  };
+});
 </script>
 
 <template>
diff --git a/components/dynamic-page/page/templates/articles/Default.vue b/components/dynamic-page/page/templates/articles/DetailDefault.vue
similarity index 93%
rename from components/dynamic-page/page/templates/articles/Default.vue
rename to components/dynamic-page/page/templates/articles/DetailDefault.vue
index dfbfade..3b3b41c 100644
--- a/components/dynamic-page/page/templates/articles/Default.vue
+++ b/components/dynamic-page/page/templates/articles/DetailDefault.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="h-100 overflow-y-auto">
+    <div class="h-full overflow-y-auto">
         <HeaderHomeTemplate /> 
             <DynamicLayout :settings="props.settings">
                 <slot />
diff --git a/components/dynamic-page/page/templates/articles/index.ts b/components/dynamic-page/page/templates/articles/index.ts
new file mode 100644
index 0000000..603f5f5
--- /dev/null
+++ b/components/dynamic-page/page/templates/articles/index.ts
@@ -0,0 +1 @@
+export { default as DetailDefault } from './DetailDefault.vue';
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/articles/index.vue b/components/dynamic-page/page/templates/articles/index.vue
new file mode 100644
index 0000000..5efbe36
--- /dev/null
+++ b/components/dynamic-page/page/templates/articles/index.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { DetailDefault } from './index';
+import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+    settings: any
+}>()
+
+const definedDynamicPage: Record<string, any> = {
+    [enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]: DetailDefault,
+}
+
+const getCurrentTemplate = computed(() => {
+    return _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 v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+        <slot />
+    </component>
+</template>
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/homes/Basic.vue b/components/dynamic-page/page/templates/homes/Home.vue
similarity index 63%
rename from components/dynamic-page/page/templates/homes/Basic.vue
rename to components/dynamic-page/page/templates/homes/Home.vue
index 7f3dd37..284f05b 100644
--- a/components/dynamic-page/page/templates/homes/Basic.vue
+++ b/components/dynamic-page/page/templates/homes/Home.vue
@@ -2,22 +2,19 @@
 import DynamicLayout from "~/components/dynamic-page/page/layouts/index.vue";
 import HeaderHomeTemplate from "~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue";
 import FooterHomeTemplate from "~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue";
-const props = defineProps<{
-  settings?: any;
-}>();
 
+const props = defineProps<{
+    settings?: any
+}>()
 </script>
 
 <template>
-  <div>
-      <HeaderHomeTemplate>
-        <DynamicLayout :settings="props.settings">
+    <div class="h-full overflow-y-auto">
+        <HeaderHomeTemplate /> 
+            <DynamicLayout :settings="props.settings">
                 <slot />
             </DynamicLayout>
-      </HeaderHomeTemplate>
-    <DynamicLayout :settings="props.settings">
-      <slot />
-    </DynamicLayout>
-    <FooterHomeTemplate />
-  </div>
+        <FooterHomeTemplate />
+    </div>
 </template>
+
diff --git a/components/dynamic-page/page/templates/homes/index.ts b/components/dynamic-page/page/templates/homes/index.ts
new file mode 100644
index 0000000..4307ce7
--- /dev/null
+++ b/components/dynamic-page/page/templates/homes/index.ts
@@ -0,0 +1 @@
+export { default as Home } from './Home.vue';
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/homes/index.vue b/components/dynamic-page/page/templates/homes/index.vue
new file mode 100644
index 0000000..c49224a
--- /dev/null
+++ b/components/dynamic-page/page/templates/homes/index.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Home } from './index';
+import { enumPageKey, enumPageTemplate } from "@/definitions/enum";
+
+const _props = defineProps<{
+    settings: any
+}>()
+
+const definedDynamicPage: Record<string, any> = {
+    [enumPageTemplate[enumPageKey.HOME]['DEFAULT']]: Home,
+}
+
+const getCurrentTemplate = computed(() => {
+    return _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 v-if="definedDynamicPage[getCurrentTemplate]" :is="definedDynamicPage[getCurrentTemplate]" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+        <slot />
+    </component>
+</template>
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/index.ts b/components/dynamic-page/page/templates/index.ts
index ca8dc45..048d525 100644
--- a/components/dynamic-page/page/templates/index.ts
+++ b/components/dynamic-page/page/templates/index.ts
@@ -1 +1,2 @@
-export { default as HomeBasic } from './homes/Basic.vue'
\ No newline at end of file
+export { default as Home } from './homes/index.vue'
+export { default as Article } from './articles/index.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/index.vue b/components/dynamic-page/page/templates/index.vue
index 9e2ebd3..bcaf423 100644
--- a/components/dynamic-page/page/templates/index.vue
+++ b/components/dynamic-page/page/templates/index.vue
@@ -1,39 +1,41 @@
 <script lang="ts" setup>
-import { HomeBasic } from './index';
+import { Home, Article } from "./index";
+import type { Page } from "@/models/cms";
+import { enumPageKey } from "@/definitions/enum";
 
 const _props = defineProps<{
-    settings: any
-}>()
+  settings: any;
+  page: Page;
+}>();
 
 const definedDynamicPage: Record<string, any> = {
-    'Home' : HomeBasic,
-    'Article': HomeBasic
-}
+  [enumPageKey.HOME]: Home,
+  [enumPageKey.ARTICLE]: Article,
+};
 
 const getCurrentTemplate = computed(() => {
-    return _props.settings && _props.settings.template || '';
+  return _props.page?.taxonomy || "";
 });
 
-
 const GET_PROPS = computed(() => {
-    return () => {
-        let props : any = {};
-        if (_props.settings) {
-            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
-                props = {
-                    ...props,
-                    [key]: value
-                }
-            }
-        }
-        return props;
-    };
-})
+  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 
-    class="overflow-x-hidden"
+        class="overflow-x-hidden"
         v-if="definedDynamicPage[getCurrentTemplate]" 
         :is="definedDynamicPage[getCurrentTemplate]" 
         v-bind="{...(GET_PROPS()), settings: _props.settings}"
diff --git a/definitions/cms/index.ts b/definitions/cms/index.ts
index 225566b..65bd0cd 100644
--- a/definitions/cms/index.ts
+++ b/definitions/cms/index.ts
@@ -35,11 +35,13 @@ export {
   pageTypes,
   pageComponentTypes,
   pageSectionTypes,
-  pageTaxonomy,
   pageDataQuery,
   pageDataType,
-  pageLayouts,
+
+  /* PAGE SETTINGS */
+  pageTaxonomy,
   pageTemplates,
+  pageLayouts,
 
   /* SECTION SETTINGS */
   pageSectionTaxonomy,
@@ -50,6 +52,7 @@ export {
   pageComponentTaxonomy,
   pageComponentTemplates,
   pageComponentLayouts,
+
 } from "./page.type";
 export { placementType } from "./placement.type";
 export { pollType, pollParticipantType, pollOptionType, pollResultPublication } from "./poll.type";
diff --git a/definitions/cms/page.type.ts b/definitions/cms/page.type.ts
index ed84589..896f7e5 100644
--- a/definitions/cms/page.type.ts
+++ b/definitions/cms/page.type.ts
@@ -1,4 +1,4 @@
-import { enumPageComponentLayouts, enumPageSectionLayouts, templates, enumPageComponentKey, enumPageComponentTemplate, enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { enumPageKey, enumPageTemplate, enumPageLayouts, enumPageComponentLayouts, enumPageSectionLayouts, enumPageComponentKey, enumPageComponentTemplate, enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
 
 export const pageTypes = [
   { title: "None", value: 0 }, // Không xác định
@@ -24,49 +24,6 @@ export const pageTypes = [
 ];
 // 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ẻ
@@ -103,6 +60,7 @@ export const pageDataQuery = [
   { title: "REQUEST", value: "REQUEST" },
 ];
 
+/* PAGE SETTINGS */
 export const pageTaxonomy = [
   { title: "Home", value: "Home" }, // Trang khác
   { title: "Section", value: "Section" }, // Chuyên trang
@@ -121,6 +79,31 @@ export const pageTaxonomy = [
   { title: "Navigation", value: "Navigation" }, // Navigation
 ];
 
+export const pageTemplates = {
+  [enumPageKey.HOME]: [
+    { title: "Trang chủ - Báo Tiền Phong", value: enumPageTemplate[enumPageKey.HOME]['DEFAULT'] },
+    { title: "Trang chủ - Báo Kinh tế đô thị", value: enumPageTemplate[enumPageKey.HOME]['DEFAULT'] },
+  ],
+  [enumPageKey.ARTICLE]: [
+    { title: "Chi tiết bài viết", value: enumPageTemplate[enumPageKey.ARTICLE]['DETAIL'] },
+  ],
+};
+
+export const pageLayouts = {
+  [enumPageTemplate[enumPageKey.HOME]['DEFAULT']]: [
+    { title: "Giới hạn chiều rộng", value: enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT'] },
+    { title: "Không giới hạn chiều rộng", value: enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL'] },
+    { title: "Giới hạn chiều rộng có Quảng cáo", value: enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['BACKGROUND_PAGE'] },
+  ],
+  [enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]: [
+    { title: "Không có", value: enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]['ARTICLE_NONE'] },
+    { title: "Bài viết thường", value: enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]['ARTICLE_NORMAL'] },
+    { title: "Bài viết ngắn", value: enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]['ARTICLE_SHORT'] },
+    { title: "Bài viết dài", value: enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]['ARTICLE_LONG'] },
+    { title: "Bài viết toàn trang", value: enumPageLayouts[enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']]['ARTICLE_PAGE'] },
+  ],
+};
+
 /* SECTION SETTINGS */
 export const pageSectionTaxonomy = [
   { title: "None", value: "None" }, // Phân vùng của Chuyên trang
@@ -244,13 +227,13 @@ export const pageComponentLayouts = {
     { title: "Thẻ bài viết Video Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_VIDEO_HIGHLIGHT'] },
     { title: "Thẻ bài viết Hoa hậu Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_MISS_HIGHLIGHT'] },
   ],
-  [`${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 bài Podcast", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]['DETAIL_PODCAST'] },
-    { title: "Chi tiết bài Video", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]['DETAIL_VIDEO'] },
-    { title: "Chi tiết bài Image", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]['DETAIL_IMAGE'] },
-    { title: "Chi tiết bài eMagazine", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]['DETAIL_EMAGAZINE'] },
-    { title: "Chi tiết bài Inforgraphic", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]['DETAIL_INFOGRAPHIC'] },
+  [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 bài Podcast", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_PODCAST'] },
+    { title: "Chi tiết bài Video", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_VIDEO'] },
+    { title: "Chi tiết bài Image", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_IMAGE'] },
+    { title: "Chi tiết bài eMagazine", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_EMAGAZINE'] },
+    { title: "Chi tiết bài Inforgraphic", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_INFOGRAPHIC'] },
   ],
   /* NAVIGATION */
   [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: [
@@ -267,6 +250,7 @@ export const pageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]: [
     { title: "Thẻ bài viết cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_DEFAULT'] },
     { title: "Thẻ bài viết Audio", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_AUDIO'] },
+    { title: "Thẻ bài viết Video", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_VIDEO'] },
   ],
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: [
     { title: "Hoa hậu - Cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]['MISSES_COLLECTION_DEFAULT'] },
@@ -295,6 +279,6 @@ export const pageComponentLayouts = {
   ],
   [`${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'] }  
+    { title: "Chứng khoán Full Size", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_FULLSIZE'] }
   ],
 };
diff --git a/definitions/enum/index.ts b/definitions/enum/index.ts
index 62a9b7b..96c0a27 100644
--- a/definitions/enum/index.ts
+++ b/definitions/enum/index.ts
@@ -1,9 +1,10 @@
 export { PublishTypes as publishTypes, sharingTypes } from "./publishTypes.enum";
 export { categoryTypes } from "./categoryTypes.enum";
 export {
-    templates, layouts, dataTypes, dataQuery, sectionTypes, sectionTaxonomy, enumPageType, enumPageSectionLayouts, enumPageComponentLayouts, enumPageComponentTemplates, enumPageComponentStaticChild,
+    dataTypes, dataQuery, sectionTypes, sectionTaxonomy, enumPageType, enumPageSectionLayouts, enumPageComponentLayouts, enumPageComponentTemplates, enumPageComponentStaticChild,
     dataTypeSort, dataTypeKeyInSort, dataTypeKeyInWith, dataSelectQuery, dataTypeTTL, dataMethodRequest, dataDesignLayout, dataBorderDesign, dataHideDesign, dataFontWeightDesign, dataPaddingDesign,
-    enumPageComponentKey, enumPageComponentTemplate, dataStaticType, enumPageSectionKey, enumPageSectionTemplate, enumPageComponentDefaultSetting
+    enumPageComponentKey, enumPageComponentTemplate, dataStaticType, enumPageSectionKey, enumPageSectionTemplate, enumPageComponentDefaultSetting, enumPageComponentDefaultStyle,
+    enumPageKey, enumPageTemplate, enumPageLayouts
 } from "./page.enum";
 export { enumStatus } from "./status.enum";
 export { actionCommands } from "./actionCommands.enum";
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index 90d7cf1..589b130 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -1,33 +1,3 @@
-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",
@@ -86,34 +56,26 @@ export const enumPageType = {
   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 dataTypeKeyInSort = [
+  { title: "Thời gian tạo", value: "CreatedOn" },
+  { title: "Lượt xem", value: "Views" },
+  { title: "Lượt chia sẻ", value: "Shares" },
+];
+
+export const dataTypeSort = {
+  Views: [
+    { title: "Tăng dần", value: "-" },
+    { title: "Giảm dần", value: "+" },
+  ],
+  Shares: [
+    { title: "Tăng dần", value: "-" },
+    { title: "Giảm dần", value: "+" },
+  ],
+  CreatedOn: [
+    { title: "Mới nhất", value: "-" },
+  ]
 };
 
-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" },
@@ -192,6 +154,56 @@ export const enumPageComponentStaticChild = {
   DEFAULT: "Default", // Chuyên trang
 };
 
+/* PAGE SETTINGS */
+// KHÔNG ĐƯỢC XÓA KEY - BIẾN này
+export const enumPageKey = {
+  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 enumPageTemplate = {
+  [enumPageKey.HOME]: {
+    'DEFAULT': "TYPE:Default",
+  },
+  [enumPageKey.ARTICLE]: {
+    'DETAIL': "TYPE:Article_Detail",
+  },
+};
+
+export const enumPageLayouts = {
+  /* Home */
+  [`${enumPageTemplate[enumPageKey.HOME]['DEFAULT']}`]: {
+    'DEFAULT': 'TYPE:Center_Page',
+    'FULL': 'TYPE:Full_Page',
+    // 'CENTER_PAGE': 'TYPE:Center_Page',
+    'BACKGROUND_PAGE': 'TYPE:Background_Page'
+  },
+  [`${enumPageTemplate[enumPageKey.ARTICLE]['DETAIL']}`]: {
+    'ARTICLE_NONE': 'TYPE:ARTICLE_NONE',
+    'ARTICLE_NORMAL': 'TYPE:ARTICLE_NORMAL',
+    'ARTICLE_SHORT': 'TYPE:ARTICLE_SHORT',
+    'ARTICLE_LONG': 'TYPE:ARTICLE_LONG',
+    'ARTICLE_PAGE': 'TYPE:ARTICLE_PAGE',
+  },
+};
 
 /* SECTION SETTINGS */
 // KHÔNG ĐƯỢC XÓA KEY - BIẾN này
@@ -293,6 +305,26 @@ export const enumPageComponentKey = {
   FIGURE: 'Figure', // Figure
 };
 
+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 enumPageComponentTemplate = {
   [enumPageComponentKey.ARTICLE]: {
     'ARTICLE_CARD': "TYPE:Card",
@@ -354,6 +386,7 @@ export const enumPageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]: {
     'ARTICLE_COLLECTION_DEFAULT': "TYPE:Article_Collection_Default",
     'ARTICLE_COLLECTION_AUDIO': "TYPE:Article_Collection_Audio",
+    'ARTICLE_COLLECTION_VIDEO': "TYPE:Article_Collection_Video",
   },
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: {
     'MISSES_COLLECTION_DEFAULT': "TYPE:Category_Collection_MISS_Default",
@@ -386,6 +419,7 @@ export const enumPageComponentLayouts = {
   },
 };
 
+
 const defaultArticle = {
   WidthImg: 40,
   layout: "column",
@@ -418,6 +452,9 @@ export const enumPageComponentDefaultSetting = {
     "TYPE:Card_Audio": defaultArticleAudio,
     "TYPE:Card_Video": defaultArticleVideo,
     "TYPE:Card_VideoHightLight": defaultArticleVideoHightLight,
+    "TYPE:Card_MissHightLight": {
+      background: "rgba(255, 93, 2, 0.7)"
+    }
   },
   [enumPageComponentKey.COLLECTION]: {
     "TYPE:Article_Collection_Default": {
@@ -436,7 +473,11 @@ export const enumPageComponentDefaultSetting = {
       defaultFontSizeTitle: 16,
       defaultFontWeightTitle: 600,
       ...defaultArticleAudio
-    }
+    },
+    "TYPE:Category_Collection_MISS_Default": {
+      background: "rgba(255, 93, 2, 0.7)"
+    },
+    "TYPE:Article_Collection_Video": { column: 4 }
   },
   [enumPageComponentKey.SECTION]: {
     "TYPE:Article_Section_Default": {
@@ -465,4 +506,58 @@ export const enumPageComponentDefaultSetting = {
       defaultFontWeightTitle: 500,
     },
   }
+}
+export const enumPageComponentDefaultStyle = {
+  [enumPageComponentKey.ARTICLE]: {
+    "TYPE:Card_Default": `#cpn_[] {}
+#cpn_[] .article-title {}
+#cpn_[] .article-time {}
+#cpn_[] .article-intro {}
+#cpn_[] .article-thumbnail {}`,
+
+    "TYPE:Card_Audio": `#cpn_[] {}
+#cpn_[] .article-title {}`,
+    "TYPE:Card_Video": ``,
+
+    "TYPE:Card_VideoHightLight": `#cpn_[] {}
+#cpn_[] .article-title {}
+#cpn_[] .article-intro {}
+#cpn_[] .article-thumbnail {}`,
+
+    "TYPE:Card_MissHightLight": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-thumbnail{}
+#cpn_[] .article-title{}`
+  },
+  [enumPageComponentKey.COLLECTION]: {
+    "TYPE:Article_Collection_Default": `#cpn_[] {} 
+#cpn_[] article{}
+#cpn_[] .article-thumbnail img{}
+#cpn_[] .article-title{}
+#cpn_[] .article-intro{}`,
+
+    "TYPE:Article_Collection_Audio": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-title {}`,
+
+    "TYPE:Category_Collection_MISS_Default": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-thumbnail{}
+#cpn_[] .article-title{}`,
+    "TYPE:Article_Collection_Video": ""
+  },
+  [enumPageComponentKey.SECTION]: {
+    "TYPE:Article_Section_Default": `#cpn_[] {} 
+#cpn_[] article{}
+#cpn_[] .article-thumbnail img{}
+#cpn_[] .article-title{}
+#cpn_[] .article-intro{}`
+  },
+  [enumPageComponentKey.CATEGORY]: {
+    "TYPE:Category_Vertical": `#cpn_[] {}
+#cpn_[] .category h3{}`,
+
+    "TYPE:Default": `#cpn_[] {}
+#cpn_[] .category h3{}`,
+  }
 }
\ No newline at end of file
diff --git a/pages/[categories]/index.vue b/pages/[categories]/index.vue
index 43916fb..b0bf707 100644
--- a/pages/[categories]/index.vue
+++ b/pages/[categories]/index.vue
@@ -25,7 +25,7 @@ useHead({
 
 <template>
   <main class="h-screen" v-if="asycnCurrentPage">
-    <DynamicTemplate :settings="asycnCurrentPage.settings">
+    <DynamicTemplate :page="asycnCurrentPage" :settings="asycnCurrentPage.settings">
         <DynamicSection
           v-for="(section, index) in asycnSectionPublished"
           :key="index"
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index c84ea73..ffbda4c 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -75,7 +75,7 @@ useSeoMeta({
 
 <template>
   <main class="h-screen" v-if="asycnCurrentPage">
-    <DynamicTemplate :settings="asycnCurrentPage.settings">
+    <DynamicTemplate :page="asycnCurrentPage" :settings="asycnCurrentPage.settings">
         <DynamicSection
           v-for="(section, index) in asycnSectionPublished"
           :key="index"
diff --git a/pages/index.vue b/pages/index.vue
index 46c2b05..eaeaba9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -29,7 +29,7 @@ useHead({
 
 <template>
   <main class="h-screen" v-if="asycnCurrentPage">
-    <DynamicTemplate :settings="asycnCurrentPage.settings">
+    <DynamicTemplate :page="asycnCurrentPage" :settings="asycnCurrentPage.settings">
         <DynamicSection
           class="mb-10"
           v-for="(section, index) in asycnSectionPublished"