mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-02-28 10:43:17 -05:00
Refactor/backend routers (#388)
* update router * update caddy file * setup depends in docker-fole * make changes for serving on subpath * set dev config * fix router signups * consolidate links * backup-functionality to dashboard * new user card * consolidate theme into profile * fix theme tests * fix pg tests * fix pg tests * remove unused import * mobile margin Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
142
frontend/src/components/UI/Dialogs/BackupDialog.vue
Normal file
142
frontend/src/components/UI/Dialogs/BackupDialog.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseDialog
|
||||
:title="$t('settings.backup.create-heading')"
|
||||
titleIcon="mdi-database"
|
||||
@submit="createBackup"
|
||||
:submit-text="$t('general.create')"
|
||||
:loading="loading"
|
||||
>
|
||||
<template v-slot:open="{ open }">
|
||||
<v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> Custom </v-btn>
|
||||
</template>
|
||||
<v-card-text class="mt-6">
|
||||
<v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions class="mt-n9 flex-wrap">
|
||||
<v-switch v-model="fullBackup" :label="switchLabel"></v-switch>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
<v-expand-transition>
|
||||
<div v-if="!fullBackup">
|
||||
<v-card-text class="mt-n4">
|
||||
<v-row>
|
||||
<v-col sm="4">
|
||||
<p>{{ $t("general.options") }}</p>
|
||||
<ImportOptions @update-options="updateOptions" class="mt-5" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p>{{ $t("general.templates") }}</p>
|
||||
<v-checkbox
|
||||
v-for="template in availableTemplates"
|
||||
:key="template"
|
||||
class="mb-n4 mt-n3"
|
||||
dense
|
||||
:label="template"
|
||||
@click="appendTemplate(template)"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseDialog from "./BaseDialog";
|
||||
import ImportOptions from "@/components/FormHelpers/ImportOptions";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
props: {
|
||||
color: { default: "primary" },
|
||||
},
|
||||
components: {
|
||||
BaseDialog,
|
||||
ImportOptions,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tag: null,
|
||||
fullBackup: true,
|
||||
loading: false,
|
||||
options: {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
pages: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
},
|
||||
availableTemplates: [],
|
||||
selectedTemplates: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchLabel() {
|
||||
if (this.fullBackup) {
|
||||
return this.$t("settings.backup.full-backup");
|
||||
} else return this.$t("settings.backup.partial-backup");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetData();
|
||||
this.getAvailableBackups();
|
||||
},
|
||||
methods: {
|
||||
resetData() {
|
||||
this.tag = null;
|
||||
this.fullBackup = true;
|
||||
this.loading = false;
|
||||
this.options = {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
pages: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
};
|
||||
this.availableTemplates = [];
|
||||
this.selectedTemplates = [];
|
||||
},
|
||||
updateOptions(options) {
|
||||
this.options = options;
|
||||
},
|
||||
async getAvailableBackups() {
|
||||
const response = await api.backups.requestAvailable();
|
||||
response.templates.forEach(element => {
|
||||
this.availableTemplates.push(element);
|
||||
});
|
||||
},
|
||||
async createBackup() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
tag: this.tag,
|
||||
options: {
|
||||
recipes: this.options.recipes,
|
||||
settings: this.options.settings,
|
||||
pages: this.options.pages,
|
||||
themes: this.options.themes,
|
||||
users: this.options.users,
|
||||
groups: this.options.groups,
|
||||
},
|
||||
templates: this.selectedTemplates,
|
||||
};
|
||||
|
||||
if (await api.backups.create(data)) {
|
||||
this.$emit("created");
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
appendTemplate(templateName) {
|
||||
if (this.selectedTemplates.includes(templateName)) {
|
||||
let index = this.selectedTemplates.indexOf(templateName);
|
||||
if (index !== -1) {
|
||||
this.selectedTemplates.splice(index, 1);
|
||||
}
|
||||
} else this.selectedTemplates.push(templateName);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -3,14 +3,14 @@
|
||||
<slot name="open" v-bind="{ open }"> </slot>
|
||||
<v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined">
|
||||
<v-card class="pb-10" height="100%">
|
||||
<v-app-bar dark :color="color" class="mt-n1 mb-2">
|
||||
<v-app-bar dark :color="color" class="mt-n1 mb-0">
|
||||
<v-icon large left>
|
||||
{{ titleIcon }}
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
<v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
|
||||
<v-progress-linear class="mt-1" v-if="loading" indeterminate color="primary"></v-progress-linear>
|
||||
<slot> </slot>
|
||||
<v-card-actions>
|
||||
<slot name="card-actions">
|
||||
@@ -18,8 +18,12 @@
|
||||
{{ $t("general.cancel") }}
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn color="error" text @click="deleteEvent" v-if="$listeners.delete">
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
<v-btn color="success" @click="submitEvent">
|
||||
{{ $t("general.submit") }}
|
||||
{{ submitText }}
|
||||
</v-btn>
|
||||
</slot>
|
||||
</v-card-actions>
|
||||
@@ -31,6 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "@/i18n";
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
@@ -51,16 +56,34 @@ export default {
|
||||
top: {
|
||||
default: false,
|
||||
},
|
||||
submitText: {
|
||||
default: () => i18n.t("general.create"),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
submitted: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
determineClose() {
|
||||
return this.submitted && !this.loading;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
determineClose() {
|
||||
this.submitted = false;
|
||||
this.dialog = false;
|
||||
},
|
||||
dialog(val) {
|
||||
if (val) this.submitted = false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submitEvent() {
|
||||
this.$emit("submit");
|
||||
this.close();
|
||||
this.submitted = true;
|
||||
},
|
||||
open() {
|
||||
this.dialog = true;
|
||||
@@ -68,6 +91,10 @@ export default {
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
deleteEvent() {
|
||||
this.$emit("delete");
|
||||
this.submitted = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
112
frontend/src/components/UI/Dialogs/ImportDialog.vue
Normal file
112
frontend/src/components/UI/Dialogs/ImportDialog.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="dialog" width="500" :fullscreen="$vuetify.breakpoint.xsOnly">
|
||||
<v-card>
|
||||
<v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
|
||||
<v-btn icon dark @click="dialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title></v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<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-card-text>
|
||||
<ImportOptions @update-options="updateOptions" class="mt-5 mb-2" />
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-checkbox
|
||||
dense
|
||||
:label="$t('settings.remove-existing-entries-matching-imported-entries')"
|
||||
v-model="forceImport"
|
||||
></v-checkbox>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<TheDownloadBtn :download-url="downloadUrl" />
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" text @click="raiseEvent('delete')">
|
||||
{{ $t("general.delete") }}
|
||||
</v-btn>
|
||||
<v-btn color="success" outlined @click="raiseEvent('import')" v-show="$vuetify.breakpoint.smAndUp">
|
||||
{{ $t("general.import") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImportOptions from "@/components/FormHelpers/ImportOptions";
|
||||
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
|
||||
import { backupURLs } from "@/api/backup";
|
||||
export default {
|
||||
components: { ImportOptions, TheDownloadBtn },
|
||||
props: {
|
||||
name: {
|
||||
default: "Backup Name",
|
||||
},
|
||||
date: {
|
||||
default: "Backup Date",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
},
|
||||
dialog: false,
|
||||
forceImport: false,
|
||||
rebaseImport: false,
|
||||
downloading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
downloadUrl() {
|
||||
return backupURLs.downloadBackup(this.name);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateOptions(options) {
|
||||
this.options = options;
|
||||
},
|
||||
open() {
|
||||
this.dialog = true;
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
raiseEvent(event) {
|
||||
let eventData = {
|
||||
name: this.name,
|
||||
force: this.forceImport,
|
||||
rebase: this.rebaseImport,
|
||||
recipes: this.options.recipes,
|
||||
settings: this.options.settings,
|
||||
themes: this.options.themes,
|
||||
users: this.options.users,
|
||||
groups: this.options.groups,
|
||||
};
|
||||
this.close();
|
||||
this.$emit(event, eventData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user