mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: ✨ add user recipe export functionality (#845)
* feat(frontend): ✨ add user recipe export functionality * remove depreciated folders * change/remove depreciated folders * add testing variable in config * add GUID support for group_id * improve testing feedback on 422 errors * remove/cleanup files/folders * initial user export support * delete unused css * update backup page UI * remove depreciated settings * feat: ✨ export download links * fix #813 * remove top level statements * show footer * add export purger to scheduler * update purge glob * fix meal-planner lockout * feat: ✨ add bulk delete/purge exports * style(frontend): 💄 update UI for site settings * feat: ✨ add version checker * update documentation Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
2ce195a0d4
commit
c32d7d7486
84 changed files with 1329 additions and 667 deletions
|
|
@ -17,6 +17,7 @@ export interface AdminAboutInfo {
|
|||
dbType: string;
|
||||
dbUrl: string;
|
||||
defaultGroup: string;
|
||||
versionLatest: string;
|
||||
}
|
||||
|
||||
export interface AdminStatistics {
|
||||
|
|
@ -31,6 +32,7 @@ export interface CheckAppConfig {
|
|||
emailReady: boolean;
|
||||
baseUrlSet: boolean;
|
||||
isSiteSecure: boolean;
|
||||
isUpToDate: boolean;
|
||||
ldapReady: boolean;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,10 +31,21 @@ interface BulkActionResponse {
|
|||
errors: BulkActionError[];
|
||||
}
|
||||
|
||||
export interface GroupDataExport {
|
||||
id: string;
|
||||
groupId: string;
|
||||
name: string;
|
||||
filename: string;
|
||||
path: string;
|
||||
size: string;
|
||||
expires: Date;
|
||||
}
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
bulkExport: prefix + "/recipes/bulk-actions/export",
|
||||
purgeExports: prefix + "/recipes/bulk-actions/export/purge",
|
||||
bulkCategorize: prefix + "/recipes/bulk-actions/categorize",
|
||||
bulkTag: prefix + "/recipes/bulk-actions/tag",
|
||||
bulkDelete: prefix + "/recipes/bulk-actions/delete",
|
||||
|
|
@ -56,4 +67,12 @@ export class BulkActionsAPI extends BaseAPI {
|
|||
async bulkDelete(payload: RecipeBulkDelete) {
|
||||
return await this.requests.post<BulkActionResponse>(routes.bulkDelete, payload);
|
||||
}
|
||||
|
||||
async fetchExports() {
|
||||
return await this.requests.get<GroupDataExport[]>(routes.bulkExport);
|
||||
}
|
||||
|
||||
async purgeExports() {
|
||||
return await this.requests.delete(routes.purgeExports);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,18 +38,6 @@ export default {
|
|||
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"),
|
||||
|
|
@ -58,10 +46,6 @@ export default {
|
|||
value: true,
|
||||
text: this.$t("group.groups"),
|
||||
},
|
||||
notifications: {
|
||||
value: true,
|
||||
text: this.$t("events.notification"),
|
||||
},
|
||||
},
|
||||
forceImport: false,
|
||||
};
|
||||
|
|
@ -73,12 +57,12 @@ export default {
|
|||
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,
|
||||
settings: false,
|
||||
themes: false,
|
||||
pages: false,
|
||||
users: this.options.users.value,
|
||||
groups: this.options.groups.value,
|
||||
notifications: this.options.notifications.value,
|
||||
notifications: false,
|
||||
forceImport: this.forceImport,
|
||||
});
|
||||
},
|
||||
|
|
|
|||
60
frontend/components/Domain/Group/GroupExportData.vue
Normal file
60
frontend/components/Domain/Group/GroupExportData.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<v-data-table
|
||||
item-key="id"
|
||||
:headers="headers"
|
||||
:items="exports"
|
||||
:items-per-page="15"
|
||||
class="elevation-0"
|
||||
@click:row="downloadData"
|
||||
>
|
||||
<template #item.expires="{ item }">
|
||||
{{ getTimeToExpire(item.expires) }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseButton download small :download-url="`/api/recipes/bulk-actions/export/download?path=${item.path}`">
|
||||
</BaseButton>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { parseISO, formatDistanceToNow } from "date-fns";
|
||||
import { GroupDataExport } from "~/api/class-interfaces/recipe-bulk-actions";
|
||||
export default defineComponent({
|
||||
props: {
|
||||
exports: {
|
||||
type: Array as () => GroupDataExport[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const headers = [
|
||||
{ text: "Export", value: "name" },
|
||||
{ text: "File Name", value: "filename" },
|
||||
{ text: "Size", value: "size" },
|
||||
{ text: "Link Expires", value: "expires" },
|
||||
{ text: "", value: "actions" },
|
||||
];
|
||||
|
||||
function getTimeToExpire(timeString: string) {
|
||||
const expiresAt = parseISO(timeString);
|
||||
|
||||
return formatDistanceToNow(expiresAt, {
|
||||
addSuffix: false,
|
||||
});
|
||||
}
|
||||
|
||||
function downloadData(_: any) {
|
||||
console.log("Downloading data...");
|
||||
}
|
||||
|
||||
return {
|
||||
downloadData,
|
||||
headers,
|
||||
getTimeToExpire,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
:items="recipes"
|
||||
:items-per-page="15"
|
||||
class="elevation-0"
|
||||
:loading="loading"
|
||||
@input="setValue(selected)"
|
||||
>
|
||||
<template #body.preappend>
|
||||
|
|
@ -22,6 +23,9 @@
|
|||
<template #item.recipeCategory="{ item }">
|
||||
<RecipeChip small :items="item.recipeCategory" />
|
||||
</template>
|
||||
<template #item.tools="{ item }">
|
||||
<RecipeChip small :items="item.tools" />
|
||||
</template>
|
||||
<template #item.userId="{ item }">
|
||||
<v-list-item class="justify-start">
|
||||
<v-list-item-avatar>
|
||||
|
|
@ -49,6 +53,7 @@ interface ShowHeaders {
|
|||
owner: Boolean;
|
||||
tags: Boolean;
|
||||
categories: Boolean;
|
||||
tools: Boolean;
|
||||
recipeYield: Boolean;
|
||||
dateAdded: Boolean;
|
||||
}
|
||||
|
|
@ -61,6 +66,11 @@ export default defineComponent({
|
|||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
recipes: {
|
||||
type: Array as () => Recipe[],
|
||||
default: () => [],
|
||||
|
|
@ -103,12 +113,16 @@ export default defineComponent({
|
|||
if (show.tags) {
|
||||
hdrs.push({ text: "Tags", value: "tags" });
|
||||
}
|
||||
if (show.tools) {
|
||||
hdrs.push({ text: "Tools", value: "tools" });
|
||||
}
|
||||
if (show.recipeYield) {
|
||||
hdrs.push({ text: "Yield", value: "recipeYield" });
|
||||
}
|
||||
if (show.dateAdded) {
|
||||
hdrs.push({ text: "Date Added", value: "dateAdded" });
|
||||
}
|
||||
|
||||
return hdrs;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
|
||||
<template>
|
||||
<v-card color="background" flat class="pb-2">
|
||||
<v-card
|
||||
color="background"
|
||||
flat
|
||||
class="pb-2"
|
||||
:class="{
|
||||
'mt-8': section,
|
||||
}"
|
||||
>
|
||||
<v-card-title class="headline pl-0 py-0">
|
||||
<v-icon v-if="icon !== ''" left>
|
||||
{{ icon }}
|
||||
|
|
@ -12,7 +19,7 @@
|
|||
<slot />
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<v-divider class="mb-3"></v-divider>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,6 +34,10 @@ export default {
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
section: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<section>
|
||||
<BaseCardSectionTitle title="Mealie Backups"> </BaseCardSectionTitle>
|
||||
<BaseCardSectionTitle title="Site Backups"> </BaseCardSectionTitle>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
:submit-text="$t('general.import')"
|
||||
@submit="importBackup()"
|
||||
>
|
||||
<!-- <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 v-model="selected.options" class="mt-5 mb-2" :import-backup="true" />
|
||||
|
|
@ -34,73 +33,74 @@
|
|||
<v-divider></v-divider>
|
||||
</BaseDialog>
|
||||
|
||||
<v-toolbar flat color="background" class="justify-between">
|
||||
<BaseButton class="mr-2" @click="createBackup(null)" />
|
||||
<!-- Backup Creation Dialog -->
|
||||
<BaseDialog
|
||||
v-model="createDialog"
|
||||
:title="$t('settings.backup.create-heading')"
|
||||
:icon="$globals.icons.database"
|
||||
:submit-text="$t('general.create')"
|
||||
@submit="createBackup"
|
||||
>
|
||||
<template #activator="{ open }">
|
||||
<BaseButton secondary @click="open"> {{ $t("general.custom") }}</BaseButton>
|
||||
</template>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card outlined>
|
||||
<v-card-title class="py-2"> {{ $t("settings.backup.create-heading") }} </v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-form @submit.prevent="createBackup()">
|
||||
<v-card-text>
|
||||
<v-text-field v-model="backupOptions.tag" :label="$t('settings.backup.backup-tag')"> </v-text-field>
|
||||
<AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<p class="text-uppercase">Templates</p>
|
||||
<v-checkbox
|
||||
v-for="(template, index) in backups.templates"
|
||||
:key="index"
|
||||
v-model="backupOptions.templates"
|
||||
:value="template"
|
||||
:label="template"
|
||||
></v-checkbox>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores molestiae alias incidunt fugiat!
|
||||
Recusandae natus numquam iusto voluptates deserunt quia? Sed voluptate rem facilis tempora, perspiciatis
|
||||
corrupti dolore obcaecati laudantium!
|
||||
<div style="max-width: 300px">
|
||||
<v-text-field
|
||||
v-model="backupOptions.tag"
|
||||
class="mt-4"
|
||||
:label="$t('settings.backup.backup-tag') + ' (optional)'"
|
||||
>
|
||||
</v-text-field>
|
||||
<AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
|
||||
<v-divider class="my-3"></v-divider>
|
||||
</div>
|
||||
<v-card-actions>
|
||||
<BaseButton type="submit"> </BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</v-toolbar>
|
||||
</v-form>
|
||||
</v-card>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="backups.imports || []"
|
||||
class="elevation-0"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
@click:row="setSelected"
|
||||
>
|
||||
<template #item.date="{ item }">
|
||||
{{ $d(Date.parse(item.date), "medium") }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<BaseButton
|
||||
small
|
||||
class="mx-1"
|
||||
delete
|
||||
@click.stop="
|
||||
deleteDialog = true;
|
||||
deleteTarget = item.name;
|
||||
"
|
||||
/>
|
||||
<BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop />
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
<div class="mt-4 d-flex justify-end">
|
||||
<AppButtonUpload
|
||||
:text-btn="false"
|
||||
class="mr-4"
|
||||
url="/api/backups/upload"
|
||||
accept=".zip"
|
||||
color="info"
|
||||
@uploaded="refreshBackups()"
|
||||
/>
|
||||
</div>
|
||||
<section class="mt-5">
|
||||
<BaseCardSectionTitle title="Backups"></BaseCardSectionTitle>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="backups.imports || []"
|
||||
class="elevation-0"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
@click:row="setSelected"
|
||||
>
|
||||
<template #item.date="{ item }">
|
||||
{{ $d(Date.parse(item.date), "medium") }}
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<v-btn
|
||||
icon
|
||||
class="mx-1"
|
||||
color="error"
|
||||
@click.stop="
|
||||
deleteDialog = true;
|
||||
deleteTarget = item.name;
|
||||
"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.delete }} </v-icon>
|
||||
</v-btn>
|
||||
<BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop />
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex justify-end mt-6">
|
||||
<div>
|
||||
<AppButtonUpload
|
||||
:text-btn="false"
|
||||
class="mr-4"
|
||||
url="/api/backups/upload"
|
||||
accept=".zip"
|
||||
color="info"
|
||||
@uploaded="refreshBackups()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,64 +10,49 @@
|
|||
<section>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General Configuration">
|
||||
</BaseCardSectionTitle>
|
||||
<v-card v-for="(check, idx) in simpleChecks" :key="idx" class="mb-4">
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<v-icon :color="getColor(check.status)">
|
||||
{{ check.status ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title :class="getTextClass(check.status)"> {{ check.text }} </v-list-item-title>
|
||||
<v-list-item-subtitle :class="getTextClass(check.status)">
|
||||
{{ check.status ? check.successText : check.errorText }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
|
||||
<v-alert
|
||||
v-for="(check, idx) in simpleChecks"
|
||||
:key="idx"
|
||||
border="left"
|
||||
colored-border
|
||||
:type="getColor(check.status, check.warning)"
|
||||
elevation="2"
|
||||
>
|
||||
<div class="font-weight-medium">{{ check.text }}</div>
|
||||
<div>
|
||||
{{ check.status ? check.successText : check.errorText }}
|
||||
</div>
|
||||
</v-alert>
|
||||
</section>
|
||||
<section>
|
||||
<BaseCardSectionTitle class="pt-2" :icon="$globals.icons.email" title="Email Configuration">
|
||||
</BaseCardSectionTitle>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<v-icon :color="getColor(appConfig.emailReady)">
|
||||
{{ appConfig.emailReady ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title :class="getTextClass(appConfig.emailReady)">
|
||||
Email Configuration Status
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle :class="getTextClass(appConfig.emailReady)">
|
||||
{{ appConfig.emailReady ? "Ready" : "Not Ready - Check Env Variables" }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-card-actions>
|
||||
<v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
|
||||
</v-text-field>
|
||||
<BaseButton
|
||||
color="info"
|
||||
:disabled="!appConfig.emailReady || !validEmail"
|
||||
:loading="loading"
|
||||
@click="testEmail"
|
||||
>
|
||||
<template #icon> {{ $globals.icons.email }} </template>
|
||||
{{ $t("general.test") }}
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
<template v-if="tested">
|
||||
<v-divider class="my-x"></v-divider>
|
||||
<v-card-text>
|
||||
Email Test Result: {{ success ? "Succeeded" : "Failed" }}
|
||||
<div>Errors: {{ error }}</div>
|
||||
</v-card-text>
|
||||
</template>
|
||||
</v-card>
|
||||
<BaseCardSectionTitle class="pt-2" :icon="$globals.icons.email" title="Email Configuration" />
|
||||
<v-alert :key="idx" border="left" colored-border :type="getColor(appConfig.emailReady)" elevation="2">
|
||||
<div class="font-weight-medium">Email Configuration Status</div>
|
||||
<div>
|
||||
{{ appConfig.emailReady ? "Ready" : "Not Ready - Check Environmental Variables" }}
|
||||
</div>
|
||||
<div>
|
||||
<v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
|
||||
</v-text-field>
|
||||
<BaseButton
|
||||
color="info"
|
||||
:disabled="!appConfig.emailReady || !validEmail"
|
||||
:loading="loading"
|
||||
@click="testEmail"
|
||||
>
|
||||
<template #icon> {{ $globals.icons.email }} </template>
|
||||
{{ $t("general.test") }}
|
||||
</BaseButton>
|
||||
<template v-if="tested">
|
||||
<v-divider class="my-x"></v-divider>
|
||||
<v-card-text>
|
||||
Email Test Result: {{ success ? "Succeeded" : "Failed" }}
|
||||
<div>Errors: {{ error }}</div>
|
||||
</v-card-text>
|
||||
</template>
|
||||
</div>
|
||||
</v-alert>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General About"> </BaseCardSectionTitle>
|
||||
|
|
@ -101,7 +86,7 @@ import {
|
|||
useAsync,
|
||||
useContext,
|
||||
} from "@nuxtjs/composition-api";
|
||||
import { CheckAppConfig } from "~/api/admin/admin-about";
|
||||
import { AdminAboutInfo, CheckAppConfig } from "~/api/admin/admin-about";
|
||||
import { useAdminApi, useUserApi } from "~/composables/api";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
|
|
@ -128,6 +113,7 @@ export default defineComponent({
|
|||
emailReady: false,
|
||||
baseUrlSet: false,
|
||||
isSiteSecure: false,
|
||||
isUpToDate: false,
|
||||
ldapReady: false,
|
||||
});
|
||||
|
||||
|
|
@ -151,22 +137,34 @@ export default defineComponent({
|
|||
const simpleChecks = computed<SimpleCheck[]>(() => {
|
||||
return [
|
||||
{
|
||||
status: appConfig.value.baseUrlSet,
|
||||
text: "Server Side Base URL",
|
||||
errorText: "`BASE_URL` still default on API Server",
|
||||
successText: "Server Side URL does not match the default",
|
||||
status: appConfig.value.isUpToDate,
|
||||
text: "Application Version",
|
||||
errorText: `Your current version (${rawAppInfo.value.version}) does not match the latest release. Considering updating to the latest version (${rawAppInfo.value.versionLatest}).`,
|
||||
successText: "Mealie is up to date",
|
||||
warning: true,
|
||||
},
|
||||
{
|
||||
status: appConfig.value.isSiteSecure,
|
||||
text: "Secure Site",
|
||||
errorText: "Serve via localhost or secure with https.",
|
||||
errorText: "Serve via localhost or secure with https. Clipboard and additional browser APIs may not work.",
|
||||
successText: "Site is accessed by localhost or https",
|
||||
warning: false,
|
||||
},
|
||||
{
|
||||
status: appConfig.value.baseUrlSet,
|
||||
text: "Server Side Base URL",
|
||||
errorText:
|
||||
"`BASE_URL` is still the default value on API Server. This will cause issues with notifications links generated on the server for emails, etc.",
|
||||
successText: "Server Side URL does not match the default",
|
||||
warning: false,
|
||||
},
|
||||
{
|
||||
status: appConfig.value.ldapReady,
|
||||
text: "LDAP Ready",
|
||||
errorText: "Not all LDAP Values are configured",
|
||||
errorText:
|
||||
"Not all LDAP Values are configured. This can be ignored if you are not using LDAP Authentication.",
|
||||
successText: "Required LDAP variables are all set.",
|
||||
warning: true,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
|
@ -201,23 +199,30 @@ export default defineComponent({
|
|||
return false;
|
||||
});
|
||||
|
||||
function getTextClass(booly: boolean | any) {
|
||||
return booly ? "success--text" : "error--text";
|
||||
}
|
||||
function getColor(booly: boolean | any) {
|
||||
return booly ? "success" : "error";
|
||||
function getColor(booly: boolean | any, warning = false) {
|
||||
const falsey = warning ? "warning" : "error";
|
||||
return booly ? "success" : falsey;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// General About Info
|
||||
|
||||
// @ts-ignore
|
||||
const { $globals, i18n } = useContext();
|
||||
|
||||
// @ts-ignore
|
||||
const rawAppInfo = ref<AdminAboutInfo>({
|
||||
version: "null",
|
||||
versionLatest: "null",
|
||||
});
|
||||
|
||||
function getAppInfo() {
|
||||
const statistics = useAsync(async () => {
|
||||
const { data } = await adminApi.about.about();
|
||||
|
||||
if (data) {
|
||||
rawAppInfo.value = data;
|
||||
|
||||
const prettyInfo = [
|
||||
{
|
||||
name: i18n.t("about.version"),
|
||||
|
|
@ -275,7 +280,6 @@ export default defineComponent({
|
|||
return {
|
||||
simpleChecks,
|
||||
getColor,
|
||||
getTextClass,
|
||||
appConfig,
|
||||
validEmail,
|
||||
validators,
|
||||
|
|
|
|||
|
|
@ -382,10 +382,6 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="css">
|
||||
/* .col-borders {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
} */
|
||||
|
||||
.left-color-border {
|
||||
border-left: 5px solid var(--v-primary-base) !important;
|
||||
}
|
||||
|
|
|
|||
392
frontend/pages/user/group/data/recipes.vue
Normal file
392
frontend/pages/user/group/data/recipes.vue
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Export Purge Confirmation Dialog -->
|
||||
<BaseDialog
|
||||
v-model="purgeExportsDialog"
|
||||
title="Purge Exports"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
@confirm="purgeExports()"
|
||||
>
|
||||
<v-card-text> Are you sure you want to delete all export data? </v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Base Dialog Object -->
|
||||
<BaseDialog
|
||||
ref="domDialog"
|
||||
v-model="dialog.state"
|
||||
width="650px"
|
||||
:icon="dialog.icon"
|
||||
:title="dialog.title"
|
||||
submit-text="Submit"
|
||||
@submit="dialog.callback"
|
||||
>
|
||||
<v-card-text v-if="dialog.mode == MODES.tag">
|
||||
<RecipeCategoryTagSelector v-model="toSetTags" :tag-selector="true" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.category">
|
||||
<RecipeCategoryTagSelector v-model="toSetCategories" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.delete">
|
||||
<p class="h4">Are you sure you want to delete the following recipes? This action cannot be undone.</p>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll height="400" item-height="25" :items="selected">
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.export">
|
||||
<p class="h4">The following recipes ({{ selected.length }}) will be exported.</p>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll height="400" item-height="25" :items="selected">
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Data Management </template>
|
||||
</BasePageTitle>
|
||||
|
||||
<section>
|
||||
<!-- Recipe Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.primary" section title="Recipe Data">
|
||||
Use this section to manage the data associated with your recipes. You can perform several bulk actions on your
|
||||
recipes including exporting, deleting, tagging, and assigning categories.
|
||||
</BaseCardSectionTitle>
|
||||
<v-card-actions class="mt-n5 mb-1">
|
||||
<v-menu offset-y bottom nudge-bottom="6" :close-on-content-click="false">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn color="accent" class="mr-1" dark v-bind="attrs" v-on="on">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.cog }}
|
||||
</v-icon>
|
||||
Columns
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="py-2">
|
||||
<div>Recipe Columns</div>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text class="mt-n5">
|
||||
<v-checkbox
|
||||
v-for="(itemValue, key) in headers"
|
||||
:key="key"
|
||||
v-model="headers[key]"
|
||||
dense
|
||||
flat
|
||||
inset
|
||||
:label="headerLabels[key]"
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<BaseOverflowButton
|
||||
:disabled="selected.length < 1"
|
||||
mode="event"
|
||||
color="info"
|
||||
:items="actions"
|
||||
@export-selected="openDialog(MODES.export)"
|
||||
@tag-selected="openDialog(MODES.tag)"
|
||||
@categorize-selected="openDialog(MODES.category)"
|
||||
@delete-selected="openDialog(MODES.delete)"
|
||||
>
|
||||
</BaseOverflowButton>
|
||||
|
||||
<p v-if="selected.length > 0" class="text-caption my-auto ml-5">Selected: {{ selected.length }}</p>
|
||||
</v-card-actions>
|
||||
<v-card>
|
||||
<RecipeDataTable v-model="selected" :loading="loading" :recipes="allRecipes" :show-headers="headers" />
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton color="info">
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
Import
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
color="info"
|
||||
@click="
|
||||
selectAll();
|
||||
openDialog(MODES.export);
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
Export All
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</section>
|
||||
|
||||
<section class="mt-10">
|
||||
<!-- Downloads Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.database" section title="Data Exports">
|
||||
This section provides links to available exports that are ready to download. These exports do expire, so be sure
|
||||
to grab them while they're still available.
|
||||
</BaseCardSectionTitle>
|
||||
<v-card-actions class="mt-n5 mb-1">
|
||||
<BaseButton delete @click="purgeExportsDialog = true"> </BaseButton>
|
||||
</v-card-actions>
|
||||
<v-card>
|
||||
<GroupExportData :exports="groupExports" />
|
||||
</v-card>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
|
||||
import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
|
||||
import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
|
||||
import { GroupDataExport } from "~/api/class-interfaces/recipe-bulk-actions";
|
||||
|
||||
const MODES = {
|
||||
tag: "tag",
|
||||
category: "category",
|
||||
export: "export",
|
||||
delete: "delete",
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { RecipeDataTable, RecipeCategoryTagSelector, GroupExportData },
|
||||
scrollToTop: true,
|
||||
setup() {
|
||||
const { getAllRecipes, refreshRecipes } = useRecipes(true, true);
|
||||
|
||||
// @ts-ignore
|
||||
const { $globals } = useContext();
|
||||
|
||||
const selected = ref<Recipe[]>([]);
|
||||
|
||||
function resetAll() {
|
||||
selected.value = [];
|
||||
toSetTags.value = [];
|
||||
toSetCategories.value = [];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const headers = reactive({
|
||||
id: false,
|
||||
owner: false,
|
||||
tags: true,
|
||||
tools: "Tools",
|
||||
categories: true,
|
||||
recipeYield: false,
|
||||
dateAdded: false,
|
||||
});
|
||||
|
||||
const headerLabels = {
|
||||
id: "Id",
|
||||
owner: "Owner",
|
||||
tags: "Tags",
|
||||
categories: "Categories",
|
||||
tools: "Tools",
|
||||
recipeYield: "Recipe Yield",
|
||||
dateAdded: "Date Added",
|
||||
};
|
||||
|
||||
const actions = [
|
||||
{
|
||||
icon: $globals.icons.database,
|
||||
text: "Export",
|
||||
value: 0,
|
||||
event: "export-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: "Tag",
|
||||
value: 1,
|
||||
event: "tag-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: "Categorize",
|
||||
value: 2,
|
||||
event: "categorize-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: "Delete",
|
||||
value: 3,
|
||||
event: "delete-selected",
|
||||
},
|
||||
];
|
||||
|
||||
const api = useUserApi();
|
||||
const loading = ref(false);
|
||||
|
||||
// ===============================================================
|
||||
// Group Exports
|
||||
|
||||
const purgeExportsDialog = ref(false);
|
||||
|
||||
async function purgeExports() {
|
||||
await api.bulk.purgeExports();
|
||||
refreshExports();
|
||||
}
|
||||
|
||||
const groupExports = ref<GroupDataExport[]>([]);
|
||||
|
||||
async function refreshExports() {
|
||||
const { data } = await api.bulk.fetchExports();
|
||||
|
||||
if (data) {
|
||||
groupExports.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshExports();
|
||||
});
|
||||
// ===============================================================
|
||||
// All Recipes
|
||||
|
||||
function selectAll() {
|
||||
// @ts-ignore
|
||||
selected.value = allRecipes.value;
|
||||
}
|
||||
|
||||
async function exportSelected() {
|
||||
loading.value = true;
|
||||
const { data } = await api.bulk.bulkExport({
|
||||
recipes: selected.value.map((x: Recipe) => x.slug),
|
||||
exportType: "json",
|
||||
});
|
||||
|
||||
if (data) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
resetAll();
|
||||
refreshExports();
|
||||
}
|
||||
|
||||
const toSetTags = ref([]);
|
||||
|
||||
async function tagSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
await api.bulk.bulkTag({ recipes, tags: toSetTags.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
const toSetCategories = ref([]);
|
||||
|
||||
async function categorizeSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
await api.bulk.bulkCategorize({ recipes, categories: toSetCategories.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
|
||||
const { response, data } = await api.bulk.bulkDelete({ recipes });
|
||||
|
||||
console.log(response, data);
|
||||
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Dialog Management
|
||||
|
||||
const dialog = reactive({
|
||||
state: false,
|
||||
title: "Tag Recipes",
|
||||
mode: MODES.tag,
|
||||
tag: "",
|
||||
callback: () => {},
|
||||
icon: $globals.icons.tags,
|
||||
});
|
||||
|
||||
function openDialog(mode: string) {
|
||||
const titles = {
|
||||
[MODES.tag]: "Tag Recipes",
|
||||
[MODES.category]: "Categorize Recipes",
|
||||
[MODES.export]: "Export Recipes",
|
||||
[MODES.delete]: "Delete Recipes",
|
||||
};
|
||||
|
||||
const callbacks = {
|
||||
[MODES.tag]: tagSelected,
|
||||
[MODES.category]: categorizeSelected,
|
||||
[MODES.export]: exportSelected,
|
||||
[MODES.delete]: deleteSelected,
|
||||
};
|
||||
|
||||
const icons = {
|
||||
[MODES.tag]: $globals.icons.tags,
|
||||
[MODES.category]: $globals.icons.tags,
|
||||
[MODES.export]: $globals.icons.database,
|
||||
[MODES.delete]: $globals.icons.delete,
|
||||
};
|
||||
|
||||
dialog.mode = mode;
|
||||
dialog.title = titles[mode];
|
||||
dialog.callback = callbacks[mode];
|
||||
dialog.icon = icons[mode];
|
||||
dialog.state = true;
|
||||
}
|
||||
|
||||
return {
|
||||
selectAll,
|
||||
loading,
|
||||
actions,
|
||||
allRecipes,
|
||||
categorizeSelected,
|
||||
deleteSelected,
|
||||
dialog,
|
||||
exportSelected,
|
||||
getAllRecipes,
|
||||
headerLabels,
|
||||
headers,
|
||||
MODES,
|
||||
openDialog,
|
||||
selected,
|
||||
tagSelected,
|
||||
toSetCategories,
|
||||
toSetTags,
|
||||
groupExports,
|
||||
purgeExportsDialog,
|
||||
purgeExports,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: "Recipe Data",
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,274 +0,0 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Base Dialog Object -->
|
||||
<BaseDialog
|
||||
ref="domDialog"
|
||||
v-model="dialog.state"
|
||||
width="650px"
|
||||
:icon="dialog.icon"
|
||||
:title="dialog.title"
|
||||
submit-text="Submit"
|
||||
@submit="dialog.callback"
|
||||
>
|
||||
<v-card-text v-if="dialog.mode == MODES.tag">
|
||||
<RecipeCategoryTagSelector v-model="toSetTags" :tag-selector="true" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.category">
|
||||
<RecipeCategoryTagSelector v-model="toSetCategories" />
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.delete">
|
||||
Are you sure you want to delete the following recipes?
|
||||
<ul class="pt-5">
|
||||
<li v-for="recipe in selected" :key="recipe.slug">{{ recipe.name }}</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.export"> TODO: Export Stuff Here </v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Recipe Data Management </template>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe quidem repudiandae consequatur laboriosam maxime
|
||||
perferendis nemo asperiores ipsum est, tenetur ratione dolorum sapiente recusandae
|
||||
</BasePageTitle>
|
||||
<v-card-actions>
|
||||
<v-menu offset-y bottom nudge-bottom="6" :close-on-content-click="false">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn color="accent" class="mr-1" dark v-bind="attrs" v-on="on">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.cog }}
|
||||
</v-icon>
|
||||
Columns
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="py-2">
|
||||
<div>Recipe Columns</div>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text class="mt-n5">
|
||||
<v-checkbox
|
||||
v-for="(itemValue, key) in headers"
|
||||
:key="key"
|
||||
v-model="headers[key]"
|
||||
dense
|
||||
flat
|
||||
inset
|
||||
:label="headerLabels[key]"
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<BaseOverflowButton
|
||||
:disabled="selected.length < 1"
|
||||
mode="event"
|
||||
color="info"
|
||||
:items="actions"
|
||||
@export-selected="openDialog(MODES.export)"
|
||||
@tag-selected="openDialog(MODES.tag)"
|
||||
@categorize-selected="openDialog(MODES.category)"
|
||||
@delete-selected="openDialog(MODES.delete)"
|
||||
>
|
||||
</BaseOverflowButton>
|
||||
|
||||
<p v-if="selected.length > 0" class="text-caption my-auto ml-5">Selected: {{ selected.length }}</p>
|
||||
</v-card-actions>
|
||||
<RecipeDataTable v-model="selected" :recipes="allRecipes" :show-headers="headers" />
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton color="info">
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
Import
|
||||
</BaseButton>
|
||||
<BaseButton color="info">
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
Export All
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
|
||||
import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
|
||||
const MODES = {
|
||||
tag: "tag",
|
||||
category: "category",
|
||||
export: "export",
|
||||
delete: "delete",
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { RecipeDataTable, RecipeCategoryTagSelector },
|
||||
scrollToTop: true,
|
||||
setup() {
|
||||
const { getAllRecipes, refreshRecipes } = useRecipes(true, true);
|
||||
|
||||
// @ts-ignore
|
||||
const { $globals } = useContext();
|
||||
|
||||
const selected = ref([]);
|
||||
|
||||
function resetAll() {
|
||||
selected.value = [];
|
||||
toSetTags.value = [];
|
||||
toSetCategories.value = [];
|
||||
}
|
||||
|
||||
const headers = reactive({
|
||||
id: false,
|
||||
owner: false,
|
||||
tags: true,
|
||||
categories: true,
|
||||
recipeYield: false,
|
||||
dateAdded: false,
|
||||
});
|
||||
|
||||
const headerLabels = {
|
||||
id: "Id",
|
||||
owner: "Owner",
|
||||
tags: "Tags",
|
||||
categories: "Categories",
|
||||
recipeYield: "Recipe Yield",
|
||||
dateAdded: "Date Added",
|
||||
};
|
||||
|
||||
const actions = [
|
||||
{
|
||||
icon: $globals.icons.database,
|
||||
text: "Export",
|
||||
value: 0,
|
||||
event: "export-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: "Tag",
|
||||
value: 1,
|
||||
event: "tag-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: "Categorize",
|
||||
value: 2,
|
||||
event: "categorize-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: "Delete",
|
||||
value: 3,
|
||||
event: "delete-selected",
|
||||
},
|
||||
];
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
function exportSelected() {
|
||||
console.log("Export Selected");
|
||||
}
|
||||
|
||||
const toSetTags = ref([]);
|
||||
|
||||
async function tagSelected() {
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
await api.bulk.bulkTag({ recipes, tags: toSetTags.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
const toSetCategories = ref([]);
|
||||
|
||||
async function categorizeSelected() {
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
await api.bulk.bulkCategorize({ recipes, categories: toSetCategories.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug);
|
||||
|
||||
const { response, data } = await api.bulk.bulkDelete({ recipes });
|
||||
|
||||
console.log(response, data);
|
||||
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Dialog Management
|
||||
|
||||
const dialog = reactive({
|
||||
state: false,
|
||||
title: "Tag Recipes",
|
||||
mode: MODES.tag,
|
||||
tag: "",
|
||||
callback: () => {},
|
||||
icon: $globals.icons.tags,
|
||||
});
|
||||
|
||||
function openDialog(mode: string) {
|
||||
const titles = {
|
||||
[MODES.tag]: "Tag Recipes",
|
||||
[MODES.category]: "Categorize Recipes",
|
||||
[MODES.export]: "Export Recipes",
|
||||
[MODES.delete]: "Delete Recipes",
|
||||
};
|
||||
|
||||
const callbacks = {
|
||||
[MODES.tag]: tagSelected,
|
||||
[MODES.category]: categorizeSelected,
|
||||
[MODES.export]: exportSelected,
|
||||
[MODES.delete]: deleteSelected,
|
||||
};
|
||||
|
||||
const icons = {
|
||||
[MODES.tag]: $globals.icons.tags,
|
||||
[MODES.category]: $globals.icons.tags,
|
||||
[MODES.export]: $globals.icons.database,
|
||||
[MODES.delete]: $globals.icons.delete,
|
||||
};
|
||||
|
||||
dialog.mode = mode;
|
||||
dialog.title = titles[mode];
|
||||
dialog.callback = callbacks[mode];
|
||||
dialog.icon = icons[mode];
|
||||
dialog.state = true;
|
||||
}
|
||||
|
||||
return {
|
||||
toSetTags,
|
||||
toSetCategories,
|
||||
openDialog,
|
||||
dialog,
|
||||
MODES,
|
||||
headers,
|
||||
headerLabels,
|
||||
exportSelected,
|
||||
tagSelected,
|
||||
categorizeSelected,
|
||||
deleteSelected,
|
||||
actions,
|
||||
selected,
|
||||
allRecipes,
|
||||
getAllRecipes,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: "Recipe Data",
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</v-col>
|
||||
<v-col v-if="user.advanced" cols="12" sm="12" md="6">
|
||||
<UserProfileLinkCard
|
||||
:link="{ text: 'Manage Recipe Data', to: '/user/group/recipe-data' }"
|
||||
:link="{ text: 'Manage Recipe Data', to: '/user/group/data/recipes' }"
|
||||
:image="require('~/static/svgs/manage-recipes.svg')"
|
||||
>
|
||||
<template #title> Recipe Data </template>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import {
|
|||
mdiDrag,
|
||||
mdiEyeOff,
|
||||
mdiCalendarMinus,
|
||||
mdiAlertOutline,
|
||||
mdiCalendar,
|
||||
mdiDiceMultiple,
|
||||
mdiAlertCircle,
|
||||
|
|
@ -113,6 +114,7 @@ export const icons = {
|
|||
units: mdiBeakerOutline,
|
||||
alert: mdiAlert,
|
||||
alertCircle: mdiAlertCircle,
|
||||
alertOutline: mdiAlertOutline,
|
||||
api: mdiApi,
|
||||
arrowLeftBold: mdiArrowLeftBold,
|
||||
arrowRightBold: mdiArrowRightBold,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue