mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
refactor(frontend): 🚧 Migrate Dashboard to Nuxt
Add API and Functinality for Admin Dashboard. Stills needs to clean-up. See // TODO's
This commit is contained in:
parent
41a6916771
commit
9386cc320b
@ -44,15 +44,17 @@ export const crudMixins = <T>(
|
||||
return { getAll, getOne, updateOne, patchOne, deleteOne, createOne };
|
||||
};
|
||||
|
||||
export abstract class BaseAPIClass<T, U> implements CrudAPIInterface {
|
||||
export abstract class BaseAPI {
|
||||
requests: ApiRequestInstance;
|
||||
|
||||
abstract baseRoute: string;
|
||||
abstract itemRoute(itemId: string | number): string;
|
||||
|
||||
constructor(requests: ApiRequestInstance) {
|
||||
this.requests = requests;
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class BaseCRUDAPI<T, U> extends BaseAPI implements CrudAPIInterface {
|
||||
abstract baseRoute: string;
|
||||
abstract itemRoute(itemId: string | number): string;
|
||||
|
||||
async getAll(start = 0, limit = 9999) {
|
||||
return await this.requests.get<T[]>(this.baseRoute, {
|
||||
|
69
frontend/api/class-interfaces/backups.ts
Normal file
69
frontend/api/class-interfaces/backups.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { BaseAPI } from "./_base";
|
||||
|
||||
export interface BackupOptions {
|
||||
recipes?: boolean;
|
||||
settings?: boolean;
|
||||
pages?: boolean;
|
||||
themes?: boolean;
|
||||
groups?: boolean;
|
||||
users?: boolean;
|
||||
notifications?: boolean;
|
||||
}
|
||||
|
||||
export interface ImportBackup extends BackupOptions {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface BackupJob {
|
||||
tag?: string;
|
||||
options: BackupOptions;
|
||||
templates?: string[];
|
||||
}
|
||||
|
||||
export interface BackupFile {
|
||||
name: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
export interface AllBackups {
|
||||
imports: BackupFile[];
|
||||
templates: string[];
|
||||
}
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
backupsAvailable: `${prefix}/backups/available`,
|
||||
backupsExportDatabase: `${prefix}/backups/export/database`,
|
||||
backupsUpload: `${prefix}/backups/upload`,
|
||||
|
||||
backupsFileNameDownload: (fileName: string) => `${prefix}/backups/${fileName}/download`,
|
||||
backupsFileNameImport: (fileName: string) => `${prefix}/backups/${fileName}/import`,
|
||||
backupsFileNameDelete: (fileName: string) => `${prefix}/backups/${fileName}/delete`,
|
||||
};
|
||||
|
||||
export class BackupAPI extends BaseAPI {
|
||||
/** Returns a list of avaiable .zip files for import into Mealie.
|
||||
*/
|
||||
async getAll() {
|
||||
return await this.requests.get<AllBackups>(routes.backupsAvailable);
|
||||
}
|
||||
|
||||
/** Generates a backup of the recipe database in json format.
|
||||
*/
|
||||
async createOne(payload: BackupJob) {
|
||||
return await this.requests.post(routes.backupsExportDatabase, payload);
|
||||
}
|
||||
|
||||
/** Import a database backup file generated from Mealie.
|
||||
*/
|
||||
async restoreDatabase(fileName: string, payload: BackupOptions) {
|
||||
return await this.requests.post(routes.backupsFileNameImport(fileName), payload);
|
||||
}
|
||||
|
||||
/** Removes a database backup from the file system
|
||||
*/
|
||||
async deleteOne(fileName: string) {
|
||||
return await this.requests.delete(routes.backupsFileNameDelete(fileName));
|
||||
}
|
||||
}
|
51
frontend/api/class-interfaces/debug.ts
Normal file
51
frontend/api/class-interfaces/debug.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import { BaseAPI } from "./_base";
|
||||
|
||||
export interface AppStatistics {
|
||||
totalRecipes: number;
|
||||
totalUsers: number;
|
||||
totalGroups: number;
|
||||
uncategorizedRecipes: number;
|
||||
untaggedRecipes: number;
|
||||
}
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
debugVersion: `${prefix}/debug/version`,
|
||||
debug: `${prefix}/debug`,
|
||||
debugStatistics: `${prefix}/debug/statistics`,
|
||||
debugLastRecipeJson: `${prefix}/debug/last-recipe-json`,
|
||||
debugLog: `${prefix}/debug/log`,
|
||||
|
||||
debugLogNum: (num: number) => `${prefix}/debug/log/${num}`,
|
||||
};
|
||||
|
||||
export class DebugAPI extends BaseAPI {
|
||||
/** Returns the current version of mealie
|
||||
*/
|
||||
async getMealieVersion() {
|
||||
return await this.requests.get(routes.debugVersion);
|
||||
}
|
||||
|
||||
/** Returns general information about the application for debugging
|
||||
*/
|
||||
async getDebugInfo() {
|
||||
return await this.requests.get(routes.debug);
|
||||
}
|
||||
|
||||
async getAppStatistics() {
|
||||
return await this.requests.get<AppStatistics>(routes.debugStatistics);
|
||||
}
|
||||
|
||||
/** Doc Str
|
||||
*/
|
||||
async getLog(num: number) {
|
||||
return await this.requests.get(routes.debugLogNum(num));
|
||||
}
|
||||
|
||||
/** Returns a token to download a file
|
||||
*/
|
||||
async getLogFile() {
|
||||
return await this.requests.get(routes.debugLog);
|
||||
}
|
||||
}
|
49
frontend/api/class-interfaces/events.ts
Normal file
49
frontend/api/class-interfaces/events.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { BaseAPI } from "./_base";
|
||||
|
||||
export type EventCategory = "general" | "recipe" | "backup" | "scheduled" | "migration" | "group" | "user";
|
||||
|
||||
export interface Event {
|
||||
id?: number;
|
||||
title: string;
|
||||
text: string;
|
||||
timeStamp?: string;
|
||||
category?: EventCategory & string;
|
||||
}
|
||||
|
||||
export interface EventsOut {
|
||||
total: number;
|
||||
events: Event[];
|
||||
}
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
aboutEvents: `${prefix}/about/events`,
|
||||
aboutEventsNotifications: `${prefix}/about/events/notifications`,
|
||||
aboutEventsNotificationsTest: `${prefix}/about/events/notifications/test`,
|
||||
|
||||
aboutEventsId: (id: number) => `${prefix}/about/events/${id}`,
|
||||
aboutEventsNotificationsId: (id: number) => `${prefix}/about/events/notifications/${id}`,
|
||||
};
|
||||
|
||||
export class EventsAPI extends BaseAPI {
|
||||
/** Get event from the Database
|
||||
*/
|
||||
async getEvents() {
|
||||
return await this.requests.get<EventsOut>(routes.aboutEvents);
|
||||
}
|
||||
|
||||
/** Get event from the Database
|
||||
*/
|
||||
async deleteEvents() {
|
||||
return await this.requests.delete(routes.aboutEvents);
|
||||
}
|
||||
|
||||
/** Delete event from the Database
|
||||
*/
|
||||
async deleteEvent(id: number) {
|
||||
return await this.requests.delete(routes.aboutEventsId(id));
|
||||
}
|
||||
/** Get all event_notification from the Database
|
||||
*/
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import { requests } from "../requests";
|
||||
import { BaseAPIClass } from "./_base";
|
||||
import { BaseCRUDAPI } from "./_base";
|
||||
import { GroupInDB } from "~/types/api-types/user";
|
||||
|
||||
const prefix = "/api";
|
||||
@ -15,7 +15,7 @@ export interface CreateGroup {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export class GroupAPI extends BaseAPIClass<GroupInDB, CreateGroup> {
|
||||
export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
|
||||
baseRoute = routes.groups;
|
||||
itemRoute = routes.groupsId;
|
||||
/** Returns the Group Data for the Current User
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { BaseAPIClass } from "./_base";
|
||||
import { BaseCRUDAPI } from "./_base";
|
||||
import { Recipe } from "~/types/api-types/admin";
|
||||
import { CreateRecipe } from "~/types/api-types/recipe";
|
||||
|
||||
@ -18,7 +18,7 @@ const routes = {
|
||||
recipesRecipeSlugAssets: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/assets`,
|
||||
};
|
||||
|
||||
export class RecipeAPI extends BaseAPIClass<Recipe, CreateRecipe> {
|
||||
export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
|
||||
baseRoute: string = routes.recipesBase;
|
||||
itemRoute = routes.recipesRecipeSlug;
|
||||
|
||||
@ -31,6 +31,7 @@ export class RecipeAPI extends BaseAPIClass<Recipe, CreateRecipe> {
|
||||
updateImage(slug: string, fileObject: File) {
|
||||
const formData = new FormData();
|
||||
formData.append("image", fileObject);
|
||||
// @ts-ignore
|
||||
formData.append("extension", fileObject.name.split(".").pop());
|
||||
|
||||
return this.requests.put<any>(routes.recipesRecipeSlugImage(slug), formData);
|
||||
|
7
frontend/api/class-interfaces/upload.ts
Normal file
7
frontend/api/class-interfaces/upload.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { BaseAPI } from "./_base";
|
||||
|
||||
export class UploadFile extends BaseAPI {
|
||||
file(url: string, fileObject: any) {
|
||||
return this.requests.post(url, fileObject);
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { BaseAPIClass } from "./_base";
|
||||
import { BaseCRUDAPI } from "./_base";
|
||||
import { UserIn, UserOut } from "~/types/api-types/user";
|
||||
|
||||
// Interfaces
|
||||
@ -31,7 +31,7 @@ const routes = {
|
||||
usersApiTokensTokenId: (token_id: string) => `${prefix}/users/api-tokens/${token_id}`,
|
||||
};
|
||||
|
||||
export class UserApi extends BaseAPIClass<UserOut, UserIn> {
|
||||
export class UserApi extends BaseCRUDAPI<UserOut, UserIn> {
|
||||
baseRoute: string = routes.users;
|
||||
itemRoute = (itemid: string) => routes.usersId(itemid);
|
||||
|
||||
|
@ -1,6 +1,10 @@
|
||||
import { RecipeAPI } from "./class-interfaces/recipes";
|
||||
import { UserApi } from "./class-interfaces/users";
|
||||
import { GroupAPI } from "./class-interfaces/groups";
|
||||
import { DebugAPI } from "./class-interfaces/debug";
|
||||
import { EventsAPI } from "./class-interfaces/events";
|
||||
import { BackupAPI } from "./class-interfaces/backups";
|
||||
import { UploadFile } from "./class-interfaces/upload";
|
||||
import { ApiRequestInstance } from "~/types/api";
|
||||
|
||||
class Api {
|
||||
@ -8,6 +12,10 @@ class Api {
|
||||
public recipes: RecipeAPI;
|
||||
public users: UserApi;
|
||||
public groups: GroupAPI;
|
||||
public debug: DebugAPI;
|
||||
public events: EventsAPI;
|
||||
public backups: BackupAPI;
|
||||
public upload: UploadFile;
|
||||
|
||||
constructor(requests: ApiRequestInstance) {
|
||||
if (Api.instance instanceof Api) {
|
||||
@ -17,6 +25,10 @@ class Api {
|
||||
this.recipes = new RecipeAPI(requests);
|
||||
this.users = new UserApi(requests);
|
||||
this.groups = new GroupAPI(requests);
|
||||
this.debug = new DebugAPI(requests);
|
||||
this.events = new EventsAPI(requests);
|
||||
this.backups = new BackupAPI(requests);
|
||||
this.upload = new UploadFile(requests);
|
||||
|
||||
Object.freeze(this);
|
||||
Api.instance = this;
|
||||
|
@ -25,7 +25,7 @@
|
||||
<v-row>
|
||||
<v-col sm="4">
|
||||
<p>{{ $t("general.options") }}</p>
|
||||
<AdminBackupImportOptions class="mt-5" @update-options="updateOptions" />
|
||||
<AdminBackupImportOptions v-model="updateOptions" class="mt-5" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<p>{{ $t("general.templates") }}</p>
|
||||
@ -47,11 +47,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import AdminBackupImportOptions from "./AdminBackupImportOptions";
|
||||
export default {
|
||||
components: {
|
||||
BaseDialog,
|
||||
AdminBackupImportOptions,
|
||||
},
|
||||
props: {
|
||||
|
@ -1,3 +1,5 @@
|
||||
// TODO: Fix Download Links
|
||||
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<BaseDialog
|
||||
@ -39,7 +41,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import AdminBackupImportOptions from "./AdminBackupImportOptions";
|
||||
const IMPORT_EVENT = "import";
|
||||
export default {
|
||||
@ -86,7 +87,7 @@ export default {
|
||||
close() {
|
||||
this.dialog = false;
|
||||
},
|
||||
async raiseEvent() {
|
||||
raiseEvent() {
|
||||
const eventData = {
|
||||
name: this.name,
|
||||
force: this.forceImport,
|
||||
@ -99,18 +100,9 @@ export default {
|
||||
notifications: this.options.notifications,
|
||||
};
|
||||
this.loading = true;
|
||||
const importData = await this.importBackup(eventData);
|
||||
|
||||
this.$emit(IMPORT_EVENT, importData);
|
||||
this.$emit(IMPORT_EVENT, eventData);
|
||||
this.loading = false;
|
||||
},
|
||||
async importBackup(data) {
|
||||
this.loading = true;
|
||||
const response = await api.backups.import(data.name, data);
|
||||
if (response) {
|
||||
return response.data;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -9,12 +9,28 @@
|
||||
:label="option.text"
|
||||
@change="emitValue()"
|
||||
></v-checkbox>
|
||||
<template v-if="importBackup">
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<v-checkbox
|
||||
v-model="forceImport"
|
||||
class="mb-n4"
|
||||
dense
|
||||
:label="$t('settings.remove-existing-entries-matching-imported-entries')"
|
||||
@change="emitValue()"
|
||||
></v-checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const UPDATE_EVENT = "update-options";
|
||||
const UPDATE_EVENT = "input";
|
||||
export default {
|
||||
props: {
|
||||
importBackup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
@ -47,6 +63,7 @@ export default {
|
||||
text: this.$t("events.notification"),
|
||||
},
|
||||
},
|
||||
forceImport: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -62,6 +79,7 @@ export default {
|
||||
users: this.options.users.value,
|
||||
groups: this.options.groups.value,
|
||||
notifications: this.options.notifications.value,
|
||||
forceImport: this.forceImport,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
@ -1,22 +1,34 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ImportSummaryDialog ref="report" />
|
||||
<AdminBackupImportDialog
|
||||
ref="import_dialog"
|
||||
:name="selectedName"
|
||||
:date="selectedDate"
|
||||
@import="importBackup"
|
||||
@delete="deleteBackup"
|
||||
/>
|
||||
<BaseDialog
|
||||
ref="deleteBackupConfirm"
|
||||
ref="refImportDialog"
|
||||
:title="selectedBackup.name"
|
||||
:icon="$globals.icons.database"
|
||||
:submit-text="$t('general.import')"
|
||||
:loading="loading"
|
||||
@submit="restoreBackup"
|
||||
>
|
||||
<v-card-subtitle v-if="selectedBackup.date" class="mb-n3 mt-3">
|
||||
{{ $d(new Date(selectedBackup.date), "medium") }}
|
||||
</v-card-subtitle>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<AdminBackupImportOptions v-model="importOptions" import-backup class="mt-5 mb-2" />
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BaseDialog
|
||||
ref="refDeleteConfirmation"
|
||||
:title="$t('settings.backup.delete-backup')"
|
||||
:message="$t('general.confirm-delete-generic')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
@confirm="emitDelete()"
|
||||
/>
|
||||
@confirm="deleteBackup(selectedBackup.name)"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseStatCard :icon="$globals.icons.backupRestore" :color="color">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
@ -30,7 +42,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<AppButtonUpload url="/api/backups/upload" @uploaded="getAvailableBackups">
|
||||
<AppButtonUpload url="/api/backups/upload" @uploaded="refreshBackups">
|
||||
<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") }}
|
||||
@ -39,7 +51,7 @@
|
||||
</AppButtonUpload>
|
||||
<AdminBackupDialog :color="color" />
|
||||
|
||||
<v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
|
||||
<v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup(null)">
|
||||
<v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
@ -75,34 +87,83 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AdminBackupImportDialog from "./AdminBackupImportDialog.vue";
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import AdminBackupImportOptions from "./AdminBackupImportOptions.vue";
|
||||
import AdminBackupDialog from "./AdminBackupDialog.vue";
|
||||
import { BackupFile } from "~/api/class-interfaces/backups";
|
||||
import { useBackups } from "~/composables/use-backups";
|
||||
|
||||
const IMPORT_EVENT = "import";
|
||||
const DELETE_EVENT = "delete";
|
||||
|
||||
type EVENTS = "import" | "delete";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AdminBackupImportDialog },
|
||||
layout: "admin",
|
||||
components: { AdminBackupImportOptions, AdminBackupDialog },
|
||||
props: {
|
||||
availableBackups: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
templates: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
const refImportDialog = ref();
|
||||
const refDeleteConfirmation = ref();
|
||||
|
||||
const { refreshBackups, importBackup, createBackup, deleteBackup } = useBackups();
|
||||
|
||||
return {
|
||||
btnEvent: { IMPORT_EVENT, DELETE_EVENT },
|
||||
refImportDialog,
|
||||
refDeleteConfirmation,
|
||||
refreshBackups,
|
||||
importBackup,
|
||||
createBackup,
|
||||
deleteBackup,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "accent",
|
||||
selectedName: "",
|
||||
selectedDate: "",
|
||||
loading: false,
|
||||
events: [],
|
||||
availableBackups: [],
|
||||
btnEvent: { IMPORT_EVENT, DELETE_EVENT },
|
||||
selectedBackup: {
|
||||
name: "",
|
||||
date: "",
|
||||
},
|
||||
importOptions: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total() {
|
||||
total(): number {
|
||||
return this.availableBackups.length || 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openDialog(backup: BackupFile, event: EVENTS) {
|
||||
this.selectedBackup = backup;
|
||||
|
||||
switch (event) {
|
||||
case IMPORT_EVENT:
|
||||
this.refImportDialog.open();
|
||||
break;
|
||||
case DELETE_EVENT:
|
||||
this.refDeleteConfirmation.open();
|
||||
break;
|
||||
}
|
||||
},
|
||||
async restoreBackup() {
|
||||
const payload = {
|
||||
name: this.selectedBackup.name,
|
||||
...this.importOptions,
|
||||
};
|
||||
|
||||
await this.importBackup(this.selectedBackup.name, payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -1,3 +1,5 @@
|
||||
// TODO: Fix date/time Localization
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- <BaseDialog
|
||||
@ -21,7 +23,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
|
||||
<v-btn class="mx-2" small color="error lighten-1" @click="$emit('delete-all')">
|
||||
<v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
@ -45,7 +47,7 @@
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click="openDialog(item)">
|
||||
<v-btn large icon @click="$emit('delete-item', item.id)">
|
||||
<v-icon color="error">{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
@ -62,15 +64,20 @@ import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
props: {
|
||||
events: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "accent",
|
||||
total: 0,
|
||||
selectedId: "",
|
||||
events: [],
|
||||
icons: {
|
||||
general: {
|
||||
icon: this.$globals.icons.information,
|
||||
|
@ -57,7 +57,7 @@
|
||||
</v-app-bar>
|
||||
<div v-if="recipes" class="mt-2">
|
||||
<v-row v-if="!viewScale">
|
||||
<v-col v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
|
||||
<v-col v-for="recipe in recipes" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
|
||||
<v-lazy>
|
||||
<RecipeCard
|
||||
:name="recipe.name"
|
||||
|
@ -50,10 +50,10 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
allCategories() {
|
||||
return this.$store.getters.getAllCategories;
|
||||
return this.$store.getters.getAllCategories || [];
|
||||
},
|
||||
allTags() {
|
||||
return this.$store.getters.getAllTags;
|
||||
return this.$store.getters.getAllTags || [];
|
||||
},
|
||||
urlParam() {
|
||||
return this.isCategory ? "category" : "tag";
|
||||
|
@ -21,7 +21,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
export default defineComponent({
|
||||
|
@ -204,12 +204,14 @@ export default defineComponent({
|
||||
set(recipe_import_url: string) {
|
||||
this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
|
||||
},
|
||||
get(): string {
|
||||
get(): string | (string | null)[] {
|
||||
return this.$route.query.recipe_import_url || "";
|
||||
},
|
||||
},
|
||||
fileName(): string {
|
||||
// @ts-ignore
|
||||
if (this.uploadData?.file?.name) {
|
||||
// @ts-ignore
|
||||
return this.uploadData.file.name;
|
||||
}
|
||||
return "";
|
||||
@ -243,22 +245,31 @@ export default defineComponent({
|
||||
},
|
||||
async uploadZip() {
|
||||
const formData = new FormData();
|
||||
|
||||
// @ts-ignore
|
||||
formData.append(this.uploadData.fileName, this.uploadData.file);
|
||||
|
||||
const response = await this.api.utils.uploadFile("/api/recipes/create-from-zip", formData);
|
||||
const { response, data } = await this.api.upload.file("/api/recipes/create-from-zip", formData);
|
||||
|
||||
this.$router.push(`/recipe/${response.data.slug}`);
|
||||
if (response && response.status === 201) {
|
||||
// @ts-ignore
|
||||
this.$router.push(`/recipe/${data.slug}`);
|
||||
}
|
||||
},
|
||||
async manualCreateRecipe() {
|
||||
await this.api.recipes.createOne({ name: this.createRecipeData.form.name });
|
||||
},
|
||||
async createOnByUrl() {
|
||||
this.error = false;
|
||||
console.log(this.domImportFromUrlForm?.validate());
|
||||
|
||||
if (this.domImportFromUrlForm?.validate()) {
|
||||
this.processing = true;
|
||||
const response = await this.api.recipes.createOneByUrl(this.recipeURL);
|
||||
|
||||
let response;
|
||||
if (typeof this.recipeURL === "string") {
|
||||
response = await this.api.recipes.createOneByUrl(this.recipeURL);
|
||||
}
|
||||
|
||||
this.processing = false;
|
||||
if (response) {
|
||||
this.addRecipe = false;
|
||||
|
57
frontend/components/Layout/TheSnackbar.vue
Normal file
57
frontend/components/Layout/TheSnackbar.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-snackbar v-model="toastAlert.open" top :color="toastAlert.color" timeout="1500" @input="toastAlert.open = false">
|
||||
<v-icon dark left>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
|
||||
{{ toastAlert.title }}
|
||||
{{ toastAlert.text }}
|
||||
|
||||
<template #action="{ attrs }">
|
||||
<v-btn text v-bind="attrs" @click="toastAlert.open = false"> Close </v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
<v-snackbar
|
||||
content-class="py-2"
|
||||
dense
|
||||
bottom
|
||||
right
|
||||
:value="toastLoading.open"
|
||||
:timeout="-1"
|
||||
:color="toastLoading.color"
|
||||
@input="toastLoading.open = false"
|
||||
>
|
||||
<div class="d-flex flex-column align-center justify-start" @click="toastLoading.open = false">
|
||||
<div class="mb-2 mt-0 text-subtitle-1 text-center">
|
||||
{{ toastLoading.text }}
|
||||
</div>
|
||||
<v-progress-linear indeterminate color="white darken-2"></v-progress-linear>
|
||||
</div>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toastAlert, toastLoading } from "~/composables/use-toast";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return { toastAlert, toastLoading };
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
switch (this.toastAlert.color) {
|
||||
case "error":
|
||||
return "mdi-alert";
|
||||
case "success":
|
||||
return "mdi-check-bold";
|
||||
case "info":
|
||||
return "mdi-information-outline";
|
||||
default:
|
||||
return "mdi-alert";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
@ -11,25 +11,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
const UPLOAD_EVENT = "uploaded";
|
||||
export default {
|
||||
props: {
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
post: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
url: String,
|
||||
text: String,
|
||||
icon: { default: null },
|
||||
fileName: { default: "archive" },
|
||||
url: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
fileName: {
|
||||
type: String,
|
||||
default: "archive",
|
||||
},
|
||||
textBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const api = useApiSingleton();
|
||||
|
||||
return { api };
|
||||
},
|
||||
data: () => ({
|
||||
file: null,
|
||||
isSelecting: false,
|
||||
@ -58,7 +77,7 @@ export default {
|
||||
const formData = new FormData();
|
||||
formData.append(this.fileName, this.file);
|
||||
|
||||
const response = await api.utils.uploadFile(this.url, formData);
|
||||
const response = await this.api.upload.file(this.url, formData);
|
||||
|
||||
if (response) {
|
||||
this.$emit(UPLOAD_EVENT, response);
|
||||
|
@ -86,32 +86,32 @@ export default {
|
||||
buttonOptions: {
|
||||
create: {
|
||||
text: "Create",
|
||||
icon: "mdi-plus",
|
||||
icon: this.$globals.icons.createAlt,
|
||||
color: "success",
|
||||
},
|
||||
update: {
|
||||
text: "Update",
|
||||
icon: "mdi-edit",
|
||||
icon: this.$globals.icons.edit,
|
||||
color: "success",
|
||||
},
|
||||
save: {
|
||||
text: "Save",
|
||||
icon: "mdi-save",
|
||||
icon: this.$globals.icons.save,
|
||||
color: "success",
|
||||
},
|
||||
edit: {
|
||||
text: "Edit",
|
||||
icon: "mdi-square-edit-outline",
|
||||
icon: this.$globals.icons.edit,
|
||||
color: "info",
|
||||
},
|
||||
delete: {
|
||||
text: "Delete",
|
||||
icon: "mdi-delete",
|
||||
icon: this.$globals.icons.delete,
|
||||
color: "error",
|
||||
},
|
||||
cancel: {
|
||||
text: "Cancel",
|
||||
icon: "mdi-close",
|
||||
icon: this.$globals.icons.cancel,
|
||||
color: "grey",
|
||||
},
|
||||
},
|
||||
|
@ -32,7 +32,15 @@
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<BaseButton v-if="$listeners.delete" delete secondary @click="deleteEvent" />
|
||||
<BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="$emit('confirm')">
|
||||
<BaseButton
|
||||
v-if="$listeners.confirm"
|
||||
:color="color"
|
||||
type="submit"
|
||||
@click="
|
||||
$emit('confirm');
|
||||
dialog = false;
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.check }}
|
||||
</template>
|
||||
@ -97,10 +105,10 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
determineClose() {
|
||||
determineClose(): Boolean {
|
||||
return this.submitted && !this.loading && !this.keepOpen;
|
||||
},
|
||||
displayicon() {
|
||||
displayicon(): Boolean {
|
||||
return this.icon || this.$globals.icons.user;
|
||||
},
|
||||
},
|
||||
|
84
frontend/composables/use-backups.ts
Normal file
84
frontend/composables/use-backups.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { useAsync, ref } from "@nuxtjs/composition-api";
|
||||
import { set } from "@vueuse/core";
|
||||
import { toastLoading, loader } from "./use-toast";
|
||||
import { AllBackups, ImportBackup, BackupJob } from "~/api/class-interfaces/backups";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
|
||||
const backups = ref<AllBackups>({
|
||||
imports: [],
|
||||
templates: [],
|
||||
});
|
||||
|
||||
function setBackups(newBackups: AllBackups | null) {
|
||||
if (newBackups) {
|
||||
set(backups, newBackups);
|
||||
}
|
||||
}
|
||||
|
||||
export const useBackups = function (fetch = true) {
|
||||
const api = useApiSingleton();
|
||||
|
||||
function getBackups() {
|
||||
const backups = useAsync(async () => {
|
||||
const { data } = await api.backups.getAll();
|
||||
return data;
|
||||
});
|
||||
return backups;
|
||||
}
|
||||
|
||||
async function refreshBackups() {
|
||||
const { data } = await api.backups.getAll();
|
||||
if (data) {
|
||||
setBackups(data);
|
||||
}
|
||||
}
|
||||
|
||||
async function createBackup(payload: BackupJob | null = null) {
|
||||
if (payload === null) {
|
||||
payload = {
|
||||
tag: "",
|
||||
templates: [],
|
||||
options: {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
pages: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
notifications: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
loader.info("Creating Backup...");
|
||||
|
||||
const { response } = await api.backups.createOne(payload);
|
||||
if (response && response.status === 201) {
|
||||
refreshBackups();
|
||||
toastLoading.open = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteBackup(fileName: string) {
|
||||
const { response } = await api.backups.deleteOne(fileName);
|
||||
|
||||
if (response && response.status === 200) {
|
||||
refreshBackups();
|
||||
}
|
||||
}
|
||||
|
||||
async function importBackup(fileName: string, payload: ImportBackup) {
|
||||
loader.info("Import Backup...");
|
||||
const { response } = await api.backups.restoreDatabase(fileName, payload);
|
||||
|
||||
if (response && response.status === 200) {
|
||||
refreshBackups();
|
||||
loader.close();
|
||||
}
|
||||
}
|
||||
|
||||
if (fetch) {
|
||||
refreshBackups();
|
||||
}
|
||||
|
||||
return { getBackups, refreshBackups, deleteBackup, backups, importBackup, createBackup };
|
||||
};
|
65
frontend/composables/use-toast.ts
Normal file
65
frontend/composables/use-toast.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import { reactive } from "@nuxtjs/composition-api";
|
||||
|
||||
interface Toast {
|
||||
open: boolean;
|
||||
text: string;
|
||||
title: string | null;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export const toastAlert = reactive<Toast>({
|
||||
open: false,
|
||||
title: null,
|
||||
text: "Hello From The Store",
|
||||
color: "info",
|
||||
});
|
||||
|
||||
export const toastLoading = reactive<Toast>({
|
||||
open: false,
|
||||
title: null,
|
||||
text: "Importing Backup",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
function setToast(toast: Toast, text: string, title: string | null, color: string) {
|
||||
toast.open = true;
|
||||
toast.text = text;
|
||||
toast.title = title;
|
||||
toast.color = color;
|
||||
}
|
||||
|
||||
export const loader = {
|
||||
info(text: string, title: string | null = null) {
|
||||
setToast(toastLoading, text, title, "info");
|
||||
},
|
||||
success(text: string, title: string | null = null) {
|
||||
setToast(toastLoading, text, title, "success");
|
||||
},
|
||||
error(text: string, title: string | null = null) {
|
||||
setToast(toastLoading, text, title, "error");
|
||||
},
|
||||
warning(text: string, title: string | null = null) {
|
||||
setToast(toastLoading, text, title, "warning");
|
||||
},
|
||||
close() {
|
||||
toastLoading.open = false;
|
||||
},
|
||||
};
|
||||
|
||||
export const alert = {
|
||||
info(text: string, title: string | null = null) {
|
||||
setToast(toastAlert, text, title, "info");
|
||||
},
|
||||
success(text: string, title: string | null = null) {
|
||||
setToast(toastAlert, text, title, "success");
|
||||
},
|
||||
error(text: string, title: string | null = null) {
|
||||
setToast(toastAlert, text, title, "error");
|
||||
},
|
||||
warning(text: string, title: string | null = null) {
|
||||
setToast(toastAlert, text, title, "warning");
|
||||
},
|
||||
close() {
|
||||
toastAlert.open = false;
|
||||
},
|
||||
};
|
3
frontend/composables/use-utils.ts
Normal file
3
frontend/composables/use-utils.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const useAsyncKey = function () {
|
||||
return String(Date.now());
|
||||
};
|
@ -13,6 +13,8 @@
|
||||
@input="sidebar = !sidebar"
|
||||
/>
|
||||
|
||||
<TheSnackbar />
|
||||
|
||||
<AppHeader>
|
||||
<v-btn icon @click.stop="sidebar = !sidebar">
|
||||
<v-icon> {{ $globals.icons.menu }}</v-icon>
|
||||
@ -31,9 +33,10 @@
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import AppHeader from "@/components/Layout/AppHeader.vue";
|
||||
import AppSidebar from "@/components/Layout/AppSidebar.vue";
|
||||
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppSidebar },
|
||||
components: { AppHeader, AppSidebar, TheSnackbar },
|
||||
middleware: "auth",
|
||||
auth: true,
|
||||
setup() {
|
||||
|
@ -212,7 +212,7 @@ export default {
|
||||
accent: "#00457A",
|
||||
secondary: "#973542",
|
||||
success: "#43A047",
|
||||
info: "#4990BA",
|
||||
info: "#1976d2",
|
||||
warning: "#FF4081",
|
||||
error: "#EF5350",
|
||||
},
|
||||
@ -221,7 +221,7 @@ export default {
|
||||
accent: "#00457A",
|
||||
secondary: "#973542",
|
||||
success: "#43A047",
|
||||
info: "#4990BA",
|
||||
info: "#1976d2",
|
||||
warning: "#FF4081",
|
||||
error: "#EF5350",
|
||||
},
|
||||
|
@ -1,6 +1,8 @@
|
||||
// TODO: Possibly add confirmation dialog? I'm not sure that it's really requried for events...
|
||||
|
||||
<template>
|
||||
<v-container class="mt-10">
|
||||
<v-row>
|
||||
<v-row v-if="statistics">
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<BaseStatCard :icon="$globals.icons.primary">
|
||||
<template #after-heading>
|
||||
@ -76,10 +78,16 @@
|
||||
</v-row>
|
||||
<v-row class="mt-10" align-content="stretch">
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<AdminEventViewer />
|
||||
<AdminEventViewer
|
||||
v-if="events"
|
||||
:events="events.events"
|
||||
:total="events.total"
|
||||
@delete-all="deleteEvents"
|
||||
@delete-item="deleteEvent"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<AdminBackupViewer />
|
||||
<AdminBackupViewer v-if="backups" :available-backups="backups.imports" :templates="backups.templates" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@ -87,26 +95,62 @@
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
|
||||
import AdminEventViewer from "@/components/Domain/Admin/AdminEventViewer.vue";
|
||||
import AdminBackupViewer from "@/components/Domain/Admin/AdminBackupViewer.vue";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { useBackups } from "~/composables/use-backups";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AdminEventViewer, AdminBackupViewer },
|
||||
layout: "admin",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statistics: {
|
||||
totalGroups: 0,
|
||||
totalRecipes: 0,
|
||||
totalUsers: 0,
|
||||
uncategorizedRecipes: 0,
|
||||
untaggedRecipes: 0,
|
||||
},
|
||||
};
|
||||
const api = useApiSingleton();
|
||||
|
||||
function getStatistics() {
|
||||
const statistics = useAsync(async () => {
|
||||
const { data } = await api.debug.getAppStatistics();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
return statistics;
|
||||
}
|
||||
|
||||
function getEvents() {
|
||||
const events = useAsync(async () => {
|
||||
const { data } = await api.events.getEvents();
|
||||
return data;
|
||||
});
|
||||
return events;
|
||||
}
|
||||
|
||||
async function refreshEvents() {
|
||||
const { data } = await api.events.getEvents();
|
||||
events.value = data;
|
||||
}
|
||||
|
||||
async function deleteEvent(id: number) {
|
||||
const { response } = await api.events.deleteEvent(id);
|
||||
|
||||
if (response && response.status === 200) {
|
||||
refreshEvents();
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteEvents() {
|
||||
const { response } = await api.events.deleteEvents();
|
||||
|
||||
if (response && response.status === 200) {
|
||||
events.value = { events: [], total: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
const { backups } = useBackups();
|
||||
const events = getEvents();
|
||||
const statistics = getStatistics();
|
||||
|
||||
return { statistics, events, deleteEvents, deleteEvent, backups };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -9,22 +9,26 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, useAsync } from "@nuxtjs/composition-api";
|
||||
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { Recipe } from "~/types/api-types/admin";
|
||||
|
||||
export default defineComponent({
|
||||
components: { RecipeCardSection },
|
||||
setup() {
|
||||
const api = useApiSingleton();
|
||||
|
||||
const recipes = ref<Recipe[] | null>([]);
|
||||
onMounted(async () => {
|
||||
const recipes = useAsync(async () => {
|
||||
const { data } = await api.recipes.getAll();
|
||||
recipes.value = data;
|
||||
return data;
|
||||
});
|
||||
|
||||
// const recipes = ref<Recipe[] | null>([]);
|
||||
// onMounted(async () => {
|
||||
// const { data } = await api.recipes.getAll();
|
||||
// recipes.value = data;
|
||||
// });
|
||||
|
||||
return { api, recipes };
|
||||
},
|
||||
});
|
||||
|
@ -216,11 +216,8 @@ export default defineComponent({
|
||||
formData.append("username", this.form.email);
|
||||
formData.append("password", this.form.password);
|
||||
|
||||
const response = await this.$auth.loginWith("local", { data: formData });
|
||||
console.log(response);
|
||||
await this.$auth.loginWith("local", { data: formData });
|
||||
this.loggingIn = false;
|
||||
|
||||
console.log(this.$auth.user);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
@ -105,11 +105,8 @@ export default defineComponent({
|
||||
formData.append("username", this.form.email);
|
||||
formData.append("password", this.form.password);
|
||||
|
||||
const response = await this.$auth.loginWith("local", { data: formData });
|
||||
console.log(response);
|
||||
await this.$auth.loginWith("local", { data: formData });
|
||||
this.loggingIn = false;
|
||||
|
||||
console.log(this.$auth.user);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user