From 94abf5ce619c6eecb457f9728cd1316d5cf0bbb0 Mon Sep 17 00:00:00 2001
From: MoreStrive <minhnguyenyh2020@gmail.com>
Date: Fri, 31 May 2024 12:49:28 +0700
Subject: [PATCH] minhnt-dev: api service

---
 app.vue                                       |  4 +-
 assets/styles/style.scss                      | 15 +--
 .../templates/articles/individuals/Card.vue   |  4 +-
 .../page-component/templates/index.vue        |  3 +-
 .../pageCategories/collection_page.vue        | 94 +++++++------------
 .../page-section/layouts/Default.vue          |  4 +-
 .../dynamic-page/page/layouts/Default.vue     |  4 +-
 pages/[categories]/index.vue                  | 20 ++--
 pages/index.vue                               |  5 +-
 9 files changed, 66 insertions(+), 87 deletions(-)

diff --git a/app.vue b/app.vue
index 2fab925..4c050cb 100644
--- a/app.vue
+++ b/app.vue
@@ -44,6 +44,8 @@ useHead({
   </div>
   </a-config-provider> -->
   <NuxtLayout>
-    <NuxtPage />
+    <KeepAlive>
+      <NuxtPage />
+    </KeepAlive>
   </NuxtLayout>
 </template>
\ No newline at end of file
diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 295ca83..468c8a7 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -2,20 +2,7 @@
     > .section-container {
         > .layout_define {
             > .section_layout {
-                @apply gap-x-14
-
-                > div {
-                    background: red;
-
-                    > div {
-                        article {
-                            background: red;
-                            h3 {
-                                @apply text-xl #{!important}
-                            }
-                        }
-                    }
-                }
+                @apply gap-x-10 #{!important}
             }
         }
     }
diff --git a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
index 44617b6..3750238 100644
--- a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
@@ -49,13 +49,13 @@ const drop = (e: any) => {
     <article class="basic-article gap-x-4" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']">
         <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
             <template v-if="parseData">
-                <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+                <img class="object-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
             </template>
         </div>
         <div class="basic-article_content" :class="[!parseData && 'no-data']">
             <div>
                 <template v-if="parseData">
-                    <nuxt-link :to="`/bai-viet/${parseData.id}`">
+                    <nuxt-link :to="`/bai-viet/${parseData.slug}`">
                         <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-100 transition-all duration-300">
                             {{ parseData.title?.replace(/<[^>]+>/g, '') }}
                         </h3>
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index c2d2fdd..a146de7 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Article_BasicCard, BasicCategories, Article_BasicCollection } from "./index";
+import { Article_BasicCard, BasicCategories, Article_BasicCollection, CollectionPaging } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -11,6 +11,7 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplates.ARTICLE]: Article_BasicCard,
   [enumPageComponentTemplates.CATEGORY]: BasicCategories,
   [enumPageComponentTemplates.COLLECTION]: Article_BasicCollection,
+  [enumPageComponentTemplates.SECTION]: CollectionPaging,
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.template}`);
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 e3c36e1..a3caaac 100644
--- a/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
+++ b/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { isEmpty } from "lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { COLLECTION_PAGING_QUERY_DROP } from '@/utils/parseSQL';
+import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
 const route = useRoute();
 
-const emit = defineEmits(["dropData", "selectComponent"]);
-
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
@@ -21,34 +19,12 @@ const SETTING_OPTIONS = {
 
 // const page = ref(1);
 const limit = ref(1);
-const totals = ref(2);
-const category = ref(0);
-const listArticleByCategory = ref([]);
+const totals = ref(1);
 const type = "Article";
 
-// watch(
-//   () => _props.dataResult,
-//   (newValue) => {
-//     const result = getInputValue(newValue, "ARRAY");
-//     listArticleByCategory.value = result;
-//   }
-// );
-
-
-const dropData = (event: any) => {
-  const queryBy = {
-    Category: "Categories",
-  };
-  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
-  // const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
-  const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id })
-  category.value = dataResult.id;
-  emit("dropData", {
-    dataResult: [],
-    dataType,
-    dataQuery: getDataQuery,
-  });
-};
+const listArticleByCategory = computed(() => {
+  return getInputValue(_props.dataResult, "ARRAY");
+});
 
 //?cpn_1=page:2&cpn_2=page:1
 // Get[Article] Top[5] With[Categories:1]
@@ -70,11 +46,9 @@ const handleRouteChange = (query: any) => {
   }
 };
 
-onBeforeMount(()=>{
-  const result = getInputValue( _props.dataResult, "ARRAY");
-  listArticleByCategory.value = result;
-  handleRouteChange(route.query)
-})
+onBeforeMount(() => {
+  if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
+});
 
 const loadPage = (page: string | number) => {
   console.log(`Loading page ${page}`);
@@ -91,27 +65,23 @@ watch(
 
 <template>
   <section>
-    <div class="section-container" @dragover.prevent @drop.stop.prevent="dropData($event)" 
-      :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+    <div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
       <div class="collection-container">
-        <template v-if="category">
-          <template v-if="listArticleByCategory?.length > 0">
-            <template v-for="(component, index) in listArticleByCategory" :key="index">
-              <DynamicComponent
-                v-if="!isEmpty(component)"
-                :settings="{
-                  template: SETTING_OPTIONS.TEMPLATE,
-                  layout: SETTING_OPTIONS.LAYOUT,
-                  dataResult: { ...component },
-                }"
-              />
-            </template>
-          </template>
-          <template v-else>
-            <el-result icon="success" title="Success" sub-title="Nội dung danh sách bài viết sẽ ở đây"> </el-result>
+        <template v-if="listArticleByCategory?.length > 0">
+          <template v-for="(component, index) in listArticleByCategory" :key="index">
+            <DynamicComponent
+              v-if="!isEmpty(component)"
+              :settings="{
+                template: SETTING_OPTIONS.TEMPLATE,
+                layout: SETTING_OPTIONS.LAYOUT,
+                dataResult: { ...component },
+              }"
+            />
           </template>
         </template>
-        <template v-else><el-empty image-size="90px" description="Kéo Category vào đây" /></template>
+        <template v-else>
+          <div class="empty"><h6>Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
+        </template>
         <div class="button-page flex">
           <a class="btn-page prev-page">
             <i class="el-icon">
@@ -123,7 +93,7 @@ watch(
               </svg>
             </i>
           </a>
-          <a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals">{{ index + 1 }}</a>
+          <a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals" :key="index">{{ index + 1 }}</a>
           <a class="btn-page next-page">
             <i class="el-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
@@ -142,15 +112,23 @@ watch(
 
 <style lang="scss" scoped>
 .section-container {
-  .empty {
-    min-height: 100px;
-    border-radius: 6px;
-    background: #409eff;
-  }
   .collection-container {
     display: grid;
     gap: 10px;
   }
+  .empty {
+    width: 100%;
+    height: 100%;
+    min-height: 50px;
+    background-color: #409eff;
+    display: flex;
+    white-space: normal;
+    justify-content: center;
+    align-items: center;
+    h6{
+      color: #fff;
+    }
+  }
   .basic-article {
     &.article {
       margin-bottom: 10px;
diff --git a/components/dynamic-page/page-section/layouts/Default.vue b/components/dynamic-page/page-section/layouts/Default.vue
index 14c16c0..996847c 100644
--- a/components/dynamic-page/page-section/layouts/Default.vue
+++ b/components/dynamic-page/page-section/layouts/Default.vue
@@ -105,7 +105,7 @@ const CLASS_FOR_SECTION = computed(() => {
   switch (props.layout) {
     case enumPageSectionLayouts.VERTICAL_TWO:
       _classForSection = {
-        section_layout: "section_layout two_col_layout",
+        section_layout: "section_layout two_col_layout mb-5 mt-2",
       };
       break;
     case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
@@ -122,7 +122,7 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts.VERTICAL_THREE:
       _classForSection = {
-        section_layout: "section_layout three_col_layout",
+        section_layout: "section_layout three_col_layout mt-4",
       };
       break;
     case enumPageSectionLayouts.VERTICAL_FOUR:
diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
index 09833a3..9c54a6e 100644
--- a/components/dynamic-page/page/layouts/Default.vue
+++ b/components/dynamic-page/page/layouts/Default.vue
@@ -15,13 +15,13 @@ const CLASS_FOR_LAYOUT = computed(() => {
         case 'Center_Page':
             _classForLayout = {
                 page_container: 'page_container w-full px-2',
-                layout_container: 'layout_container container mx-auto',
+                layout_container: 'layout_container container-xxl mx-auto',
             };
             break;
         case 'Background_Page':
             _classForLayout = {
                 page_container: 'page_container w-full background-container',
-                layout_container: 'layout_container container mx-auto',
+                layout_container: 'layout_container container-xxl mx-auto',
             };
             break;
         default: 
diff --git a/pages/[categories]/index.vue b/pages/[categories]/index.vue
index e1ff0da..915198b 100644
--- a/pages/[categories]/index.vue
+++ b/pages/[categories]/index.vue
@@ -7,19 +7,27 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
+const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-const loadData = async () => {
-  store.dynamicPage.fetchPageById(7);
+(async () => {
+  try {
+    store.dynamicPage.fetchPageByCode(route.path.replace('/', ''));
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+})();
 
+watch(currentPage, () => {
   store.dynamicPage.setSectionPublished();
-  store.dynamicPage.setComponentPublished()
-}
-await loadData()
-
+  store.dynamicPage.setComponentPublished();
+}, { deep: true })
 
+useHead({
+  title: currentPage.value.title || ''
+})
 </script>
 
 <template>
diff --git a/pages/index.vue b/pages/index.vue
index 294c9b3..2127d92 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,18 +7,21 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
+const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
+
 (async () => {
   try {
-    store.dynamicPage.fetchPageByCode('trang-chu');
+    store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', ''));
   } catch (error) {
     console.error("Error fetching data:", error);
   }
 })();
 
 watch(currentPage, () => {
+  console.log(currentPage.value)
   store.dynamicPage.setSectionPublished();
   store.dynamicPage.setComponentPublished()
 }, { deep: true })