mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +02:00
feature/finish-recipe-assets (#384)
* add features to readme
* Copy markdown reference
* prop as whole recipe
* parameter as url instead of query
* add card styling to editor
* move images to /recipes/{slug}/images
* add image to breaking changes
* fix delete and import errors
* fix debug/about response
* logger updates
* dashboard ui
* add server side events
* unorganized routes
* default slot
* add backup viewer to dashboard
* format
* add dialog to backup imports
* initial event support
* delete assets when removed
Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
f2d2b79a57
commit
5580d177c3
61 changed files with 1276 additions and 266 deletions
59
frontend/src/api/about.js
Normal file
59
frontend/src/api/about.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { baseURL } from "./api-utils";
|
||||
import { apiReq } from "./api-utils";
|
||||
|
||||
const prefix = baseURL + "about";
|
||||
|
||||
const aboutURLs = {
|
||||
version: `${prefix}/version`,
|
||||
debug: `${prefix}`,
|
||||
lastRecipe: `${prefix}/last-recipe-json`,
|
||||
demo: `${prefix}/is-demo`,
|
||||
log: num => `${prefix}/log/${num}`,
|
||||
statistics: `${prefix}/statistics`,
|
||||
events: `${prefix}/events`,
|
||||
event: id => `${prefix}/events/${id}`,
|
||||
};
|
||||
|
||||
export const aboutAPI = {
|
||||
async getEvents() {
|
||||
const resposne = await apiReq.get(aboutURLs.events);
|
||||
return resposne.data;
|
||||
},
|
||||
async deleteEvent(id) {
|
||||
const resposne = await apiReq.delete(aboutURLs.event(id));
|
||||
return resposne.data;
|
||||
},
|
||||
async deleteAllEvents() {
|
||||
const resposne = await apiReq.delete(aboutURLs.events);
|
||||
return resposne.data;
|
||||
},
|
||||
// async getAppInfo() {
|
||||
// const response = await apiReq.get(aboutURLs.version);
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// async getDebugInfo() {
|
||||
// const response = await apiReq.get(aboutURLs.debug);
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// async getLogText(num) {
|
||||
// const response = await apiReq.get(aboutURLs.log(num));
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// async getLastJson() {
|
||||
// const response = await apiReq.get(aboutURLs.lastRecipe);
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// async getIsDemo() {
|
||||
// const response = await apiReq.get(aboutURLs.demo);
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// async getStatistics() {
|
||||
// const response = await apiReq.get(aboutURLs.statistics);
|
||||
// return response.data;
|
||||
// },
|
||||
};
|
||||
|
|
@ -11,6 +11,7 @@ import { userAPI } from "./users";
|
|||
import { signupAPI } from "./signUps";
|
||||
import { groupAPI } from "./groups";
|
||||
import { siteSettingsAPI } from "./siteSettings";
|
||||
import { aboutAPI } from "./about";
|
||||
|
||||
/**
|
||||
* The main object namespace for interacting with the backend database
|
||||
|
|
@ -30,4 +31,5 @@ export const api = {
|
|||
users: userAPI,
|
||||
signUps: signupAPI,
|
||||
groups: groupAPI,
|
||||
about: aboutAPI,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@ const debugURLs = {
|
|||
debug: `${prefix}`,
|
||||
lastRecipe: `${prefix}/last-recipe-json`,
|
||||
demo: `${prefix}/is-demo`,
|
||||
log: num => `${prefix}/log/${num}`,
|
||||
statistics: `${prefix}/statistics`,
|
||||
};
|
||||
|
||||
export const metaAPI = {
|
||||
async getAppInfo() {
|
||||
let response = await apiReq.get(debugURLs.version);
|
||||
const response = await apiReq.get(debugURLs.version);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
|
|
@ -21,13 +23,23 @@ export const metaAPI = {
|
|||
return response.data;
|
||||
},
|
||||
|
||||
async getLogText(num) {
|
||||
const response = await apiReq.get(debugURLs.log(num));
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async getLastJson() {
|
||||
let response = await apiReq.get(debugURLs.lastRecipe);
|
||||
const response = await apiReq.get(debugURLs.lastRecipe);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async getIsDemo() {
|
||||
let response = await apiReq.get(debugURLs.demo);
|
||||
const response = await apiReq.get(debugURLs.demo);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async getStatistics() {
|
||||
const response = await apiReq.get(debugURLs.statistics);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ const recipeURLs = {
|
|||
recipe: slug => prefix + slug,
|
||||
update: slug => prefix + slug,
|
||||
delete: slug => prefix + slug,
|
||||
createAsset: slug => `${prefix}media/${slug}/assets`,
|
||||
recipeImage: slug => `${prefix}${slug}/image`,
|
||||
updateImage: slug => `${prefix}${slug}/image`,
|
||||
createAsset: slug => `${prefix}${slug}/asset`,
|
||||
};
|
||||
|
||||
export const recipeAPI = {
|
||||
|
|
@ -84,7 +84,7 @@ export const recipeAPI = {
|
|||
fd.append("extension", fileObject.name.split(".").pop());
|
||||
fd.append("name", name);
|
||||
fd.append("icon", icon);
|
||||
let response = apiReq.post(recipeURLs.createAsset(recipeSlug), fd);
|
||||
const response = apiReq.post(recipeURLs.createAsset(recipeSlug), fd);
|
||||
return response;
|
||||
},
|
||||
|
||||
|
|
@ -135,14 +135,14 @@ export const recipeAPI = {
|
|||
},
|
||||
|
||||
recipeImage(recipeSlug) {
|
||||
return `/api/recipes/image/${recipeSlug}/original.webp`;
|
||||
return `/api/recipes/media/${recipeSlug}/image/original.webp`;
|
||||
},
|
||||
|
||||
recipeSmallImage(recipeSlug) {
|
||||
return `/api/recipes/image/${recipeSlug}/min-original.webp`;
|
||||
return `/api/recipes/media/${recipeSlug}/image/min-original.webp`;
|
||||
},
|
||||
|
||||
recipeTinyImage(recipeSlug) {
|
||||
return `/api/recipes/image/${recipeSlug}/tiny-original.webp`;
|
||||
return `/api/recipes/media/${recipeSlug}/image/tiny-original.webp`;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,15 +18,20 @@
|
|||
v-if="!edit"
|
||||
color="primary"
|
||||
icon
|
||||
:href="`/api/recipes/${slug}/asset?file_name=${item.fileName}`"
|
||||
:href="`/api/recipes/media/${slug}/assets/${item.fileName}`"
|
||||
target="_blank"
|
||||
top
|
||||
>
|
||||
<v-icon> mdi-download</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else color="error" icon @click="deleteAsset(i)" top>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
<div v-else>
|
||||
<v-btn color="error" icon @click="deleteAsset(i)" top>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
<v-btn color="primary" icon @click="copyLink(item.name, item.fileName)" top>
|
||||
<v-icon>mdi-content-copy</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
|
@ -107,6 +112,11 @@ export default {
|
|||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseURL() {
|
||||
return window.location.origin;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setFileObject(obj) {
|
||||
this.fileObject = obj;
|
||||
|
|
@ -124,6 +134,13 @@ export default {
|
|||
deleteAsset(index) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
copyLink(name, fileName) {
|
||||
const copyText = ``;
|
||||
navigator.clipboard.writeText(copyText).then(
|
||||
() => console.log("Copied", copyText),
|
||||
() => console.log("Copied Failed", copyText)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,23 +27,36 @@
|
|||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4" lg="4">
|
||||
<Ingredients :edit="true" v-model="value.recipeIngredient" />
|
||||
<v-card class="mt-6">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.categories") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<CategoryTagSelector
|
||||
:return-object="false"
|
||||
v-model="value.recipeCategory"
|
||||
:show-add="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
|
||||
<CategoryTagSelector
|
||||
:return-object="false"
|
||||
v-model="value.recipeCategory"
|
||||
:show-add="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
|
||||
<h2 class="mt-4">{{ $t("tag.tags") }}</h2>
|
||||
<CategoryTagSelector
|
||||
:return-object="false"
|
||||
v-model="value.tags"
|
||||
:show-add="true"
|
||||
:tag-selector="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
<v-card class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("tag.tags") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<CategoryTagSelector
|
||||
:return-object="false"
|
||||
v-model="value.tags"
|
||||
:show-add="true"
|
||||
:tag-selector="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<Nutrition v-model="value.nutrition" :edit="true" />
|
||||
<Assets v-model="value.assets" :edit="true" :slug="value.slug" />
|
||||
<ExtrasEditor :extras="value.extras" @save="saveExtras" />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card-title class="headline">
|
||||
{{ name }}
|
||||
{{ recipe.name }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<vue-markdown :source="description"> </vue-markdown>
|
||||
<vue-markdown :source="recipe.description"> </vue-markdown>
|
||||
<v-row dense disabled>
|
||||
<v-col>
|
||||
<v-btn
|
||||
v-if="yields"
|
||||
v-if="recipe.yields"
|
||||
dense
|
||||
small
|
||||
:hover="false"
|
||||
|
|
@ -21,59 +21,59 @@
|
|||
{{ yields }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<Rating :value="rating" :name="name" :slug="slug" />
|
||||
<Rating :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4" lg="4">
|
||||
<Ingredients :value="ingredients" :edit="false" />
|
||||
<Ingredients :value="recipe.recipeIngredient" :edit="false" />
|
||||
<div v-if="medium">
|
||||
<v-card class="mt-2" v-if="categories.length > 0">
|
||||
<v-card class="mt-2" v-if="recipe.recipeCategory.length > 0">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.categories") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeChips :items="categories" />
|
||||
<RecipeChips :items="recipe.recipeCategory" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card class="mt-2" v-if="tags.length > 0">
|
||||
<v-card class="mt-2" v-if="recipe.tags.length > 0">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("tag.tags") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeChips :items="tags" :isCategory="false" />
|
||||
<RecipeChips :items="recipe.tags" :isCategory="false" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<Nutrition :value="nutrition" :edit="false" />
|
||||
<Assets :value="assets" :edit="false" :slug="slug" />
|
||||
<Nutrition v-if="recipe.settings.showNutrition" :value="recipe.nutrition" :edit="false" />
|
||||
<Assets v-if="recipe.settings.showAssets" :value="recipe.assets" :edit="false" :slug="recipe.slug" />
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider v-if="medium" class="my-divider" :vertical="true"></v-divider>
|
||||
|
||||
<v-col cols="12" sm="12" md="8" lg="8">
|
||||
<Instructions :value="instructions" :edit="false" />
|
||||
<Notes :value="notes" :edit="false" />
|
||||
<Instructions :value="recipe.recipeInstructions" :edit="false" />
|
||||
<Notes :value="recipe.notes" :edit="false" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div v-if="!medium">
|
||||
<RecipeChips :title="$t('recipe.categories')" :items="categories" />
|
||||
<RecipeChips :title="$t('tag.tags')" :items="tags" />
|
||||
<Nutrition :value="nutrition" :edit="false" />
|
||||
<Assets :value="assets" :edit="false" :slug="slug" />
|
||||
<RecipeChips :title="$t('recipe.categories')" :items="recipe.recipeCategory" />
|
||||
<RecipeChips :title="$t('tag.tags')" :items="recipe.tags" />
|
||||
<Nutrition v-if="recipe.settings.showNutrition" :value="recipe.nutrition" :edit="false" />
|
||||
<Assets v-if="recipe.settings.showAssets" :value="recipe.assets" :edit="false" :slug="recipe.slug" />
|
||||
</div>
|
||||
<v-row class="mt-2 mb-1">
|
||||
<v-col></v-col>
|
||||
<v-btn
|
||||
v-if="orgURL"
|
||||
v-if="recipe.orgURL"
|
||||
dense
|
||||
small
|
||||
:hover="false"
|
||||
type="label"
|
||||
:ripple="false"
|
||||
elevation="0"
|
||||
:href="orgURL"
|
||||
:href="recipe.orgURL"
|
||||
color="secondary darken-1"
|
||||
target="_blank"
|
||||
class="rounded-sm mr-4"
|
||||
|
|
@ -107,19 +107,7 @@ export default {
|
|||
Rating,
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
slug: String,
|
||||
description: String,
|
||||
ingredients: Array,
|
||||
instructions: Array,
|
||||
categories: Array,
|
||||
tags: Array,
|
||||
notes: Array,
|
||||
rating: Number,
|
||||
yields: String,
|
||||
orgURL: String,
|
||||
nutrition: Object,
|
||||
assets: Array,
|
||||
recipe: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<v-btn color="accent" text :loading="downloading" @click="downloadFile">
|
||||
{{ showButtonText }}
|
||||
</v-btn>
|
||||
<div>
|
||||
<slot v-bind="{ downloading, downloadFile }">
|
||||
<v-btn color="accent" text :loading="downloading" @click="downloadFile">
|
||||
{{ showButtonText }}
|
||||
</v-btn>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<v-form ref="file">
|
||||
<input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
|
||||
<v-btn :loading="isSelecting" @click="onButtonClick" color="accent" :text="textBtn">
|
||||
<v-icon left> {{ icon }}</v-icon>
|
||||
{{ text ? text : defaultText }}
|
||||
</v-btn>
|
||||
<slot v-bind="{ isSelecting, onButtonClick }">
|
||||
<v-btn :loading="isSelecting" @click="onButtonClick" color="accent" :text="textBtn">
|
||||
<v-icon left> {{ icon }}</v-icon>
|
||||
{{ text ? text : defaultText }}
|
||||
</v-btn>
|
||||
</slot>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,7 +27,7 @@ export default {
|
|||
default: true,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
data: () => ({
|
||||
file: null,
|
||||
isSelecting: false,
|
||||
}),
|
||||
|
|
|
|||
81
frontend/src/components/UI/LogCard.vue
Normal file
81
frontend/src/components/UI/LogCard.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="mt-2">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
Log
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
class="ml-auto shrink mb-n7"
|
||||
solo
|
||||
label="Log Lines"
|
||||
type="number"
|
||||
append-icon="mdi-refresh-circle"
|
||||
v-model="lines"
|
||||
@click:append="getLogText"
|
||||
suffix="lines"
|
||||
single-line
|
||||
>
|
||||
</v-text-field>
|
||||
<TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log">
|
||||
<template v-slot:default="{ downloadFile }">
|
||||
<v-btn bottom right relative fab icon color="primary" @click="downloadFile">
|
||||
<v-icon> mdi-download </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</TheDownloadBtn>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<div v-for="(item, index) in splitText" :key="index" :class="getClass(item)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
|
||||
import { api } from "@/api";
|
||||
export default {
|
||||
components: { TheDownloadBtn },
|
||||
data() {
|
||||
return {
|
||||
lines: 200,
|
||||
text: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getLogText();
|
||||
},
|
||||
computed: {
|
||||
splitText() {
|
||||
return this.text.split("/n");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getLogText() {
|
||||
this.text = await api.meta.getLogText(this.lines);
|
||||
},
|
||||
getClass(text) {
|
||||
const isError = text.includes("ERROR:");
|
||||
if (isError) {
|
||||
return "log--error";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.log-text {
|
||||
background-color: #e0e0e077;
|
||||
}
|
||||
.log--error {
|
||||
color: #ef5350;
|
||||
}
|
||||
.line-number {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -147,6 +147,11 @@ export default {
|
|||
},
|
||||
adminLinks() {
|
||||
return [
|
||||
{
|
||||
icon: "mdi-view-dashboard",
|
||||
to: "/admin/dashboard",
|
||||
title: this.$t("general.dashboard"),
|
||||
},
|
||||
{
|
||||
icon: "mdi-cog",
|
||||
to: "/admin/settings",
|
||||
|
|
|
|||
|
|
@ -9,5 +9,14 @@
|
|||
"day": "numeric",
|
||||
"weekday": "long",
|
||||
"year": "numeric"
|
||||
},
|
||||
"long": {
|
||||
"year": "numeric",
|
||||
"month": "long",
|
||||
"day": "numeric",
|
||||
"weekday": "long",
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"hour12": true
|
||||
}
|
||||
}
|
||||
|
|
@ -9,5 +9,14 @@
|
|||
"day": "numeric",
|
||||
"weekday": "long",
|
||||
"year": "numeric"
|
||||
},
|
||||
"long": {
|
||||
"year": "numeric",
|
||||
"month": "long",
|
||||
"day": "numeric",
|
||||
"weekday": "long",
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"hour12": true
|
||||
}
|
||||
}
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
"demo-status": "Demo Status",
|
||||
"development": "Development",
|
||||
"download-log": "Download Log",
|
||||
"download-recipe-json": "Download Recipe JSON",
|
||||
"download-recipe-json": "Last Scraped JSON",
|
||||
"not-demo": "Not Demo",
|
||||
"production": "Production",
|
||||
"sqlite-file": "SQLite File",
|
||||
"database-url": "Database URL",
|
||||
"version": "Version"
|
||||
},
|
||||
"category": {
|
||||
|
|
@ -27,7 +27,8 @@
|
|||
"category-deletion-failed": "Category deletion failed",
|
||||
"category-filter": "Category Filter",
|
||||
"category-update-failed": "Category update failed",
|
||||
"category-updated": "Category updated"
|
||||
"category-updated": "Category updated",
|
||||
"category": "Category"
|
||||
},
|
||||
"general": {
|
||||
"apply": "Apply",
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
"confirm": "Confirm",
|
||||
"create": "Create",
|
||||
"current-parenthesis": "(Current)",
|
||||
"dashboard": "Dashboard",
|
||||
"delete": "Delete",
|
||||
"disabled": "Disabled",
|
||||
"download": "Download",
|
||||
|
|
|
|||
|
|
@ -22,19 +22,26 @@
|
|||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<TheDownloadBtn :button-text="$t('about.download-recipe-json')" download-url="/api/debug/last-recipe-json" />
|
||||
<TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log" />
|
||||
<TheDownloadBtn download-url="/api/debug/last-recipe-json">
|
||||
<template v-slot:default="{ downloadFile }">
|
||||
<v-btn color="primary" @click="downloadFile">
|
||||
<v-icon left> mdi-code-braces </v-icon> {{ $t("about.download-recipe-json") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
</TheDownloadBtn>
|
||||
</v-card-actions>
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
<LogCard />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
|
||||
import LogCard from "@/components/UI/LogCard.vue";
|
||||
export default {
|
||||
components: { TheDownloadBtn },
|
||||
components: { TheDownloadBtn, LogCard },
|
||||
data() {
|
||||
return {
|
||||
prettyInfo: [],
|
||||
|
|
@ -79,9 +86,9 @@ export default {
|
|||
value: debugInfo.dbType,
|
||||
},
|
||||
{
|
||||
name: this.$t("about.sqlite-file"),
|
||||
name: this.$t("about.database-url"),
|
||||
icon: "mdi-file-cabinet",
|
||||
value: debugInfo.sqliteFile,
|
||||
value: debugInfo.dbUrl,
|
||||
},
|
||||
{
|
||||
name: this.$t("about.default-group"),
|
||||
|
|
@ -93,5 +100,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="text-truncate">
|
||||
<strong>{{ backup.name }}</strong>
|
||||
</div>
|
||||
<div class="text-truncate">{{ $d(new Date(backup.date), "medium") }}</div>
|
||||
<div class="text-truncate">{{ $d(Date.parse(backup.date), "medium") }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
<v-card-title> {{ name }} </v-card-title>
|
||||
<v-card-subtitle class="mb-n3"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
|
||||
<v-card-subtitle class="mb-n3" v-if="date"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
|
|
|
|||
144
frontend/src/pages/Admin/Dashboard/BackupViewer.vue
Normal file
144
frontend/src/pages/Admin/Dashboard/BackupViewer.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<ImportSummaryDialog ref="report" />
|
||||
<ImportDialog
|
||||
:name="selectedName"
|
||||
:date="selectedDate"
|
||||
ref="import_dialog"
|
||||
@import="importBackup"
|
||||
@delete="deleteBackup"
|
||||
/>
|
||||
<StatCard icon="mdi-backup-restore" :color="color">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Backups'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ total }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
|
||||
<template v-slot="{ isSelecting, onButtonClick }">
|
||||
<v-btn :loading="isSelecting" class="mx-2" small :color="color" @click="onButtonClick">
|
||||
<v-icon left> mdi-cloud-upload </v-icon> Upload
|
||||
</v-btn>
|
||||
</template>
|
||||
</TheUploadBtn>
|
||||
<v-btn :loading="loading" class="mx-2" small :color="color" @click="createBackup">
|
||||
<v-icon left> mdi-plus </v-icon> Create
|
||||
</v-btn>
|
||||
</div>
|
||||
<template v-slot:bottom>
|
||||
<v-virtual-scroll height="290" item-height="70" :items="availableBackups">
|
||||
<template v-slot:default="{ item }">
|
||||
<v-list-item @click.prevent="openDialog(item)">
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark :color="color">
|
||||
mdi-backup-restore
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.name"></v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>
|
||||
{{ $d(Date.parse(item.date), "medium") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click.stop="deleteBackup(item.name)">
|
||||
<v-icon color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</template>
|
||||
</StatCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
|
||||
import ImportSummaryDialog from "@/components/ImportSummaryDialog";
|
||||
import { api } from "@/api";
|
||||
import StatCard from "./StatCard";
|
||||
import ImportDialog from "../Backup/ImportDialog";
|
||||
export default {
|
||||
components: { StatCard, ImportDialog, TheUploadBtn, ImportSummaryDialog },
|
||||
data() {
|
||||
return {
|
||||
color: "secondary",
|
||||
selectedName: "",
|
||||
selectedDate: "",
|
||||
loading: false,
|
||||
events: [],
|
||||
availableBackups: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total() {
|
||||
return this.availableBackups.length;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getAvailableBackups();
|
||||
},
|
||||
methods: {
|
||||
async getAvailableBackups() {
|
||||
const response = await api.backups.requestAvailable();
|
||||
this.availableBackups = response.imports;
|
||||
console.log(this.availableBackups);
|
||||
},
|
||||
|
||||
async deleteBackup(name) {
|
||||
this.loading = true;
|
||||
await api.backups.delete(name);
|
||||
this.loading = false;
|
||||
this.getAvailableBackups();
|
||||
},
|
||||
|
||||
openDialog(backup) {
|
||||
this.selectedDate = backup.date;
|
||||
this.selectedName = backup.name;
|
||||
this.$refs.import_dialog.open();
|
||||
},
|
||||
async importBackup(data) {
|
||||
this.loading = true;
|
||||
const response = await api.backups.import(data.name, data);
|
||||
if (response) {
|
||||
const importData = response.data;
|
||||
this.$refs.report.open(importData);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async createBackup() {
|
||||
this.loading = true;
|
||||
|
||||
let data = {
|
||||
tag: this.tag,
|
||||
options: {
|
||||
recipes: true,
|
||||
settings: true,
|
||||
themes: true,
|
||||
users: true,
|
||||
groups: true,
|
||||
},
|
||||
templates: [],
|
||||
};
|
||||
|
||||
if (await api.backups.create(data)) {
|
||||
this.getAvailableBackups();
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
110
frontend/src/pages/Admin/Dashboard/EventViewer.vue
Normal file
110
frontend/src/pages/Admin/Dashboard/EventViewer.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div>
|
||||
<StatCard icon="mdi-bell-ring" :color="color">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Events'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ total }} </small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex row py-3 justify-end">
|
||||
<v-btn class="mx-2" small :color="color" @click="deleteAll">
|
||||
<v-icon left> mdi-notification-clear-all </v-icon> Clear
|
||||
</v-btn>
|
||||
</div>
|
||||
<template v-slot:bottom>
|
||||
<v-virtual-scroll height="290" item-height="70" :items="events">
|
||||
<template v-slot:default="{ item }">
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark :color="icons[item.category].color">
|
||||
{{ icons[item.category].icon }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.title"></v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle v-text="item.text"></v-list-item-subtitle>
|
||||
<v-list-item-subtitle>
|
||||
{{ $d(Date.parse(item.timeStamp), "long") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click="deleteEvent(item.id)">
|
||||
<v-icon color="error">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</template>
|
||||
</StatCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import StatCard from "./StatCard";
|
||||
export default {
|
||||
components: { StatCard },
|
||||
data() {
|
||||
return {
|
||||
color: "secondary",
|
||||
total: 0,
|
||||
events: [],
|
||||
icons: {
|
||||
general: {
|
||||
icon: "mdi-information",
|
||||
color: "info",
|
||||
},
|
||||
recipe: {
|
||||
icon: "mdi-silverware-fork-knife",
|
||||
color: "primary",
|
||||
},
|
||||
backup: {
|
||||
icon: "mdi-backup-restore",
|
||||
color: "primary",
|
||||
},
|
||||
schedule: {
|
||||
icon: "mdi-calendar-clock",
|
||||
color: "primary",
|
||||
},
|
||||
migration: {
|
||||
icon: "mdi-database-import",
|
||||
color: "primary",
|
||||
},
|
||||
signup: {
|
||||
icon: "mdi-account",
|
||||
color: "primary",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getEvents();
|
||||
},
|
||||
methods: {
|
||||
async getEvents() {
|
||||
const events = await api.about.getEvents();
|
||||
this.events = events.events;
|
||||
this.total = events.total;
|
||||
},
|
||||
async deleteEvent(id) {
|
||||
await api.about.deleteEvent(id);
|
||||
this.getEvents();
|
||||
},
|
||||
async deleteAll() {
|
||||
await api.about.deleteAllEvents();
|
||||
this.getEvents();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
100
frontend/src/pages/Admin/Dashboard/StatCard.vue
Normal file
100
frontend/src/pages/Admin/Dashboard/StatCard.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
w<template>
|
||||
<v-card v-bind="$attrs" :class="classes" class="v-card--material pa-3">
|
||||
<div class="d-flex grow flex-wrap">
|
||||
<v-sheet
|
||||
:color="color"
|
||||
:max-height="icon ? 90 : undefined"
|
||||
:width="icon ? 'auto' : '100%'"
|
||||
elevation="6"
|
||||
class="text-start v-card--material__heading mb-n6 mt-n10 pa-7"
|
||||
dark
|
||||
>
|
||||
<v-icon v-if="icon" size="40" v-text="icon" />
|
||||
<div v-if="text" class="headline font-weight-thin" v-text="text" />
|
||||
</v-sheet>
|
||||
|
||||
<div v-if="$slots['after-heading']" class="ml-auto">
|
||||
<slot name="after-heading" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-if="$slots.actions">
|
||||
<v-divider class="mt-2" />
|
||||
|
||||
<v-card-actions class="pb-0">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
|
||||
<template v-if="$slots.bottom">
|
||||
<v-divider class="mt-2" />
|
||||
|
||||
<div class="pb-0">
|
||||
<slot name="bottom" />
|
||||
</div>
|
||||
</template>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MaterialCard",
|
||||
|
||||
props: {
|
||||
avatar: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
image: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
"v-card--material--has-heading": this.hasHeading,
|
||||
};
|
||||
},
|
||||
hasHeading() {
|
||||
return false;
|
||||
},
|
||||
hasAltHeading() {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material
|
||||
&__avatar
|
||||
position: relative
|
||||
top: -64px
|
||||
margin-bottom: -32px
|
||||
|
||||
&__heading
|
||||
position: relative
|
||||
top: -40px
|
||||
transition: .3s ease
|
||||
z-index: 1
|
||||
</style>
|
||||
119
frontend/src/pages/Admin/Dashboard/index.vue
Normal file
119
frontend/src/pages/Admin/Dashboard/index.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div class="mt-10">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<StatCard icon="mdi-silverware-fork-knife">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Recipes'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalRecipes }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="d-flex row py-3 justify-space-around">
|
||||
<v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
|
||||
<v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
small
|
||||
color="primary"
|
||||
:to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
|
||||
>
|
||||
<v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<StatCard icon="mdi-account">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Users'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalUsers }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users?tab=users">
|
||||
<v-icon left>mdi-account</v-icon>
|
||||
Manage Users
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="4">
|
||||
<StatCard icon="mdi-account-group">
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="'Groups'" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ statistics.totalGroups }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="ml-auto">
|
||||
<v-btn color="primary" small to="/admin/manage-users?tab=groups">
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
Manage Groups
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</StatCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-10">
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<EventViewer />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6"> <BackupViewer /> </v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
import StatCard from "./StatCard";
|
||||
import EventViewer from "./EventViewer";
|
||||
import BackupViewer from "./BackupViewer";
|
||||
export default {
|
||||
components: { StatCard, EventViewer, BackupViewer },
|
||||
data() {
|
||||
return {
|
||||
statistics: {
|
||||
totalGroups: 0,
|
||||
totalRecipes: 0,
|
||||
totalUsers: 0,
|
||||
uncategorizedRecipes: 0,
|
||||
untaggedRecipes: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getStatistics();
|
||||
},
|
||||
methods: {
|
||||
async getStatistics() {
|
||||
this.statistics = await api.meta.getStatistics();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-style {
|
||||
flex-grow: inherit;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -160,10 +160,10 @@ export default {
|
|||
methods: {
|
||||
updateClipboard(newClip) {
|
||||
navigator.clipboard.writeText(newClip).then(
|
||||
function() {
|
||||
() => {
|
||||
console.log("Copied", newClip);
|
||||
},
|
||||
function() {
|
||||
() => {
|
||||
console.log("Copy Failed", newClip);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,30 +4,30 @@
|
|||
<v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
|
||||
<v-tabs-slider></v-tabs-slider>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#users">
|
||||
{{ $t("user.users") }}
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#sign-ups">
|
||||
{{ $t("signup.sign-up-links") }}
|
||||
<v-icon>mdi-account-plus-outline</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#groups">
|
||||
{{ $t("group.groups") }}
|
||||
<v-icon>mdi-account-group</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item>
|
||||
<v-tab-item value="users">
|
||||
<TheUserTable />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-tab-item value="sign-ups">
|
||||
<TheSignUpTable />
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
<v-tab-item value="groups">
|
||||
<GroupDashboard />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
|
|
@ -42,9 +42,17 @@ import TheSignUpTable from "./TheSignUpTable";
|
|||
export default {
|
||||
components: { TheUserTable, GroupDashboard, TheSignUpTable },
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("requestAllGroups");
|
||||
|
|
|
|||
72
frontend/src/pages/Admin/ToolBox/RecipeOrganizer.vue
Normal file
72
frontend/src/pages/Admin/ToolBox/RecipeOrganizer.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<v-card outlined class="mt-n1">
|
||||
<div class="d-flex justify-center align-center pa-2 flex-wrap">
|
||||
<v-btn-toggle v-model="filter" mandatory color="primary">
|
||||
<v-btn small value="category">
|
||||
<v-icon>mdi-tag-multiple</v-icon>
|
||||
{{ $t("category.category") }}
|
||||
</v-btn>
|
||||
|
||||
<v-btn small value="tag">
|
||||
<v-icon>mdi-tag-multiple</v-icon>
|
||||
{{ $t("tag.tags") }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-spacer v-if="!isMobile"> </v-spacer>
|
||||
|
||||
<FuseSearchBar :raw-data="allItems" @results="filterItems" :search="searchString">
|
||||
<v-text-field
|
||||
v-model="searchString"
|
||||
clearable
|
||||
solo
|
||||
dense
|
||||
class="mx-2"
|
||||
hide-details
|
||||
single-line
|
||||
:placeholder="$t('search.search')"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
>
|
||||
</v-text-field>
|
||||
</FuseSearchBar>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
|
||||
export default {
|
||||
components: { FuseSearchBar },
|
||||
data() {
|
||||
return {
|
||||
buttonToggle: 0,
|
||||
allItems: [],
|
||||
searchString: "",
|
||||
searchResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.$vuetify.breakpoint.name === "xs";
|
||||
},
|
||||
isCategory() {
|
||||
return this.buttonToggle === 0;
|
||||
},
|
||||
filter: {
|
||||
set(filter) {
|
||||
this.$router.replace({ query: { ...this.$route.query, filter } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.filter;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filterItems(val) {
|
||||
this.searchResults = val.map(x => x.item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -4,20 +4,25 @@
|
|||
<v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
|
||||
<v-tabs-slider></v-tabs-slider>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#category-editor">
|
||||
{{ $t("recipe.categories") }}
|
||||
<v-icon>mdi-tag-multiple-outline</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab>
|
||||
<v-tab href="#tag-editor">
|
||||
{{ $t("tag.tags") }}
|
||||
<v-icon>mdi-tag-multiple-outline</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#organize">
|
||||
Organize
|
||||
<v-icon>mdi-broom</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item><CategoryTagEditor :is-tags="false"/></v-tab-item>
|
||||
<v-tab-item><CategoryTagEditor :is-tags="true" /> </v-tab-item>
|
||||
<v-tab-item value="category-editor"> <CategoryTagEditor :is-tags="false"/></v-tab-item>
|
||||
<v-tab-item value="tag-editor"> <CategoryTagEditor :is-tags="true" /> </v-tab-item>
|
||||
<v-tab-item value="organize"> <RecipeOrganizer :is-tags="true" /> </v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card>
|
||||
</div>
|
||||
|
|
@ -25,14 +30,24 @@
|
|||
|
||||
<script>
|
||||
import CategoryTagEditor from "./CategoryTagEditor";
|
||||
import RecipeOrganizer from "./RecipeOrganizer";
|
||||
export default {
|
||||
components: {
|
||||
CategoryTagEditor,
|
||||
RecipeOrganizer,
|
||||
},
|
||||
computed: {
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ export default {
|
|||
return this.$store.getters.getSiteSettings;
|
||||
},
|
||||
recentRecipes() {
|
||||
console.log("Recent Recipes");
|
||||
return this.$store.getters.getRecentRecipes;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,22 +25,7 @@
|
|||
class="sticky"
|
||||
/>
|
||||
|
||||
<RecipeViewer
|
||||
v-if="!form"
|
||||
:name="recipeDetails.name"
|
||||
:ingredients="recipeDetails.recipeIngredient"
|
||||
:description="recipeDetails.description"
|
||||
:instructions="recipeDetails.recipeInstructions"
|
||||
:tags="recipeDetails.tags"
|
||||
:categories="recipeDetails.recipeCategory"
|
||||
:notes="recipeDetails.notes"
|
||||
:rating="recipeDetails.rating"
|
||||
:yields="recipeDetails.recipeYield"
|
||||
:orgURL="recipeDetails.orgURL"
|
||||
:nutrition="recipeDetails.nutrition"
|
||||
:assets="recipeDetails.assets"
|
||||
:slug="recipeDetails.slug"
|
||||
/>
|
||||
<RecipeViewer v-if="!form" :recipe="recipeDetails" />
|
||||
<VJsoneditor
|
||||
@error="logError()"
|
||||
class="mt-10"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import ManageUsers from "@/pages/Admin/ManageUsers";
|
|||
import Settings from "@/pages/Admin/Settings";
|
||||
import About from "@/pages/Admin/About";
|
||||
import ToolBox from "@/pages/Admin/ToolBox";
|
||||
import Dashboard from "@/pages/Admin/Dashboard";
|
||||
import { store } from "../store";
|
||||
|
||||
export const adminRoutes = {
|
||||
|
|
@ -87,5 +88,12 @@ export const adminRoutes = {
|
|||
title: "general.about",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "dashboard",
|
||||
component: Dashboard,
|
||||
meta: {
|
||||
title: "general.dashboard",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue