pagination

components/haditha/search-page/SearchList.vue

@@ -23,11 +23,18 @@ const router = useRouter();
 function openModal(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
+
+  const slug = selectedItem._source.content.split(' ').filter((v,i)=>i<4).join('-');
+
   router.push({
     name: "hadithaSearchShow",
     params: {
-      id: selectedItem._id,
-      slug: "no-slug",
+      id: selectedItem._source.id,
+      slug: slug,
+    },
+    query: {
+      firstPage: 1,
+      page_count:props.total
     },
   });
 }

pages/haditha/search/[id]/[slug]/index.vue

@@ -228,10 +228,14 @@ const handlePagination = (prevNextIndicator: string) => {
     .getRequest(url)
     .then((res) => {
       state.selectedItem = res.hits.hits?.[0];
+      page_num.value = res.hits.hits[0]._source.address.page_num ?? 1;
     })
     .finally(() => (loading.value = false));
 };
-
+const page_num = ref(1);
+const handlePageChange = () => {
+  handlePagination(1, page_num.value);
+};
 // const localCopyTextToClipboard = (text: string) => {
 //   copyTextToClipboard(text);
 // };
@@ -413,24 +417,24 @@ const handlePagination = (prevNextIndicator: string) => {
 
       <div class="body-footer">
         <div class="mt-5 z-2">
-          <div class="flex justify-between actions">
-            <UButton
+          <!-- <div class="flex justify-between actions"> -->
+          <!-- <UButton
               disabled
               class="similar-btn"
               icon="i-haditha-search-3"
               label="مشابه"
               color="neutral"
               variant="outline"
-            />
-            <!-- @click.prevent="goToTheSearch('similar')" -->
-            <UButton
+            /> -->
+          <!-- @click.prevent="goToTheSearch('similar')" -->
+          <!-- <UButton
               class="explore-btn"
               trailing-icon="i-haditha-explore"
               label="کاوش"
               variant="solid"
               @click.prevent="goToTheChatbot"
-            />
-          </div>
+            /> -->
+          <!-- </div> -->
           <div class="flex justify-between pagination">
             <UButton
               @click="handlePagination('-1')"
@@ -440,6 +444,27 @@ const handlePagination = (prevNextIndicator: string) => {
               variant="soft"
               icon="i-haditha-chevron-right"
             />
+            <div class="flex items-center">
+                <span class="total-pages">{{ route.query.page_count }}</span>
+                <span class="mx-2">/</span>
+                <UInput
+                  :disabled="loading"
+                  color="neutral"
+                  variant="outline"
+                  v-model="page_num"
+                  @change="handlePageChange"
+                  :ui="{
+                    root: 'root ',
+                    base: 'base page-number-input',
+                    leading: 'leading',
+                    leadingIcon: 'leadingIcon',
+                    leadingAvatar: 'leadingAvatar',
+                    leadingAvatarSize: 'leadingAvatarSize',
+                    trailing: 'trailing',
+                    trailingIcon: 'trailingIcon',
+                  }"
+                />
+              </div>
             <UButton
               @click="handlePagination('1')"
               class="next-haditha"
@@ -778,6 +803,15 @@ const handlePagination = (prevNextIndicator: string) => {
         text-align: right;
         color: var(--ui-color-two);
       }
+      .total-pages {
+          font-family: IRANSansX;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 100%;
+          letter-spacing: 0%;
+          text-align: right;
+          color: #8a92a8;
+        }
     }
   }
 }