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

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;

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í.',

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