Merge pull request #1684 from threefoldtech/dev_fix_dialog_close_farms

farms dialog
threefoldtech · Dec 14, 2023 · 7212ffb · 7212ffb
2 parents d4282b1 + 5f9511e
commit 7212ffb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 104 deletions.
diff --git a/packages/playground/src/components/farm_dialog.vue b/packages/playground/src/components/farm_dialog.vue
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
@@ -29,13 +29,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="ml-auto">
+            <v-btn icon dark @click="() => (dialog = false)">
+              <v-icon>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>
 
@@ -51,12 +73,16 @@ 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 filterOptions = ref<FarmFilterOptions>({
   size: size.value,
   page: page.value,
@@ -153,11 +179,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 = [
@@ -194,14 +216,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>