add confirmation dialogs (#564)

frontend/src/locales/messages/en-US.json

@@ -47,7 +47,8 @@
     "subscribed-events": "Subscribed Events",
     "test-message-sent": "Test Message Sent",
     "refresh": "Refresh",
-    "new-version": "New version available!"
+    "new-version": "New version available!",
+    "delete-event": "Delete Event"
   },
   "general": {
     "apply": "Apply",
@@ -303,7 +304,8 @@
       "full-backup": "Full Backup",
       "import-summary": "Import Summary",
       "partial-backup": "Partial Backup",
-      "unable-to-delete-backup": "Unable to Delete Backup."
+      "unable-to-delete-backup": "Unable to Delete Backup.",
+      "delete-backup": "Delete Backup"
     },
     "backup-and-exports": "Backups",
     "backup-info": "Backups are exported in standard JSON format along with all the images stored on the file system. In your backup folder you'll find a .zip file that contains all of the recipe JSON and images from the database. Additionally, if you selected a markdown file, those will also be stored in the .zip file. To import a backup, it must be located in your backups folder. Automated backups are done each day at 3:00 AM.",

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -8,6 +8,14 @@
       @import="importBackup"
       @delete="deleteBackup"
     />
+    <ConfirmationDialog
+      :title="$t('settings.backup.delete-backup')"
+      :message="$t('general.confirm-delete-generic')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      ref="deleteBackupConfirm"
+      v-on:confirm="emitDelete()"
+    />
     <StatCard :icon="$globals.icons.backupRestore" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
@@ -37,7 +45,7 @@
       <template v-slot:bottom>
         <v-virtual-scroll height="290" item-height="70" :items="availableBackups">
           <template v-slot:default="{ item }">
-            <v-list-item @click.prevent="openDialog(item)">
+            <v-list-item @click.prevent="openDialog(item, btnEvent.IMPORT_EVENT)">
               <v-list-item-avatar>
                 <v-icon large dark :color="color">
                   {{ $globals.icons.database }}
@@ -53,7 +61,7 @@
               </v-list-item-content>
 
               <v-list-item-action class="ml-auto">
-                <v-btn large icon @click.stop="deleteBackup(item.name)">
+                <v-btn large icon @click.stop="openDialog(item, btnEvent.DELETE_EVENT)">
                   <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
               </v-list-item-action>
@@ -68,12 +76,16 @@
 <script>
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import ImportSummaryDialog from "@/components/ImportSummaryDialog";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import StatCard from "@/components/UI/StatCard";
 import BackupDialog from "@/components/UI/Dialogs/BackupDialog";
 import ImportDialog from "@/components/UI/Dialogs/ImportDialog";
+const IMPORT_EVENT = "import";
+const DELETE_EVENT = "delete";
+
 export default {
-  components: { StatCard, ImportDialog, TheUploadBtn, ImportSummaryDialog, BackupDialog },
+  components: { StatCard, ImportDialog, TheUploadBtn, ImportSummaryDialog, BackupDialog, ConfirmationDialog },
   data() {
     return {
       color: "accent",
@@ -82,6 +94,7 @@ export default {
       loading: false,
       events: [],
       availableBackups: [],
+      btnEvent: { IMPORT_EVENT, DELETE_EVENT },
     };
   },
   computed: {
@@ -105,10 +118,18 @@ export default {
       this.getAvailableBackups();
     },
 
-    openDialog(backup) {
+    openDialog(backup, event) {
       this.selectedDate = backup.date;
       this.selectedName = backup.name;
-      this.$refs.import_dialog.open();
+
+      switch (event) {
+        case IMPORT_EVENT:
+          this.$refs.import_dialog.open();
+          break;
+        case DELETE_EVENT:
+          this.$refs.deleteBackupConfirm.open();
+          break;
+      }
     },
 
     async importBackup(data) {
@@ -129,6 +150,10 @@ export default {
       }
       this.loading = false;
     },
+
+    emitDelete() {
+      this.deleteBackup(this.selectedName);
+    },
   },
 };
 </script>

frontend/src/pages/Admin/Dashboard/EventViewer.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <ConfirmationDialog
+      :title="$t('events.delete-event')"
+      :message="$t('general.confirm-delete-generic')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      ref="deleteEventConfirm"
+      v-on:confirm="emitDelete()"
+    />
     <StatCard :icon="$globals.icons.bellAlert" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
@@ -37,7 +45,7 @@
               </v-list-item-content>
 
               <v-list-item-action class="ml-auto">
-                <v-btn large icon @click="deleteEvent(item.id)">
+                <v-btn large icon @click="openDialog(item)">
                   <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
               </v-list-item-action>
@@ -52,12 +60,14 @@
 <script>
 import { api } from "@/api";
 import StatCard from "@/components/UI/StatCard";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 export default {
-  components: { StatCard },
+  components: { StatCard, ConfirmationDialog },
   data() {
     return {
       color: "accent",
       total: 0,
+      selectedId: "",
       events: [],
       icons: {
         general: {
@@ -108,6 +118,15 @@ export default {
       await api.about.deleteAllEvents();
       this.getEvents();
     },
+
+    openDialog(events) {
+      this.selectedId = events.id;
+      this.$refs.deleteEventConfirm.open();
+    },
+
+    emitDelete() {
+      this.deleteEvent(this.selectedId);
+    },
   },
 };
 </script>