From 764c582a54924efbdf0b2eb85c5ae79c7a8c55ef Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sat, 5 Aug 2023 01:30:29 +0600
Subject: [PATCH] Add total page count in pagination

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 pages/blogs/index.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index 1f65e6a..37b1260 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -36,14 +36,14 @@ function onPreviousPageClick() {
     pageNumber.value -= 1
 }
 
-const isNextpageAvailable = computed(() => {
-  if (pageNumber.value * elementPerPgae.value <= formatedData.value.length)
-    return true
-  else return false
+const totalPage = computed(() => {
+  const ttlContent = formatedData.value.length || 0
+  const totalPage = Math.ceil(ttlContent / elementPerPgae.value)
+  return totalPage
 })
 
 function onNextPageClick() {
-  if (isNextpageAvailable.value)
+  if (pageNumber.value < totalPage.value)
     pageNumber.value += 1
 }
 
@@ -90,9 +90,9 @@ useHead({
       <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
         <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" />
       </button>
-      <p>{{ pageNumber }}</p>
-      <button :disabled="!isNextpageAvailable" @click="onNextPageClick">
-        <Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700': isNextpageAvailable }" />
+      <p>{{ pageNumber }} / {{ totalPage }}</p>
+      <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
+        <Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700': pageNumber < totalPage }" />
       </button>
     </div>
   </main>