From 3fe4da0ecbc9aad58dadcd6f2f16ddde30109809 Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Fri, 5 Jul 2024 14:51:25 +0700
Subject: [PATCH] phongdt: paging component

---
 .../templates/sections/articles/Default.vue   | 116 ++++++--------
 server/models/dynamic-page/index.ts           | 145 ++++++++++--------
 stores/dynamic-page.ts                        |  19 +++
 3 files changed, 145 insertions(+), 135 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/sections/articles/Default.vue b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
index d29df13..dee17c5 100644
--- a/components/dynamic-page/page-component/templates/sections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
-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";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageComponentTemplates } from "@/definitions/enum";
 const router = useRouter();
 const route = useRoute();
 
-// const store = reactive({
-//   component: usePageComponentStore(),
-// });
+const store = reactive({
+  component: useDynamicPageStore(),
+});
 
 const _props = defineProps<{
-  dataResult?: any;
+  dataResult?: any[];
   dataQuery?: string;
   component?: any;
-  label?: any;
+  label?: string;
 }>();
 
 const SETTING_OPTIONS = {
   MAX_ELEMENT: 5,
-  TEMPLATE: "Article",
-  LAYOUT: "TYPE:Card",
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_Default",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
 };
 
 const page = ref(1);
@@ -60,7 +64,7 @@ const handleRouteChange = async (query: any) => {
   const param = query[`cpn_${_props.component?.id}`];
   if (param) {
     const [_, value] = param.split(":") || [];
-    page.value = value;
+    page.value = Number(value);
     await loadPage(value);
   }
 };
@@ -79,12 +83,13 @@ const loadPage = async (page: number) => {
   } else {
     newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
   }
-  // const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
-  // const data = getInputValue(res?.settings?.dataResult, "OBJECT");
-  // if (Object.keys(data).length > 0) {
-  //   totals.value = data.Total;
-  //   listArticlePaging.value = data?.Data || [];
-  // }
+  const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
+  const data = getInputValue(res?.settings?.dataResult, "OBJECT");
+
+  if (Object.keys(data).length > 0) {
+    totals.value = data.Total;
+    listArticlePaging.value = data?.Data || [];
+  }
 };
 
 const handleNextPrev = (type: "+" | "-") => {
@@ -107,28 +112,22 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <section>
-    <div class="section-container" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+  <section v-if="listArticleByCategory?.length > 0">
+    <div class="section-container">
       <div class="section-layout" :style="designObject['div.section']">
-        <template v-if="listArticleByCategory?.length > 0">
-          <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
-            <DynamicComponent
-              :key="index"
-              v-if="!isEmpty(component)"
-              :settings="{
-                template: SETTING_OPTIONS.TEMPLATE,
-                layout: SETTING_OPTIONS.LAYOUT,
-                dataResult: { ...component },
-                label: mapActivesToItems(Number(index)),
-              }"
-            />
-          </template>
-        </template>
-        <template v-else>
-          <div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
+        <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
+          <DynamicComponent
+            :settings="{
+              template: SETTING_OPTIONS.TEMPLATE,
+              layout: SETTING_OPTIONS.LAYOUT,
+              dataResult: { ...component },
+              label: mapActivesToItems(Number(index)),
+            }"
+            :component="COMPONENT"
+          />
         </template>
         <div class="button-page flex">
-          <a class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
+          <span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
             <i class="el-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                 <path
@@ -137,9 +136,9 @@ const mapActivesToItems = (index: number) => {
                 ></path>
               </svg>
             </i>
-          </a>
-          <a v-if="listArticleByCategory?.length > 0" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</a>
-          <a class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
+          </span>
+          <span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
+          <span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
             <i class="el-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                 <path
@@ -148,10 +147,11 @@ const mapActivesToItems = (index: number) => {
                 ></path>
               </svg>
             </i>
-          </a>
+          </span>
         </div>
       </div>
     </div>
+    <div v-html="designObject.styleClasses" style="display: none" v-if="designObject.styles"></div>
   </section>
 </template>
 
@@ -165,31 +165,6 @@ const mapActivesToItems = (index: number) => {
     &.border-custom {
       border-color: #e5e5e5 !important;
     }
-    &.borderLeft {
-      border-left: 1px solid;
-    }
-    &.borderRight {
-      border-right: 1px solid;
-    }
-    &.borderTop {
-      border-top: 1px solid;
-    }
-    &.borderBottom {
-      border-bottom: 1px solid;
-    }
-  }
-  .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 {
@@ -198,9 +173,6 @@ const mapActivesToItems = (index: number) => {
       pointer-events: none;
     }
   }
-  &.noData {
-    border-radius: 6px;
-  }
 
   .flex {
     display: flex;
@@ -218,17 +190,21 @@ const mapActivesToItems = (index: number) => {
   .btn-page {
     width: 40px;
     height: 40px;
+    padding: 9px 16px;
     text-align: center;
     line-height: 36px;
-    border: 1px solid #409eff;
-    border-radius: 3px;
+    border-radius: 4px;
     margin-left: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    background: #f2f2f2;
     cursor: pointer;
+    color: #222222;
     &.active {
-      background: #409eff;
+      background: #ed1c24;
       color: white;
     }
   }
diff --git a/server/models/dynamic-page/index.ts b/server/models/dynamic-page/index.ts
index 6512f4e..c11079a 100644
--- a/server/models/dynamic-page/index.ts
+++ b/server/models/dynamic-page/index.ts
@@ -30,81 +30,81 @@ interface PageComponentSettings {
     dataResult?: string; // Kết quả dữ liệu (Json)
 }
 export type PageSection = {
-  id?: number; // Mã định danh
-  siteId?: number; // Mã hệ thống
-  pageId?: number; // Mã trang
-  parentId?: number; // Mã vùng cha
-  title?: string; // Tiêu đề
-  slug?: string; // (Anchor)
-  code?: string; // Mã nhận diện
-  content?: string; // Nội dung
-  keywords?: string; // Từ khóa
-  description?: string; // Mô tả
-  type?: number; // Phân loại: PageSectionType
-  features?: string; // Đặc trưng: Featured (nổi bật)
-  taxonomy?: string; // Phân loại: Block | Module | Navigation
-  settings?: PageSectionSettings; // Thiết lập: PageSectionSettings (Json)
-  isPublished?: boolean; // Đã xuất bản
-  publishedBy?: number; // Xuất bản bởi
-  publishedOn?: string; // Xuất bản vào lúc (string)
-  expiresOn?: string; // Hết hạn vào lúc (string)
-  order?: number; // Thứ tự sắp xếp
-  status?: number; // Trạng thái
+    id?: number; // Mã định danh
+    siteId?: number; // Mã hệ thống
+    pageId?: number; // Mã trang
+    parentId?: number; // Mã vùng cha
+    title?: string; // Tiêu đề
+    slug?: string; // (Anchor)
+    code?: string; // Mã nhận diện
+    content?: string; // Nội dung
+    keywords?: string; // Từ khóa
+    description?: string; // Mô tả
+    type?: number; // Phân loại: PageSectionType
+    features?: string; // Đặc trưng: Featured (nổi bật)
+    taxonomy?: string; // Phân loại: Block | Module | Navigation
+    settings?: PageSectionSettings; // Thiết lập: PageSectionSettings (Json)
+    isPublished?: boolean; // Đã xuất bản
+    publishedBy?: number; // Xuất bản bởi
+    publishedOn?: string; // Xuất bản vào lúc (string)
+    expiresOn?: string; // Hết hạn vào lúc (string)
+    order?: number; // Thứ tự sắp xếp
+    status?: number; // Trạng thái
 }
 interface PageComponent extends Base {
-  id?: number; // Mã định danh
-  siteId?: number; // Mã hệ thống
-  pageId?: number; // Mã trang
-  sectionId?: number; // Mã vùng
-  title?: string; // Tiêu đề
-  code?: string; // Mã nhận diện
-  content?: string; // Nội dung
-  type?: number; // Phân loại: PageComponentType
-  features?: string; // Đặc trưng: Featured (nổi bật)
-  taxonomy?: string; // Phân loại
-  settings?: PageComponentSettings; // Thiết lập: PageComponentSettings (Json)
-  isPublished?: boolean; // Đã xuất bản
-  publishedBy?: number; // Xuất bản bởi
-  publishedOn?: string; // Xuất bản vào lúc (string)
-  expiresOn?: string; // Hết hạn vào lúc (string)
-  order?: number; // Thứ tự sắp xếp
-  status?: number; // Trạng thái
+    id?: number; // Mã định danh
+    siteId?: number; // Mã hệ thống
+    pageId?: number; // Mã trang
+    sectionId?: number; // Mã vùng
+    title?: string; // Tiêu đề
+    code?: string; // Mã nhận diện
+    content?: string; // Nội dung
+    type?: number; // Phân loại: PageComponentType
+    features?: string; // Đặc trưng: Featured (nổi bật)
+    taxonomy?: string; // Phân loại
+    settings?: PageComponentSettings; // Thiết lập: PageComponentSettings (Json)
+    isPublished?: boolean; // Đã xuất bản
+    publishedBy?: number; // Xuất bản bởi
+    publishedOn?: string; // Xuất bản vào lúc (string)
+    expiresOn?: string; // Hết hạn vào lúc (string)
+    order?: number; // Thứ tự sắp xếp
+    status?: number; // Trạng thái
 }
 interface Page extends Base {
-  id?: number; // Mã định danh
-  siteId?: number; // Mã hệ thống
-  parentId?: number; // Mã trang cha
-  title?: string; // Tiêu đề
-  slug?: string; // Slug
-  code?: string; // Mã nhận diện
-  content?: string; // Nội dung
-  favicon?: string; // Biểu tượng
-  keywords?: string; // Từ khóa
-  thumbnail?: string; // Ảnh đại diện
-  description?: string; // Mô tả
-  type?: number; // Phân loại: PageType
-  features?: string; // Đặc trưng: Featured (nổi bật)
-  taxonomy?: string; // Phân nhóm
-  settings?: PageSettings; // Thiết lập: PageSettings (Json)
-  isPublished?: boolean; // Đã xuất bản
-  publishedBy?: number; // Đã xuất bản bởi
-  publishedOn?: string; // Đã xuất bản vào lúc (string)
-  expiresOn?: string; // Đã hết hạn vào lúc (string)
-  order?: number; // Thứ tự sắp xếp
-  status?: number; // Trạng thái
-  
-  components?: PageComponent[];
-  sections?: PageSection[];
+    id?: number; // Mã định danh
+    siteId?: number; // Mã hệ thống
+    parentId?: number; // Mã trang cha
+    title?: string; // Tiêu đề
+    slug?: string; // Slug
+    code?: string; // Mã nhận diện
+    content?: string; // Nội dung
+    favicon?: string; // Biểu tượng
+    keywords?: string; // Từ khóa
+    thumbnail?: string; // Ảnh đại diện
+    description?: string; // Mô tả
+    type?: number; // Phân loại: PageType
+    features?: string; // Đặc trưng: Featured (nổi bật)
+    taxonomy?: string; // Phân nhóm
+    settings?: PageSettings; // Thiết lập: PageSettings (Json)
+    isPublished?: boolean; // Đã xuất bản
+    publishedBy?: number; // Đã xuất bản bởi
+    publishedOn?: string; // Đã xuất bản vào lúc (string)
+    expiresOn?: string; // Đã hết hạn vào lúc (string)
+    order?: number; // Thứ tự sắp xếp
+    status?: number; // Trạng thái
+
+    components?: PageComponent[];
+    sections?: PageSection[];
 }
 
-export const getDynamicPageByCode = async (event : any) => {
+export const getDynamicPageByCode = async (event: any) => {
     try {
         const { apiUrl } = useRuntimeConfig().public
         const slug = event.context.params.slug;
         const { item }: any = await $fetch(`${apiUrl}/cms/page/overview-page/slug:${slug}`, {
             headers: new Headers({
                 site: '1' || 1,
-            }),
+            }), 
         })
         return item
     } catch (error) {
@@ -112,13 +112,28 @@ export const getDynamicPageByCode = async (event : any) => {
     }
 }
 
-export const getDynamicPageById = async (event : any) => {
+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}`)
-        return item 
+        return item
     } catch (error) {
         handleError(error);
     }
+}
+export async function getOverviewPageComponentById(event: any) {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const { componentId, dataQuery } = getQuery(event)
+        return await $fetch(`${apiUrl}/cms/overview-page-component/${componentId}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: dataQuery,
+        });
+    } catch (err) {
+        handleError(err);
+    }
 }
\ No newline at end of file
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
index 8c8f5c5..a97084c 100644
--- a/stores/dynamic-page.ts
+++ b/stores/dynamic-page.ts
@@ -60,6 +60,24 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
       } catch (error: any) {}
     }
 
+    async function getOverviewPageComponentById(componentId, dataQuery) {
+      try {
+        const { apiUrl } = useRuntimeConfig().public
+        const res =  await $fetch(`${apiUrl}/cms/page-component/overview-page-component/${componentId}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: dataQuery,
+        });
+        console.log("res",res)
+        return res
+      } catch (err) {
+        throw err;
+      }
+    }
+    
+
     return {
         currentPage,
         sectionPublished,
@@ -69,6 +87,7 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
         setSectionPublished,
         setComponentPublished,
         setDataQuery,
+        getOverviewPageComponentById
     };
 });