From 0ad19bbcfd76b32e941286b61c5f27225207cefb Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Fri, 5 Jul 2024 15:30:58 +0700
Subject: [PATCH] phongdt:fix paging

---
 .../templates/sections/articles/Default.vue   | 23 ++++---------------
 1 file changed, 4 insertions(+), 19 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 ff7cbf4..52343ae 100644
--- a/components/dynamic-page/page-component/templates/sections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
@@ -69,9 +69,6 @@ const handleRouteChange = async (query: any) => {
   }
 };
 
-onBeforeMount(() => {
-  if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
-});
 
 const loadPage = async (page: number) => {
   let newDataQuery = "";
@@ -92,6 +89,8 @@ const loadPage = async (page: number) => {
   }
 };
 
+if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
+
 const handleNextPrev = (type: "+" | "-") => {
   if (listArticleByCategory.value?.length > 0) {
     if (type === "+") {
@@ -128,25 +127,11 @@ const mapActivesToItems = (index: number) => {
         </template>
         <div class="button-page flex">
           <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
-                  fill="currentColor"
-                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-                ></path>
-              </svg>
-            </i>
+            <Icon name="ooui:previous-ltr"></Icon>
           </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
-                  fill="currentColor"
-                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
-                ></path>
-              </svg>
-            </i>
+            <Icon name="ooui:previous-rtl"></Icon>
           </span>
         </div>
       </div>