From 57e11ee16e322e6b9a76e607f15a7db4598a5b14 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Wed, 13 Dec 2023 12:52:44 +0200
Subject: [PATCH 1/4] move farm dialog to farms to ensure consisitent closing,
 delete unnecessary farms dialog component

---
 .../playground/src/components/farm_dialog.vue | 88 -------------------
 packages/playground/src/views/farms.vue       | 53 +++++++----
 2 files changed, 36 insertions(+), 105 deletions(-)
 delete mode 100644 packages/playground/src/components/farm_dialog.vue

diff --git a/packages/playground/src/components/farm_dialog.vue b/packages/playground/src/components/farm_dialog.vue
deleted file mode 100644
index 1377146cee..0000000000
--- a/packages/playground/src/components/farm_dialog.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
-    <v-container>
-      <v-toolbar :height="35">
-        <div class="d-flex justify-center">
-          <v-btn icon dark @click="() => $emit('close-dialog', false)">
-            <v-icon size="20s">mdi-close</v-icon>
-          </v-btn>
-        </div>
-      </v-toolbar>
-
-      <template v-if="loading">
-        <div color="transparent" class="text-center">
-          <v-progress-circular color="primary" indeterminate :size="50" :width="5" />
-          <p>Loading farm details...</p>
-        </div>
-      </template>
-
-      <template v-else>
-        <v-card>
-          <v-col>
-            <farm-details-card :farm="farm" />
-          </v-col>
-          <v-col>
-            <twin-details-card :farm="farm" />
-          </v-col>
-        </v-card>
-      </template>
-    </v-container>
-  </v-dialog>
-</template>
-
-<script lang="ts">
-import type { Farm } from "@threefold/gridproxy_client";
-import type { PropType } from "vue";
-import { ref, watch } from "vue";
-
-import FarmDetailsCard from "./node_details_cards/farm_details_card.vue";
-import TwinDetailsCard from "./node_details_cards/twin_details_card.vue";
-
-export default {
-  props: {
-    openDialog: {
-      type: Boolean,
-      required: true,
-    },
-    farm: {
-      type: Object as PropType<Farm>,
-      required: true,
-    },
-  },
-  components: {
-    FarmDetailsCard,
-    TwinDetailsCard,
-  },
-  setup(props, { emit }) {
-    const loading = ref(false);
-    const dialog = ref(props.openDialog);
-
-    function closeDialog(newValue: boolean) {
-      emit("close-dialog", newValue);
-    }
-
-    watch(
-      () => props.openDialog,
-      newValue => {
-        dialog.value = newValue as boolean;
-      },
-    );
-
-    return {
-      dialog,
-      loading,
-      closeDialog,
-    };
-  },
-};
-</script>
-
-<style>
-.v-list-item__prepend > .v-icon,
-.v-list-item__append > .v-icon {
-  opacity: 1 !important;
-}
-.v-toolbar__content {
-  justify-content: end !important;
-}
-</style>
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index de71331249..059e08e53c 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -30,13 +30,35 @@
         </v-data-table-server>
       </v-col>
     </v-row>
-    <farmDialog
-      v-if="selectedFarm"
-      :openDialog="isDialogOpened"
-      :farm="selectedFarm"
-      @update:model-value="closeDialog"
-      @close-dialog="closeDialog"
-    />
+    <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
+      <v-container>
+        <v-toolbar :height="35">
+          <div class="d-flex justify-center">
+            <v-btn icon dark @click="() => (dialog = false)">
+              <v-icon size="20s">mdi-close</v-icon>
+            </v-btn>
+          </div>
+        </v-toolbar>
+
+        <template v-if="loading">
+          <div color="transparent" class="text-center">
+            <v-progress-circular color="primary" indeterminate :size="50" :width="5" />
+            <p>Loading farm details...</p>
+          </div>
+        </template>
+
+        <template v-else>
+          <v-card>
+            <v-col>
+              <farm-details-card :farm="selectedFarm" />
+            </v-col>
+            <v-col>
+              <twin-details-card :farm="selectedFarm" />
+            </v-col>
+          </v-card>
+        </template>
+      </v-container>
+    </v-dialog>
   </view-layout>
 </template>
 
@@ -52,12 +74,12 @@ import { inputsInitializer } from "@/utils/filter_farms";
 import { getAllFarms, getFarmQueries } from "@/utils/get_farms";
 const loading = ref<boolean>(false);
 const farms = ref<Farm[]>();
-const isDialogOpened = ref<boolean>(false);
+
 const selectedFarm = ref<Farm>();
 const filterFarmInputs = ref<FilterFarmInputs>(inputsInitializer());
 const size = ref(10);
 const page = ref(1);
-
+const dialog = ref(false);
 const sortBy = ref([{ key: "", order: undefined }]);
 const filterOptions = ref<FarmFilterOptions>({
   size: size.value,
@@ -188,11 +210,7 @@ const openSheet = (_e: any, { item }: any) => {
 };
 const openDialog = (item: Farm) => {
   selectedFarm.value = item;
-  isDialogOpened.value = true;
-};
-
-const closeDialog = () => {
-  isDialogOpened.value = false;
+  dialog.value = true;
 };
 
 const headers: VDataTableHeader = [
@@ -229,14 +247,15 @@ const headers: VDataTableHeader = [
 import type { FarmsQuery } from "@threefold/gridproxy_client";
 
 import Filters from "@/components/filter.vue";
+import FarmDetailsCard from "@/components/node_details_cards/farm_details_card.vue";
+import TwinDetailsCard from "@/components/node_details_cards/twin_details_card.vue";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
-
-import FarmDialog from "../components/farm_dialog.vue";
 export default {
   name: "Farms",
   components: {
-    FarmDialog,
     Filters,
+    FarmDetailsCard,
+    TwinDetailsCard,
   },
 };
 </script>

From 1075346010523abb3ded886d0f6e919d1062186b Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Thu, 14 Dec 2023 11:39:48 +0200
Subject: [PATCH 2/4] make close button consistent with nodes dialog

---
 packages/playground/src/views/farms.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index 059e08e53c..4f1dab3b35 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -32,10 +32,10 @@
     </v-row>
     <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
       <v-container>
-        <v-toolbar :height="35">
-          <div class="d-flex justify-center">
+        <v-toolbar color="primary">
+          <div class="ml-auto">
             <v-btn icon dark @click="() => (dialog = false)">
-              <v-icon size="20s">mdi-close</v-icon>
+              <v-icon>mdi-close</v-icon>
             </v-btn>
           </div>
         </v-toolbar>

From 0194358810d658e3934aa73ef1f1a9380eb12bd8 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Thu, 14 Dec 2023 14:54:01 +0200
Subject: [PATCH 3/4] reduce toolbar height

---
 packages/playground/src/views/farms.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index 4f1dab3b35..03ec07fa42 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -32,7 +32,7 @@
     </v-row>
     <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
       <v-container>
-        <v-toolbar color="primary">
+        <v-toolbar color="primary" :height="35">
           <div class="ml-auto">
             <v-btn icon dark @click="() => (dialog = false)">
               <v-icon>mdi-close</v-icon>

From aa683996ba5dcec1626db963ac7763877cc81ec2 Mon Sep 17 00:00:00 2001
From: amiraabouhadid <amiraabouhadid@gmail.com>
Date: Thu, 14 Dec 2023 16:03:22 +0200
Subject: [PATCH 4/4] remove primary color

---
 packages/playground/src/views/farms.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index 03ec07fa42..dc14adb155 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -32,7 +32,7 @@
     </v-row>
     <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
       <v-container>
-        <v-toolbar color="primary" :height="35">
+        <v-toolbar :height="35">
           <div class="ml-auto">
             <v-btn icon dark @click="() => (dialog = false)">
               <v-icon>mdi-close</v-icon>