fea: navigation

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/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/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/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(() => {

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 = {

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;
 }>();
 

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;
 }>();
 

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/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);

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,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>

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

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

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

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 = {

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/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>

definitions/enum/page.enum.ts

@@ -317,7 +317,7 @@ export const enumPageComponentTemplate = {
   },
   [enumPageComponentKey.OTHER]: {
     "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
+    "STOCK": "TYPE:Stock"
   },
 };
 
@@ -379,8 +379,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",
   },
 };
 

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"

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