update import dialog

This commit is contained in:
hay-kot 2021-05-08 21:11:50 -08:00
commit a707a63eed
4 changed files with 65 additions and 57 deletions

View file

@ -8,7 +8,9 @@
:loading="loading" :loading="loading"
> >
<template v-slot:open="{ open }"> <template v-slot:open="{ open }">
<v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> {{$t('general.custom')}} </v-btn> <v-btn @click="open" class="mx-2" small :color="color">
<v-icon left> mdi-plus </v-icon> {{ $t("general.custom") }}
</v-btn>
</template> </template>
<v-card-text class="mt-6"> <v-card-text class="mt-6">
<v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field> <v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field>

View file

@ -1,7 +1,12 @@
<template> <template>
<div> <div>
<slot name="open" v-bind="{ open }"> </slot> <slot name="open" v-bind="{ open }"> </slot>
<v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined"> <v-dialog
v-model="dialog"
:width="modalWidth + 'px'"
:content-class="top ? 'top-dialog' : undefined"
:fullscreen="$vuetify.breakpoint.xsOnly"
>
<v-card height="100%"> <v-card height="100%">
<v-app-bar dark :color="color" class="mt-n1 mb-0"> <v-app-bar dark :color="color" class="mt-n1 mb-0">
<v-icon large left> <v-icon large left>
@ -24,6 +29,7 @@
<v-btn color="error" text @click="deleteEvent" v-if="$listeners.delete"> <v-btn color="error" text @click="deleteEvent" v-if="$listeners.delete">
{{ $t("general.delete") }} {{ $t("general.delete") }}
</v-btn> </v-btn>
<slot name="extra-buttons"> </slot>
<v-btn color="success" type="submit" @click="submitEvent"> <v-btn color="success" type="submit" @click="submitEvent">
{{ submitText }} {{ submitText }}
</v-btn> </v-btn>

View file

@ -1,21 +1,14 @@
<template> <template>
<div class="text-center"> <div class="text-center">
<v-dialog v-model="dialog" width="500" :fullscreen="$vuetify.breakpoint.xsOnly"> <BaseDialog
<v-card> :title="name"
<v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly"> titleIcon="mdi-database"
<v-btn icon dark @click="dialog = false"> :submit-text="$t('general.import')"
<v-icon>mdi-close</v-icon> :loading="loading"
</v-btn> ref="baseDialog"
<v-toolbar-title></v-toolbar-title> @submit="raiseEvent"
<v-spacer></v-spacer> >
<v-toolbar-items> <v-card-subtitle class="mb-n3 mt-3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
<v-btn dark text @click="raiseEvent('import')">
{{ $t("general.import") }}
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-card-title> {{ name }} </v-card-title>
<v-card-subtitle class="mb-n3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
@ -31,28 +24,29 @@
</v-card-text> </v-card-text>
<v-divider></v-divider> <v-divider></v-divider>
<template v-slot:extra-buttons>
<v-card-actions> <TheDownloadBtn :download-url="downloadUrl">
<TheDownloadBtn :download-url="downloadUrl" /> <template v-slot:default="{ downloadFile }">
<v-spacer></v-spacer> <v-btn class="mr-1" color="info" @click="downloadFile">
<v-btn color="error" text @click="raiseEvent('delete')"> <v-icon> mdi-download </v-icon>
{{ $t("general.delete") }} {{ $t("general.download") }}
</v-btn> </v-btn>
<v-btn color="success" outlined @click="raiseEvent('import')" v-show="$vuetify.breakpoint.smAndUp"> </template>
{{ $t("general.import") }} </TheDownloadBtn>
</v-btn> </template>
</v-card-actions> </BaseDialog>
</v-card>
</v-dialog>
</div> </div>
</template> </template>
<script> <script>
const IMPORT_EVENT = "import";
import { api } from "@/api";
import BaseDialog from "./BaseDialog";
import ImportOptions from "@/components/FormHelpers/ImportOptions"; import ImportOptions from "@/components/FormHelpers/ImportOptions";
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue"; import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
import { backupURLs } from "@/api/backup"; import { backupURLs } from "@/api/backup";
export default { export default {
components: { ImportOptions, TheDownloadBtn }, components: { ImportOptions, TheDownloadBtn, BaseDialog },
props: { props: {
name: { name: {
default: "Backup Name", default: "Backup Name",
@ -63,6 +57,7 @@ export default {
}, },
data() { data() {
return { return {
loading: false,
options: { options: {
recipes: true, recipes: true,
settings: true, settings: true,
@ -87,12 +82,13 @@ export default {
}, },
open() { open() {
this.dialog = true; this.dialog = true;
this.$refs.baseDialog.open();
}, },
close() { close() {
this.dialog = false; this.dialog = false;
}, },
raiseEvent(event) { async raiseEvent() {
let eventData = { const eventData = {
name: this.name, name: this.name,
force: this.forceImport, force: this.forceImport,
rebase: this.rebaseImport, rebase: this.rebaseImport,
@ -102,8 +98,18 @@ export default {
users: this.options.users, users: this.options.users,
groups: this.options.groups, groups: this.options.groups,
}; };
this.close(); this.loading = true;
this.$emit(event, eventData); const importData = await this.importBackup(eventData);
this.$emit(IMPORT_EVENT, importData);
this.loading = false;
},
async importBackup(data) {
this.loading = true;
const response = await api.backups.import(data.name, data);
if (response) {
return response.data;
}
}, },
}, },
}; };

View file

@ -112,13 +112,7 @@ export default {
}, },
async importBackup(data) { async importBackup(data) {
this.loading = true; this.$refs.report.open(data);
const response = await api.backups.import(data.name, data);
if (response) {
const importData = response.data;
this.$refs.report.open(importData);
}
this.loading = false;
}, },
async createBackup() { async createBackup() {