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:
hay-kot 2021-08-07 15:12:25 -08:00
parent 41a6916771
commit 9386cc320b
32 changed files with 671 additions and 113 deletions

View File

@ -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, {

View 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));
}
}

View 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);
}
}

View 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
*/
}

View File

@ -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

View File

@ -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);

View 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);
}
}

View File

@ -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);

View File

@ -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;

View File

@ -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: {

View File

@ -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>

View File

@ -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,
});
},
},

View File

@ -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>

View File

@ -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,

View File

@ -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"

View File

@ -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";

View File

@ -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({

View File

@ -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;

View 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>

View File

@ -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);

View File

@ -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",
},
},

View File

@ -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;
},
},

View 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 };
};

View 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;
},
};

View File

@ -0,0 +1,3 @@
export const useAsyncKey = function () {
return String(Date.now());
};

View File

@ -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() {

View File

@ -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",
},

View File

@ -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>

View File

@ -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 };
},
});

View File

@ -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);
},
},
});

View File

@ -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);
},
},
});