From 76d46281000cd35d26321028358547dde66bcd23 Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 5 Jul 2024 09:48:34 +0700
Subject: [PATCH] feat: fix type

---
 .../templates/articles/cards/Audio.vue        |  2 +-
 .../templates/articles/cards/Card.vue         |  2 +-
 .../templates/articles/cards/Video.vue        |  2 +-
 .../articles/cards/VideoBackground.vue        |  2 +-
 .../templates/articles/details/General.vue    |  2 +-
 .../categories/categories/Default.vue         |  2 +-
 .../categories/categories/Vertical.vue        |  2 +-
 .../templates/collections/articles/Audio.vue  |  2 +-
 .../collections/articles/Default.vue          |  2 +-
 .../page-component/templates/others/index.ts  |  2 +-
 .../page-component/templates/others/index.vue |  4 +-
 .../others/securities/Securities.vue          | 15 ----
 .../templates/others/securities/index.ts      |  1 -
 .../templates/others/stocks/334x641.vue       | 34 +++++++++
 .../templates/others/stocks/index.ts          |  1 +
 .../others/{securities => stocks}/index.vue   |  6 +-
 .../templates/sections/articles/Default.vue   |  2 +-
 .../layouts/articles/details/Default.vue      |  1 -
 components/widget/JSwidget.vue                | 75 +++++++++++++++++++
 definitions/enum/page.enum.ts                 |  6 +-
 pages/index.vue                               |  2 +-
 server/models/dynamic-page/index.ts           |  6 +-
 22 files changed, 133 insertions(+), 40 deletions(-)
 delete mode 100644 components/dynamic-page/page-component/templates/others/securities/Securities.vue
 delete mode 100644 components/dynamic-page/page-component/templates/others/securities/index.ts
 create mode 100644 components/dynamic-page/page-component/templates/others/stocks/334x641.vue
 create mode 100644 components/dynamic-page/page-component/templates/others/stocks/index.ts
 rename components/dynamic-page/page-component/templates/others/{securities => stocks}/index.vue (77%)
 create mode 100644 components/widget/JSwidget.vue

diff --git a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
index 4dbbbbf..e9bd865 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+++ b/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(() => {
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Card.vue b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
index dd3b594..2d05fd0 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Card.vue
+++ b/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(() => {
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Video.vue b/components/dynamic-page/page-component/templates/articles/cards/Video.vue
index 2da9654..c051e02 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Video.vue
+++ b/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(() => {
diff --git a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
index 913ed2c..01e21e1 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
+++ b/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(() => {
diff --git a/components/dynamic-page/page-component/templates/articles/details/General.vue b/components/dynamic-page/page-component/templates/articles/details/General.vue
index c3d2fbf..93ea84c 100644
--- a/components/dynamic-page/page-component/templates/articles/details/General.vue
+++ b/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,
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Default.vue b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
index 1af65d3..e07f4b4 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
@@ -5,7 +5,7 @@ import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } f
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const designObject = computed(() => {
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
index 647db56..b2c7674 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
@@ -5,7 +5,7 @@ import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } f
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
-  label?: string;
+  label?: any;
 }>();
 
 const SETTING_OPTIONS = {
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
index 489f4c0..d36079a 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
@@ -8,7 +8,7 @@ const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
   layout?: string;
-  label?: string;
+  label?: any;
   content?: any;
 }>();
 
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Default.vue b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
index 38bb162..c70b2a4 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
@@ -8,7 +8,7 @@ const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
   layout?: string;
-  label?: string;
+  label?: any;
   content?: any;
 }>();
 
diff --git a/components/dynamic-page/page-component/templates/others/index.ts b/components/dynamic-page/page-component/templates/others/index.ts
index a000827..5b88cfc 100644
--- a/components/dynamic-page/page-component/templates/others/index.ts
+++ b/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'
\ No newline at end of file
+export { default as Other_Stock } from './stocks/index.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/others/index.vue b/components/dynamic-page/page-component/templates/others/index.vue
index 72700c5..8b8fe66 100644
--- a/components/dynamic-page/page-component/templates/others/index.vue
+++ b/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);
diff --git a/components/dynamic-page/page-component/templates/others/securities/Securities.vue b/components/dynamic-page/page-component/templates/others/securities/Securities.vue
deleted file mode 100644
index 63a2c83..0000000
--- a/components/dynamic-page/page-component/templates/others/securities/Securities.vue
+++ /dev/null
@@ -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>
diff --git a/components/dynamic-page/page-component/templates/others/securities/index.ts b/components/dynamic-page/page-component/templates/others/securities/index.ts
deleted file mode 100644
index cbe0931..0000000
--- a/components/dynamic-page/page-component/templates/others/securities/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Securities_Default } from './Securities.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/others/stocks/334x641.vue b/components/dynamic-page/page-component/templates/others/stocks/334x641.vue
new file mode 100644
index 0000000..8020998
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/others/stocks/334x641.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "locale": "vi",
+    "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" 
+      SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
+      :options="widgetOptions" 
+      widgetKey="FireAnt" 
+    />
+  </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>
diff --git a/components/dynamic-page/page-component/templates/others/stocks/index.ts b/components/dynamic-page/page-component/templates/others/stocks/index.ts
new file mode 100644
index 0000000..714346f
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/others/stocks/index.ts
@@ -0,0 +1 @@
+export { default as Stock_Default } from './334x641.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/others/securities/index.vue b/components/dynamic-page/page-component/templates/others/stocks/index.vue
similarity index 77%
rename from components/dynamic-page/page-component/templates/others/securities/index.vue
rename to components/dynamic-page/page-component/templates/others/stocks/index.vue
index 2e9367c..7cc4777 100644
--- a/components/dynamic-page/page-component/templates/others/securities/index.vue
+++ b/components/dynamic-page/page-component/templates/others/stocks/index.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Stock_Default } 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,
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
@@ -32,3 +31,4 @@ const GET_PROPS = computed(() => {
 <template>
   <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
 </template>
+../stocks/index
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/sections/articles/Default.vue b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
index 2aaa76b..1a2ac60 100644
--- a/components/dynamic-page/page-component/templates/sections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
@@ -13,7 +13,7 @@ const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
   component?: any;
-  label?: string;
+  label?: any;
 }>();
 
 const SETTING_OPTIONS = {
diff --git a/components/dynamic-page/page-section/layouts/articles/details/Default.vue b/components/dynamic-page/page-section/layouts/articles/details/Default.vue
index 97d53ca..35273da 100644
--- a/components/dynamic-page/page-section/layouts/articles/details/Default.vue
+++ b/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>
diff --git a/components/widget/JSwidget.vue b/components/widget/JSwidget.vue
new file mode 100644
index 0000000..3041aa8
--- /dev/null
+++ b/components/widget/JSwidget.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        SCRIPT_ID?: any,
+        SCRIPT_SRC?: any,
+        CONTAINER_ID?: any,
+        options?: any,
+
+        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;
+      document.getElementsByTagName('head')[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(Object.assign({ container_id: props.CONTAINER_ID }, props.options)),
+          key: window.FireAnt
+        }})
+      appendScript(initWidget(props.widgetKey));
+      // instance.proxy.$forceUpdate();
+    })
+</script>
+
+<template>
+  <ClientOnly>
+    <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
+  </ClientOnly>
+</template>
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index 604d1c8..4d74e56 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -312,7 +312,7 @@ export const enumPageComponentTemplate = {
   },
   [enumPageComponentKey.OTHER]: {
     "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
+    "STOCK": "TYPE:Stock"
   },
 };
 
@@ -371,8 +371,8 @@ 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",
   },
 };
 
diff --git a/pages/index.vue b/pages/index.vue
index e6a7581..46c2b05 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -31,7 +31,7 @@ useHead({
   <main class="h-screen" v-if="asycnCurrentPage">
     <DynamicTemplate :settings="asycnCurrentPage.settings">
         <DynamicSection
-        class="mb-10"
+          class="mb-10"
           v-for="(section, index) in asycnSectionPublished"
           :key="index"
           :settings="section.settings"
diff --git a/server/models/dynamic-page/index.ts b/server/models/dynamic-page/index.ts
index ab33303..6512f4e 100644
--- a/server/models/dynamic-page/index.ts
+++ b/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