add confirmation dialogs (#564)

This commit is contained in:
wengtad 2021-06-18 20:53:32 +08:00 committed by GitHub
parent 93e6c0c41c
commit 387f3ca02c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 9 deletions

View file

@ -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.",

View file

@ -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>

View file

@ -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>