Update farm reload after farm creation (#3544)

* re-add event emit * add event watcher and prop updater
threefoldtech · Oct 22, 2024 · a516b1b · a516b1b
1 parent 1b54bd9
commit a516b1b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
@@ -59,7 +59,7 @@ import { createCustomToast, ToastType } from "../../utils/custom_toast";
 
 export default {
   name: "CreateFarm",
-  setup() {
+  setup(_, context) {
     const showDialogue = ref(false);
     const isCreating = ref(false);
     const gridStore = useGrid();
@@ -73,6 +73,7 @@ export default {
         createCustomToast("Farm created successfully.", ToastType.success);
         showDialogue.value = false;
         farmName.value = "";
+        context.emit("farm-created");
         notifyDelaying();
       } catch (error) {
         console.log(error);

diff --git a/packages/playground/src/dashboard/farms_view.vue b/packages/playground/src/dashboard/farms_view.vue
@@ -5,14 +5,14 @@
       <v-card-title class="pa-0">Farms</v-card-title>
     </v-card>
 
-    <CreateFarm class="mt-4" @farm-created="farmsReload = true" />
-    <UserFarms ref="userFarms" :reloadFarms="farmsReload" />
+    <CreateFarm class="mt-4" @farm-created="handleFarmCreated" />
+    <UserFarms :ref="el => (userFarms = el)" :reloadFarms="farmsReload" />
     <UserNodes />
   </div>
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 import CreateFarm from "./components/create_farm.vue";
 import UserFarms from "./components/user_farms.vue";
@@ -26,9 +26,20 @@ export default {
   },
   setup() {
     const farmsReload = ref<boolean>(false);
-
+    const userFarms = ref();
+    function handleFarmCreated() {
+      farmsReload.value = !farmsReload.value;
+    }
+    watch(
+      () => farmsReload.value,
+      () => {
+        userFarms.value.reloadFarms = farmsReload.value;
+      },
+    );
     return {
       farmsReload,
+      handleFarmCreated,
+      userFarms,
     };
   },
 };