From e7100729e5b426139d752e2213403309a2000cad Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Mon, 7 Oct 2024 08:40:48 +0300
Subject: [PATCH 1/2] convert public ip table to data-server table for
 pagination

---
 .../dashboard/components/public_ips_table.vue | 65 ++++++++++++++++---
 1 file changed, 55 insertions(+), 10 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 7e1e22c895..3026c228ad 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -1,6 +1,22 @@
 <template>
   <div>
-    <ListTable :headers="headers" :items="publicIps" :loading="loading" :deleting="isRemoving" v-model="selectedItems">
+    <v-data-table-server
+      :headers="headers"
+      :items="publicIpsPag"
+      :loading="loading"
+      :deleting="isRemoving"
+      v-model="selectedItems"
+      :items-length="publicIpsCount"
+      v-model:items-per-page="pageSize"
+      :items-per-page-options="[
+        { value: 5, title: '5' },
+        { value: 10, title: '10' },
+        { value: 20, title: '20' },
+        { value: 50, title: '50' },
+      ]"
+      v-model:page="page"
+      @update:options="loadPubIps"
+    >
       <template v-slot:top>
         <v-alert>
           <h4 class="text-center font-weight-medium">Public IPs</h4>
@@ -16,7 +32,7 @@
       <template #[`item.contractId`]="{ item }">
         {{ item.contractId ?? "-" }}
       </template>
-      <template #bottom>
+      <!-- <template #bottom>
         <div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
           <v-btn
             class="ma-3"
@@ -31,8 +47,8 @@
         <div v-else>
           <p class="my-4">No IPs added on this farm.</p>
         </div>
-      </template>
-    </ListTable>
+      </template> -->
+    </v-data-table-server>
     <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
         <v-card-title class="text-subtitle-1">
@@ -61,17 +77,15 @@
 
 <script lang="ts">
 import type { RemoveFarmIPModel } from "@threefold/grid_client";
-import type { PublicIp } from "@threefold/tfchain_client";
+import type { Farm, PublicIp } from "@threefold/tfchain_client";
 import { onMounted, ref, watch } from "vue";
 
-import ListTable from "@/components/list_table.vue";
 import { useGrid } from "@/stores";
 import { IPType } from "@/utils/types";
 
 import { createCustomToast, ToastType } from "../../utils/custom_toast";
 export default {
   name: "PublicIPsTable",
-  components: { ListTable },
   props: {
     farmId: {
       type: Number,
@@ -81,6 +95,8 @@ export default {
   },
   setup(props) {
     const gridStore = useGrid();
+    const page = ref<number>(1);
+    const pageSize = ref(10);
     const headers = [
       {
         title: "IP",
@@ -101,6 +117,7 @@ export default {
       },
     ] as any;
     const publicIps = ref<PublicIp[]>([]);
+    const publicIpsCount = ref(0);
     const loading = ref(false);
     const loadingIps = ref(false);
     const showDialogue = ref(false);
@@ -111,21 +128,44 @@ export default {
     const isRemoving = ref(false);
     const selectedItems = ref<any[]>([]);
     const items = ref<RemoveFarmIPModel[]>([]);
+    const publicIpsPag = ref<PublicIp[]>([]);
 
     onMounted(async () => {
       await getFarmByID(props.farmId);
     });
-
-    async function getFarmByID(id: number) {
+    function getTotalPubIps(farm: Farm) {
       loadingIps.value = true;
       try {
-        const farm = await gridStore.grid.farms.getFarmByID({ id });
         publicIps.value = farm.publicIps as unknown as PublicIp[];
+        if (publicIps.value) {
+          loadPubIps();
+        }
+      } catch (error) {
+        createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
+      }
+      loadingIps.value = false;
+    }
+    function loadPubIps() {
+      loadingIps.value = true;
+      try {
+        publicIpsCount.value = publicIps.value.length;
+        const start = (page.value - 1) * pageSize.value;
+        const end = start + pageSize.value;
+        publicIpsPag.value = publicIps.value.slice(start, end);
       } catch (error) {
         createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
       }
       loadingIps.value = false;
     }
+
+    async function getFarmByID(id: number) {
+      try {
+        const farm = await gridStore.grid.farms.getFarmByID({ id });
+        getTotalPubIps(farm);
+      } catch (error) {
+        createCustomToast(`Failed to get Farm details! ${error}`, ToastType.danger);
+      }
+    }
     async function removeFarmIps() {
       try {
         isRemoving.value = true;
@@ -167,6 +207,11 @@ export default {
       removeFarmIps,
       selectedItems,
       loadingIps,
+      page,
+      pageSize,
+      publicIpsCount,
+      loadPubIps,
+      publicIpsPag,
     };
   },
 };

From 9585443d13e47ff0fd7b02f6102f93ec5e517427 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Mon, 7 Oct 2024 09:01:13 +0300
Subject: [PATCH 2/2] move delete button from table bottom to allow pagination,
 add checkboxes beside ips to allow selection for deletion

---
 .../dashboard/components/public_ips_table.vue | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
index 3026c228ad..7112ef6bf2 100644
--- a/packages/playground/src/dashboard/components/public_ips_table.vue
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -22,8 +22,11 @@
           <h4 class="text-center font-weight-medium">Public IPs</h4>
         </v-alert>
       </template>
+
       <template #[`item.ip`]="{ item }">
-        {{ item.ip || "-" }}
+        <div class="d-flex row align-baseline justify-center">
+          <v-checkbox v-model="selectedItems" :value="item" :label="item.ip || '-'"></v-checkbox>
+        </div>
       </template>
       <template #[`item.gateway`]="{ item }">
         {{ item.gateway || "-" }}
@@ -32,23 +35,21 @@
       <template #[`item.contractId`]="{ item }">
         {{ item.contractId ?? "-" }}
       </template>
-      <!-- <template #bottom>
-        <div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
-          <v-btn
-            class="ma-3"
-            color="error"
-            prepend-icon="mdi-delete"
-            :disabled="selectedItems.length === 0 || isRemoving"
-            @click="showDialogue = true"
-          >
-            Delete
-          </v-btn>
-        </div>
-        <div v-else>
-          <p class="my-4">No IPs added on this farm.</p>
-        </div>
-      </template> -->
     </v-data-table-server>
+    <div v-if="publicIps.length > 0" class="d-flex align-end justify-end">
+      <v-btn
+        class="ma-3"
+        color="error"
+        prepend-icon="mdi-delete"
+        :disabled="selectedItems.length === 0 || isRemoving"
+        @click="showDialogue = true"
+      >
+        Delete
+      </v-btn>
+    </div>
+    <div v-else>
+      <p class="my-4">No IPs added on this farm.</p>
+    </div>
     <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
         <v-card-title class="text-subtitle-1">
@@ -133,6 +134,7 @@ export default {
     onMounted(async () => {
       await getFarmByID(props.farmId);
     });
+
     function getTotalPubIps(farm: Farm) {
       loadingIps.value = true;
       try {