mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 05:25:26 +02:00
refactor(frontend): 🚧 Add group/user CRUD support for admins
This commit is contained in:
hay-kot
parent
917177da5b
commit
695d7e96ae
46 changed files with 2015 additions and 102 deletions
148
frontend/components/Domain/Admin/AdminBackupDialog.vue
Normal file
148
frontend/components/Domain/Admin/AdminBackupDialog.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<BaseDialog
|
||||
:title="$t('settings.backup.create-heading')"
|
||||
:title-icon="$globals.icons.database"
|
||||
:submit-text="$t('general.create')"
|
||||
:loading="loading"
|
||||
@submit="createBackup"
|
||||
>
|
||||
<template #open="{ open }">
|
||||
<v-btn class="mx-2" small :color="color" @click="open">
|
||||
<v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.custom") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text class="mt-6">
|
||||
<v-text-field v-model="tag" dense :label="$t('settings.backup.backup-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>
|
||||
<AdminBackupImportOptions class="mt-5" @update-options="updateOptions" />
|
||||
</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 { api } from "@/api";
|
||||
import AdminBackupImportOptions from "./AdminBackupImportOptions";
|
||||
export default {
|
||||
components: {
|
||||
BaseDialog,
|
||||
AdminBackupImportOptions,
|
||||
},
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
},
|
||||
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");
|
||||
},
|
||||
},
|
||||
created() {
|
||||
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,
|
||||
notifications: 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,
|
||||
notifications: this.options.notifications,
|
||||
},
|
||||
templates: this.selectedTemplates,
|
||||
};
|
||||
|
||||
if (await api.backups.create(data)) {
|
||||
this.$emit("created");
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
appendTemplate(templateName) {
|
||||
if (this.selectedTemplates.includes(templateName)) {
|
||||
const index = this.selectedTemplates.indexOf(templateName);
|
||||
if (index !== -1) {
|
||||
this.selectedTemplates.splice(index, 1);
|
||||
}
|
||||
} else this.selectedTemplates.push(templateName);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
118
frontend/components/Domain/Admin/AdminBackupImportDialog.vue
Normal file
118
frontend/components/Domain/Admin/AdminBackupImportDialog.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<BaseDialog
|
||||
ref="baseDialog"
|
||||
:title="name"
|
||||
:title-icon="$globals.icons.database"
|
||||
:submit-text="$t('general.import')"
|
||||
:loading="loading"
|
||||
@submit="raiseEvent"
|
||||
>
|
||||
<v-card-subtitle v-if="date" class="mb-n3 mt-3"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<AdminBackupImportOptions class="mt-5 mb-2" @update-options="updateOptions" />
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-checkbox
|
||||
v-model="forceImport"
|
||||
dense
|
||||
:label="$t('settings.remove-existing-entries-matching-imported-entries')"
|
||||
></v-checkbox>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<template #extra-buttons>
|
||||
<!-- <TheDownloadBtn :download-url="downloadUrl">
|
||||
<template #default="{ downloadFile }">
|
||||
<v-btn class="mr-1" color="info" @click="downloadFile">
|
||||
<v-icon left> {{ $globals.icons.download }}</v-icon>
|
||||
{{ $t("general.download") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</TheDownloadBtn> -->
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import AdminBackupImportOptions from "./AdminBackupImportOptions";
|
||||
const IMPORT_EVENT = "import";
|
||||
export default {
|
||||
components: { AdminBackupImportOptions },
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: "Backup Name",
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: "Backup Date",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options: {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
},
|
||||
dialog: false,
|
||||
forceImport: false,
|
||||
rebaseImport: false,
|
||||
downloading: false,
|
||||
};
|
||||
},
|
||||
// computed: {
|
||||
// downloadUrl() {
|
||||
// return API_ROUTES.backupsFileNameDownload(this.name);
|
||||
// },
|
||||
// },
|
||||
methods: {
|
||||
updateOptions(options) {
|
||||
this.options = options;
|
||||
},
|
||||
open() {
|
||||
this.dialog = true;
|
||||
this.$refs.baseDialog.open();
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
async raiseEvent() {
|
||||
const 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,
|
||||
notifications: this.options.notifications,
|
||||
};
|
||||
this.loading = true;
|
||||
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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-checkbox
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
v-model="option.value"
|
||||
class="mb-n4 mt-n3"
|
||||
dense
|
||||
:label="option.text"
|
||||
@change="emitValue()"
|
||||
></v-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const UPDATE_EVENT = "update-options";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
recipes: {
|
||||
value: true,
|
||||
text: this.$t("general.recipes"),
|
||||
},
|
||||
settings: {
|
||||
value: true,
|
||||
text: this.$t("general.settings"),
|
||||
},
|
||||
pages: {
|
||||
value: true,
|
||||
text: this.$t("settings.pages"),
|
||||
},
|
||||
themes: {
|
||||
value: true,
|
||||
text: this.$t("general.themes"),
|
||||
},
|
||||
users: {
|
||||
value: true,
|
||||
text: this.$t("user.users"),
|
||||
},
|
||||
groups: {
|
||||
value: true,
|
||||
text: this.$t("group.groups"),
|
||||
},
|
||||
notifications: {
|
||||
value: true,
|
||||
text: this.$t("events.notification"),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.emitValue();
|
||||
},
|
||||
methods: {
|
||||
emitValue() {
|
||||
this.$emit(UPDATE_EVENT, {
|
||||
recipes: this.options.recipes.value,
|
||||
settings: this.options.settings.value,
|
||||
themes: this.options.themes.value,
|
||||
pages: this.options.pages.value,
|
||||
users: this.options.users.value,
|
||||
groups: this.options.groups.value,
|
||||
notifications: this.options.notifications.value,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
110
frontend/components/Domain/Admin/AdminBackupViewer.vue
Normal file
110
frontend/components/Domain/Admin/AdminBackupViewer.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<ImportSummaryDialog ref="report" />
|
||||
<AdminBackupImportDialog
|
||||
ref="import_dialog"
|
||||
:name="selectedName"
|
||||
:date="selectedDate"
|
||||
@import="importBackup"
|
||||
@delete="deleteBackup"
|
||||
/>
|
||||
<BaseDialog
|
||||
ref="deleteBackupConfirm"
|
||||
:title="$t('settings.backup.delete-backup')"
|
||||
:message="$t('general.confirm-delete-generic')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
@confirm="emitDelete()"
|
||||
/>
|
||||
<BaseStatCard :icon="$globals.icons.backupRestore" :color="color">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("settings.backup-and-exports") }}
|
||||
</h2>
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ total }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<AppButtonUpload url="/api/backups/upload" @uploaded="getAvailableBackups">
|
||||
<template #default="{ isSelecting, onButtonClick }">
|
||||
<v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
|
||||
<v-icon left> {{ $globals.icons.upload }} </v-icon> {{ $t("general.upload") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</AppButtonUpload>
|
||||
<AdminBackupDialog :color="color" />
|
||||
|
||||
<v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
|
||||
<v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<template #bottom>
|
||||
<v-virtual-scroll height="290" item-height="70" :items="availableBackups">
|
||||
<template #default="{ item }">
|
||||
<v-list-item @click.prevent="openDialog(item, btnEvent.IMPORT_EVENT)">
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark :color="color">
|
||||
{{ $globals.icons.database }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.name"></v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>
|
||||
{{ $d(Date.parse(item.date), "medium") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<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>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AdminBackupImportDialog from "./AdminBackupImportDialog.vue";
|
||||
|
||||
const IMPORT_EVENT = "import";
|
||||
const DELETE_EVENT = "delete";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AdminBackupImportDialog },
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "accent",
|
||||
selectedName: "",
|
||||
selectedDate: "",
|
||||
loading: false,
|
||||
events: [],
|
||||
availableBackups: [],
|
||||
btnEvent: { IMPORT_EVENT, DELETE_EVENT },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total() {
|
||||
return this.availableBackups.length || 0;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
110
frontend/components/Domain/Admin/AdminEventViewer.vue
Normal file
110
frontend/components/Domain/Admin/AdminEventViewer.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <BaseDialog
|
||||
ref="deleteEventConfirm"
|
||||
:title="$t('events.delete-event')"
|
||||
:message="$t('general.confirm-delete-generic')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
@confirm="emitDelete()"
|
||||
/> -->
|
||||
<BaseStatCard :icon="$globals.icons.bellAlert" :color="color">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("settings.events") }}
|
||||
</h2>
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ total }} </small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
|
||||
<v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<template #bottom>
|
||||
<v-virtual-scroll height="290" item-height="70" :items="events">
|
||||
<template #default="{ item }">
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark :color="icons[item.category].color">
|
||||
{{ icons[item.category].icon }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.title"></v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle v-text="item.text"></v-list-item-subtitle>
|
||||
<v-list-item-subtitle>
|
||||
{{ $d(Date.parse(item.timeStamp), "long") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click="openDialog(item)">
|
||||
<v-icon color="error">{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "accent",
|
||||
total: 0,
|
||||
selectedId: "",
|
||||
events: [],
|
||||
icons: {
|
||||
general: {
|
||||
icon: this.$globals.icons.information,
|
||||
color: "info",
|
||||
},
|
||||
recipe: {
|
||||
icon: this.$globals.icons.primary,
|
||||
color: "primary",
|
||||
},
|
||||
backup: {
|
||||
icon: this.$globals.icons.database,
|
||||
color: "primary",
|
||||
},
|
||||
schedule: {
|
||||
icon: this.$globals.icons.calendar,
|
||||
color: "primary",
|
||||
},
|
||||
migration: {
|
||||
icon: this.$globals.icons.backupRestore,
|
||||
color: "primary",
|
||||
},
|
||||
user: {
|
||||
icon: this.$globals.icons.user,
|
||||
color: "accent",
|
||||
},
|
||||
group: {
|
||||
icon: this.$globals.icons.group,
|
||||
color: "accent",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue