From 6a275c354ea10d059c5981b9b1994269a912faa3 Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 21 Jun 2024 09:56:34 +0700
Subject: [PATCH] minhnt-dev: only ssr

---
 .../page-component/AssignComponent.vue        |   2 -
 .../templates/categories/layouts/Default.vue  |   2 +-
 .../templates/collections/layouts/Article.vue |   1 -
 .../page-component/templates/index.vue        |   2 +-
 .../templates/navigations/layouts/Bottom.vue  |   1 -
 .../navigations/layouts/Direction.vue         |  12 +-
 .../pageCategories/collection_page.vue        |   4 +-
 .../templates/sections/layouts/Article.vue    |   4 +-
 nuxt.config.ts                                |  12 +-
 package.json                                  |   3 -
 pages/[categories]/index.vue                  |  20 +-
 pages/bai-viet/[slug].vue                     |  83 +-
 pages/index.vue                               |  18 +-
 stores/articles.ts                            |   9 +-
 stores/dynamic-page.ts                        | 899 +-----------------
 utils/lodash.ts                               |   9 +
 utils/parseSQL.ts                             |   2 +-
 utils/recusive.ts                             |   4 +-
 18 files changed, 84 insertions(+), 1003 deletions(-)
 create mode 100644 utils/lodash.ts

diff --git a/components/dynamic-page/page-component/AssignComponent.vue b/components/dynamic-page/page-component/AssignComponent.vue
index ed07c03..c95005d 100644
--- a/components/dynamic-page/page-component/AssignComponent.vue
+++ b/components/dynamic-page/page-component/AssignComponent.vue
@@ -39,8 +39,6 @@ const findDataPosition = computed(() => {
   }
   return result;
 });
-
-console.log(findDataPosition, 'findDataPosition')
 </script>
 
 <template>
diff --git a/components/dynamic-page/page-component/templates/categories/layouts/Default.vue b/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
index 0dfd568..da93ae5 100644
--- a/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/layouts/Default.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import isEmpty from "lodash/isEmpty";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty } from "@/utils/lodash";
 
 const emit = defineEmits(["dropData", "selectComponent"]);
 
diff --git a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
index 0ae478f..927f5f3 100644
--- a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
-import { isEmpty, groupBy } from "lodash";
 import { breakpoint } from "~/definitions";
 import { useWindowSize } from "@vueuse/core";
 const { width } = useWindowSize()
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index 55738da..0f9f10e 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -15,7 +15,7 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
   [enumPageComponentTemplates.NAVIGATION]: Dynamic_Navigation,
 };
-// console.log(_props.settings.template, 'template')
+
 const getCurrentComponent = computed(() => `${_props.settings.template}`);
 const GET_PROPS = computed(() => {
   return () => {
diff --git a/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue b/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
index f6ded72..868b023 100644
--- a/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
+++ b/components/dynamic-page/page-component/templates/navigations/layouts/Bottom.vue
@@ -41,7 +41,6 @@ const SETTING_OPTIONS = {
   h4 {
     font-size: 14px;
     font-weight: normal;
-    text-align: center;
     cursor: pointer;
   }
 }
diff --git a/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue b/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
index dcdc59e..f721570 100644
--- a/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
+++ b/components/dynamic-page/page-component/templates/navigations/layouts/Direction.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import isEmpty from "lodash/isEmpty";
 // import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
 // import { getInputValue } from "@/utils/cms/page/parseSQL";
 
@@ -11,18 +10,17 @@ import isEmpty from "lodash/isEmpty";
 //   component?: any;
 // }>();
 
-// const SETTING_OPTIONS = {
-//   MAX_ELEMENT: 10,
-// };
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 10,
+};
 </script>
 
 <template>
-  ád
-  <!-- <section>
+  <section>
     <div v-for="navItem, index in Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})" :key="index">
       <div class="empty"></div>
     </div>
-  </section> -->
+  </section>
 </template>
 
 <style lang="scss" scoped>
diff --git a/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue b/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
index 2004e13..7e4e772 100644
--- a/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
+++ b/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import isEmpty from "lodash/isEmpty";
+import { isEmpty } from "@/utils/lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
@@ -51,7 +51,7 @@ onBeforeMount(() => {
 });
 
 const loadPage = (page: string | number) => {
-  console.log(`Loading page ${page}`);
+  // console.log(`Loading page ${page}`);
   // listArticleByCategory.value =
 };
 
diff --git a/components/dynamic-page/page-component/templates/sections/layouts/Article.vue b/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
index e5528d0..c276361 100644
--- a/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/sections/layouts/Article.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import isEmpty from "lodash/isEmpty";
+import { isEmpty } from "@/utils/lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
@@ -72,7 +72,7 @@ onBeforeMount(() => {
 });
 
 const loadPage = (page: string | number) => {
-  console.log(`Loading page ${page}`);
+  // console.log(`Loading page ${page}`);
   // listArticleByCategory.value =
 };
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8fb28b5..fe405a2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -6,12 +6,15 @@ export default defineNuxtConfig({
   nitro: {
     preset: 'iis_node'
   },
+
   devtools: { enabled: true },
+
   app: {
     head: {
       link: [],
     },
   },
+
   modules: [
     '@nuxt/image',
     "@unocss/nuxt",
@@ -20,7 +23,6 @@ export default defineNuxtConfig({
     "nuxt-delay-hydration",
     "nuxt-icon",
     "dayjs-nuxt",
-    "nuxt-lodash",
     '@ant-design-vue/nuxt',
   ],
 
@@ -49,10 +51,6 @@ export default defineNuxtConfig({
     }],
   },
 
-  lodash: {
-    prefix: "_",
-  },
-
   // pinia
   pinia: {
     autoImports: [
@@ -70,6 +68,10 @@ export default defineNuxtConfig({
   },
 
   ssr: true,
+  routeRules: {
+    // Tất cả các route sẽ sử dụng SSR
+    '**': { ssr: true },
+  },
 
   typescript: {
     shim: false,
diff --git a/package.json b/package.json
index f2d0de7..cc30c8c 100644
--- a/package.json
+++ b/package.json
@@ -16,19 +16,16 @@
     "dayjs-nuxt": "^2.1.8",
     "nuxt": "latest",
     "nuxt-icon": "latest",
-    "nuxt-lodash": "latest",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
   },
   "dependencies": {
-    "@types/lodash": "^4.17.4",
     "@unocss/nuxt": "latest",
     "@unocss/reset": "latest",
     "@vueuse/core": "^10.8.0",
     "@vueuse/nuxt": "10.5.0",
     "axios": "^1.5.1",
     "cheerio": "^1.0.0-rc.12",
-    "lodash": "^4.17.21",
     "nuxt-delay-hydration": "latest",
     "sass": "latest",
     "sass-loader": "latest",
diff --git a/pages/[categories]/index.vue b/pages/[categories]/index.vue
index d9108e1..7c33498 100644
--- a/pages/[categories]/index.vue
+++ b/pages/[categories]/index.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import _cloneDeep from 'lodash/cloneDeep';
-
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
-
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
@@ -12,29 +9,15 @@ const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-(async () => {
-  try {
-    store.dynamicPage.fetchPageByCode(route.path.replace('/', ''));
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  }
-})();
-
-watch(currentPage, () => {
-  store.dynamicPage.setSectionPublished();
-  store.dynamicPage.setComponentPublished();
-}, { deep: true })
-
+await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path.replace('/', '')))
 useHead({
   title: () => currentPage.value.title || ''
 })
-
 </script>
 
 <template>
   <main class="h-screen" v-if="currentPage">
     <DynamicTemplate :settings="currentPage.settings">
-      <template v-if="sectionPublished && sectionPublished.length > 0">
         <DynamicSection
           v-for="(section, index) in sectionPublished"
           :key="index"
@@ -42,7 +25,6 @@ useHead({
           :content="section.content ? JSON.parse(section.content) : null"
           :section="section"
         />
-      </template>
     </DynamicTemplate>
   </main>
 </template>
\ No newline at end of file
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index a3eb973..001d90a 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -5,8 +5,6 @@
 */
 
 <script setup lang="ts">
-import _cloneDeep from 'lodash/cloneDeep';
-
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 
@@ -22,64 +20,42 @@ const store = reactive({
   article: useArticleStore(),
 });
 
-(async () => {
-  try {
-    await store.article.getArticleBySlug(route.params.slug);
+const loadPage = async () => {
+  const promises = [];
+  promises.push(store.article.getArticleBySlug(route.params.slug));
 
-//   useHead({
-//     title: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
-// })
-useSeoMeta({
-    title: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
-    ogTitle: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
-    description: currentArticle.value?.intro.replace(/<\/?[^>]+(>|$)/g, ""),
-    ogDescription: currentArticle.value?.intro.replace(/<\/?[^>]+(>|$)/g, ""),
-    ogImage: currentArticle.value?.thumbnail,
-})
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  }
-})();
-
-const loadPage = async (contentType: string | number) => {
-  await store.dynamicPage.fetchPageByCode(contentType);
-  store.dynamicPage.setSectionPublished();
-  store.dynamicPage.setComponentPublished();
-} 
-
-watch(currentArticle, async () => {
-  let isContentType : string = '';
+  let isContentType = '';
   switch (currentArticle.value?.contentType) {
     case 1:
-        isContentType = 'trang-chi-tiet-bai-viet-general'
-        break;
+      isContentType = 'trang-chi-tiet-bai-viet-general';
+      break;
     case 2:
-        isContentType = 'trang-chi-tiet-bai-viet-image'
-        break;
-
+      isContentType = 'trang-chi-tiet-bai-viet-image';
+      break;
     case 3:
-        isContentType = 'trang-chi-tiet-podcast'
-        break;
-
+      isContentType = 'trang-chi-tiet-podcast';
+      break;
     case 4:
-        isContentType = 'trang-chi-tiet-bai-viet-video'
-        break;
-
+      isContentType = 'trang-chi-tiet-bai-viet-video';
+      break;
     case 5:
-        if (currentArticle.value?.layoutType === 4) {
-          isContentType = 'trang-chi-tiet-bai-viet-emagazine' 
-          break;
-        }
-        if (currentArticle.value?.layoutType === 3) {
-          isContentType = 'trang-chi-tiet-bai-viet-infographics' 
-          break;
-        }
-    default:
-        isContentType = 'trang-chi-tiet-bai-viet-general'
+      if (currentArticle.value?.layoutType === 4) {
+        isContentType = 'trang-chi-tiet-bai-viet-emagazine';
         break;
+      }
+      if (currentArticle.value?.layoutType === 3) {
+        isContentType = 'trang-chi-tiet-bai-viet-infographics';
+        break;
+      }
+    default:
+      isContentType = 'trang-chi-tiet-bai-viet-general';
+      break;
   }
-  await loadPage(isContentType);
-}, { deep: true })
+  promises.push(store.dynamicPage.fetchPageByCode(isContentType));
+  await Promise.all(promises);
+};
+
+await useAsyncData('detail-article', () => loadPage());
 
 useSeoMeta({
   title: () => currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
@@ -87,9 +63,8 @@ useSeoMeta({
   ogTitle: () => currentArticle.value?.title,
   ogImage: () => currentArticle.value?.thumbnail,
   ogDescription: () => currentArticle.value?.intro,
-  twitterCard: 'summary_large_image',
+  twitterCard: () => 'summary_large_image',
 })
-
 </script>
 
 <template>
@@ -106,4 +81,4 @@ useSeoMeta({
       </template>
     </DynamicTemplate>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 3110990..756d3d5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import _cloneDeep from 'lodash/cloneDeep';
-
 import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
 import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
 import { useDynamicPageStore } from '~/stores/dynamic-page';
@@ -11,19 +9,7 @@ const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-(async () => {
-  try {
-    store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', ''));
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  }
-})();
-
-watch(currentPage, () => {
-  store.dynamicPage.setSectionPublished();
-  store.dynamicPage.setComponentPublished()
-}, { deep: true })
-
+await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
 useHead({
   title: 'Trang chủ'
 })
@@ -32,7 +18,6 @@ useHead({
 <template>
   <main class="h-screen" v-if="currentPage">
     <DynamicTemplate :settings="currentPage.settings">
-      <template v-if="sectionPublished && sectionPublished.length > 0">
         <DynamicSection
           v-for="(section, index) in sectionPublished"
           :key="index"
@@ -40,7 +25,6 @@ useHead({
           :content="section.content ? JSON.parse(section.content) : null"
           :section="section"
         />
-      </template>
     </DynamicTemplate>
   </main>
 </template>
\ No newline at end of file
diff --git a/stores/articles.ts b/stores/articles.ts
index a13336d..852350a 100644
--- a/stores/articles.ts
+++ b/stores/articles.ts
@@ -7,11 +7,10 @@ export const useArticleStore = defineStore("article", () => {
 
     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}`)
             currentArticle.value = {}
             currentArticle.value = data.value.item
-        } catch (error: any) {}
+        } catch (error: any) { }
     }
 
     const getArticleBySlug = async (slug: string) => {
@@ -19,7 +18,7 @@ export const useArticleStore = defineStore("article", () => {
             const { data: article } = await useAsyncData('article', () => $fetch(`/api/articles/get-by-slug/${slug}`))
             currentArticle.value = {}
             currentArticle.value = article.value?.item
-        } catch (error: any) {}
+        } catch (error: any) { }
     }
 
     const getArticleCondition = async (condition: ArticleCondition) => {
@@ -29,7 +28,7 @@ export const useArticleStore = defineStore("article", () => {
                 body: condition
             })
         } catch (error: any) {
-            
+
         }
     }
 
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
index 6e6cdab..0e70378 100644
--- a/stores/dynamic-page.ts
+++ b/stores/dynamic-page.ts
@@ -9,869 +9,12 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
 
     async function fetchPageByCode(slug: any) {
       try {
-        const { data } = await useFetch(`/api/dynamic-page/get-by-code/${slug}`)
-        // const data = ref({
-        //   "sections": [
-        //     {
-        //       "id": 42,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section5hang",
-        //       "slug": "section5hang",
-        //       "code": "section5hang",
-        //       "type": 1,
-        //       "content": "[{\"type\":\"component\",\"data\":57},{\"type\":\"component\",\"data\":68},{\"type\":\"component\",\"data\":69},{\"type\":\"component\",\"data\":44},{\"type\":\"component\",\"data\":50}]",
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal-TYPE:Default-MAX:5",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T16:17:57.386059",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:18:56.082485"
-        //     },
-        //     {
-        //       "id": 32,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section2hang",
-        //       "slug": "section2hang",
-        //       "code": "section2hang_doisong",
-        //       "type": 1,
-        //       "content": "[{\"type\":\"component\",\"data\":58},{\"type\":\"component\",\"data\":101}]",
-        //       "keywords": null,
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal-TYPE:Default-MAX:2",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T10:33:59.071404",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:18:56.493553"
-        //     },
-        //     {
-        //       "id": 31,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section2left3",
-        //       "slug": "section2left3",
-        //       "code": "section2left3_doisong",
-        //       "type": 1,
-        //       "content": "[{\"type\":\"section\",\"data\":42},{\"type\":\"section\",\"data\":32}]",
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-TYPE:LEFT-MAX:2",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": "",
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:02:35.828188",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:36:43.623068"
-        //     },
-        //     {
-        //       "id": 30,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section2left2",
-        //       "slug": "section2left2",
-        //       "code": "section2left2_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-TYPE:LEFT-MAX:2",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": "",
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:02:09.626405",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:37:17.837094"
-        //     },
-        //     {
-        //       "id": 29,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section2left1",
-        //       "slug": "section2left1",
-        //       "code": "section2left1_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-TYPE:LEFT-MAX:2",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": "",
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:01:11.78265",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:01:40.494573"
-        //     },
-        //     {
-        //       "id": 28,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section3cot",
-        //       "slug": "section3cot",
-        //       "code": "section3cot_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-TYPE:Default-MAX:3",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": "",
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:00:32.765855",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:37:50.127734"
-        //     },
-        //     {
-        //       "id": 27,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section2left",
-        //       "slug": "section2left",
-        //       "code": "section2left_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-TYPE:LEFT-MAX:2",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": "",
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:00:05.873579",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:38:06.600079"
-        //     },
-        //     {
-        //       "id": 26,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section3hang",
-        //       "slug": "section3hang",
-        //       "code": "section3hang_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": null,
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal-TYPE:Default-MAX:3",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T08:59:19.411836",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:38:29.410238"
-        //     },
-        //     {
-        //       "id": 25,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section1hang1",
-        //       "slug": "section1hang1",
-        //       "code": "section1hang1_doisong",
-        //       "type": 1,
-        //       "content": "",
-        //       "keywords": null,
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal-TYPE:Default-MAX:1",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T08:53:59.364384",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T08:57:34.1155"
-        //     },
-        //     {
-        //       "id": 24,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "parentId": null,
-        //       "title": "section1hang",
-        //       "slug": "section1hang",
-        //       "code": "section1hang_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": null,
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal-TYPE:Default-MAX:1",
-        //         "template": "Article",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T08:53:52.871306",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T09:39:00.332127"
-        //     }
-        //   ],
-        //   "components": [
-        //     {
-        //       "id": 101,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "ads2_doisong",
-        //       "code": "ads2_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "ADS_DEFAULT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-06-04T15:44:49.728501",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-06-04T15:45:02.192997"
-        //     },
-        //     {
-        //       "id": 69,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "coppy_link_2",
-        //       "code": "coppy_link_2",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "ARTICLE_BUTTON",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T15:51:28.699877",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:00.334897"
-        //     },
-        //     {
-        //       "id": 68,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_detail_1",
-        //       "code": "article_detail_1",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "ARTICLE_DETAIL_DEFAULT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T15:37:58.099224",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:00.742949"
-        //     },
-        //     {
-        //       "id": 62,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "coppy_link_1",
-        //       "code": "coppy_link_1",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "ARTICLE_DETAIL_DEFAULT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": -1,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T15:24:08.987936",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T15:25:38.566902"
-        //     },
-        //     {
-        //       "id": 58,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "ads_1",
-        //       "code": "ads_1",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "ADS_DEFAULT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T15:09:08.953513",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:01.56169"
-        //     },
-        //     {
-        //       "id": 57,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "breadcrumb_1",
-        //       "code": "breadcrumb_1",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "BREADCRUM_DEFAULT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T15:01:25.190114",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:01.972624"
-        //     },
-        //     {
-        //       "id": 50,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "comment",
-        //       "code": "comment_default1",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "COMMENT",
-        //         "template": "Other",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T11:37:42.957585",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T11:38:23.481239"
-        //     },
-        //     {
-        //       "id": 47,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "collection_paging",
-        //       "code": "collection_paging_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "DEFAULT",
-        //         "template": "Section",
-        //         "dataQuery": "Get[Article] Top[10] With[Categories:81]",
-        //         "dataResult": "[]",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:49:48.945226",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:02.788055"
-        //     },
-        //     {
-        //       "id": 44,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "collection5item2",
-        //       "code": "collection5item2_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "TYPE:Article-LAYOUT:vertical-DATA:HORIZONTAL-MAX:5",
-        //         "template": "Collection",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": true,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:18:53.361283",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:03.20532"
-        //     },
-        //     {
-        //       "id": 43,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_doc",
-        //       "code": "article_doc_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical",
-        //         "template": "Article",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:18:26.503605",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:03.613773"
-        //     },
-        //     {
-        //       "id": 42,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "collection5item",
-        //       "code": "collection5item_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "TYPE:Article-LAYOUT:vertical-DATA:HORIZONTAL-MAX:5",
-        //         "template": "Collection",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:17:57.798722",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:04.026497"
-        //     },
-        //     {
-        //       "id": 41,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_doc_intro3",
-        //       "code": "article_doc_intro3_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-HIDE:paragraph",
-        //         "template": "Article",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:17:21.675354",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:04.431454"
-        //     },
-        //     {
-        //       "id": 40,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_doc_intro2",
-        //       "code": "article_doc_intro2_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-HIDE:paragraph",
-        //         "template": "Article",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:16:56.07848",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:04.842294"
-        //     },
-        //     {
-        //       "id": 39,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_doc_intro1",
-        //       "code": "article_doc_intro1_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:vertical-HIDE:paragraph",
-        //         "template": "Article",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:16:39.074945",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:05.246938"
-        //     },
-        //     {
-        //       "id": 38,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "article_ngang",
-        //       "code": "article_ngang_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "LAYOUT:horizontal",
-        //         "template": "Article",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:15:38.638781",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:05.664736"
-        //     },
-        //     {
-        //       "id": 37,
-        //       "siteId": 1,
-        //       "pageId": 4,
-        //       "sectionId": null,
-        //       "title": "category",
-        //       "code": "category_doisong",
-        //       "type": 1,
-        //       "content": null,
-        //       "keywords": "",
-        //       "settings": {
-        //         "label": "",
-        //         "layout": "DEFAULT",
-        //         "template": "Category",
-        //         "dataQuery": null,
-        //         "dataResult": "",
-        //         "pinned": null
-        //       },
-        //       "features": "Navigation",
-        //       "taxonomy": "Navigation",
-        //       "description": null,
-        //       "isPublished": false,
-        //       "publishedBy": null,
-        //       "publishedOn": null,
-        //       "expiresOn": null,
-        //       "order": null,
-        //       "status": 6,
-        //       "createdBy": 1,
-        //       "createdOn": "2024-05-30T09:14:11.978206",
-        //       "updatedBy": 1,
-        //       "updatedOn": "2024-05-30T16:19:06.0724"
-        //     }
-        //   ],
-        //   "id": 4,
-        //   "siteId": 1,
-        //   "parentId": null,
-        //   "title": "Trang đời sống",
-        //   "slug": "trang-doi-song",
-        //   "code": "page-doi-song",
-        //   "type": 1,
-        //   "content": null,
-        //   "favicon": null,
-        //   "keywords": null,
-        //   "thumbnail": null,
-        //   "settings": {
-        //     "label": "",
-        //     "layout": "Center_Page",
-        //     "template": "Home",
-        //     "dataQuery": null,
-        //     "dataResult": null,
-        //     "pinned": null
-        //   },
-        //   "features": "Navigation",
-        //   "taxonomy": "Navigation",
-        //   "description": null,
-        //   "isPublished": false,
-        //   "publishedBy": null,
-        //   "publishedOn": null,
-        //   "expiresOn": null,
-        //   "order": 0,
-        //   "status": 6,
-        //   "createdBy": 1,
-        //   "createdOn": "2024-05-30T08:42:10.319911",
-        //   "updatedBy": 1,
-        //   "updatedOn": "2024-05-30T16:18:55.254121"
-        // })
+        const { data: { value } } = await useAsyncData('page', () => $fetch(`/api/dynamic-page/get-by-code/${slug}`))
         currentPage.value = {}
-        currentPage.value = data.value
+        currentPage.value = value
+
+        setSectionPublished();
+        setComponentPublished();
       } catch (error: any) {}
     }
 
@@ -885,27 +28,25 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
 
     const setSectionPublished = () => {
       const exsitsTemplate = ['None']
-        const contentArr: any = [];
-        currentPage.value.sections && currentPage.value.sections.map((section: any) => {
-          contentArr.push(section.content && typeof section.content === 'string' && JSON.parse(section.content));
-          return section;
-        });
+      const contentArr: any = [];
+      currentPage.value.sections && currentPage.value.sections.map((section: any) => {
+        contentArr.push(section.content && typeof section.content === 'string' && JSON.parse(section.content));
+        return section;
+      });
 
-        
-        sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
-          (section: any) => exsitsTemplate.includes(section.settings?.template) && section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
-        ).sort((a: any, b: any) => a.order - b.order);
+      sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
+        (section: any) => !exsitsTemplate.includes(section.settings?.template) && section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
+      ).sort((a: any, b: any) => a.order - b.order);
     };
 
     const setComponentPublished = () => {
-      const exsitsTemplate = ['None']
-        const contentArr: any = [];
-        currentPage.value.sections && currentPage.value.sections.map((section: any) => {
-          contentArr.push(section.content && JSON.parse(section.content) && JSON.parse(section.content));
-          return section;
-        });
-        componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
-      };
+      const contentArr: any = [];
+      currentPage.value.sections && currentPage.value.sections.map((section: any) => {
+        contentArr.push(section.content && JSON.parse(section.content) && JSON.parse(section.content));
+        return section;
+      });
+      componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
+    };
 
     const setDataQuery = (query: any, componentId: number | string) => {
         for (const _component of currentPage.value.components && currentPage.value.components) {
diff --git a/utils/lodash.ts b/utils/lodash.ts
new file mode 100644
index 0000000..14ecef9
--- /dev/null
+++ b/utils/lodash.ts
@@ -0,0 +1,9 @@
+const isEmpty = (value : any) => {
+    return (
+    value == null || // From standard.js: Always use === - but obj == null is allowed to check null || undefined
+    (typeof value === 'object' && Object.keys(value).length === 0) ||
+    (typeof value === 'string' && value.trim().length === 0)
+    )
+}
+  
+export { isEmpty }
\ No newline at end of file
diff --git a/utils/parseSQL.ts b/utils/parseSQL.ts
index 1ff7d73..6934a99 100644
--- a/utils/parseSQL.ts
+++ b/utils/parseSQL.ts
@@ -1,4 +1,4 @@
-import isEmpty from "lodash/isEmpty";
+import { isEmpty } from "@/utils/lodash";
 
 const keyMapping = {
     // 3 query key để phân loại
diff --git a/utils/recusive.ts b/utils/recusive.ts
index 9c92091..e8c886a 100644
--- a/utils/recusive.ts
+++ b/utils/recusive.ts
@@ -1,7 +1,5 @@
-import cloneDeep from 'lodash/cloneDeep';
-
 export function buildTree(data: any) {
-    const _array = cloneDeep(JSON.parse(data))
+    const _array = JSON.parse(JSON.stringify(JSON.parse(data)))
     if (_array.length > 0) {
         let map = new Map();
         _array.forEach((item : any) => map.set(item.id, item));