Remove farms public IP delete button and create delete all action with it's module and method

packages/grid_client/src/modules/farms.ts

@@ -39,6 +39,13 @@ class Farms {
     return (await this.client.farms.removeFarmIp(options)).apply();
   }
 
+  @expose
+  @validateInput
+  @checkBalance
+  async removeFarmIps(options: RemoveFarmIPModel[]) {
+    return await this.client.farms.removeFarmIps(options);
+  }
+
   @expose
   @validateInput
   @checkBalance

packages/playground/src/dashboard/components/public_ips_table.vue

@@ -1,27 +1,21 @@
 <template>
   <div>
-    <v-data-table-server
+    <v-data-table
       :loading="loadingIps"
       loading-text="Loading farm IPs..."
       :headers="headers"
       :items="copyPublicIps"
       :items-length="publicIps.length"
       :items-per-page="size"
-      :items-per-page-options="[
-        { value: 5, title: '5' },
-        { value: 10, title: '10' },
-        { value: 15, title: '15' },
-        { value: 20, title: '20' },
-        { value: 50, title: '50' },
-      ]"
       :page="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"
       hide-default-header
-      :hover="true"
+      hover
+      show-select
+      v-model="selectedItems"
     >
       <template v-slot:top>
         <v-alert class="pa-5" style="height: 20px">
@@ -38,39 +32,41 @@
       <template #[`item.contract_id`]="{ item }">
         {{ item.value.contract_id || "-" }}
       </template>
-      <template #[`item.actions`]="{ item, index }">
-        <v-btn
-          class="text-subtitle-2"
-          size="small"
-          color="error"
-          @click="
-            () => {
-              showDialogue = true;
-              itemToDelete = { ip: item.raw.ip, index };
-            }
-          "
-          :disabled="loading"
-          :loading="loading"
-        >
-          Delete
-        </v-btn>
+      <template #bottom>
+        <div class="d-flex align-end justify-end">
+          <v-btn
+            class="ma-5"
+            color="error"
+            variant="outlined"
+            prepend-icon="mdi-delete"
+            :disabled="selectedItems.length === 0 || isRemoving"
+            @click="showDialogue = true"
+          >
+            Delete
+          </v-btn>
+        </div>
       </template>
-    </v-data-table-server>
+    </v-data-table>
     <v-dialog v-model="showDialogue" max-width="600">
       <v-card>
         <v-toolbar color="primary" class="custom-toolbar">
-          <p class="mb-5">Delete IP</p>
+          <p class="mb-5">Delete IPs</p>
         </v-toolbar>
-        <v-card-text class="text-subtitle-1">Delete IP {{ itemToDelete?.ip }}? </v-card-text>
+        <v-card-title class="text-subtitle-1">
+          <strong>Delete the following IPs?</strong>
+        </v-card-title>
+        <v-card-text>
+          <v-chip class="ma-1" color="primary" v-for="item in selectedItems" :key="item">
+            {{ item.ip }}
+          </v-chip>
+        </v-card-text>
         <v-card-actions class="justify-end px-5 pb-5 pt-0">
           <v-btn @click="showDialogue = false" variant="outlined" color="anchor">Close</v-btn>
           <v-btn
             variant="outlined"
-            text="Confirm"
+            :text="isRemoving ? 'Deleting..' : 'Confirm'"
             color="error"
-            :loading="isRemoving"
-            :disabled="isRemoving"
-            @click="removeFarmIp({ farmId: $props.farmId, ip: itemToDelete?.ip }, itemToDelete?.index)"
+            @click="removeFarmIps"
           ></v-btn>
         </v-card-actions>
       </v-card>
@@ -79,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import type { RemoveFarmIPModel } from "@threefold/grid_client";
+import { RemoveFarmIPModel } from "@threefold/grid_client";
 import type { PublicIp } from "@threefold/tfchain_client";
 import { onMounted, ref, watch } from "vue";
 
@@ -117,7 +113,6 @@ export default {
         align: "center",
         key: "contractId",
       },
-      { title: "Actions", align: "center", sortable: false, key: "actions" },
     ] as any;
     const publicIps = ref<PublicIp[]>([]);
     const copyPublicIps = ref<PublicIp[]>([]);
@@ -129,9 +124,10 @@ export default {
     const toPublicIP = ref();
     const gateway = ref();
     const isRemoving = ref(false);
-    const itemToDelete = ref();
     const size = ref(5);
     const page = ref(1);
+    const selectedItems = ref<any[]>([]);
+    const items = ref<RemoveFarmIPModel[]>([]);
 
     onMounted(async () => {
       await getFarmByID(props.farmId);
@@ -163,19 +159,23 @@ export default {
       }
       loadingIps.value = false;
     }
-    async function removeFarmIp(options: RemoveFarmIPModel, index: number) {
+    async function removeFarmIps() {
       try {
         isRemoving.value = true;
-        await gridStore.grid.farms.removeFarmIp({ ip: options.ip, farmId: options.farmId });
+        items.value = selectedItems.value.map(item => ({
+          ip: item.ip,
+          farmId: props.farmId,
+        }));
+        await gridStore.grid.farms.removeFarmIps(items.value);
         createCustomToast("IP is deleted successfully!", ToastType.success);
-        publicIps.value.splice(index, 1);
+        await getFarmByID(props.farmId);
       } catch (error) {
         console.log(error);
         createCustomToast("Failed to delete IP!", ToastType.danger);
       } finally {
         isRemoving.value = false;
         showDialogue.value = false;
-        itemToDelete.value = undefined;
+        selectedItems.value = [];
       }
     }
     watch(
@@ -185,6 +185,7 @@ export default {
       },
       { deep: true },
     );
+
     return {
       gridStore,
       headers,
@@ -196,14 +197,14 @@ export default {
       loading,
       showDialogue,
       isRemoving,
-      itemToDelete,
-      removeFarmIp,
+      removeFarmIps,
       page,
       size,
+      updateIPPageSize,
       updateIPPage,
       copyPublicIps,
+      selectedItems,
       loadingIps,
-      updateIPPageSize,
     };
   },
 };

packages/tfchain_client/src/farms.ts

@@ -1,4 +1,5 @@
 import { Client, QueryClient } from "./client";
+import type { ExtrinsicResult } from "./types";
 import { checkConnection } from "./utils";
 
 enum Certification {
@@ -89,7 +90,16 @@ class Farms extends QueryFarms {
   @checkConnection
   async removeFarmIp(options: RemoveFarmIPOptions) {
     const extrinsic = this.client.api.tx.tfgridModule.removeFarmIp(options.farmId, options.ip);
-    return this.client.patchExtrinsic(extrinsic);
+    return this.client.patchExtrinsic<void>(extrinsic);
+  }
+
+  @checkConnection
+  async removeFarmIps(options: RemoveFarmIPOptions[]) {
+    const extrinsics: ExtrinsicResult<void>[] = [];
+    for (const option of options) {
+      extrinsics.push(await this.removeFarmIp(option));
+    }
+    await this.client.applyAllExtrinsics<void>(extrinsics);
   }
 
   @checkConnection