mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 04:25:24 +02:00
Feature/restore-recipe-functionality (#810)
* feat(frontend): ✨ add back support for assets * feat(backend): ✨ add back support for assets * feat(frontend): ✨ add support for recipe tools * feat(backend): ✨ add support for recipe tools * feat(frontend): ✨ add onHand support for recipe toosl * feat(backend): ✨ add onHand support for backend * refactor(frontend): ♻️ move items to recipe folder and break apart types * feat(frontend): ✨ add support for recipe comments * feat(backend): ✨ Add support for recipe comments * fix(backend): 💥 disable comments import * fix(frontend): 🐛 fix rendering issue with titles when moving steps * add tools to changelog * fix type errors Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
parent
912cc6d956
commit
7afdd5b577
43 changed files with 1221 additions and 423 deletions
1
frontend/api/class-interfaces/recipes/index.ts
Normal file
1
frontend/api/class-interfaces/recipes/index.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export { RecipeAPI } from "./recipe";
|
19
frontend/api/class-interfaces/recipes/recipe-comments.ts
Normal file
19
frontend/api/class-interfaces/recipes/recipe-comments.ts
Normal file
|
@ -0,0 +1,19 @@
|
|||
import { RecipeComment, RecipeCommentCreate } from "./types";
|
||||
import { BaseCRUDAPI } from "~/api/_base";
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
comment: `${prefix}/comments`,
|
||||
byRecipe: (id: string) => `${prefix}/recipes/${id}/comments`,
|
||||
commentsId: (id: string) => `${prefix}/comments/${id}`,
|
||||
};
|
||||
|
||||
export class CommentsApi extends BaseCRUDAPI<RecipeComment, RecipeCommentCreate> {
|
||||
baseRoute: string = routes.comment;
|
||||
itemRoute = routes.commentsId;
|
||||
|
||||
async byRecipe(slug: string) {
|
||||
return await this.requests.get<RecipeComment[]>(routes.byRecipe(slug));
|
||||
}
|
||||
}
|
|
@ -1,7 +1,9 @@
|
|||
import { BaseCRUDAPI } from "../_base";
|
||||
import { Category } from "./categories";
|
||||
import { Tag } from "./tags";
|
||||
import { CreateAsset, ParsedIngredient, Parser, RecipeZipToken, BulkCreatePayload } from "./types";
|
||||
import { CommentsApi } from "./recipe-comments";
|
||||
import { BaseCRUDAPI } from "~/api/_base";
|
||||
|
||||
import { Recipe, CreateRecipe } from "~/types/api-types/recipe";
|
||||
import { ApiRequestInstance } from "~/types/api";
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
|
@ -26,68 +28,35 @@ const routes = {
|
|||
recipesSlugCommentsId: (slug: string, id: number) => `${prefix}/recipes/${slug}/comments/${id}`,
|
||||
};
|
||||
|
||||
export type Parser = "nlp" | "brute";
|
||||
|
||||
export interface Confidence {
|
||||
average?: number;
|
||||
comment?: number;
|
||||
name?: number;
|
||||
unit?: number;
|
||||
quantity?: number;
|
||||
food?: number;
|
||||
}
|
||||
|
||||
export interface Unit {
|
||||
name: string;
|
||||
description: string;
|
||||
fraction: boolean;
|
||||
abbreviation: string;
|
||||
}
|
||||
|
||||
export interface Food {
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface Ingredient {
|
||||
referenceId: string;
|
||||
title: string;
|
||||
note: string;
|
||||
unit: Unit | null;
|
||||
food: Food | null;
|
||||
disableAmount: boolean;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export interface ParsedIngredient {
|
||||
confidence: Confidence;
|
||||
ingredient: Ingredient;
|
||||
}
|
||||
|
||||
export interface BulkCreateRecipe {
|
||||
url: string;
|
||||
categories: Category[];
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
export interface BulkCreatePayload {
|
||||
imports: BulkCreateRecipe[];
|
||||
}
|
||||
|
||||
export interface RecipeZipToken {
|
||||
token: string;
|
||||
}
|
||||
|
||||
export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
|
||||
baseRoute: string = routes.recipesBase;
|
||||
itemRoute = routes.recipesRecipeSlug;
|
||||
|
||||
public comments: CommentsApi;
|
||||
|
||||
constructor(requests: ApiRequestInstance) {
|
||||
super(requests);
|
||||
|
||||
this.comments = new CommentsApi(requests);
|
||||
}
|
||||
|
||||
async getAllByCategory(categories: string[]) {
|
||||
return await this.requests.get<Recipe[]>(routes.recipesCategory, {
|
||||
categories,
|
||||
});
|
||||
}
|
||||
|
||||
async createAsset(recipeSlug: string, payload: CreateAsset) {
|
||||
const formData = new FormData();
|
||||
// @ts-ignore
|
||||
formData.append("file", payload.file);
|
||||
formData.append("name", payload.name);
|
||||
formData.append("extension", payload.extension);
|
||||
formData.append("icon", payload.icon);
|
||||
|
||||
return await this.requests.post(routes.recipesRecipeSlugAssets(recipeSlug), formData);
|
||||
}
|
||||
|
||||
updateImage(slug: string, fileObject: File) {
|
||||
const formData = new FormData();
|
||||
formData.append("image", fileObject);
|
||||
|
@ -113,8 +82,6 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
|
|||
return await this.requests.post(routes.recipesCreateUrlBulk, payload);
|
||||
}
|
||||
|
||||
// Recipe Comments
|
||||
|
||||
// Methods to Generate reference urls for assets/images *
|
||||
recipeImage(recipeSlug: string, version = null, key = null) {
|
||||
return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
|
||||
|
@ -132,22 +99,6 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
|
|||
return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
|
||||
}
|
||||
|
||||
async createComment(slug: string, payload: Object) {
|
||||
return await this.requests.post(routes.recipesSlugComments(slug), payload);
|
||||
}
|
||||
|
||||
/** Update comment in the Database
|
||||
*/
|
||||
async updateComment(slug: string, id: number, payload: Object) {
|
||||
return await this.requests.put(routes.recipesSlugCommentsId(slug, id), payload);
|
||||
}
|
||||
|
||||
/** Delete comment from the Database
|
||||
*/
|
||||
async deleteComment(slug: string, id: number) {
|
||||
return await this.requests.delete(routes.recipesSlugCommentsId(slug, id));
|
||||
}
|
||||
|
||||
async parseIngredients(parser: Parser, ingredients: Array<string>) {
|
||||
parser = parser || "nlp";
|
||||
return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients });
|
83
frontend/api/class-interfaces/recipes/types.ts
Normal file
83
frontend/api/class-interfaces/recipes/types.ts
Normal file
|
@ -0,0 +1,83 @@
|
|||
import { Category } from "../categories";
|
||||
import { Tag } from "../tags";
|
||||
|
||||
export type Parser = "nlp" | "brute";
|
||||
|
||||
export interface Confidence {
|
||||
average?: number;
|
||||
comment?: number;
|
||||
name?: number;
|
||||
unit?: number;
|
||||
quantity?: number;
|
||||
food?: number;
|
||||
}
|
||||
|
||||
export interface Unit {
|
||||
name: string;
|
||||
description: string;
|
||||
fraction: boolean;
|
||||
abbreviation: string;
|
||||
}
|
||||
|
||||
export interface Food {
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface Ingredient {
|
||||
referenceId: string;
|
||||
title: string;
|
||||
note: string;
|
||||
unit: Unit | null;
|
||||
food: Food | null;
|
||||
disableAmount: boolean;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export interface ParsedIngredient {
|
||||
confidence: Confidence;
|
||||
ingredient: Ingredient;
|
||||
}
|
||||
|
||||
export interface BulkCreateRecipe {
|
||||
url: string;
|
||||
categories: Category[];
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
export interface BulkCreatePayload {
|
||||
imports: BulkCreateRecipe[];
|
||||
}
|
||||
|
||||
export interface RecipeZipToken {
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface CreateAsset {
|
||||
name: string;
|
||||
icon: string;
|
||||
extension: string;
|
||||
file?: File;
|
||||
}
|
||||
|
||||
export interface RecipeCommentCreate {
|
||||
recipeId: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface RecipeCommentUpdate extends RecipeCommentCreate {
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface RecipeCommentUser {
|
||||
id: string;
|
||||
username: string;
|
||||
admin: boolean;
|
||||
}
|
||||
|
||||
export interface RecipeComment extends RecipeCommentUpdate {
|
||||
createdAt: any;
|
||||
updatedAt: any;
|
||||
userId: number;
|
||||
user: RecipeCommentUser;
|
||||
}
|
22
frontend/api/class-interfaces/tools.ts
Normal file
22
frontend/api/class-interfaces/tools.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { BaseCRUDAPI } from "../_base";
|
||||
|
||||
const prefix = "/api";
|
||||
|
||||
export interface CreateTool {
|
||||
name: string;
|
||||
onHand: boolean;
|
||||
}
|
||||
|
||||
export interface Tool extends CreateTool {
|
||||
id: number;
|
||||
}
|
||||
|
||||
const routes = {
|
||||
tools: `${prefix}/tools`,
|
||||
toolsId: (id: string) => `${prefix}/tools/${id}`,
|
||||
};
|
||||
|
||||
export class ToolsApi extends BaseCRUDAPI<Tool, CreateTool> {
|
||||
baseRoute: string = routes.tools;
|
||||
itemRoute = routes.toolsId;
|
||||
}
|
|
@ -18,6 +18,7 @@ import { EmailAPI } from "./class-interfaces/email";
|
|||
import { BulkActionsAPI } from "./class-interfaces/recipe-bulk-actions";
|
||||
import { GroupServerTaskAPI } from "./class-interfaces/group-tasks";
|
||||
import { AdminAPI } from "./admin-api";
|
||||
import { ToolsApi } from "./class-interfaces/tools";
|
||||
import { ApiRequestInstance } from "~/types/api";
|
||||
|
||||
class Api {
|
||||
|
@ -40,7 +41,7 @@ class Api {
|
|||
public email: EmailAPI;
|
||||
public bulk: BulkActionsAPI;
|
||||
public grouperServerTasks: GroupServerTaskAPI;
|
||||
|
||||
public tools: ToolsApi;
|
||||
// Utils
|
||||
public upload: UploadFile;
|
||||
|
||||
|
@ -55,6 +56,7 @@ class Api {
|
|||
this.tags = new TagsAPI(requests);
|
||||
this.units = new UnitAPI(requests);
|
||||
this.foods = new FoodAPI(requests);
|
||||
this.tools = new ToolsApi(requests);
|
||||
|
||||
// Users
|
||||
this.users = new UserApi(requests);
|
||||
|
|
|
@ -23,10 +23,10 @@
|
|||
<v-icon> {{ $globals.icons.download }} </v-icon>
|
||||
</v-btn>
|
||||
<div v-else>
|
||||
<v-btn color="error" icon top @click="deleteAsset(i)">
|
||||
<v-btn color="error" icon top @click="value.splice(i, 1)">
|
||||
<v-icon>{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
<AppCopyButton :copy-text="copyLink(item.fileName)" />
|
||||
<AppButtonCopy color="" :copy-text="assetEmbed(item.fileName)" />
|
||||
</div>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
@ -35,12 +35,10 @@
|
|||
<div class="d-flex ml-auto mt-2">
|
||||
<v-spacer></v-spacer>
|
||||
<BaseDialog :title="$t('asset.new-asset')" :icon="getIconDefinition(newAsset.icon).icon" @submit="addAsset">
|
||||
<template #open="{ open }">
|
||||
<v-btn v-if="edit" color="secondary" dark @click="open">
|
||||
<v-icon>{{ $globals.icons.create }}</v-icon>
|
||||
</v-btn>
|
||||
<template #activator="{ open }">
|
||||
<BaseButton v-if="edit" small create @click="open" />
|
||||
</template>
|
||||
<v-card-text class="pt-2">
|
||||
<v-card-text class="pt-4">
|
||||
<v-text-field v-model="newAsset.name" dense :label="$t('general.name')"></v-text-field>
|
||||
<div class="d-flex justify-space-between">
|
||||
<v-select
|
||||
|
@ -70,9 +68,14 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
export default {
|
||||
import { alert } from "~/composables/use-toast";
|
||||
|
||||
const BASE_URL = window.location.origin;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
slug: {
|
||||
type: String,
|
||||
|
@ -87,82 +90,95 @@ export default {
|
|||
default: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
setup(props, context) {
|
||||
const api = useUserApi();
|
||||
|
||||
return { api };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileObject: {},
|
||||
const state = reactive({
|
||||
fileObject: {} as File,
|
||||
newAsset: {
|
||||
name: "",
|
||||
icon: "mdi-file",
|
||||
},
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
const { $globals, i18n } = useContext();
|
||||
|
||||
const iconOptions = [
|
||||
{
|
||||
name: "mdi-file",
|
||||
title: i18n.t("asset.file"),
|
||||
icon: $globals.icons.file,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-pdf-box",
|
||||
title: i18n.t("asset.pdf"),
|
||||
icon: $globals.icons.filePDF,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-image",
|
||||
title: i18n.t("asset.image"),
|
||||
icon: $globals.icons.fileImage,
|
||||
},
|
||||
{
|
||||
name: "mdi-code-json",
|
||||
title: i18n.t("asset.code"),
|
||||
icon: $globals.icons.codeJson,
|
||||
},
|
||||
{
|
||||
name: "mdi-silverware-fork-knife",
|
||||
title: i18n.t("asset.recipe"),
|
||||
icon: $globals.icons.primary,
|
||||
},
|
||||
];
|
||||
|
||||
function getIconDefinition(icon: string) {
|
||||
return iconOptions.find((item) => item.name === icon) || iconOptions[0];
|
||||
}
|
||||
|
||||
function assetURL(assetName: string) {
|
||||
return api.recipes.recipeAssetPath(props.slug, assetName);
|
||||
}
|
||||
|
||||
function assetEmbed(name: string) {
|
||||
return `<img src="${BASE_URL}${assetURL(name)}" height="100%" width="100%"> </img>`;
|
||||
}
|
||||
|
||||
function setFileObject(fileObject: any) {
|
||||
state.fileObject = fileObject;
|
||||
}
|
||||
|
||||
function validFields() {
|
||||
return state.newAsset.name.length > 0 && state.fileObject.name.length > 0;
|
||||
}
|
||||
|
||||
async function addAsset() {
|
||||
if (!validFields()) {
|
||||
alert.error("Error Submitting Form");
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await api.recipes.createAsset(props.slug, {
|
||||
name: state.newAsset.name,
|
||||
icon: state.newAsset.icon,
|
||||
file: state.fileObject,
|
||||
extension: state.fileObject.name.split(".").pop() || "",
|
||||
});
|
||||
|
||||
context.emit("input", [...props.value, data]);
|
||||
state.newAsset = { name: "", icon: "mdi-file" };
|
||||
state.fileObject = {} as File;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
addAsset,
|
||||
assetURL,
|
||||
assetEmbed,
|
||||
getIconDefinition,
|
||||
iconOptions,
|
||||
setFileObject,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseURL() {
|
||||
return window.location.origin;
|
||||
},
|
||||
iconOptions() {
|
||||
return [
|
||||
{
|
||||
name: "mdi-file",
|
||||
title: this.$i18n.t("asset.file"),
|
||||
icon: this.$globals.icons.file,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-pdf-box",
|
||||
title: this.$i18n.t("asset.pdf"),
|
||||
icon: this.$globals.icons.filePDF,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-image",
|
||||
title: this.$i18n.t("asset.image"),
|
||||
icon: this.$globals.icons.fileImage,
|
||||
},
|
||||
{
|
||||
name: "mdi-code-json",
|
||||
title: this.$i18n.t("asset.code"),
|
||||
icon: this.$globals.icons.codeJson,
|
||||
},
|
||||
{
|
||||
name: "mdi-silverware-fork-knife",
|
||||
title: this.$i18n.t("asset.recipe"),
|
||||
icon: this.$globals.icons.primary,
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getIconDefinition(val) {
|
||||
return this.iconOptions.find(({ name }) => name === val);
|
||||
},
|
||||
assetURL(assetName) {
|
||||
return api.recipes.recipeAssetPath(this.slug, assetName);
|
||||
},
|
||||
setFileObject(obj) {
|
||||
this.fileObject = obj;
|
||||
},
|
||||
async addAsset() {
|
||||
const serverAsset = await api.recipes.createAsset(
|
||||
this.slug,
|
||||
this.fileObject,
|
||||
this.newAsset.name,
|
||||
this.newAsset.icon
|
||||
);
|
||||
this.value.push(serverAsset.data);
|
||||
this.newAsset = { name: "", icon: "mdi-file" };
|
||||
},
|
||||
deleteAsset(index) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
copyLink(fileName) {
|
||||
const assetLink = api.recipes.recipeAssetPath(this.slug, fileName);
|
||||
return `<img src="${this.baseURL}${assetLink}" height="100%" width="100%"> </img>`;
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import RecipeCategoryTagDialog from "./RecipeCategoryTagDialog";
|
||||
import RecipeCategoryTagDialog from "./RecipeCategoryTagDialog.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useTags, useCategories } from "~/composables/recipes";
|
||||
const MOUNTED_EVENT = "mounted";
|
||||
|
|
|
@ -1,125 +1,117 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon large class="mr-2">
|
||||
<div>
|
||||
<v-card-title class="headline pb-3">
|
||||
<v-icon class="mr-2">
|
||||
{{ $globals.icons.commentTextMultipleOutline }}
|
||||
</v-icon>
|
||||
{{ $t("recipe.comments") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card v-for="(comment, index) in comments" :key="comment.id" class="ma-2">
|
||||
<v-list-item two-line>
|
||||
<v-list-item-avatar color="accent" class="white--text">
|
||||
<img :src="getProfileImage(comment.user.id)" />
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title> {{ comment.user.username }}</v-list-item-title>
|
||||
<v-list-item-subtitle> {{ $d(new Date(comment.dateAdded), "short") }} </v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-card-actions v-if="loggedIn">
|
||||
<TheButton
|
||||
v-if="!editKeys[comment.id] && (user.admin || comment.user.id === user.id)"
|
||||
small
|
||||
minor
|
||||
delete
|
||||
@click="deleteComment(comment.id)"
|
||||
/>
|
||||
<TheButton
|
||||
v-if="!editKeys[comment.id] && comment.user.id === user.id"
|
||||
small
|
||||
edit
|
||||
@click="editComment(comment.id)"
|
||||
/>
|
||||
<TheButton v-else-if="editKeys[comment.id]" small update @click="updateComment(comment.id, index)" />
|
||||
</v-card-actions>
|
||||
</v-list-item>
|
||||
<div>
|
||||
<v-card-text>
|
||||
{{ !editKeys[comment.id] ? comment.text : null }}
|
||||
<v-textarea v-if="editKeys[comment.id]" v-model="comment.text"> </v-textarea>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex mt-3" style="gap: 10px">
|
||||
<v-avatar size="40">
|
||||
<img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
|
||||
</v-avatar>
|
||||
<v-textarea
|
||||
v-model="comment"
|
||||
hide-details=""
|
||||
dense
|
||||
single-line
|
||||
outlined
|
||||
auto-grow
|
||||
rows="2"
|
||||
placeholder="Join the Conversation"
|
||||
>
|
||||
</v-textarea>
|
||||
</div>
|
||||
<div class="ml-auto mt-1">
|
||||
<BaseButton small :disabled="!comment" @click="submitComment">
|
||||
<template #icon>{{ $globals.icons.check }}</template>
|
||||
{{ $t("general.submit") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="comment in comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
|
||||
<v-avatar size="40">
|
||||
<img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
|
||||
</v-avatar>
|
||||
<v-card outlined class="flex-grow-1">
|
||||
<v-card-text class="pa-3 pb-0">
|
||||
<p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
|
||||
{{ comment.text }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card-text v-if="loggedIn">
|
||||
<v-textarea v-model="newComment" auto-grow row-height="1" outlined> </v-textarea>
|
||||
<div class="d-flex">
|
||||
<TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card-actions class="justify-end mt-0 pt-0">
|
||||
<v-btn
|
||||
v-if="$auth.user.id == comment.user.id || $auth.user.admin"
|
||||
color="error"
|
||||
text
|
||||
x-small
|
||||
@click="deleteComment(comment.id)"
|
||||
>
|
||||
Delete
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, toRefs } from "@nuxtjs/composition-api";
|
||||
import { onMounted, reactive } from "vue-demi";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
const NEW_COMMENT_EVENT = "new-comment";
|
||||
const UPDATE_COMMENT_EVENT = "update-comment";
|
||||
export default {
|
||||
import { RecipeComment } from "~/api/class-interfaces/recipes/types";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
comments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
slug: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
recipeId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
setup(props) {
|
||||
const api = useUserApi();
|
||||
|
||||
return { api };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newComment: "",
|
||||
editKeys: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.getUserData;
|
||||
},
|
||||
loggedIn() {
|
||||
return this.$store.getters.getIsLoggedIn;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
comments() {
|
||||
for (const comment of this.comments) {
|
||||
this.$set(this.editKeys, comment.id, false);
|
||||
const comments = ref<RecipeComment[]>([]);
|
||||
|
||||
const state = reactive({
|
||||
comment: "",
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.recipes.comments.byRecipe(props.slug);
|
||||
|
||||
if (data) {
|
||||
comments.value = data;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
async function submitComment() {
|
||||
const { data } = await api.recipes.comments.createOne({
|
||||
recipeId: props.recipeId,
|
||||
text: state.comment,
|
||||
});
|
||||
|
||||
if (data) {
|
||||
comments.value.push(data);
|
||||
}
|
||||
|
||||
state.comment = "";
|
||||
}
|
||||
|
||||
async function deleteComment(id: string) {
|
||||
const { response } = await api.recipes.comments.deleteOne(id);
|
||||
|
||||
if (response?.status === 200) {
|
||||
comments.value = comments.value.filter((comment) => comment.id !== id);
|
||||
}
|
||||
}
|
||||
|
||||
return { api, comments, ...toRefs(state), submitComment, deleteComment };
|
||||
},
|
||||
methods: {
|
||||
resetImage() {
|
||||
this.hideImage = false;
|
||||
},
|
||||
getProfileImage() {
|
||||
// TODO Actually get Profile Image
|
||||
return null;
|
||||
},
|
||||
editComment(id) {
|
||||
this.$set(this.editKeys, id, true);
|
||||
},
|
||||
async updateComment(id, index) {
|
||||
this.$set(this.editKeys, id, false);
|
||||
|
||||
await this.api.recipes.updateComment(this.slug, id, this.comments[index]);
|
||||
this.$emit(UPDATE_COMMENT_EVENT);
|
||||
},
|
||||
async createNewComment() {
|
||||
await this.api.recipes.createComment(this.slug, { text: this.newComment });
|
||||
this.$emit(NEW_COMMENT_EVENT);
|
||||
|
||||
this.newComment = "";
|
||||
},
|
||||
async deleteComment(id) {
|
||||
await this.api.recipes.deleteComment(this.slug, id);
|
||||
this.$emit(UPDATE_COMMENT_EVENT);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
});
|
||||
</script>
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="value && value.length > 0">
|
||||
<div class="d-flex justify-start">
|
||||
<h2 class="mb-4 mt-1">{{ $t("recipe.ingredients") }}</h2>
|
||||
<h2 class="mb-2 mt-1">{{ $t("recipe.ingredients") }}</h2>
|
||||
<AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -75,8 +75,8 @@
|
|||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
>
|
||||
<div v-for="(step, index) in value" :key="index">
|
||||
<v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
|
||||
<div v-for="(step, index) in value" :key="step.id">
|
||||
<v-app-bar v-if="showTitleEditor[step.id]" class="primary mx-1 mt-6" dark dense rounded>
|
||||
<v-toolbar-title v-if="!edit" class="headline">
|
||||
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
|
@ -114,7 +114,7 @@
|
|||
mode="event"
|
||||
:items="actionEvents || []"
|
||||
@merge-above="mergeAbove(index - 1, index)"
|
||||
@toggle-section="toggleShowTitle(index)"
|
||||
@toggle-section="toggleShowTitle(step.id)"
|
||||
@link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
|
||||
>
|
||||
</BaseOverflowButton>
|
||||
|
@ -155,6 +155,7 @@ import VueMarkdown from "@adapttive/vue-markdown";
|
|||
import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
|
||||
import { RecipeStep, IngredientToStepRef, RecipeIngredient } from "~/types/api-types/recipe";
|
||||
import { parseIngredientText } from "~/composables/recipes";
|
||||
import { uuid4 } from "~/composables/use-utils";
|
||||
|
||||
interface MergerHistory {
|
||||
target: number;
|
||||
|
@ -195,7 +196,7 @@ export default defineComponent({
|
|||
usedIngredients: [] as RecipeIngredient[],
|
||||
});
|
||||
|
||||
const showTitleEditor = ref<boolean[]>([]);
|
||||
const showTitleEditor = ref<{ [key: string]: boolean }>({});
|
||||
|
||||
const actionEvents = [
|
||||
{
|
||||
|
@ -220,12 +221,17 @@ export default defineComponent({
|
|||
|
||||
watch(props.value, (v) => {
|
||||
state.disabledSteps = [];
|
||||
showTitleEditor.value = v.map((x) => validateTitle(x.title));
|
||||
|
||||
v.forEach((element) => {
|
||||
showTitleEditor.value[element.id] = validateTitle(element.title);
|
||||
});
|
||||
});
|
||||
|
||||
// Eliminate state with an eager call to watcher?
|
||||
onMounted(() => {
|
||||
showTitleEditor.value = props.value.map((x) => validateTitle(x.title));
|
||||
props.value.forEach((element) => {
|
||||
showTitleEditor.value[element.id] = validateTitle(element.title);
|
||||
});
|
||||
});
|
||||
|
||||
function toggleDisabled(stepIndex: number) {
|
||||
|
@ -246,16 +252,11 @@ export default defineComponent({
|
|||
return "disabled-card";
|
||||
}
|
||||
}
|
||||
function toggleShowTitle(index: number) {
|
||||
const newVal = !showTitleEditor.value[index];
|
||||
if (!newVal) {
|
||||
props.value[index].title = "";
|
||||
}
|
||||
function toggleShowTitle(id: string) {
|
||||
showTitleEditor.value[id] = !showTitleEditor.value[id];
|
||||
|
||||
// Must create a new temporary list due to vue-composition-api backport limitations (I think...)
|
||||
const tempList = [...showTitleEditor.value];
|
||||
tempList[index] = newVal;
|
||||
showTitleEditor.value = tempList;
|
||||
const temp = { ...showTitleEditor.value };
|
||||
showTitleEditor.value = temp;
|
||||
}
|
||||
function updateIndex(data: RecipeStep) {
|
||||
context.emit("input", data);
|
||||
|
@ -387,6 +388,7 @@ export default defineComponent({
|
|||
|
||||
props.value[lastMerge.target].text = lastMerge.targetText;
|
||||
props.value.splice(lastMerge.source, 0, {
|
||||
id: uuid4(),
|
||||
title: "",
|
||||
text: lastMerge.sourceText,
|
||||
ingredientReferences: [],
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div v-if="valueNotNull || edit">
|
||||
<v-card class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
<v-card-title class="pt-2 pb-0">
|
||||
{{ $t("recipe.nutrition") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-divider class="mx-2 my-1"></v-divider>
|
||||
<v-card-text v-if="edit">
|
||||
<div v-for="(item, key, index) in value" :key="index">
|
||||
<v-text-field
|
||||
|
@ -19,9 +19,9 @@
|
|||
</div>
|
||||
</v-card-text>
|
||||
<v-list v-if="showViewer" dense class="mt-0 pt-0">
|
||||
<v-list-item v-for="(item, key, index) in labels" :key="index">
|
||||
<v-list-item v-for="(item, key, index) in labels" :key="index" style="min-height: 25px" dense>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="pl-4 text-subtitle-1 flex row">
|
||||
<v-list-item-title class="pl-4 caption flex row">
|
||||
<div>{{ item.label }}</div>
|
||||
<div class="ml-auto mr-1">{{ value[key] }}</div>
|
||||
<div>{{ item.suffix }}</div>
|
||||
|
|
88
frontend/components/Domain/Recipe/RecipeTools.vue
Normal file
88
frontend/components/Domain/Recipe/RecipeTools.vue
Normal file
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div v-if="edit || (value && value.length > 0)">
|
||||
<template v-if="edit">
|
||||
<v-autocomplete
|
||||
v-if="tools"
|
||||
v-model="recipeTools"
|
||||
:items="tools"
|
||||
item-text="name"
|
||||
multiple
|
||||
return-object
|
||||
deletable-chips
|
||||
:prepend-icon="$globals.icons.potSteam"
|
||||
chips
|
||||
>
|
||||
<template #selection="data">
|
||||
<v-chip
|
||||
:key="data.index"
|
||||
small
|
||||
class="ma-1"
|
||||
:input-value="data.selected"
|
||||
close
|
||||
label
|
||||
color="accent"
|
||||
dark
|
||||
@click:close="recipeTools.splice(data.index, 1)"
|
||||
>
|
||||
{{ data.item.name || data.item }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template #append-outer="">
|
||||
<BaseDialog title="Create New Tool" @submit="actions.createOne()">
|
||||
<template #activator="{ open }">
|
||||
<v-btn icon @click="open">
|
||||
<v-icon> {{ $globals.icons.create }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="workingToolData.name" label="Tool Name"></v-text-field>
|
||||
<v-checkbox v-model="workingToolData.onHand" label="Show as On Hand (Checked)"></v-checkbox>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { computed } from "vue-demi";
|
||||
import { Tool } from "~/api/class-interfaces/tools";
|
||||
import { useTools } from "~/composables/recipes";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Array as () => Tool[],
|
||||
required: true,
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const { tools, actions, workingToolData } = useTools();
|
||||
|
||||
const recipeTools = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
workingToolData,
|
||||
actions,
|
||||
tools,
|
||||
recipeTools,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -6,3 +6,4 @@ export { useRecipes, recentRecipes, allRecipes, useLazyRecipes, useSorter } from
|
|||
export { useTags, useCategories, allCategories, allTags } from "./use-tags-categories";
|
||||
export { parseIngredientText } from "./use-recipe-ingredients";
|
||||
export { useRecipeSearch } from "./use-recipe-search";
|
||||
export { useTools } from "./use-recipe-tools";
|
||||
|
|
93
frontend/composables/recipes/use-recipe-tools.ts
Normal file
93
frontend/composables/recipes/use-recipe-tools.ts
Normal file
|
@ -0,0 +1,93 @@
|
|||
import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "../use-utils";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
|
||||
export const useTools = function (eager = true) {
|
||||
const workingToolData = reactive({
|
||||
id: 0,
|
||||
name: "",
|
||||
onHand: false,
|
||||
});
|
||||
|
||||
const api = useUserApi();
|
||||
const loading = ref(false);
|
||||
const validForm = ref(false);
|
||||
|
||||
const actions = {
|
||||
getAll() {
|
||||
loading.value = true;
|
||||
const units = useAsync(async () => {
|
||||
const { data } = await api.tools.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false;
|
||||
return units;
|
||||
},
|
||||
|
||||
async refreshAll() {
|
||||
loading.value = true;
|
||||
const { data } = await api.tools.getAll();
|
||||
|
||||
if (data) {
|
||||
tools.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
|
||||
async createOne(domForm: VForm | null = null) {
|
||||
if (domForm && !domForm.validate()) {
|
||||
validForm.value = false;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const { data } = await api.tools.createOne(workingToolData);
|
||||
|
||||
if (data) {
|
||||
tools.value?.push(data);
|
||||
}
|
||||
|
||||
domForm?.reset();
|
||||
this.reset();
|
||||
},
|
||||
|
||||
async updateOne() {
|
||||
loading.value = true;
|
||||
const { data } = await api.tools.updateOne(workingToolData.id, workingToolData);
|
||||
if (data) {
|
||||
tools.value?.push(data);
|
||||
}
|
||||
this.reset();
|
||||
},
|
||||
|
||||
async deleteOne(id: number) {
|
||||
loading.value = true;
|
||||
await api.tools.deleteOne(id);
|
||||
this.reset();
|
||||
},
|
||||
|
||||
reset() {
|
||||
workingToolData.name = "";
|
||||
workingToolData.id = 0;
|
||||
loading.value = false;
|
||||
validForm.value = true;
|
||||
},
|
||||
};
|
||||
|
||||
const tools = (() => {
|
||||
if (eager) {
|
||||
return actions.getAll();
|
||||
} else {
|
||||
return ref([]);
|
||||
}
|
||||
})();
|
||||
|
||||
return {
|
||||
tools,
|
||||
actions,
|
||||
workingToolData,
|
||||
loading,
|
||||
};
|
||||
};
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
|
||||
import { Confidence, Parser } from "~/api/class-interfaces/recipes";
|
||||
import { Confidence, Parser } from "~/api/class-interfaces/recipes/types";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
|
@ -200,8 +200,26 @@
|
|||
:disable-amount="recipe.settings.disableAmount"
|
||||
/>
|
||||
|
||||
<!-- Recipe Categories -->
|
||||
<!-- Recipe Tools Display -->
|
||||
<div v-if="!form && recipe.tools && recipe.tools.length > 0">
|
||||
<h2 class="mb-2 mt-4">Required Tools</h2>
|
||||
<v-list-item v-for="(tool, index) in recipe.tools" :key="index" dense>
|
||||
<v-checkbox
|
||||
v-model="recipe.tools[index].onHand"
|
||||
hide-details
|
||||
class="pt-0 my-auto py-auto"
|
||||
color="secondary"
|
||||
@change="updateTool(recipe.tools[index])"
|
||||
>
|
||||
</v-checkbox>
|
||||
<v-list-item-content>
|
||||
{{ tool.name }}
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<div v-if="$vuetify.breakpoint.mdAndUp" class="mt-5">
|
||||
<!-- Recipe Categories -->
|
||||
<v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.categories") }}
|
||||
|
@ -238,9 +256,23 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<RecipeNutrition v-if="true || form" v-model="recipe.nutrition" class="mt-10" :edit="form" />
|
||||
<!-- Recipe Tools Edit -->
|
||||
<v-card v-if="form" class="mt-2">
|
||||
<v-card-title class="py-2"> Required Tools </v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text class="pt-0">
|
||||
<RecipeTools v-model="recipe.tools" :edit="form" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<RecipeNutrition
|
||||
v-if="recipe.settings.showNutrition"
|
||||
v-model="recipe.nutrition"
|
||||
class="mt-10"
|
||||
:edit="form"
|
||||
/>
|
||||
<RecipeAssets
|
||||
v-if="recipe.settings.showAssets || form"
|
||||
v-if="recipe.settings.showAssets"
|
||||
v-model="recipe.assets"
|
||||
:edit="form"
|
||||
:slug="recipe.slug"
|
||||
|
@ -260,6 +292,69 @@
|
|||
<RecipeDialogBulkAdd class="ml-auto my-2 mr-1" @bulk-data="addStep" />
|
||||
<BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Somehow fix duplicate code for mobile/desktop -->
|
||||
<div v-if="!$vuetify.breakpoint.mdAndUp" class="mt-5">
|
||||
<!-- Recipe Tools Edit -->
|
||||
<v-card v-if="form">
|
||||
<v-card-title class="py-2"> Required Tools</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text class="pt-0">
|
||||
<RecipeTools v-model="recipe.tools" :edit="form" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Recipe Categories -->
|
||||
<v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
|
||||
<v-card-title class="py-2">
|
||||
{{ $t("recipe.categories") }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
<RecipeCategoryTagSelector
|
||||
v-if="form"
|
||||
v-model="recipe.recipeCategory"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
<RecipeChips v-else :items="recipe.recipeCategory" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Recipe Tags -->
|
||||
<v-card v-if="recipe.tags.length > 0 || form" 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>
|
||||
<RecipeCategoryTagSelector
|
||||
v-if="form"
|
||||
v-model="recipe.tags"
|
||||
:return-object="true"
|
||||
:show-add="true"
|
||||
:tag-selector="true"
|
||||
:show-label="false"
|
||||
/>
|
||||
<RecipeChips v-else :items="recipe.tags" :is-category="false" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<RecipeNutrition
|
||||
v-if="recipe.settings.showNutrition"
|
||||
v-model="recipe.nutrition"
|
||||
class="mt-10"
|
||||
:edit="form"
|
||||
/>
|
||||
<RecipeAssets
|
||||
v-if="recipe.settings.showAssets"
|
||||
v-model="recipe.assets"
|
||||
:edit="form"
|
||||
:slug="recipe.slug"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RecipeNotes v-model="recipe.notes" :edit="form" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
@ -289,7 +384,40 @@
|
|||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</div>
|
||||
<v-card v-if="form && $auth.user.advanced" flat class="ma-2 mb-2">
|
||||
<v-card-title> API Extras </v-card-title>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-card-text>
|
||||
Recipes extras are a key feature of the Mealie API. They allow you to create custom json key/value pairs
|
||||
within a recipe to reference from 3rd part applications. You can use these keys to contain information to
|
||||
trigger automation or custom messages to relay to your desired device.
|
||||
<v-row v-for="(value, key) in recipe.extras" :key="key" class="mt-1">
|
||||
<v-col cols="8">
|
||||
<v-text-field v-model="recipe.extras[key]" dense :label="key">
|
||||
<template #prepend>
|
||||
<v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
|
||||
<v-icon> {{ $globals.icons.delete }} </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions class="d-flex">
|
||||
<div style="max-width: 200px">
|
||||
<v-text-field v-model="apiNewKey" label="Message Key"></v-text-field>
|
||||
</div>
|
||||
<BaseButton create small class="ml-5" @click="createApiExtra" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-card>
|
||||
<RecipeComments
|
||||
v-if="recipe && !recipe.settings.disableComments && !form"
|
||||
v-model="recipe.comments"
|
||||
:slug="recipe.slug"
|
||||
:recipe-id="recipe.id"
|
||||
class="mt-4"
|
||||
/>
|
||||
<RecipePrintView v-if="recipe" :recipe="recipe" />
|
||||
</v-container>
|
||||
</template>
|
||||
|
@ -328,8 +456,11 @@ import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBt
|
|||
import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
|
||||
import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
|
||||
import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
|
||||
import { Recipe } from "~/types/api-types/recipe";
|
||||
import { uuid4, deepCopy } from "~/composables/use-utils";
|
||||
import { Tool } from "~/api/class-interfaces/tools";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
@ -338,6 +469,7 @@ export default defineComponent({
|
|||
RecipeAssets,
|
||||
RecipeCategoryTagSelector,
|
||||
RecipeChips,
|
||||
RecipeComments,
|
||||
RecipeDialogBulkAdd,
|
||||
RecipeImageUploadBtn,
|
||||
RecipeIngredientEditor,
|
||||
|
@ -349,6 +481,7 @@ export default defineComponent({
|
|||
RecipeRating,
|
||||
RecipeSettingsMenu,
|
||||
RecipeTimeCard,
|
||||
RecipeTools,
|
||||
VueMarkdown,
|
||||
},
|
||||
async beforeRouteLeave(_to, _from, next) {
|
||||
|
@ -484,12 +617,12 @@ export default defineComponent({
|
|||
|
||||
if (steps) {
|
||||
const cleanedSteps = steps.map((step) => {
|
||||
return { text: step, title: "", ingredientReferences: [] };
|
||||
return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
|
||||
});
|
||||
|
||||
recipe.value.recipeInstructions.push(...cleanedSteps);
|
||||
} else {
|
||||
recipe.value.recipeInstructions.push({ text: "", title: "", ingredientReferences: [] });
|
||||
recipe.value.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -523,6 +656,54 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Recipe Tools
|
||||
|
||||
async function updateTool(tool: Tool) {
|
||||
const { response } = await api.tools.updateOne(tool.id, tool);
|
||||
|
||||
if (response?.status === 200) {
|
||||
console.log("Update Successful");
|
||||
}
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Recipe API Extras
|
||||
|
||||
const apiNewKey = ref("");
|
||||
|
||||
function createApiExtra() {
|
||||
if (!recipe.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!recipe.value.extras) {
|
||||
recipe.value.extras = {};
|
||||
}
|
||||
|
||||
// check for duplicate keys
|
||||
if (Object.keys(recipe.value.extras).includes(apiNewKey.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
recipe.value.extras[apiNewKey.value] = "";
|
||||
|
||||
apiNewKey.value = "";
|
||||
}
|
||||
|
||||
function removeApiExtra(key: string) {
|
||||
if (!recipe.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!recipe.value.extras) {
|
||||
return;
|
||||
}
|
||||
|
||||
delete recipe.value.extras[key];
|
||||
recipe.value.extras = { ...recipe.value.extras };
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Metadata
|
||||
|
||||
|
@ -553,6 +734,8 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
return {
|
||||
createApiExtra,
|
||||
apiNewKey,
|
||||
originalRecipe,
|
||||
domSaveChangesDialog,
|
||||
enableLandscape,
|
||||
|
@ -565,11 +748,13 @@ export default defineComponent({
|
|||
addStep,
|
||||
deleteRecipe,
|
||||
closeEditor,
|
||||
updateTool,
|
||||
updateRecipe,
|
||||
uploadImage,
|
||||
validators,
|
||||
recipeImage,
|
||||
addIngredient,
|
||||
removeApiExtra,
|
||||
};
|
||||
},
|
||||
head: {},
|
||||
|
|
|
@ -84,7 +84,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
|
||||
import { until, invoke } from "@vueuse/core";
|
||||
import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes";
|
||||
import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes/types";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipe, useFoods, useUnits } from "~/composables/recipes";
|
||||
|
|
|
@ -101,6 +101,7 @@ export interface IngredientToStepRef {
|
|||
referenceId: string;
|
||||
}
|
||||
export interface RecipeStep {
|
||||
id: string;
|
||||
title?: string;
|
||||
text: string;
|
||||
ingredientReferences: IngredientToStepRef[];
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
mdiSlotMachine,
|
||||
mdiHome,
|
||||
mdiMagnify,
|
||||
mdiPotSteam,
|
||||
mdiTranslate,
|
||||
mdiClockTimeFourOutline,
|
||||
mdiImport,
|
||||
|
@ -181,6 +182,7 @@ export const icons = {
|
|||
star: mdiStar,
|
||||
testTube: mdiTestTube,
|
||||
tools: mdiTools,
|
||||
potSteam: mdiPotSteam,
|
||||
translate: mdiTranslate,
|
||||
upload: mdiCloudUpload,
|
||||
viewDashboard: mdiViewDashboard,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue