thainv-dev: Fix emagazine

assets/styles/style.scss

@@ -208,6 +208,11 @@ div[layout="ARTICLE_PAGE"] {
     }
 }
 
+.emagazine {
+    h1,h2,h3,h4,h5,h6,span,em {
+        @apply w-full max-w-660px mx-auto;
+    }
+}
 .detail-default {
     p {
         @apply  text-18px font-raleway leading-180% my-10px;

components/article/immerse/Poll.vue

@@ -15,14 +15,14 @@ const store = reactive({
 });
 const { currentPoll } = storeToRefs(store.poll);
 const { currentPollOptions } = storeToRefs(store.pollOptions);
-const { currentPollResponses } = storeToRefs(store.pollResponse);
+// const { currentPollResponses } = storeToRefs(store.pollResponse);
 const poll = reactive<Poll | any>({});
 const options = ref<PollOption[] | any[]>([]);
 
 async function loadData() {
   await store.poll.fetchById(String(props.dataId));
   await store.pollOptions.fetchByPollId(String(props.dataId));
-  await store.pollResponse.fetchByPollId(String(props.dataId));
+  // await store.pollResponse.fetchByPollId(String(props.dataId));
   assignData();
 }
 
@@ -78,14 +78,17 @@ async function submitVote() {
   switch (poll.type) {
     case 1:
       if(singleSelect.value >= 0) {
-        totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
-        options?.value?.forEach((option: PollOption | any) => {
-        if (option.id === singleSelect.value) {
-          option.responseCount = (option.responseCount ?? 0) + 1;
+        const result = await store.pollResponse.create({ optionId: singleSelect.value })
+        if(result?.id) {
+          totalResponses.value = options.value?.reduce((sum, option) => sum + Number(option.responseCount ?? 0), 1);
+          options?.value?.forEach((option: PollOption | any) => {
+          if (option.id === singleSelect.value) {
+            option.responseCount = (option.responseCount ?? 0) + 1;
+          }
+          option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
+          alreadyVoted.value = true
+        });
         }
-        option.percentage = Number(((option.responseCount / totalResponses.value) * 100).toFixed(1));
-        alreadyVoted.value = true
-      });
       }
   }
 }

components/dynamic-page/page-component/AssignComponent.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
+const contentParse = computed(() => (currentPage.value.content ? JSON.parse(currentPage.value.content) : {}));
 const defineTypeRecusive = {
   TOP_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT'],
   BOTTOM_NAVIGATION: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT'],
@@ -16,14 +17,22 @@ const findDataPosition = computed<any>(() => {
   let result = {};
   switch (props.type) {
     case defineTypeRecusive.TOP_NAVIGATION:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
-        return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
-      });
+    if (contentParse.value.navigationTop) {
+        result =
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationTop;
+          });
+      }
       break;
     case defineTypeRecusive.BOTTOM_NAVIGATION:
-      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
-        return component.taxonomy === enumPageComponentKey.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
-      });
+    if (contentParse.value.navigationBottom) {
+        result =
+          currentPage.value.components &&
+          currentPage.value.components.find((component: any) => {
+            return component.id === contentParse.value.navigationBottom;
+          });
+      }
       break;
     default:
       result = {};

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

@@ -9,6 +9,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -51,8 +52,10 @@ const parseData = computed(() => {
 </script>
 
 <template>
-  <article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
-    <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
+  <article :id="`cpn_${props.component.id}`" class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
+    <nuxt-link :to="`/bai-viet/${parseData?.slug}`" class="article-thumbnail">
+      <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
+    </nuxt-link>
     <div class="card-audio__content">
       <span class="flex justify-center">
         <template v-if="['Image', 'Infographics', 'Emagazine'].includes(type)">
@@ -92,12 +95,18 @@ const parseData = computed(() => {
   padding-bottom: calc((16 / 9) * 100%);
   overflow: hidden;
 
-  img {
+  .article-thumbnail {
     position: absolute;
     height: 100%;
     width: 100%;
-    object-fit: cover;
+
     z-index: 1;
+
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
   .card-audio__content {

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

@@ -10,6 +10,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -27,11 +28,12 @@ const parseData = computed(() => {
 <template>
   <article
   v-if="parseData"
+  :id="`cpn_${props.component.id}`"
     class="basic-article border-custom"
     :class="LAYOUT_PARSE['article_Class']"
     :style="LAYOUT_PARSE['article']"
   >
-    <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
+    <div class="basic-article_thumbnail article-thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
       <template v-if="parseData">
         <nuxt-link :to="`${parseData.code}`">
           <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
@@ -55,19 +57,19 @@ const parseData = computed(() => {
         <span v-else class="empty-block" style="height: 8px"></span>
       </h3>
       <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="[LAYOUT_PARSE['time_Class'], 'article-time']">{{
           formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
         }}</span>
         <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
       </div>
-      <p class="mb-0 line-clamp-5" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+      <p class="mb-0 line-clamp-5 article-intro" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
         <template v-if="parseData">
           {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
         </template>
         <span v-else class="empty-block" style="height: 5px"></span>
       </p>
       <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
+        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="[LAYOUT_PARSE['time_Class'], 'article-time']">{{
           formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
         }}</span>
         <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>

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

@@ -10,6 +10,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: string;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -44,14 +45,21 @@ const drop = (e: any) => {
 </script>
 
 <template>
-  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
+  <article :id="`cpn_${props.component.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
     <div class="article_miss">
       <template v-if="parseData">
-        <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
+          <nuxt-link :to="`/bai-viet/${parseData.slug}`">
+            <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
+          </nuxt-link>
+
+
         <div class="article_miss_content" :style="LAYOUT_PARSE['content']">
+          <nuxt-link :to="`/bai-viet/${parseData.slug}`">
+          
           <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
             {{ parseData.title?.replace(/<[^>]+>/g, "") }}
           </h3>
+          </nuxt-link>
         </div>
       </template>
       <div v-else class="empty-box"></div>

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

@@ -8,6 +8,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -24,6 +25,7 @@ const parseData = computed(() => {
 
 <template>
   <article
+  :id="`cpn_${props.component.id}`"
     class="basic-article border-custom"
     :class="LAYOUT_PARSE['article_Class']"
     :style="LAYOUT_PARSE['article']"

components/dynamic-page/page-component/templates/articles/details/Emagazine.vue

@@ -12,18 +12,83 @@ console.log(currentArticle.value, 'currentArticle')
 </script>
 <template>
   <div  class="overflow-hidden emagazine">
-  <!-- bổ sung sau -->
-    <!-- <img :src="currentArticle.thumbnail" alt="" class="w-full object-cover">
-
-    <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
-    
-    </div> -->
-
-    <div v-html="currentArticle.detail"></div>
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
+    <div class="article-detail" v-html="currentArticle.detail"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
 .content {
   width: auto;
 }

components/dynamic-page/page-component/templates/articles/details/Infographic.vue

@@ -18,13 +18,83 @@ console.log(currentArticle.value, 'currentArticle')
     <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
     
     </div> -->
-
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
     <div v-html="currentArticle.detail"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
 
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
 .center-y {
   width: auto;
 }

components/dynamic-page/page-component/templates/articles/details/Video.vue

@@ -29,7 +29,7 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
         <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
       </li>
     </ul>
-
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
     <div class="video-content" v-html="currentArticle.detail"></div>
   </div>
 </template>

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

@@ -6,6 +6,7 @@ const _props = defineProps<{
   dataResult?: any;
   dataQuery?: string;
   label?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div>

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

@@ -6,6 +6,7 @@ const _props = defineProps<{
   dataResult?: any;
   dataQuery?: string;
   label?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div class="category-content">

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

@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: any;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"

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

@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: any;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"

components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue

@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: string;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -66,10 +67,10 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+  <section :id="`cpn_${_props.component.id}`" class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
     <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
       <DynamicComponent
-        class="abc"
+        class="box"
         :settings="{
           template: SETTING_OPTIONS.TEMPLATE,
           layout: SETTING_OPTIONS.LAYOUT,
@@ -141,7 +142,7 @@ const mapActivesToItems = (index: number) => {
       padding-top: 241px;
     }
 
-    & > .abc {
+    & > .box {
       position: absolute;
       top: 0;
       width: 100%;

components/dynamic-page/page-component/templates/navigations/bottoms/Default.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { isEmpty } from "@/utils/lodash";
-import { nanoid } from "nanoid"
+import { nanoid } from "nanoid";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
 import { buildTree } from "@/utils/recusive";
@@ -15,16 +15,17 @@ const _props = defineProps<{
   <div class="px-4 mt-4">
     <div class="nav-container">
       <template v-if="_props.content">
-        <div v-for="item, index in buildTree(_props.content)" :key="index" class="nav-items-box">
+        <div v-for="(item, index) in buildTree(_props.content)" :key="index" class="nav-items-box">
           <div class="submenu-container">
-            <h4 class="" >{{ item.title }}</h4>
+            <nuxt-link :to="`/${item.slug}`"
+              ><h4 class="font-raleway">{{ item.title }}</h4></nuxt-link
+            >
             <div class="ml-2">
-              <h5 
-                v-for="_item, _index in item.childs ? item.childs : []" 
-                :key="_index"
+              <nuxt-link v-for="(_item, _index) in item.childs ? item.childs : []" :key="_index" :to="`/${_item.slug}`"
+                ><h5 class="font-raleway">
+                  {{ _item.title }}
+                </h5></nuxt-link
               >
-                {{ _item.title }}
-              </h5>
             </div>
           </div>
         </div>

components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue

@@ -20,7 +20,7 @@ const setGlobalState = (id: any) => {
             <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                 <div class="navigation-submenu">
                     <div class="navigation_title">
-                        <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                        <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" />
@@ -31,7 +31,7 @@ const setGlobalState = (id: any) => {
                 <div class="navigation-submenu">
                     <div class="position-relative ps-3">
                         <div class="navigation_title ">
-                            <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                            <nuxt-link :to="`/${record?.slug}`" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
                         </div>
                     </div>
                     <div class="full-layout dropdown-container">
@@ -45,7 +45,7 @@ const setGlobalState = (id: any) => {
             </template>
             <template v-else>
                 <div class="navigation_title navigation-item" >
-                    <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                    <nuxt-link :to="`/${record?.slug}`" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
                 </div>
             </template>
         </div>

components/dynamic-page/page-section/layouts/articles/details/Default.vue

@@ -83,7 +83,11 @@ const mapActivesToItems = (index: number) => {
   return {};
 };
 
-const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+const currentCategoryTree = ref<any []>([]);
+if(currentArticle.value?.categoryId) {
+  console.log('urrentArticle.value?.categoryId', categoryTree.value)
+  currentCategoryTree.value = findElementPathById(categoryTree.value, currentArticle.value.categoryId)
+}
 function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
   for (const category of categories) {
     const currentPath = [...path, { title: category.title, code: category.code }];
@@ -99,15 +103,13 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
   }
   return null;
 }
-
-console.log(currentArticle.value ,'currentArticle')
 </script>
 
 <template>
   <div class="section_layout border-custom four_col_layout" :style="LAYOUT_PARSE['div.section_layout']">
     <div class="left">
       <div>
-        <div class="audio">
+        <!-- <div class="audio">
           <div class="play">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -123,7 +125,7 @@ console.log(currentArticle.value ,'currentArticle')
           <div class="timeline">
             <input type="range" name="" id="" />
           </div>
-        </div>
+        </div> -->
 
         <div class="buttons">
           <div class="actions">
@@ -189,7 +191,7 @@ console.log(currentArticle.value ,'currentArticle')
           </div>
         </div>
 
-        <div class="tags" v-if="currentArticle.tags">
+        <div class="tags" v-if="currentArticle && currentArticle?.tags">
           <span>
             <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -199,8 +201,8 @@ console.log(currentArticle.value ,'currentArticle')
             </svg>
           </span>
 
-          <ul>
-          <li v-for="(tag, index) in currentArticle.tags">
+          <ul >
+          <li v-for="(tag, index) in currentArticle?.tags">
             <nuxt-link class="font-raleway font-500" :to="`/tag/${tag.code}`">{{ tag.title }}</nuxt-link>
           </li>
           </ul>
@@ -220,38 +222,38 @@ console.log(currentArticle.value ,'currentArticle')
     <div class="content detail-default">
       <div class="content__top">
         <div class="flex justify-between flex-wrap items-center mb-10px">
-          <ul class="flex gap-32px">
+          <ul class="flex gap-32px" v-if="currentCategoryTree?.length">
             <li v-for="( category, index ) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px" >
               <nuxt-link class=" font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
             </li>
           </ul>
 
-          <div v-if="currentArticle.topics" class="pl-20px relative bg-primary inline-block">
-            <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle.topics[0].slug}`">{{ currentArticle.topics[0].title }}</nuxt-link>
+          <div v-if="currentArticle?.topics" class="pl-20px relative bg-primary inline-block">
+            <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle?.topics[0].slug}`">{{ currentArticle?.topics[0].title }}</nuxt-link>
           </div>
         </div>
-         <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle.title" v-html="currentArticle.title"></h2>
+         <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
 
-         <div class="author flex gap-12px my-20px" v-if="currentArticle.authors">
+         <div class="author flex gap-12px my-20px" v-if="currentArticle?.authors">
             <ul class="flex">
-              <li :style="{'z-index': index + 1}" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle.authors" :key="index">
+              <li :style="{'z-index': index + 1}" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle?.authors" :key="index">
                 <nuxt-link :to="`/tac-gia/${author.code}`">
-                  <img :src="author.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full">
+                  <img :src="author?.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full">
                 </nuxt-link>
               </li>
             </ul>
             <div>
               <div class="mt-10px">
-                <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1  ? ', ' : '') }}</nuxt-link>
+                <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle?.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1  ? ', ' : '') }}</nuxt-link>
               </div>
               <div class="text-12px">
-              Xuất bản vào {{ formatDate(currentArticle.publishedOn, 'DD/MM/YYYY | hh:mm') }}
+              Xuất bản vào {{ formatDate(currentArticle?.publishedOn, 'DD/MM/YYYY | hh:mm') }}
               </div>
             </div>
          </div>
 
-         <figure v-if="currentArticle.thumbnail">
-          <img :src="currentArticle.thumbnail" class="w-full " alt="">
+         <figure v-if="currentArticle?.thumbnail">
+          <img :src="currentArticle?.thumbnail" class="w-full " alt="">
          </figure>
       </div>
       <div class="content__bottom" >
@@ -302,11 +304,11 @@ console.log(currentArticle.value ,'currentArticle')
           </div>
 
           <div>
-            <p class="my-10px" v-if="currentArticle.intro" v-html="currentArticle.intro">
+            <p class="my-10px" v-if="currentArticle?.intro" v-html="currentArticle.intro">
             </p>
 
             <!-- <div v-html="currentArticle.detail" class="[&_p_>_span]:!font-raleway [&_p]:mb-10px"></div> -->
-            <component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
+            <component :is="{ template: currentArticle?.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
           </div>
         </div>
         <div class="content__bottom__right">

components/dynamic-page/page/layouts/Default.vue

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

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>

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'

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>

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

components/dynamic-page/page/templates/articles/index.ts

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

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>

components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue

@@ -6,10 +6,8 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 <template>
   <footer id="footer" class="main-footer mt-20">
     <div class="main-footer-container">
-      <div class="footer-centertab grid lg:grid-cols-6">
-        <div class="col-span-1 lg:block hidden"></div>
-        <div class="col-span-5">
-          <div class="footer-navigation-container md:block hidden">
+      <div class="footer-centertab">
+        <div class="footer-navigation-container md:block hidden">
             <div>
               <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
             </div>
@@ -83,14 +81,10 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
               </div>
             </div>
           </div>
-        </div>
       </div>
     </div>
     <div class="footer-bottomtab">
-      <div class="lg:grid-cols-6 grid">
-        <div class="lg:block hidden"></div>
-        <div class="col-span-5">
-          <div class="flex justify-between items-end">
+      <div class="flex justify-between items-end">
             <div class="flex-1 flex md:justify-start justify-center">
               <div>
                 <img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" />
@@ -114,11 +108,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
               <p>Giấy phép số <span class="fw-bold">...</span>, cấp ngày ....</p>
               <p>Cơ quan chủ quản: <span class="fw-bold">....</span></p>
               <p>Cấm sao chép dưới mọi hình thức nếu không có sự chấp thuận bằng văn bản</p>
-              <p>Powered by GCT</p>
+              <p>Powered by VPress</p>
             </div>
           </div>
-        </div>
-      </div>
     </div>
   </footer>
 </template>

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

components/dynamic-page/page/templates/homes/index.ts

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

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>

components/dynamic-page/page/templates/index.ts

@@ -1 +1,2 @@
-export { default as HomeBasic } from './homes/Basic.vue'
+export { default as Home } from './homes/index.vue'
+export { default as Article } from './articles/index.vue'

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}"

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";

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

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";

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,25 +56,6 @@ 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" },
@@ -203,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
@@ -304,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",
@@ -398,6 +419,7 @@ export const enumPageComponentLayouts = {
   },
 };
 
+
 const defaultArticle = {
   WidthImg: 40,
   layout: "column",
@@ -485,7 +507,6 @@ export const enumPageComponentDefaultSetting = {
     },
   }
 }
-
 export const enumPageComponentDefaultStyle = {
   [enumPageComponentKey.ARTICLE]: {
     "TYPE:Card_Default": `#cpn_[] {}

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"

pages/bai-viet/[slug].vue

@@ -9,7 +9,7 @@ import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue"
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 
 const route = useRoute();
-
+const site = useCookie("site")
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
   article: useArticleStore(),
@@ -20,8 +20,9 @@ import { useArticleStore } from '~/stores/articles';
 
 const loadPage = async () => {
 const article = await store.article.getArticleBySlug(String(route.params.slug));
+  site.value = article?.value.siteId
   let isContentType 
-  switch (article.value?.contentType) {
+  switch (article?.value?.contentType) {
     case 1:
       isContentType = 'trang-chi-tiet';
       break;
@@ -75,7 +76,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"

pages/index.vue

@@ -11,12 +11,12 @@ const store = reactive({
 });
 //lấy danh sách categoryTree
 await store.category.fetchBySiteId()
-
+// const site  = useCookie('site')
 const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
-const asycnCurrentPage = data.value.currentPage;
-const asycnSectionPublished = data.value.sectionPublished;
-const asycnComponentPublished = data.value.componentPublished;
-
+const asycnCurrentPage = data.value && data.value.currentPage;
+const asycnSectionPublished = data.value && data.value.sectionPublished;
+const asycnComponentPublished = data.value && data.value.componentPublished;
+// site.value = data.value?.currentPage?.siteId
 useHead({
   title: () => 'Trang chủ',
   description: () => 'Với công nghệ đột phá và giải pháp sáng tạo, Vpress sẽ là đối tác tin cậy của các tòa soạn báo, cùng nhau kiến tạo nên những giá trị bền vững trong kỷ nguyên chuyển đổi số báo chí.',
@@ -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"

server/models/articles/index.ts

@@ -63,9 +63,10 @@ export const getArticleById = async (event : any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const id = event.context.params.id;
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/digital-article/${id}`, {
             headers: new Headers({
-                site: '1' || 1,
+                site: getSite(query.site).toString(),
             }),
         })
 
@@ -79,9 +80,10 @@ export const getArticleBySlug = async (event : any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const slug = event.context.params.slug;
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/digital-article/slug:${slug}`, {
             headers: new Headers({
-                site: '1' || 1,
+                site: getSite(query.site).toString(),
             }),
         })
         return { item }
@@ -93,17 +95,17 @@ export const getArticleBySlug = async (event : any) => {
 export const listArticleCondition = async (event: H3Event) => {
     try {
         const payload = await readBody<any>(event)
-        const { apiUrl } = useRuntimeConfig().public
+        const { apiUrl } = useRuntimeConfig().public;
+        const query = getQuery(event)
         const { items }: any = await $fetch(`${apiUrl}/cms/article/condition`, {
             method: "POST",
             headers: new Headers({
-                site: '1' || 1,
+                site: getSite(query.site).toString(),
             }),
             body: {
                 payload
             }
         })
-        // log(event)
 
         return items
     } catch (error) {

server/models/author.ts

@@ -17,12 +17,13 @@ export  type Author = {
 export const fetchByCode = async (event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
-        const { authorCode }: any = getQuery(event)
+        const { authorCode }: any = getQuery(event);
+        const query = getQuery(event)
         const { items }: any = await $fetch(`${apiUrl}/cms/author/code:${authorCode}`, {
             method: 'GET',
-            headers: {
-                site: 1
-            }
+            headers: new Headers({
+                site: getSite(query.site).toString(),
+            }),
         })
         return items[0]
     } catch (error) {

server/models/category.ts

@@ -28,15 +28,16 @@ export type CategoryTree = Category &  {
   children?: Category[]
 }
 
-export const list = async () => {
+export const list = async (event : H3Event) => {
   try {
     const { site, apiUrl } = useRuntimeConfig().public;    
-
-    const { items }: CategoryTree[] | any = await $fetch(`${apiUrl}/cms/category/tree/site:1`, {
+    const query = getQuery(event)
+    const siteId = getSite(query.site).toString()
+    const { items }: CategoryTree[] | any = await $fetch(`${apiUrl}/cms/category/tree/site:${siteId}`, {
       method: "GET",
-      headers: {
-        site: 1,
-      },
+      headers: new Headers({
+        site: siteId,
+    }),
     });    
     return { items } ;
   } catch (error) {

server/models/dynamic-page/index.ts

@@ -101,11 +101,13 @@ export const getDynamicPageByCode = async (event: any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const slug = event.context.params.slug;
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/page/overview-page/slug:${slug}`, {
             headers: new Headers({
-                site: '1' || 1,
+                site: getSite(query.site).toString(),
             }),
         })
+        console.log(getSite(query.site))
         return item
     } catch (error) {
         handleError(error);
@@ -116,7 +118,12 @@ export const getDynamicPageById = async (event: any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const id = event.context.params.id;
-        const { item }: any = await $fetch(`${apiUrl}/cms/overview-page/${id}`)
+        const query = getQuery(event)
+        const { item }: any = await $fetch(`${apiUrl}/cms/overview-page/${id}`, {
+            headers: new Headers({
+                site: getSite(query.site).toString(),
+            }),
+        })
         return item
     } catch (error) {
         handleError(error);
@@ -126,10 +133,12 @@ export async function getOverviewPageComponentById(event: any) {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { componentId, dataQuery } = getQuery(event)
+        const query = getQuery(event)
         return await $fetch(`${apiUrl}/cms/overview-page-component/${componentId}`, {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
+                site: getSite(query.site).toString(),
             },
             body: dataQuery,
         });

server/models/event.ts

@@ -21,11 +21,12 @@ export const fetchByCode = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { eventCode }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/event/code:${eventCode}`, {
             method: 'GET',
-            headers: {
-                Site: 1
-            }
+            headers: new Headers({
+                site: getSite(query.site).toString(),
+            }),
         })
         return item
     } catch (error) {
@@ -37,11 +38,12 @@ export const fetchById = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { eventId }: any = getQuery(event)
+        const query = getQuery(event);
         const { item }: any = await $fetch(`${apiUrl}/cms/event/${eventId}`, {
             method: 'GET',
-            headers: {
-                Site: 1
-            }
+            headers: new Headers({
+                site: getSite(query.site).toString(),
+            }),
         })
         return item
     } catch (error) {

server/models/poll-option.ts

@@ -1,5 +1,6 @@
 import { H3Event } from 'h3';
 import Base from './base'
+import { useCookie } from 'nuxt/app';
 
 export type PollOption = {
     id?: number; // Mã định danh
@@ -19,11 +20,12 @@ export type PollOption = {
 
         const { apiUrl } = useRuntimeConfig().public
         const { pollId }: any = getQuery(event)
+        const query = getQuery(event)
         const { items }: PollOption[] | any = await $fetch(`${apiUrl}/cms/poll-option/poll:${pollId}`, {
             method: 'GET',
             headers: {
-                site: 1
-            }
+                site: getSite(query.site).toString()
+            },
         })
 
         return items

server/models/poll-response.ts

@@ -1,5 +1,6 @@
 import { H3Event } from 'h3';
 import Base from './base'
+import { useCookie } from 'nuxt/app';
 
 export type PollResponse = {
     id?: number; // Mã định danh
@@ -15,10 +16,11 @@ export const create = async (event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const payload = await readBody<any>(event)
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/poll-response`, {
             method: 'POST',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             },
             body: payload
         })
@@ -32,14 +34,14 @@ export const create = async (event: H3Event) => {
 
 export const fetchByPollId = async (event: H3Event) => {
     try {
-
         const { apiUrl } = useRuntimeConfig().public
         const { pollId }: any = getQuery(event)
+        const query = getQuery(event)
         const { items }: PollResponse[] | any = await $fetch(`${apiUrl}/cms/poll-response/poll:${pollId}`, {
             method: 'GET',
             headers: {
-                site: 1
-            }
+                site: getSite(query.site).toString()
+            },
         })
 
         return items

server/models/poll.ts

@@ -32,10 +32,11 @@ export type Poll = {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { pollId}: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: Poll | any = await $fetch(`${apiUrl}/cms/poll/${pollId}`, {
             method: 'GET',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
 

server/models/quiz.ts

@@ -31,10 +31,11 @@ export type Quiz = {
 
         const { apiUrl } = useRuntimeConfig().public
         const { quizId }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: Quiz | any = await $fetch(`${apiUrl}/cms/quiz/${quizId}`, {
             method: 'GET',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
 

server/models/survey.ts

@@ -31,10 +31,11 @@ export type Survey = {
 
         const { apiUrl } = useRuntimeConfig().public
         const { surveyId }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: Survey | any = await $fetch(`${apiUrl}/cms/survey/${surveyId}`, {
             method: 'GET',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
 

server/models/tag.ts

@@ -7,10 +7,10 @@ export const get = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { code } = getQuery(event)
-
+        const query = getQuery(event)
         const { items }: any = await $fetch(`${apiUrl}/cms/tag/code:${code}`, {
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
         return items
@@ -23,10 +23,11 @@ export const fetchById = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { tagId }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/tag/${tagId}`, {
             method: 'GET',
             headers: {
-                Site: 1
+                Site: getSite(query.site).toString()
             }
         })
         return item

server/models/topic.ts

@@ -12,10 +12,10 @@ export const listPaging = async (event: H3Event) => {
         if(categoryId) {
             query.value = { categoryId }
         }
-
+        const gQuery = getQuery(event)
         const { items, total }: any = await $fetch(`${apiUrl}/cms/topic/condition/paging:${page}-${limit}/sorting:${sort}`,{
             method: 'POST',
-            headers: {site: 1},
+            headers: {site: getSite(gQuery.site).toString()},
             body:{ ...query.value }
         })
         
@@ -29,10 +29,11 @@ export const fetchByCode = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { topicCode }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/topic/code:${topicCode}`, {
             method: 'GET',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
 
@@ -46,10 +47,11 @@ export const fetchById = async(event: H3Event) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const { topicId }: any = getQuery(event)
+        const query = getQuery(event)
         const { item }: any = await $fetch(`${apiUrl}/cms/topic/${topicId}`, {
             method: 'GET',
             headers: {
-                site: 1
+                site: getSite(query.site).toString()
             }
         })
 

server/utils/getSite.ts

@@ -0,0 +1,17 @@
+export const getSite = (dns : any) => {
+    const SITE = {
+        DEFAULT: 1,
+        PORTAL2: 'portal2',
+    }
+
+    let site = null;
+    switch (dns) {
+        case SITE.PORTAL2: 
+            site = 2;
+            break;
+        default:
+            site = 1;
+            break;
+    }
+    return site;
+}

stores/articles.ts

@@ -5,9 +5,16 @@ export const useArticleStore = defineStore("article", () => {
     const currentArticle = ref<any>({});
     const currentArticles = ref<any[]>([])
 
+    const url : any = useRequestURL();
+    const host = url.hostname.split('.')[0];
+
     const getArticleById = async (id: string | number) => {
         try {
-            const { data } = await useFetch(`/api/articles/get-by-id/${id}`)
+            const { data } = await useFetch(`/api/articles/get-by-id/${id}`, {
+                query: {
+                    site: host
+                }
+            })
             currentArticle.value = {}
             currentArticle.value = data.value.item
         } catch (error: any) { }
@@ -15,7 +22,11 @@ export const useArticleStore = defineStore("article", () => {
 
     const getArticleBySlug = async (slug: string) => {
         try {
-            const article = await $fetch(`/api/articles/get-by-slug/${slug}`)
+            const article = await $fetch(`/api/articles/get-by-slug/${slug}`, {
+                query: {
+                    site: host
+                }
+            })
             currentArticle.value = {}
             currentArticle.value = article?.item
 
@@ -27,7 +38,10 @@ export const useArticleStore = defineStore("article", () => {
         try {
             const { data: articles } = await useFetch(`/api/articles/condition`, {
                 method: 'POST',
-                body: condition
+                body: condition,
+                query: {
+                    site: host
+                  }
             })
         } catch (error: any) {
 

stores/category.ts

@@ -83,9 +83,14 @@ import type { Category, CategoryTree } from "~/server/models/category";
 export const useCategoryStore = defineStore('usecategorystore', () => {
   const categoryTree = shallowRef<CategoryTree[]>([])
   const currentCategoryTree = shallowRef<any[]>([])
-
+  const url : any = useRequestURL();
+  const host = url.hostname.split('.')[0];
   async function fetchBySiteId() {
-    const { data }: any = await useFetch(`/api/services/category-tree`)
+    const { data }: any = await useFetch(`/api/services/category-tree`,{
+      query: {
+        site: host
+      }
+    })
     categoryTree.value =  data.value.items
     return categoryTree.value
   }

stores/dynamic-page.ts

@@ -1,10 +1,14 @@
 import { defineStore, acceptHMRUpdate } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
+
 export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
     const currentPage = ref<any>({});
     const sectionPublished = ref<any[]>([]);
     const componentPublished = ref<any[]>([]);
 
+    const url : any = useRequestURL();
+    const host = url.hostname.split('.')[0];
+
     const setSectionPublished = () => {
       const exsitsTemplate = ['None']
       const contentArr: any = [];
@@ -45,7 +49,11 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
 
     async function fetchPageByCode(slug: any) {
       try {
-        const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`)
+        const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`, {
+          query: {
+            site: host
+          }
+        })
         currentPage.value = {}
         currentPage.value = page
 
@@ -60,7 +68,7 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
       } catch (error: any) {}
     }
 
-    async function getOverviewPageComponentById(componentId, dataQuery) {
+    async function getOverviewPageComponentById(componentId: any, dataQuery: any) {
       try {
         const { apiUrl } = useRuntimeConfig().public
         const res =  await $fetch(`${apiUrl}/cms/page-component/overview-page-component/${componentId}`, {

stores/poll-option.ts

@@ -2,11 +2,14 @@ import type { PollOption } from "~/server/models/poll-option"
 export const usePollOptionStore = defineStore('usePollOptionStore', () => {
     const currentPollOption = shallowReactive<PollOption>({})
     const currentPollOptions = shallowRef<PollOption[] | any[]>([])
+    const url : any = useRequestURL();
+    const host = url.hostname.split('.')[0];
     async function fetchByPollId(id: string) {
         try {
             const { data } = await useFetch<any>(`/api/services/poll-option/pollId`, {
                 query: {
-                    pollId: id
+                    pollId: id,
+                    site: host
                 }
             })
             

stores/poll-response.ts

@@ -2,12 +2,15 @@ import type { PollResponse } from "~/server/models/poll-response"
 export const usePollResponseStore = defineStore('usePollResponseStore', () => {
     const currentPollResponse = shallowReactive<PollResponse>({})
     const currentPollResponses = shallowRef<PollResponse[]>([])
+    const url : any = useRequestURL();
+    const host = url.hostname.split('.')[0];
     const create = async (pollResponse: any) => {
 
         try {
             const { data } = await useFetch<any>(`/api/services/poll-response`, {
                 method: 'POST',
-                body: pollResponse
+                body: pollResponse,
+                query: {site: host}
             })
             data.value && (Object.assign(currentPollResponse, data.value))
             return currentPollResponse
@@ -21,7 +24,8 @@ export const usePollResponseStore = defineStore('usePollResponseStore', () => {
         try {
             const { data } = await useFetch<any>(`/api/services/poll-response/pollId`, {
                 query: {
-                    pollId: id
+                    pollId: id,
+                    site: host
                 }
             })
 

stores/poll.ts

@@ -1,12 +1,17 @@
 import type { Poll } from "~/server/models/poll"
 export const usePollStore = defineStore('usePollStore', () => {
     const currentPoll = shallowReactive<Poll>({})
+
+    const url : any = useRequestURL();
+    const host = url.hostname.split('.')[0];
+
     async function fetchById(id: string) {
 
         try {
             const { data } = await useFetch<any>(`/api/services/poll-by-id`, {
                 query: {
-                    pollId: id
+                    pollId: id,
+                    site: host
                 }
             })
 
@@ -16,16 +21,7 @@ export const usePollStore = defineStore('usePollStore', () => {
 
         }
     }
-
-    async function categoryId() {
-        try {
-            const { data } = await useFetch(`/api/services/category-tree`)
-            return data.value
-        } catch (error) {}
-    
-    }
-
-    return { fetchById, currentPoll, categoryId }
+    return { fetchById, currentPoll }
 })
 
 if(import.meta.hot) {