From 8080d979ac2b3eb8dedaeeac61ad715ed00d61ff Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Tue, 8 Oct 2024 09:07:54 +0300
Subject: [PATCH 1/4] add event emit and timeout

---
 .../src/dashboard/components/create_farm.vue  | 88 +++++++++----------
 .../src/dashboard/components/user_farms.vue   | 25 +++++-
 .../playground/src/dashboard/farms_view.vue   |  6 +-
 3 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 8408706c8e..68339bcda4 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -54,62 +54,54 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { ref } from "vue";
 
-import { notifyDelaying } from "@/utils/notifications";
-
 import { gridProxyClient } from "../../clients";
 import { useGrid } from "../../stores";
 import { createCustomToast, ToastType } from "../../utils/custom_toast";
 
-export default {
-  name: "CreateFarm",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const showDialogue = ref(false);
-    const isCreating = ref(false);
-    const gridStore = useGrid();
-    const valid = ref(false);
-    async function createFarm() {
-      try {
-        isCreating.value = true;
-        await gridStore.grid.farms.create({ name: props.name });
-        createCustomToast("Farm created successfully.", ToastType.success);
-        notifyDelaying();
-        showDialogue.value = false;
-      } catch (error) {
-        console.log(error);
-        createCustomToast("Failed to create farm.", ToastType.danger);
-      } finally {
-        isCreating.value = false;
-      }
-    }
-    async function validateFarmName(name: string) {
-      if (!name.split("").every((c: string) => /[a-zA-Z0-9\-_]/.test(c))) {
-        return {
-          message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'",
-        };
-      }
-
-      const farmsWithSameName = await gridProxyClient.farms.listAll({ name: name.toLocaleLowerCase() });
-      if (farmsWithSameName.length > 0) {
-        return { message: "Farm name already exists!" };
-      }
-    }
+const props = defineProps<{
+  name: {
+    type: string;
+    required: true;
+  };
+}>();
+const showDialogue = ref(false);
+const isCreating = ref(false);
+const gridStore = useGrid();
+const valid = ref(false);
+const emits = defineEmits(["farm-created"]);
+async function createFarm() {
+  try {
+    isCreating.value = true;
+    await gridStore.grid.farms.create({ name: props.name });
+    createCustomToast("Farm created successfully.", ToastType.success);
+    showDialogue.value = false;
+    emits("farm-created");
+  } catch (error) {
+    console.log(error);
+    createCustomToast("Failed to create farm.", ToastType.danger);
+  } finally {
+    isCreating.value = false;
+  }
+}
+async function validateFarmName(name: string) {
+  if (!name.split("").every((c: string) => /[a-zA-Z0-9\-_]/.test(c))) {
     return {
-      showDialogue,
-      isCreating,
-      valid,
-      createFarm,
-      validateFarmName,
+      message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'",
     };
-  },
+  }
+
+  const farmsWithSameName = await gridProxyClient.farms.listAll({ name: name.toLocaleLowerCase() });
+  if (farmsWithSameName.length > 0) {
+    return { message: "Farm name already exists!" };
+  }
+}
+</script>
+<script lang="ts">
+export default {
+  name: "CreateFarm",
 };
 </script>
 
diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
index e1ac3aa7dc..ff22d7b054 100644
--- a/packages/playground/src/dashboard/components/user_farms.vue
+++ b/packages/playground/src/dashboard/components/user_farms.vue
@@ -139,7 +139,7 @@ import { type Farm, SortBy, SortOrder } from "@threefold/gridproxy_client";
 import { jsPDF } from "jspdf";
 import { debounce } from "lodash";
 import { StrKey } from "stellar-sdk";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import CardDetails from "@/components/node_details_cards/card_details.vue";
@@ -164,11 +164,30 @@ export default {
     CardDetails,
     AddIP,
   },
-  setup(_, context) {
+  props: {
+    reloadFarms: {
+      type: Boolean,
+    },
+  },
+
+  setup(props, context) {
     const gridStore = useGrid();
     const profile = useProfileManager().profile;
     const twinId = profile!.twinId;
     const search = ref<string>();
+    watch(
+      () => props.reloadFarms,
+      async () => {
+        console.log(props.reloadFarms);
+        loading.value = true;
+        console.log(loading.value);
+        setTimeout(async () => {
+          await reloadFarms();
+        }, 30000);
+        loading.value = false;
+      },
+    );
+
     const headers = [
       {
         title: "Farm ID",
@@ -213,6 +232,7 @@ export default {
 
     const reloadFarms = debounce(getUserFarms, 20000);
     async function getUserFarms() {
+      loading.value = true;
       try {
         const { data, count } = await gridProxyClient.farms.list({
           retCount: true,
@@ -333,6 +353,7 @@ export default {
     }
 
     context.expose({ getFarmsNames, reloadFarms });
+
     return {
       gridStore,
       headers,
diff --git a/packages/playground/src/dashboard/farms_view.vue b/packages/playground/src/dashboard/farms_view.vue
index cdf5a66441..e9f2c11129 100644
--- a/packages/playground/src/dashboard/farms_view.vue
+++ b/packages/playground/src/dashboard/farms_view.vue
@@ -5,8 +5,8 @@
       <v-card-title class="pa-0">Farms</v-card-title>
     </v-card>
 
-    <CreateFarm v-model:name="name" class="mt-4" />
-    <UserFarms ref="userFarms" />
+    <CreateFarm v-model:name="name" class="mt-4" @farm-created.once="farmsReload = true" />
+    <UserFarms ref="userFarms" @farm-created="farmsReload" />
     <UserNodes />
   </div>
 </template>
@@ -27,9 +27,11 @@ export default {
   },
   setup() {
     const name = ref<string>("");
+    const farmsReload = ref<boolean>(false);
 
     return {
       name,
+      farmsReload,
     };
   },
 };

From 0a8ceb718b47b194fe978519114e3bd1b3ea5bf9 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Tue, 8 Oct 2024 16:09:31 +0300
Subject: [PATCH 2/4] add farms reload on farm create

---
 packages/playground/src/dashboard/components/user_farms.vue | 6 +-----
 packages/playground/src/dashboard/farms_view.vue            | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
index ff22d7b054..a0db6ea05f 100644
--- a/packages/playground/src/dashboard/components/user_farms.vue
+++ b/packages/playground/src/dashboard/components/user_farms.vue
@@ -178,13 +178,9 @@ export default {
     watch(
       () => props.reloadFarms,
       async () => {
-        console.log(props.reloadFarms);
-        loading.value = true;
-        console.log(loading.value);
         setTimeout(async () => {
-          await reloadFarms();
+          await getUserFarms();
         }, 30000);
-        loading.value = false;
       },
     );
 
diff --git a/packages/playground/src/dashboard/farms_view.vue b/packages/playground/src/dashboard/farms_view.vue
index e9f2c11129..08108e2440 100644
--- a/packages/playground/src/dashboard/farms_view.vue
+++ b/packages/playground/src/dashboard/farms_view.vue
@@ -5,8 +5,8 @@
       <v-card-title class="pa-0">Farms</v-card-title>
     </v-card>
 
-    <CreateFarm v-model:name="name" class="mt-4" @farm-created.once="farmsReload = true" />
-    <UserFarms ref="userFarms" @farm-created="farmsReload" />
+    <CreateFarm v-model:name="name" class="mt-4" @farm-created="farmsReload = true" />
+    <UserFarms ref="userFarms" :reloadFarms="farmsReload" />
     <UserNodes />
   </div>
 </template>

From afd8af1e30a239c7bea6a34d786a26da4c92f13b Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Tue, 8 Oct 2024 16:51:12 +0300
Subject: [PATCH 3/4] Revert "add event emit and timeout"

This reverts commit 8080d979ac2b3eb8dedaeeac61ad715ed00d61ff.
---
 .../src/dashboard/components/create_farm.vue  | 88 ++++++++++---------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 68339bcda4..8408706c8e 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -54,54 +54,62 @@
   </v-container>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
 import { ref } from "vue";
 
+import { notifyDelaying } from "@/utils/notifications";
+
 import { gridProxyClient } from "../../clients";
 import { useGrid } from "../../stores";
 import { createCustomToast, ToastType } from "../../utils/custom_toast";
 
-const props = defineProps<{
-  name: {
-    type: string;
-    required: true;
-  };
-}>();
-const showDialogue = ref(false);
-const isCreating = ref(false);
-const gridStore = useGrid();
-const valid = ref(false);
-const emits = defineEmits(["farm-created"]);
-async function createFarm() {
-  try {
-    isCreating.value = true;
-    await gridStore.grid.farms.create({ name: props.name });
-    createCustomToast("Farm created successfully.", ToastType.success);
-    showDialogue.value = false;
-    emits("farm-created");
-  } catch (error) {
-    console.log(error);
-    createCustomToast("Failed to create farm.", ToastType.danger);
-  } finally {
-    isCreating.value = false;
-  }
-}
-async function validateFarmName(name: string) {
-  if (!name.split("").every((c: string) => /[a-zA-Z0-9\-_]/.test(c))) {
-    return {
-      message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'",
-    };
-  }
-
-  const farmsWithSameName = await gridProxyClient.farms.listAll({ name: name.toLocaleLowerCase() });
-  if (farmsWithSameName.length > 0) {
-    return { message: "Farm name already exists!" };
-  }
-}
-</script>
-<script lang="ts">
 export default {
   name: "CreateFarm",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const showDialogue = ref(false);
+    const isCreating = ref(false);
+    const gridStore = useGrid();
+    const valid = ref(false);
+    async function createFarm() {
+      try {
+        isCreating.value = true;
+        await gridStore.grid.farms.create({ name: props.name });
+        createCustomToast("Farm created successfully.", ToastType.success);
+        notifyDelaying();
+        showDialogue.value = false;
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to create farm.", ToastType.danger);
+      } finally {
+        isCreating.value = false;
+      }
+    }
+    async function validateFarmName(name: string) {
+      if (!name.split("").every((c: string) => /[a-zA-Z0-9\-_]/.test(c))) {
+        return {
+          message: "Farm name can only contain alphabetic letters, numbers, '-' or '_'",
+        };
+      }
+
+      const farmsWithSameName = await gridProxyClient.farms.listAll({ name: name.toLocaleLowerCase() });
+      if (farmsWithSameName.length > 0) {
+        return { message: "Farm name already exists!" };
+      }
+    }
+    return {
+      showDialogue,
+      isCreating,
+      valid,
+      createFarm,
+      validateFarmName,
+    };
+  },
 };
 </script>
 

From f8b910750586309c08d522e868b1b7680b9357a2 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Tue, 8 Oct 2024 16:58:20 +0300
Subject: [PATCH 4/4] user contex.emit instead

---
 .../playground/src/dashboard/components/create_farm.vue     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
index 8408706c8e..0d5c19bf98 100644
--- a/packages/playground/src/dashboard/components/create_farm.vue
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -71,18 +71,20 @@ export default {
       required: true,
     },
   },
-  setup(props) {
+
+  setup(props, context) {
     const showDialogue = ref(false);
     const isCreating = ref(false);
     const gridStore = useGrid();
     const valid = ref(false);
+
     async function createFarm() {
       try {
         isCreating.value = true;
         await gridStore.grid.farms.create({ name: props.name });
         createCustomToast("Farm created successfully.", ToastType.success);
-        notifyDelaying();
         showDialogue.value = false;
+        context.emit("farm-created");
       } catch (error) {
         console.log(error);
         createCustomToast("Failed to create farm.", ToastType.danger);