From c742f9e9d800a313c03673298f601305dd0a5923 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Mon, 11 Mar 2024 12:01:36 +0200
Subject: [PATCH] Fix: add updatePage funtion that do the pagination logic

---
 .../dashboard/components/public_ips_table.vue    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index fdb14aa148..9a2534baaf 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -15,7 +15,8 @@
         { value: 50, title: '50' },
       ]"
       :page="page"
-      @update:items-per-page="page => updateIPPage(page)"
+      @update:items-per-page="size => updateIPPageSize(size)"
+      @update:page="page => updateIPPage(page)"
       class="elevation-1 v-data-table-header"
       density="compact"
       :disable-sort="true"
@@ -134,12 +135,20 @@ export default {
       await getFarmByID(props.farmId);
     });
 
-    async function updateIPPage(page: number) {
+    function updateIPPageSize(pageSize: number) {
       loadingIps.value = true;
-      size.value = page;
+      size.value = pageSize;
       copyPublicIps.value = publicIps.value.slice(0, size.value) as unknown as PublicIp[];
       loadingIps.value = false;
     }
+    function updateIPPage(pageNumber: number) {
+      page.value = pageNumber;
+      loadingIps.value = true;
+      const startIndex = (pageNumber - 1) * size.value;
+      const endIndex = startIndex + size.value;
+      copyPublicIps.value = publicIps.value.slice(startIndex, endIndex) as unknown as PublicIp[];
+      loadingIps.value = false;
+    }
 
     async function getFarmByID(id: number) {
       loadingIps.value = true;
@@ -192,6 +201,7 @@ export default {
       updateIPPage,
       copyPublicIps,
       loadingIps,
+      updateIPPageSize,
     };
   },
 };