From a756c91bd0645108139fef052aed8172ff2802ef Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 5 Jul 2024 13:05:21 +0700
Subject: [PATCH] feat: widget

---
 .../templates/others/stocks/334x641.vue       |  11 +-
 .../templates/others/stocks/Fullsize.vue      |  55 +++
 components/widget/JSwidget.vue                |  12 +-
 components/widget/index.txt                   |  33 ++
 definitions/cms/page.type copy.ts             | 232 -------------
 definitions/enum/page.enum copy.ts            | 316 ------------------
 definitions/enum/page.enum.ts                 |   1 +
 package.json                                  |   1 +
 8 files changed, 103 insertions(+), 558 deletions(-)
 create mode 100644 components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue
 create mode 100644 components/widget/index.txt
 delete mode 100644 definitions/cms/page.type copy.ts
 delete mode 100644 definitions/enum/page.enum copy.ts

diff --git a/components/dynamic-page/page-component/templates/others/stocks/334x641.vue b/components/dynamic-page/page-component/templates/others/stocks/334x641.vue
index 8020998..bfd58ca 100644
--- a/components/dynamic-page/page-component/templates/others/stocks/334x641.vue
+++ b/components/dynamic-page/page-component/templates/others/stocks/334x641.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
+  import nanoid from 'nanoid';
   import JSWidget from '@/components/widget/JSwidget.vue';
 
   const widgetOptions = {
     "locale": "vi",
+    "width": "350px",
+    "height": "250px",
     "price_line_color": "#71BDDF",
     "grid_color": "#999999",
     "label_color": "#999999",
-    "width": "350px",
-    "height": "250px"
   }
 </script>
 <template>
   <div>
     <JSWidget 
-      CONTAINER_ID="default_widget_[123123]" 
-      SCRIPT_ID="12312312" 
+      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :SCRIPT_ID="nanoid(10)" 
       SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
       :options="widgetOptions" 
       widgetKey="FireAnt" 
@@ -24,8 +25,6 @@
 <style lang="scss" scoped>
 div {
   width: 100%;
-  height: 200px;
-  background-color: #ededed;
   font-size: 24px;
   display: flex;
   align-items: center;
diff --git a/components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue b/components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue
new file mode 100644
index 0000000..8cbddbc
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue
@@ -0,0 +1,55 @@
+<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"
+        }
+    ],
+    "showSymbolLogo": true,
+    "isTransparent": false,
+    "displayMode": "adaptive",
+    "colorTheme": "dark",
+    "locale": "en"
+    }
+</script>
+
+<template>
+  <div>
+    <JSWidget 
+      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :SCRIPT_ID="nanoid(10)" 
+      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" 
+      :options="widgetOptions" 
+      widgetKey="TradingView" 
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/components/widget/JSwidget.vue b/components/widget/JSwidget.vue
index 3041aa8..b92c949 100644
--- a/components/widget/JSwidget.vue
+++ b/components/widget/JSwidget.vue
@@ -45,7 +45,7 @@
       const script = document.createElement('script');
       script.id = props.SCRIPT_ID;
       script.type = 'text/javascript';
-      script.async = true;
+      // script.async = true;
       script.src = props.SCRIPT_SRC;
       script.onload = onload;
       document.getElementsByTagName('head')[0].appendChild(script);
@@ -60,11 +60,15 @@
     onMounted(async () => {
       await Object.assign(widgets, { 
         FireAnt: {
-          script: () => new window.FireAnt.MarketsWidget(Object.assign({ container_id: props.CONTAINER_ID }, props.options)),
+          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));
-      // instance.proxy.$forceUpdate();
     })
 </script>
 
diff --git a/components/widget/index.txt b/components/widget/index.txt
new file mode 100644
index 0000000..458c1ae
--- /dev/null
+++ b/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>
diff --git a/definitions/cms/page.type copy.ts b/definitions/cms/page.type copy.ts
deleted file mode 100644
index 89865c4..0000000
--- a/definitions/cms/page.type copy.ts	
+++ /dev/null
@@ -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'] }
-  ],
-};
diff --git a/definitions/enum/page.enum copy.ts b/definitions/enum/page.enum copy.ts
deleted file mode 100644
index 7917c72..0000000
--- a/definitions/enum/page.enum copy.ts	
+++ /dev/null
@@ -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",
-  },
-
-};
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index e864452..e103342 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -381,6 +381,7 @@ export const enumPageComponentLayouts = {
   },
   [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: {
     'STOCK_DEFAULT': "TYPE:Stock_Default",
+    'STOCK_FULLSIZE': "TYPE:Stock_Fullsize",
   },
 };
 
diff --git a/package.json b/package.json
index cc30c8c..7500579 100644
--- a/package.json
+++ b/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",