Merge pull request #3503 from threefoldtech/development_farms

Reset the farm name value in the create farm dialog
threefoldtech · Oct 20, 2024 · b3e5bd8 · b3e5bd8
2 parents ec086ec + 2e88a5f
commit b3e5bd8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 23 deletions.
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
@@ -21,10 +21,10 @@
           <v-card-text>
             <form-validator v-model="valid">
               <input-validator
-                :value="$props.name"
+                :value="farmName"
                 :rules="[
                   validators.required('Farm name is required.'),
-                  name => validators.isAlpha('Farm name must start with an alphabet char.')(name[0]),
+                  (farmName: string) => validators.isAlpha('Farm name must start with an alphabet char.')(farmName[0]),
                   validators.minLength('Farm name minimum length is 3 chars.', 3),
                   validators.maxLength('Farm name maximum length is 40 chars.', 40),
                   validators.pattern('Farm name should not contain whitespaces.', {
@@ -34,13 +34,7 @@
                 :async-rules="[validateFarmName]"
                 #="{ props }"
               >
-                <v-text-field
-                  :model-value="$props.name"
-                  v-bind:="props"
-                  @update:model-value="$emit('update:name', $event)"
-                  outlined
-                  label="Farm name"
-                ></v-text-field>
+                <v-text-field v-model="farmName" v-bind:="props" outlined label="Farm name"></v-text-field>
               </input-validator>
             </form-validator>
           </v-card-text>
@@ -65,26 +59,20 @@ import { createCustomToast, ToastType } from "../../utils/custom_toast";
 
 export default {
   name: "CreateFarm",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup(props, context) {
+  setup() {
     const showDialogue = ref(false);
     const isCreating = ref(false);
     const gridStore = useGrid();
     const valid = ref(false);
+    const farmName = ref("");
 
     async function createFarm() {
       try {
         isCreating.value = true;
-        await gridStore.grid.farms.create({ name: props.name });
+        await gridStore.grid.farms.create({ name: farmName.value });
         createCustomToast("Farm created successfully.", ToastType.success);
         showDialogue.value = false;
-        context.emit("farm-created");
+        farmName.value = "";
         notifyDelaying();
       } catch (error) {
         console.log(error);
@@ -109,6 +97,7 @@ export default {
       showDialogue,
       isCreating,
       valid,
+      farmName,
       createFarm,
       validateFarmName,
     };

diff --git a/packages/playground/src/dashboard/farms_view.vue b/packages/playground/src/dashboard/farms_view.vue
@@ -5,7 +5,7 @@
       <v-card-title class="pa-0">Farms</v-card-title>
     </v-card>
 
-    <CreateFarm v-model:name="name" class="mt-4" @farm-created="farmsReload = true" />
+    <CreateFarm class="mt-4" @farm-created="farmsReload = true" />
     <UserFarms ref="userFarms" :reloadFarms="farmsReload" />
     <UserNodes />
   </div>
@@ -17,7 +17,6 @@ import { ref } from "vue";
 import CreateFarm from "./components/create_farm.vue";
 import UserFarms from "./components/user_farms.vue";
 import UserNodes from "./components/user_nodes.vue";
-
 export default {
   name: "DashboardFarms",
   components: {
@@ -26,11 +25,9 @@ export default {
     CreateFarm,
   },
   setup() {
-    const name = ref<string>("");
     const farmsReload = ref<boolean>(false);
 
     return {
-      name,
       farmsReload,
     };
   },