Remove laravel pagination from contract table / ClientCase view and used replacing it with client pagination

resources/js/Components/DataTable/DataTablePaginationClient.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   showGoto: { type: Boolean, default: true },
   maxPageLinks: { type: Number, default: 5 },
   perPage: { type: Number, default: 10 },
+  table: { type: Object, required: true },
 });
 
 const emit = defineEmits(["update:page"]);
@@ -34,7 +35,7 @@ function goToPageInput() {
   const n = Number(raw);
   if (!Number.isFinite(n)) return;
   const target = Math.max(1, Math.min(props.lastPage, Math.floor(n)));
-  if (target !== props.currentPage) setPage(target);
+  if (target !== props.currentPage) props.table.setPageIndex(target - 1);
   gotoInput.value = "";
 }
 
@@ -136,14 +137,17 @@ function setPage(p) {
       >
         <PaginationContent>
           <!-- First -->
-          <PaginationFirst :disabled="currentPage <= 1" @click="setPage(1)">
+          <PaginationFirst
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          >
             <ChevronsLeft />
           </PaginationFirst>
 
           <!-- Previous -->
           <PaginationPrevious
-            :disabled="currentPage <= 1"
-            @click="setPage(currentPage - 1)"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
           >
             <ChevronLeft />
           </PaginationPrevious>
@@ -154,25 +158,22 @@ function setPage(p) {
             <PaginationItem
               v-else
               :value="item"
-              :is-active="currentPage === item"
-              @click="setPage(item)"
+              :is-active="currentPage === index"
+              @click="table.setPageIndex(index)"
             >
               {{ item }}
             </PaginationItem>
           </template>
 
           <!-- Next -->
-          <PaginationNext
-            :disabled="currentPage >= lastPage"
-            @click="setPage(currentPage + 1)"
-          >
+          <PaginationNext :disabled="!table.getCanNextPage()" @click="table.nextPage()">
             <ChevronRight />
           </PaginationNext>
 
           <!-- Last -->
           <PaginationLast
-            :disabled="currentPage >= lastPage"
-            @click="setPage(lastPage)"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
           >
             <ChevronsRight />
           </PaginationLast>
@@ -191,7 +192,7 @@ function setPage(p) {
             :max="lastPage"
             inputmode="numeric"
             class="w-10 h-full text-sm text-center bg-transparent border-0 outline-none focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-            :placeholder="String(currentPage)"
+            :placeholder="String(currentPage + 1)"
             aria-label="Pojdi na stran"
             @keyup.enter="goToPageInput"
             @blur="goToPageInput"