Merge pull request 'phongdt:fix paging' (#9) from phongdt into main

Reviewed-on: #9

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">
+            <Icon name="ooui:previous-ltr"></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>
           </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">
+            <Icon name="ooui:previous-rtl"></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>
           </span>
         </div>
       </div>