add confirmation dialogs (#564)
This commit is contained in:
parent
93e6c0c41c
commit
387f3ca02c
3 changed files with 55 additions and 9 deletions
|
@ -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.",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue