From fb1695a243ea5758926394e2581c9eab14d4f543 Mon Sep 17 00:00:00 2001
From: danielfreiremendesottoworks <daniel.freiremendes@ottogroup.com>
Date: Thu, 13 Jun 2024 14:40:54 +0200
Subject: [PATCH] adds watch and removes click event

---
 frontend/src/components/BackupEditDialog.vue | 16 ++++++++++------
 frontend/src/components/BackupViewDialog.vue | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/BackupEditDialog.vue b/frontend/src/components/BackupEditDialog.vue
index b7afdc1..0ae7cbc 100644
--- a/frontend/src/components/BackupEditDialog.vue
+++ b/frontend/src/components/BackupEditDialog.vue
@@ -93,10 +93,14 @@ const integerRequiredRule = (fieldName: string) => {
   return (v: number) => (!!v && v > 0) || `${fieldName} is required and must be bigger than 0`;
 };
 
-const closeDialog = () => {
-  viewDialog.value = false;
-  emits('close');
-};
+watch(
+  () => viewDialog.value,
+  (value) => {
+    if (!value) {
+      emits('close');
+    }
+  },
+);
 
 watch(
   () => props.id,
@@ -108,7 +112,7 @@ watch(
 </script>
 
 <template>
-  <v-dialog v-model="viewDialog" width="800" @click="closeDialog">
+  <v-dialog v-model="viewDialog" width="800">
     <v-card title="Update backup" :loading="isLoading">
       <v-card-text>
         <v-form :disabled="isLoading || backupStatusIsDeleted" v-model="isValid" fast-fail @submit.prevent>
@@ -205,7 +209,7 @@ watch(
       </v-card-text>
       <template v-slot:actions>
         <v-btn-group class="ms-auto">
-          <v-btn text="Cancel" @click="closeDialog"></v-btn>
+          <v-btn text="Cancel" @click="viewDialog = false"></v-btn>
           <v-btn text="Update" :disabled="isLoading || !isValid" @click="saveBackup()"></v-btn>
         </v-btn-group>
       </template>
diff --git a/frontend/src/components/BackupViewDialog.vue b/frontend/src/components/BackupViewDialog.vue
index 17865f9..6b9b459 100644
--- a/frontend/src/components/BackupViewDialog.vue
+++ b/frontend/src/components/BackupViewDialog.vue
@@ -123,10 +123,14 @@ const projectLink = (project: string) => {
   return `https://console.cloud.google.com/welcome?project=${project}`;
 };
 
-const closeDialog = () => {
-  viewDialog.value = false;
-  emits('close');
-};
+watch(
+  () => viewDialog.value,
+    (value) => {
+      if (!value) {
+        emits('close');
+      }
+    },
+);
 
 watch(
     () => props.id,
@@ -138,7 +142,7 @@ watch(
 </script>
 
 <template>
-  <v-dialog v-model="viewDialog" width="800" @click="closeDialog">
+  <v-dialog v-model="viewDialog" width="800">
     <v-card title="Backup">
       <v-card-text v-if="isLoading">
         <v-progress-linear indeterminate/>
@@ -395,7 +399,7 @@ watch(
         </v-window>
       </v-card-text>
       <template v-slot:actions>
-        <v-btn class="ms-auto" text="Close" @click="closeDialog"></v-btn>
+        <v-btn class="ms-auto" text="Close" @click="viewDialog = false"></v-btn>
       </template>
     </v-card>
   </v-dialog>