normalized closing dialogs

frontend/src/components/Details/DeleteAssets.vue

@@ -99,7 +99,7 @@ function closeDialog() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -131,7 +131,7 @@ function closeDialog() {
       </v-card-text>
       <v-card-text>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn @click="deleteAssets()" class="text-romm-red bg-terciary ml-5"
             >Confirm</v-btn
           >

frontend/src/components/Dialog/Platform/CreatePlatformBinding.vue

@@ -8,6 +8,11 @@ const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showCreatePlatformBindingDialog", () => {
   show.value = true;
 });
+
+// Functions
+function closeDialog() {
+  show.value = false;
+}
 </script>
 <template>
   <v-dialog v-model="show" max-width="500px" :scrim="false">
@@ -19,7 +24,7 @@ emitter?.on("showCreatePlatformBindingDialog", () => {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -33,7 +38,7 @@ emitter?.on("showCreatePlatformBindingDialog", () => {
 
       <v-card-text>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn :disabled="true" class="text-romm-green bg-terciary ml-5">
             Create
           </v-btn>

frontend/src/components/Dialog/Platform/DeletePlatform.vue

@@ -51,7 +51,11 @@ function closeDialog() {
 }
 </script>
 <template>
-  <v-dialog v-if="platform" v-model="show" max-width="500px" :scrim="true">
+  <v-dialog v-if="platform" v-model="show" width="auto"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
+    no-click-animation
+    persistent>
     <v-card>
       <v-toolbar density="compact" class="bg-terciary">
         <v-row class="align-center" no-gutters>
@@ -60,7 +64,7 @@ function closeDialog() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -84,7 +88,7 @@ function closeDialog() {
           <span class="ml-1">Do you confirm?</span>
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn
             class="bg-terciary text-romm-red ml-5"
             @click="deletePlatform()"

frontend/src/components/Dialog/Platform/DeletePlatformBinding.vue

@@ -21,9 +21,20 @@ function removeBindPlatform() {
   heartbeat.removePlatformBinding(platformBindingToDelete.value);
   show.value = false;
 }
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 <template>
-  <v-dialog v-model="show" max-width="500px" :scrim="false">
+  <v-dialog
+    v-model="show"
+    width="auto"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
+    no-click-animation
+    persistent
+  >
     <v-card>
       <v-toolbar density="compact" class="bg-terciary">
         <v-row class="align-center" no-gutters>
@@ -32,7 +43,7 @@ function removeBindPlatform() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -55,7 +66,7 @@ function removeBindPlatform() {
           <span class="ml-1">Do you confirm?</span>
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn
             @click="removeBindPlatform()"
             class="text-romm-red bg-terciary ml-5"

frontend/src/components/Dialog/Rom/DeleteRom.vue

@@ -49,13 +49,13 @@ async function deleteRoms() {
 
   romsStore.remove(roms.value);
   emitter?.emit("refreshDrawer", null);
-  closeDialog()
+  closeDialog();
 }
 
 function closeDialog() {
   deleteFromFs.value = false;
   show.value = false;
-};
+}
 </script>
 
 <template>
@@ -82,7 +82,7 @@ function closeDialog() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -114,7 +114,7 @@ function closeDialog() {
       </v-card-text>
       <v-card-text>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn @click="deleteRoms()" class="text-romm-red bg-terciary ml-5"
             >Confirm</v-btn
           >

frontend/src/components/Dialog/Rom/EditRom.vue

@@ -22,6 +22,7 @@ emitter?.on("showEditRomDialog", (romToEdit) => {
   rom.value = romToEdit;
 });
 
+// Functions
 async function updateRom() {
   if (!rom.value) return;
 
@@ -65,6 +66,10 @@ async function updateRom() {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
     });
 }
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 
 <template>
@@ -73,8 +78,8 @@ async function updateRom() {
     scroll-strategy="none"
     width="auto"
     :scrim="false"
-    @click:outside="show = false"
-    @keydown.esc="show = false"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
     no-click-animation
     persistent
     v-if="rom"
@@ -94,7 +99,7 @@ async function updateRom() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -154,7 +159,7 @@ async function updateRom() {
           />
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn @click="updateRom()" class="text-romm-green ml-5 bg-terciary"
             >Apply</v-btn
           >

frontend/src/components/Dialog/Rom/SearchRom.vue

@@ -27,6 +27,7 @@ emitter?.on("showSearchRomDialog", (romToSearch) => {
   searchIGDB();
 });
 
+// Functions
 async function searchIGDB() {
   if (!rom.value) return;
 
@@ -85,6 +86,10 @@ async function updateRom(matchedRom: IGDBRomType) {
     });
 }
 
+function closeDialog() {
+  show.value = false;
+}
+
 onBeforeUnmount(() => {
   emitter?.off("showSearchRomDialog");
 });
@@ -96,8 +101,8 @@ onBeforeUnmount(() => {
     scroll-strategy="none"
     width="auto"
     :scrim="false"
-    @click:outside="show = false"
-    @keydown.esc="show = false"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
     no-click-animation
     persistent
   >
@@ -148,7 +153,7 @@ onBeforeUnmount(() => {
 
           <v-col cols="2" xs="2" sm="2" md="2" lg="1">
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               rounded="0"
               variant="text"
               icon="mdi-close"

frontend/src/components/Dialog/Rom/UploadRom.vue

@@ -41,6 +41,7 @@ socket.on("scan:done_ko", (msg) => {
   socket.disconnect();
 });
 
+// Functions
 async function uploadRoms() {
   show.value = false;
   scanning.set(true);
@@ -97,6 +98,10 @@ async function uploadRoms() {
     });
 }
 
+function closeDialog() {
+  show.value = false;
+}
+
 onBeforeUnmount(() => {
   socket.off("scan:done");
   socket.off("scan:done_ko");
@@ -109,8 +114,8 @@ onBeforeUnmount(() => {
     scroll-strategy="none"
     width="auto"
     :scrim="false"
-    @click:outside="show = false"
-    @keydown.esc="show = false"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
     no-click-animation
     persistent
   >
@@ -129,7 +134,7 @@ onBeforeUnmount(() => {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -157,7 +162,7 @@ onBeforeUnmount(() => {
           />
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn @click="uploadRoms()" class="text-romm-green ml-5 bg-terciary">
             Upload
           </v-btn>

frontend/src/components/Dialog/User/CreateUser.vue

@@ -19,6 +19,7 @@ emitter?.on("showCreateUserDialog", () => {
   show.value = true;
 });
 
+// Functions
 async function createUser() {
   await api.createUser(user.value)
     .then(({ data }) => {
@@ -35,6 +36,10 @@ async function createUser() {
     });
   show.value = false;
 }
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 <template>
   <v-dialog v-model="show" max-width="500px" :scrim="false">
@@ -46,7 +51,7 @@ async function createUser() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -99,7 +104,7 @@ async function createUser() {
           </v-col>
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn
             :disabled="!user.username || !user.password"
             class="text-romm-green bg-terciary ml-5"

frontend/src/components/Dialog/User/DeleteUser.vue

@@ -15,10 +15,12 @@ emitter?.on("showDeleteUserDialog", (userToDelete) => {
   show.value = true;
 });
 
+// Functions
 async function deleteUser() {
   if (!user.value) return;
 
-  await api.deleteUser(user.value)
+  await api
+    .deleteUser(user.value)
     .then(() => {
       if (user.value) usersStore.remove(user.value.id);
     })
@@ -34,9 +36,21 @@ async function deleteUser() {
 
   show.value = false;
 }
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 <template>
-  <v-dialog v-if="user" v-model="show" max-width="500px" :scrim="true">
+  <v-dialog
+    v-if="user"
+    v-model="show"
+    width="auto"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
+    no-click-animation
+    persistent
+  >
     <v-card>
       <v-toolbar density="compact" class="bg-terciary">
         <v-row class="align-center" no-gutters>
@@ -45,7 +59,7 @@ async function deleteUser() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -55,16 +69,17 @@ async function deleteUser() {
           </v-col>
         </v-row>
       </v-toolbar>
+
       <v-divider class="border-opacity-25" :thickness="1" />
 
       <v-card-text>
         <v-row class="justify-center pa-2" no-gutters>
           <span class="mr-1">Deleting</span
           ><span class="text-romm-accent-1">{{ user.username }}</span
-          >.<span class="ml-1">Do you confirm?</span>
+          ><span class="ml-1">user. Do you confirm?</span>
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn class="bg-terciary text-romm-red ml-5" @click="deleteUser()"
             >Confirm</v-btn
           >

frontend/src/components/Dialog/User/EditUser.vue

@@ -4,7 +4,7 @@ import type { Emitter } from "mitt";
 import type { Events, UserItem } from "@/types/emitter";
 
 import api from "@/services/api";
-import { defaultAvatarPath } from "@/utils"
+import { defaultAvatarPath } from "@/utils";
 import storeUsers from "@/stores/users";
 
 const user = ref<UserItem | null>(null);
@@ -17,16 +17,18 @@ emitter?.on("showEditUserDialog", (userToEdit) => {
   show.value = true;
 });
 
+// Functions
 function editUser() {
   if (!user.value) return;
 
-  api.updateUser(user.value)
+  api
+    .updateUser(user.value)
     .then(({ data }) => {
       emitter?.emit("snackbarShow", {
         msg: `User ${data.username} updated successfully`,
         icon: "mdi-check-bold",
         color: "green",
-        timeout: 5000
+        timeout: 5000,
       });
       usersStore.update(data);
     })
@@ -37,13 +39,17 @@ function editUser() {
         }`,
         icon: "mdi-close-circle",
         color: "red",
-        timeout: 5000
+        timeout: 5000,
       });
     });
 
   show.value = false;
   emitter?.emit("refreshDrawer", null);
 }
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 <template>
   <v-dialog v-if="user" v-model="show" max-width="700px" :scrim="false">
@@ -55,7 +61,7 @@ function editUser() {
           </v-col>
           <v-col>
             <v-btn
-              @click="show = false"
+              @click="closeDialog"
               class="bg-terciary"
               rounded="0"
               variant="text"
@@ -138,7 +144,7 @@ function editUser() {
           </v-col>
         </v-row>
         <v-row class="justify-center pa-2" no-gutters>
-          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="closeDialog" class="bg-terciary">Cancel</v-btn>
           <v-btn class="text-romm-green bg-terciary ml-5" @click="editUser()"
             >Apply</v-btn
           >

frontend/src/components/Notification.vue

@@ -4,20 +4,24 @@ import type { Emitter } from "mitt";
 import type { SnackbarStatus, Events } from "@/types/emitter";
 
 // Props
-const snackbarShow = ref(false);
+const show = ref(false);
 const snackbarStatus = ref<SnackbarStatus>({ msg: "" });
 
 // Event listeners bus
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("snackbarShow", (snackbar: SnackbarStatus) => {
-  snackbarShow.value = true;
+  show.value = true;
   snackbarStatus.value = snackbar;
 });
+
+function closeDialog() {
+  show.value = false;
+}
 </script>
 
 <template>
   <v-snackbar
-    v-model="snackbarShow"
+    v-model="show"
     :timeout="snackbarStatus.timeout ? snackbarStatus.timeout : 2000"
     location="top"
     color="tooltip"
@@ -29,7 +33,7 @@ emitter?.on("snackbarShow", (snackbar: SnackbarStatus) => {
     />
     {{ snackbarStatus.msg }}
     <template v-slot:actions>
-      <v-btn @click="snackbarShow = false" variant="text">
+      <v-btn @click="closeDialog" variant="text">
         <v-icon icon="mdi-close" />
       </v-btn>
     </template>