mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
chore: drop legacy editor (#1755)
* drop legacy editor * remove unused components
This commit is contained in:
Hayden
GitHub
parent
fcc5d99d40
commit
ce4315f971
@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-checkbox
|
|
||||||
v-for="(option, index) in options"
|
|
||||||
:key="index"
|
|
||||||
v-model="option.value"
|
|
||||||
class="mb-n4 mt-n3"
|
|
||||||
dense
|
|
||||||
:label="option.text"
|
|
||||||
@change="emitValue()"
|
|
||||||
></v-checkbox>
|
|
||||||
<template v-if="importBackup">
|
|
||||||
<v-divider class="my-3"></v-divider>
|
|
||||||
<v-checkbox
|
|
||||||
v-model="forceImport"
|
|
||||||
class="mb-n4"
|
|
||||||
dense
|
|
||||||
:label="$t('settings.remove-existing-entries-matching-imported-entries')"
|
|
||||||
@change="emitValue()"
|
|
||||||
></v-checkbox>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, useContext } from "@nuxtjs/composition-api";
|
|
||||||
|
|
||||||
const UPDATE_EVENT = "input";
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
importBackup: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(_, context) {
|
|
||||||
const { i18n } = useContext();
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
recipes: {
|
|
||||||
value: true,
|
|
||||||
text: i18n.t("general.recipes"),
|
|
||||||
},
|
|
||||||
users: {
|
|
||||||
value: true,
|
|
||||||
text: i18n.t("user.users"),
|
|
||||||
},
|
|
||||||
groups: {
|
|
||||||
value: true,
|
|
||||||
text: i18n.t("group.groups"),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
const forceImport = false;
|
|
||||||
|
|
||||||
function emitValue() {
|
|
||||||
context.emit(UPDATE_EVENT, {
|
|
||||||
recipes: options.recipes.value,
|
|
||||||
settings: false,
|
|
||||||
themes: false,
|
|
||||||
pages: false,
|
|
||||||
users: options.users.value,
|
|
||||||
groups: options.groups.value,
|
|
||||||
notifications: false,
|
|
||||||
forceImport,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
emitValue();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
options,
|
|
||||||
forceImport,
|
|
||||||
emitValue,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<BaseStatCard :icon="$globals.icons.bellAlert" :color="color">
|
|
||||||
<template #after-heading>
|
|
||||||
<div class="ml-auto text-right">
|
|
||||||
<h2 class="body-3 grey--text font-weight-light">
|
|
||||||
{{ $t("settings.events") }}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<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="error lighten-1" @click="$emit('delete-all')">
|
|
||||||
<v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
<template #bottom>
|
|
||||||
<v-virtual-scroll height="290" item-height="70" :items="events">
|
|
||||||
<template #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>
|
|
||||||
{{ item.title }}
|
|
||||||
</v-list-item-title>
|
|
||||||
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
{{ 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="$emit('delete-item', item.id)">
|
|
||||||
<v-icon color="error">{{ $globals.icons.delete }}</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-list-item-action>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-virtual-scroll>
|
|
||||||
</template>
|
|
||||||
</BaseStatCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "@nuxtjs/composition-api";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
layout: "admin",
|
|
||||||
props: {
|
|
||||||
events: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
color: "accent",
|
|
||||||
selectedId: "",
|
|
||||||
icons: {
|
|
||||||
general: {
|
|
||||||
icon: this.$globals.icons.information,
|
|
||||||
color: "info",
|
|
||||||
},
|
|
||||||
recipe: {
|
|
||||||
icon: this.$globals.icons.primary,
|
|
||||||
color: "primary",
|
|
||||||
},
|
|
||||||
backup: {
|
|
||||||
icon: this.$globals.icons.database,
|
|
||||||
color: "primary",
|
|
||||||
},
|
|
||||||
schedule: {
|
|
||||||
icon: this.$globals.icons.calendar,
|
|
||||||
color: "primary",
|
|
||||||
},
|
|
||||||
migration: {
|
|
||||||
icon: this.$globals.icons.backupRestore,
|
|
||||||
color: "primary",
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
icon: this.$globals.icons.user,
|
|
||||||
color: "accent",
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
icon: this.$globals.icons.group,
|
|
||||||
color: "accent",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<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>
|
|
||||||
<div class="d-flex flex-column">
|
|
||||||
<div class="d-flex mt-3" style="gap: 10px">
|
|
||||||
<UserAvatar size="40" :user-id="$auth.user.id" />
|
|
||||||
|
|
||||||
<v-textarea
|
|
||||||
v-model="comment"
|
|
||||||
hide-details=""
|
|
||||||
dense
|
|
||||||
single-line
|
|
||||||
outlined
|
|
||||||
auto-grow
|
|
||||||
rows="2"
|
|
||||||
:placeholder="$t('recipe.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">
|
|
||||||
<UserAvatar size="40" :user-id="comment.userId" />
|
|
||||||
<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>
|
|
||||||
<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)"
|
|
||||||
>
|
|
||||||
{{ $t("general.delete") }}
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
|
|
||||||
import { useUserApi } from "~/composables/api";
|
|
||||||
import { RecipeCommentOut } from "~/lib/api/types/recipe";
|
|
||||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
UserAvatar,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
slug: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
recipeId: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const api = useUserApi();
|
|
||||||
|
|
||||||
const comments = ref<RecipeCommentOut[]>([]);
|
|
||||||
|
|
||||||
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 };
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,716 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section @keyup.ctrl.90="undoMerge">
|
|
||||||
<!-- Ingredient Link Editor -->
|
|
||||||
<v-dialog v-model="dialog" width="600">
|
|
||||||
<v-card :ripple="false">
|
|
||||||
<v-app-bar dark color="primary" class="mt-n1 mb-3">
|
|
||||||
<v-icon large left>
|
|
||||||
{{ $globals.icons.link }}
|
|
||||||
</v-icon>
|
|
||||||
<v-toolbar-title class="headline"> {{ $t("recipe.ingredient-linker") }} </v-toolbar-title>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
</v-app-bar>
|
|
||||||
|
|
||||||
<v-card-text class="pt-4">
|
|
||||||
<p>
|
|
||||||
{{ activeText }}
|
|
||||||
</p>
|
|
||||||
<v-divider class="mb-4"></v-divider>
|
|
||||||
<v-checkbox
|
|
||||||
v-for="ing in unusedIngredients"
|
|
||||||
:key="ing.referenceId"
|
|
||||||
v-model="activeRefs"
|
|
||||||
:value="ing.referenceId"
|
|
||||||
class="mb-n2 mt-n2"
|
|
||||||
>
|
|
||||||
<template #label>
|
|
||||||
<div v-html="parseIngredientText(ing, disableAmount)"></div>
|
|
||||||
</template>
|
|
||||||
</v-checkbox>
|
|
||||||
|
|
||||||
<template v-if="usedIngredients.length > 0">
|
|
||||||
<h4 class="py-3 ml-1">{{ $t("recipe.linked-to-other-step") }}</h4>
|
|
||||||
<v-checkbox
|
|
||||||
v-for="ing in usedIngredients"
|
|
||||||
:key="ing.referenceId"
|
|
||||||
v-model="activeRefs"
|
|
||||||
:value="ing.referenceId"
|
|
||||||
class="mb-n2 mt-n2"
|
|
||||||
>
|
|
||||||
<template #label>
|
|
||||||
<div v-html="parseIngredientText(ing, disableAmount)"></div>
|
|
||||||
</template>
|
|
||||||
</v-checkbox>
|
|
||||||
</template>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-divider></v-divider>
|
|
||||||
|
|
||||||
<v-card-actions>
|
|
||||||
<BaseButton cancel @click="dialog = false"> </BaseButton>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<BaseButton color="info" @click="autoSetReferences">
|
|
||||||
<template #icon> {{ $globals.icons.robot }}</template>
|
|
||||||
{{ $t("recipe.auto") }}
|
|
||||||
</BaseButton>
|
|
||||||
<BaseButton save @click="setIngredientIds"> </BaseButton>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
|
|
||||||
<div class="d-flex justify-space-between justify-start">
|
|
||||||
<h2 class="mb-4 mt-1">{{ $t("recipe.instructions") }}</h2>
|
|
||||||
<BaseButton v-if="!public && !edit && showCookMode" minor cancel color="primary" @click="toggleCookMode()">
|
|
||||||
<template #icon>
|
|
||||||
{{ $globals.icons.primary }}
|
|
||||||
</template>
|
|
||||||
{{ $t("recipe.cook-mode") }}
|
|
||||||
</BaseButton>
|
|
||||||
</div>
|
|
||||||
<draggable
|
|
||||||
:disabled="!edit"
|
|
||||||
:value="value"
|
|
||||||
handle=".handle"
|
|
||||||
v-bind="{
|
|
||||||
animation: 200,
|
|
||||||
group: 'description',
|
|
||||||
ghostClass: 'ghost',
|
|
||||||
}"
|
|
||||||
@input="updateIndex"
|
|
||||||
@start="drag = true"
|
|
||||||
@end="drag = false"
|
|
||||||
>
|
|
||||||
<TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
|
|
||||||
<div v-for="(step, index) in value" :key="step.id" class="list-group-item">
|
|
||||||
<v-app-bar
|
|
||||||
v-if="showTitleEditor[step.id]"
|
|
||||||
class="primary mx-1 mt-6"
|
|
||||||
style="cursor: pointer"
|
|
||||||
dark
|
|
||||||
dense
|
|
||||||
rounded
|
|
||||||
@click="toggleCollapseSection(index)"
|
|
||||||
>
|
|
||||||
<v-toolbar-title v-if="!edit" class="headline">
|
|
||||||
<v-app-bar-title> {{ step.title }} </v-app-bar-title>
|
|
||||||
</v-toolbar-title>
|
|
||||||
<v-text-field
|
|
||||||
v-if="edit"
|
|
||||||
v-model="step.title"
|
|
||||||
class="headline pa-0 mt-5"
|
|
||||||
dense
|
|
||||||
solo
|
|
||||||
flat
|
|
||||||
:placeholder="$t('recipe.section-title')"
|
|
||||||
background-color="primary"
|
|
||||||
>
|
|
||||||
</v-text-field>
|
|
||||||
</v-app-bar>
|
|
||||||
<v-hover v-slot="{ hover }">
|
|
||||||
<v-card
|
|
||||||
class="ma-1"
|
|
||||||
:class="[{ 'on-hover': hover }, isChecked(index)]"
|
|
||||||
:elevation="hover ? 12 : 2"
|
|
||||||
:ripple="false"
|
|
||||||
@click="toggleDisabled(index)"
|
|
||||||
>
|
|
||||||
<v-card-title :class="{ 'pb-0': !isChecked(index) }">
|
|
||||||
<span class="handle">
|
|
||||||
<v-icon v-if="edit" size="26" class="pb-1">{{ $globals.icons.arrowUpDown }}</v-icon>
|
|
||||||
{{ $t("recipe.step-index", { step: index + 1 }) }}
|
|
||||||
</span>
|
|
||||||
<template v-if="edit">
|
|
||||||
<div class="ml-auto">
|
|
||||||
<BaseButtonGroup
|
|
||||||
:large="false"
|
|
||||||
:buttons="[
|
|
||||||
{
|
|
||||||
icon: $globals.icons.delete,
|
|
||||||
text: $tc('general.delete'),
|
|
||||||
event: 'delete',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: $globals.icons.dotsVertical,
|
|
||||||
text: '',
|
|
||||||
event: 'open',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
text: 'Toggle Section',
|
|
||||||
event: 'toggle-section',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Link Ingredients',
|
|
||||||
event: 'link-ingredients',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Merge Above',
|
|
||||||
event: 'merge-above',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
|
|
||||||
text: previewStates[index] ? 'Edit Markdown' : 'Preview Markdown',
|
|
||||||
event: 'preview-step',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
@merge-above="mergeAbove(index - 1, index)"
|
|
||||||
@toggle-section="toggleShowTitle(step.id)"
|
|
||||||
@link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
|
|
||||||
@preview-step="togglePreviewState(index)"
|
|
||||||
@delete="value.splice(index, 1)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<v-fade-transition>
|
|
||||||
<v-icon v-show="isChecked(index)" size="24" class="ml-auto" color="success">
|
|
||||||
{{ $globals.icons.checkboxMarkedCircle }}
|
|
||||||
</v-icon>
|
|
||||||
</v-fade-transition>
|
|
||||||
</v-card-title>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<v-card-text
|
|
||||||
v-if="edit"
|
|
||||||
:class="{
|
|
||||||
blur: imageUploadMode,
|
|
||||||
}"
|
|
||||||
@drop.stop.prevent="handleImageDrop(index, $event)"
|
|
||||||
@click="$emit('clickInstructionField', `${index}.text`)"
|
|
||||||
>
|
|
||||||
<MarkdownEditor
|
|
||||||
v-model="value[index]['text']"
|
|
||||||
class="mb-2"
|
|
||||||
:preview.sync="previewStates[index]"
|
|
||||||
:display-preview="false"
|
|
||||||
:textarea="{
|
|
||||||
hint: 'Attach images by dragging & dropping them into the editor',
|
|
||||||
persistentHint: true,
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-for="ing in step.ingredientReferences"
|
|
||||||
:key="ing.referenceId"
|
|
||||||
v-html="getIngredientByRefId(ing.referenceId)"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
|
||||||
<v-expand-transition>
|
|
||||||
<div v-show="!isChecked(index) && !edit" class="m-0 p-0">
|
|
||||||
<v-card-text class="markdown">
|
|
||||||
<SafeMarkdown class="markdown" :source="step.text" />
|
|
||||||
<div v-if="cookMode && step.ingredientReferences && step.ingredientReferences.length > 0">
|
|
||||||
<v-divider class="mb-2"></v-divider>
|
|
||||||
<div
|
|
||||||
v-for="ing in step.ingredientReferences"
|
|
||||||
:key="ing.referenceId"
|
|
||||||
v-html="getIngredientByRefId(ing.referenceId)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</div>
|
|
||||||
</v-expand-transition>
|
|
||||||
</v-card>
|
|
||||||
</v-hover>
|
|
||||||
</div>
|
|
||||||
</TransitionGroup>
|
|
||||||
</draggable>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import draggable from "vuedraggable";
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
toRefs,
|
|
||||||
reactive,
|
|
||||||
defineComponent,
|
|
||||||
watch,
|
|
||||||
onMounted,
|
|
||||||
useContext,
|
|
||||||
computed,
|
|
||||||
} from "@nuxtjs/composition-api";
|
|
||||||
import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset } from "~/lib/api/types/recipe";
|
|
||||||
import { parseIngredientText } from "~/composables/recipes";
|
|
||||||
import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
|
|
||||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
|
||||||
|
|
||||||
interface MergerHistory {
|
|
||||||
target: number;
|
|
||||||
source: number;
|
|
||||||
targetText: string;
|
|
||||||
sourceText: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
draggable,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Array as () => RecipeStep[],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
edit: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
ingredients: {
|
|
||||||
type: Array as () => RecipeIngredient[],
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
disableAmount: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
public: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
recipeId: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
recipeSlug: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
assets: {
|
|
||||||
type: Array as () => RecipeAsset[],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
cookMode: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
scale: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props, context) {
|
|
||||||
const { i18n, req } = useContext();
|
|
||||||
const BASE_URL = detectServerBaseUrl(req);
|
|
||||||
|
|
||||||
console.log("Base URL", BASE_URL);
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
dialog: false,
|
|
||||||
disabledSteps: [] as number[],
|
|
||||||
unusedIngredients: [] as RecipeIngredient[],
|
|
||||||
usedIngredients: [] as RecipeIngredient[],
|
|
||||||
});
|
|
||||||
|
|
||||||
const showTitleEditor = ref<{ [key: string]: boolean }>({});
|
|
||||||
|
|
||||||
const actionEvents = [
|
|
||||||
{
|
|
||||||
text: i18n.t("recipe.toggle-section") as string,
|
|
||||||
event: "toggle-section",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: i18n.t("recipe.link-ingredients") as string,
|
|
||||||
event: "link-ingredients",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: i18n.t("recipe.merge-above") as string,
|
|
||||||
event: "merge-above",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// UI State Helpers
|
|
||||||
|
|
||||||
function validateTitle(title: string | undefined) {
|
|
||||||
return !(title === null || title === "" || title === undefined);
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(props.value, (v) => {
|
|
||||||
state.disabledSteps = [];
|
|
||||||
|
|
||||||
v.forEach((element: RecipeStep) => {
|
|
||||||
if (element.id !== undefined) {
|
|
||||||
showTitleEditor.value[element.id] = validateTitle(element.title);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const showCookMode = ref(false);
|
|
||||||
|
|
||||||
// Eliminate state with an eager call to watcher?
|
|
||||||
onMounted(() => {
|
|
||||||
props.value.forEach((element: RecipeStep) => {
|
|
||||||
if (element.id !== undefined) {
|
|
||||||
showTitleEditor.value[element.id] = validateTitle(element.title);
|
|
||||||
}
|
|
||||||
|
|
||||||
// showCookMode.value = false;
|
|
||||||
if (showCookMode.value === false && element.ingredientReferences && element.ingredientReferences.length > 0) {
|
|
||||||
showCookMode.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
showTitleEditor.value = { ...showTitleEditor.value };
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function toggleDisabled(stepIndex: number) {
|
|
||||||
if (props.edit) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (state.disabledSteps.includes(stepIndex)) {
|
|
||||||
const index = state.disabledSteps.indexOf(stepIndex);
|
|
||||||
if (index !== -1) {
|
|
||||||
state.disabledSteps.splice(index, 1);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
state.disabledSteps.push(stepIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isChecked(stepIndex: number) {
|
|
||||||
if (state.disabledSteps.includes(stepIndex) && !props.edit) {
|
|
||||||
return "disabled-card";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleShowTitle(id: string) {
|
|
||||||
showTitleEditor.value[id] = !showTitleEditor.value[id];
|
|
||||||
|
|
||||||
const temp = { ...showTitleEditor.value };
|
|
||||||
showTitleEditor.value = temp;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateIndex(data: RecipeStep) {
|
|
||||||
context.emit("input", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Ingredient Linker
|
|
||||||
const activeRefs = ref<string[]>([]);
|
|
||||||
const activeIndex = ref(0);
|
|
||||||
const activeText = ref("");
|
|
||||||
|
|
||||||
function openDialog(idx: number, refs: IngredientReferences[], text: string) {
|
|
||||||
setUsedIngredients();
|
|
||||||
activeText.value = text;
|
|
||||||
activeIndex.value = idx;
|
|
||||||
state.dialog = true;
|
|
||||||
activeRefs.value = refs.map((ref) => ref.referenceId ?? "");
|
|
||||||
}
|
|
||||||
|
|
||||||
function setIngredientIds() {
|
|
||||||
const instruction = props.value[activeIndex.value];
|
|
||||||
instruction.ingredientReferences = activeRefs.value.map((ref) => {
|
|
||||||
return {
|
|
||||||
referenceId: ref,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update the visibility of the cook mode button
|
|
||||||
showCookMode.value = false;
|
|
||||||
props.value.forEach((element) => {
|
|
||||||
if (showCookMode.value === false && element.ingredientReferences && element.ingredientReferences.length > 0) {
|
|
||||||
showCookMode.value = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
state.dialog = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setUsedIngredients() {
|
|
||||||
const usedRefs: { [key: string]: boolean } = {};
|
|
||||||
|
|
||||||
props.value.forEach((element) => {
|
|
||||||
element.ingredientReferences?.forEach((ref) => {
|
|
||||||
if (ref.referenceId !== undefined) {
|
|
||||||
usedRefs[ref.referenceId] = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
state.usedIngredients = props.ingredients.filter((ing) => {
|
|
||||||
return ing.referenceId !== undefined && ing.referenceId in usedRefs;
|
|
||||||
});
|
|
||||||
|
|
||||||
state.unusedIngredients = props.ingredients.filter((ing) => {
|
|
||||||
return !(ing.referenceId !== undefined && ing.referenceId in usedRefs);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function autoSetReferences() {
|
|
||||||
// Ignore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
|
|
||||||
// other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
|
|
||||||
// at the food variable and seeing if the food is in the instructions, but I still need to support those who don't want to provide the value
|
|
||||||
// and only use the "notes" feature.
|
|
||||||
const blackListedText = [
|
|
||||||
"and",
|
|
||||||
"or",
|
|
||||||
"the",
|
|
||||||
"a",
|
|
||||||
"an",
|
|
||||||
"of",
|
|
||||||
"in",
|
|
||||||
"on",
|
|
||||||
"to",
|
|
||||||
"for",
|
|
||||||
"by",
|
|
||||||
"with",
|
|
||||||
"without",
|
|
||||||
"",
|
|
||||||
" ",
|
|
||||||
];
|
|
||||||
const blackListedRegexMatch = /\d/gm; // Match Any Number
|
|
||||||
|
|
||||||
// Check if any of the words in the active text match the ingredient text
|
|
||||||
const instructionsByWord = activeText.value.toLowerCase().split(" ");
|
|
||||||
|
|
||||||
instructionsByWord.forEach((word) => {
|
|
||||||
if (blackListedText.includes(word) || word.match(blackListedRegexMatch)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
props.ingredients.forEach((ingredient) => {
|
|
||||||
const searchText = parseIngredientText(ingredient, props.disableAmount);
|
|
||||||
|
|
||||||
if (ingredient.referenceId === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchText.toLowerCase().includes(" " + word) && !activeRefs.value.includes(ingredient.referenceId)) {
|
|
||||||
console.info("Word Matched", `'${word}'`, ingredient.note);
|
|
||||||
activeRefs.value.push(ingredient.referenceId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const ingredientLookup = computed(() => {
|
|
||||||
const results: { [key: string]: RecipeIngredient } = {};
|
|
||||||
return props.ingredients.reduce((prev, ing) => {
|
|
||||||
if (ing.referenceId === undefined) {
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
prev[ing.referenceId] = ing;
|
|
||||||
return prev;
|
|
||||||
}, results);
|
|
||||||
});
|
|
||||||
|
|
||||||
function getIngredientByRefId(refId: string | undefined) {
|
|
||||||
if (refId === undefined) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
const ing = ingredientLookup.value[refId] ?? "";
|
|
||||||
if (ing === "") {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
return parseIngredientText(ing, props.disableAmount, props.scale);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Instruction Merger
|
|
||||||
const mergeHistory = ref<MergerHistory[]>([]);
|
|
||||||
|
|
||||||
function mergeAbove(target: number, source: number) {
|
|
||||||
if (target < 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
mergeHistory.value.push({
|
|
||||||
target,
|
|
||||||
source,
|
|
||||||
targetText: props.value[target].text,
|
|
||||||
sourceText: props.value[source].text,
|
|
||||||
});
|
|
||||||
|
|
||||||
props.value[target].text += " " + props.value[source].text;
|
|
||||||
props.value.splice(source, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function undoMerge(event: KeyboardEvent) {
|
|
||||||
if (event.ctrlKey && event.code === "KeyZ") {
|
|
||||||
if (!(mergeHistory.value?.length > 0)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastMerge = mergeHistory.value.pop();
|
|
||||||
if (!lastMerge) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
props.value[lastMerge.target].text = lastMerge.targetText;
|
|
||||||
props.value.splice(lastMerge.source, 0, {
|
|
||||||
id: uuid4(),
|
|
||||||
title: "",
|
|
||||||
text: lastMerge.sourceText,
|
|
||||||
ingredientReferences: [],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const previewStates = ref<boolean[]>([]);
|
|
||||||
|
|
||||||
function togglePreviewState(index: number) {
|
|
||||||
const temp = [...previewStates.value];
|
|
||||||
temp[index] = !temp[index];
|
|
||||||
previewStates.value = temp;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleCollapseSection(index: number) {
|
|
||||||
const sectionSteps: number[] = [];
|
|
||||||
|
|
||||||
for (let i = index; i < props.value.length; i++) {
|
|
||||||
if (!(i === index) && validateTitle(props.value[i].title)) {
|
|
||||||
break;
|
|
||||||
} else {
|
|
||||||
sectionSteps.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const allCollapsed = sectionSteps.every((idx) => state.disabledSteps.includes(idx));
|
|
||||||
|
|
||||||
if (allCollapsed) {
|
|
||||||
state.disabledSteps = state.disabledSteps.filter((idx) => !sectionSteps.includes(idx));
|
|
||||||
} else {
|
|
||||||
state.disabledSteps = [...state.disabledSteps, ...sectionSteps];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const drag = ref(false);
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Image Uploader
|
|
||||||
const api = useUserApi();
|
|
||||||
const { recipeAssetPath } = useStaticRoutes();
|
|
||||||
|
|
||||||
const imageUploadMode = ref(false);
|
|
||||||
|
|
||||||
function toggleDragMode() {
|
|
||||||
console.log("Toggling Drag Mode");
|
|
||||||
imageUploadMode.value = !imageUploadMode.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.assets === undefined) {
|
|
||||||
context.emit("update:assets", []);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function handleImageDrop(index: number, e: DragEvent) {
|
|
||||||
if (!e.dataTransfer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if the file is an image
|
|
||||||
const file = e.dataTransfer.files[0];
|
|
||||||
if (!file || !file.type.startsWith("image/")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { data } = await api.recipes.createAsset(props.recipeSlug, {
|
|
||||||
name: file.name,
|
|
||||||
icon: "mdi-file-image",
|
|
||||||
file,
|
|
||||||
extension: file.name.split(".").pop() || "",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return; // TODO: Handle error
|
|
||||||
}
|
|
||||||
|
|
||||||
context.emit("update:assets", [...props.assets, data]);
|
|
||||||
const assetUrl = BASE_URL + recipeAssetPath(props.recipeId, data.fileName as string);
|
|
||||||
const text = `<img src="${assetUrl}" height="100%" width="100%"/>`;
|
|
||||||
props.value[index].text += text;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleCookMode() {
|
|
||||||
context.emit("cookModeToggle");
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
// Image Uploader
|
|
||||||
toggleDragMode,
|
|
||||||
handleImageDrop,
|
|
||||||
imageUploadMode,
|
|
||||||
|
|
||||||
// Rest
|
|
||||||
drag,
|
|
||||||
togglePreviewState,
|
|
||||||
toggleCollapseSection,
|
|
||||||
previewStates,
|
|
||||||
...toRefs(state),
|
|
||||||
actionEvents,
|
|
||||||
activeRefs,
|
|
||||||
activeText,
|
|
||||||
getIngredientByRefId,
|
|
||||||
showTitleEditor,
|
|
||||||
mergeAbove,
|
|
||||||
openDialog,
|
|
||||||
setIngredientIds,
|
|
||||||
undoMerge,
|
|
||||||
toggleDisabled,
|
|
||||||
isChecked,
|
|
||||||
toggleShowTitle,
|
|
||||||
updateIndex,
|
|
||||||
autoSetReferences,
|
|
||||||
parseIngredientText,
|
|
||||||
toggleCookMode,
|
|
||||||
showCookMode,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css" scoped>
|
|
||||||
.v-card--link:before {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Select all li under .markdown class */
|
|
||||||
.markdown >>> ul > li {
|
|
||||||
display: list-item;
|
|
||||||
list-style-type: disc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Select all li under .markdown class */
|
|
||||||
.markdown >>> ol > li {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flip-list-move {
|
|
||||||
transition: transform 0.5s;
|
|
||||||
}
|
|
||||||
.no-move {
|
|
||||||
transition: transform 0s;
|
|
||||||
}
|
|
||||||
.ghost {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.list-group {
|
|
||||||
min-height: 38px;
|
|
||||||
}
|
|
||||||
.list-group-item {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.list-group-item i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blur {
|
|
||||||
filter: blur(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-overlay {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -123,15 +123,14 @@
|
|||||||
<RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="canvasSelectedText" @bulk-data="addStep" />
|
<RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="canvasSelectedText" @bulk-data="addStep" />
|
||||||
<BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
|
<BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
<RecipeInstructions
|
<RecipePageInstructions
|
||||||
v-model="recipe.recipeInstructions"
|
v-model="recipe.recipeInstructions"
|
||||||
:ingredients="recipe.recipeIngredient"
|
:ingredients="recipe.recipeIngredient"
|
||||||
:disable-amount="recipe.settings.disableAmount"
|
:disable-amount="recipe.settings.disableAmount"
|
||||||
:edit="true"
|
:edit="true"
|
||||||
:recipe-id="recipe.id"
|
:recipe="recipe"
|
||||||
:recipe-slug="recipe.slug"
|
|
||||||
:assets.sync="recipe.assets"
|
:assets.sync="recipe.assets"
|
||||||
@clickInstructionField="setSingleStep"
|
@click-instruction-field="setSingleStep"
|
||||||
/>
|
/>
|
||||||
</v-tab-item>
|
</v-tab-item>
|
||||||
</v-tabs-items>
|
</v-tabs-items>
|
||||||
@ -145,6 +144,7 @@ import { defineComponent, ref, onMounted, reactive, toRefs, useRouter } from "@n
|
|||||||
import { until } from "@vueuse/core";
|
import { until } from "@vueuse/core";
|
||||||
import { invoke } from "@vueuse/shared";
|
import { invoke } from "@vueuse/shared";
|
||||||
import draggable from "vuedraggable";
|
import draggable from "vuedraggable";
|
||||||
|
import RecipePageInstructions from "~/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue";
|
||||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
||||||
import { OcrTsvResponse as NullableOcrTsvResponse } from "~/lib/api/types/ocr";
|
import { OcrTsvResponse as NullableOcrTsvResponse } from "~/lib/api/types/ocr";
|
||||||
import { validators } from "~/composables/use-validators";
|
import { validators } from "~/composables/use-validators";
|
||||||
@ -152,7 +152,6 @@ import { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
|
|||||||
import { Paths, Leaves, SelectedRecipeLeaves } from "~/types/ocr-types";
|
import { Paths, Leaves, SelectedRecipeLeaves } from "~/types/ocr-types";
|
||||||
import BannerExperimental from "~/components/global/BannerExperimental.vue";
|
import BannerExperimental from "~/components/global/BannerExperimental.vue";
|
||||||
import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
|
import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
|
||||||
import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
|
|
||||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||||
import RecipeOcrEditorPageCanvas from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue";
|
import RecipeOcrEditorPageCanvas from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue";
|
||||||
import RecipeOcrEditorPageHelp from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue";
|
import RecipeOcrEditorPageHelp from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue";
|
||||||
@ -169,7 +168,7 @@ export default defineComponent({
|
|||||||
draggable,
|
draggable,
|
||||||
BannerExperimental,
|
BannerExperimental,
|
||||||
RecipeDialogBulkAdd,
|
RecipeDialogBulkAdd,
|
||||||
RecipeInstructions,
|
RecipePageInstructions,
|
||||||
RecipeOcrEditorPageCanvas,
|
RecipeOcrEditorPageCanvas,
|
||||||
RecipeOcrEditorPageHelp,
|
RecipeOcrEditorPageHelp,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -171,7 +171,10 @@
|
|||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<DropZone @drop="(f) => handleImageDrop(index, f)">
|
<DropZone @drop="(f) => handleImageDrop(index, f)">
|
||||||
<v-card-text v-if="isEditForm">
|
<v-card-text
|
||||||
|
v-if="isEditForm"
|
||||||
|
@click="$emit('click-instruction-field', `${index}.text`)"
|
||||||
|
>
|
||||||
<MarkdownEditor
|
<MarkdownEditor
|
||||||
v-model="value[index]['text']"
|
v-model="value[index]['text']"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
|
|||||||
@ -1,89 +0,0 @@
|
|||||||
<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 v-model="createDialog" :title="$t('tool.create-new-tool')" @submit="actions.createOne()">
|
|
||||||
<template #activator>
|
|
||||||
<v-btn icon @click="createDialog = true">
|
|
||||||
<v-icon> {{ $globals.icons.create }}</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
<v-card-text>
|
|
||||||
<v-text-field v-model="workingToolData.name" :label="$t('tool.tool-name')"></v-text-field>
|
|
||||||
<v-checkbox v-model="workingToolData.onHand" :label="$t('tool.on-hand-checkbox-label')"></v-checkbox>
|
|
||||||
</v-card-text>
|
|
||||||
</BaseDialog>
|
|
||||||
</template>
|
|
||||||
</v-autocomplete>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, computed } from "@nuxtjs/composition-api";
|
|
||||||
import { RecipeTool } from "~/lib/api/types/recipe";
|
|
||||||
import { useTools } from "~/composables/recipes";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Array as () => RecipeTool[],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
edit: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props, context) {
|
|
||||||
const { tools, actions, workingToolData } = useTools();
|
|
||||||
|
|
||||||
const createDialog = ref(false);
|
|
||||||
|
|
||||||
const recipeTools = computed({
|
|
||||||
get: () => {
|
|
||||||
return props.value;
|
|
||||||
},
|
|
||||||
set: (val) => {
|
|
||||||
context.emit("input", val);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
actions,
|
|
||||||
createDialog,
|
|
||||||
recipeTools,
|
|
||||||
tools,
|
|
||||||
workingToolData,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -1,903 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-container
|
|
||||||
:class="{
|
|
||||||
'pa-0': $vuetify.breakpoint.smAndDown,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<v-card v-if="skeleton" :color="`white ${false ? 'darken-2' : 'lighten-4'}`" class="pa-3">
|
|
||||||
<v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
|
|
||||||
</v-card>
|
|
||||||
<v-card v-else-if="recipe" :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
|
|
||||||
<!-- Recipe Header -->
|
|
||||||
<div class="d-flex justify-end flex-wrap align-stretch">
|
|
||||||
<v-card v-if="!enableLandscape" width="50%" flat class="d-flex flex-column justify-center align-center">
|
|
||||||
<v-card-text>
|
|
||||||
<v-card-title class="headline pa-0 flex-column align-center">
|
|
||||||
{{ recipe.name }}
|
|
||||||
<RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
|
|
||||||
</v-card-title>
|
|
||||||
<v-divider class="my-2"></v-divider>
|
|
||||||
<SafeMarkdown :source="recipe.description" />
|
|
||||||
<v-divider></v-divider>
|
|
||||||
<div class="d-flex justify-center mt-5">
|
|
||||||
<RecipeTimeCard
|
|
||||||
class="d-flex justify-center flex-wrap"
|
|
||||||
:class="true ? undefined : 'force-bottom'"
|
|
||||||
:prep-time="recipe.prepTime"
|
|
||||||
:total-time="recipe.totalTime"
|
|
||||||
:perform-time="recipe.performTime"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
<v-img
|
|
||||||
:key="imageKey"
|
|
||||||
:max-width="enableLandscape ? null : '50%'"
|
|
||||||
min-height="50"
|
|
||||||
:height="hideImage ? undefined : imageHeight"
|
|
||||||
:src="recipeImage(recipe.id, recipe.image, imageKey)"
|
|
||||||
class="d-print-none"
|
|
||||||
@error="hideImage = true"
|
|
||||||
>
|
|
||||||
</v-img>
|
|
||||||
</div>
|
|
||||||
<v-divider></v-divider>
|
|
||||||
<RecipeActionMenu
|
|
||||||
v-model="form"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
:locked="$auth.user.id !== recipe.userId && recipe.settings.locked"
|
|
||||||
:name="recipe.name"
|
|
||||||
:logged-in="$auth.loggedIn"
|
|
||||||
:open="form"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
class="ml-auto mt-n8 pb-4"
|
|
||||||
@close="closeEditor"
|
|
||||||
@json="toggleJson"
|
|
||||||
@edit="toggleEdit"
|
|
||||||
@save="updateRecipe(recipe.slug, recipe)"
|
|
||||||
@delete="deleteRecipe(recipe.slug)"
|
|
||||||
@print="printRecipe"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Editors -->
|
|
||||||
<LazyRecipeJsonEditor v-if="jsonEditor" v-model="recipe" class="mt-10" :options="jsonEditorOptions" />
|
|
||||||
<div v-else>
|
|
||||||
<v-card-text
|
|
||||||
:class="{
|
|
||||||
'px-2': $vuetify.breakpoint.smAndDown,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div v-if="form" class="d-flex justify-start align-center">
|
|
||||||
<RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
|
|
||||||
<RecipeSettingsMenu
|
|
||||||
class="my-1 mx-1"
|
|
||||||
:value="recipe.settings"
|
|
||||||
:is-owner="recipe.userId == $auth.user.id"
|
|
||||||
@upload="uploadImage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- Recipe Title Section -->
|
|
||||||
<template v-if="!form && enableLandscape">
|
|
||||||
<v-card-title class="px-0 py-2 ma-0 headline">
|
|
||||||
{{ recipe.name }}
|
|
||||||
</v-card-title>
|
|
||||||
<SafeMarkdown :source="recipe.description" />
|
|
||||||
|
|
||||||
<div class="pb-2 d-flex justify-center flex-wrap">
|
|
||||||
<RecipeTimeCard
|
|
||||||
class="d-flex justify-center flex-wrap"
|
|
||||||
:prep-time="recipe.prepTime"
|
|
||||||
:total-time="recipe.totalTime"
|
|
||||||
:perform-time="recipe.performTime"
|
|
||||||
/>
|
|
||||||
<RecipeRating
|
|
||||||
v-if="enableLandscape && $vuetify.breakpoint.smAndDown"
|
|
||||||
:key="recipe.slug"
|
|
||||||
:value="recipe.rating"
|
|
||||||
:name="recipe.name"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<v-divider></v-divider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="form">
|
|
||||||
<v-text-field
|
|
||||||
v-model="recipe.name"
|
|
||||||
class="my-3"
|
|
||||||
:label="$t('recipe.recipe-name')"
|
|
||||||
:rules="[validators.required]"
|
|
||||||
>
|
|
||||||
</v-text-field>
|
|
||||||
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<v-text-field v-model="recipe.totalTime" class="mx-2" :label="$t('recipe.total-time')"></v-text-field>
|
|
||||||
<v-text-field v-model="recipe.prepTime" class="mx-2" :label="$t('recipe.prep-time')"></v-text-field>
|
|
||||||
<v-text-field v-model="recipe.performTime" class="mx-2" :label="$t('recipe.perform-time')"></v-text-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-textarea v-model="recipe.description" auto-grow min-height="100" :label="$t('recipe.description')">
|
|
||||||
</v-textarea>
|
|
||||||
<v-text-field v-model="recipe.recipeYield" dense :label="$t('recipe.servings')"> </v-text-field>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- Advanced Editor -->
|
|
||||||
<div v-if="form">
|
|
||||||
<h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
|
|
||||||
<draggable
|
|
||||||
v-if="recipe.recipeIngredient.length > 0"
|
|
||||||
v-model="recipe.recipeIngredient"
|
|
||||||
handle=".handle"
|
|
||||||
v-bind="{
|
|
||||||
animation: 200,
|
|
||||||
group: 'description',
|
|
||||||
disabled: false,
|
|
||||||
ghostClass: 'ghost',
|
|
||||||
}"
|
|
||||||
@start="drag = true"
|
|
||||||
@end="drag = false"
|
|
||||||
>
|
|
||||||
<TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
|
|
||||||
<RecipeIngredientEditor
|
|
||||||
v-for="(ingredient, index) in recipe.recipeIngredient"
|
|
||||||
:key="ingredient.referenceId"
|
|
||||||
v-model="recipe.recipeIngredient[index]"
|
|
||||||
class="list-group-item"
|
|
||||||
:disable-amount="recipe.settings.disableAmount"
|
|
||||||
@delete="recipe.recipeIngredient.splice(index, 1)"
|
|
||||||
/>
|
|
||||||
</TransitionGroup>
|
|
||||||
</draggable>
|
|
||||||
<v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
|
|
||||||
<div class="d-flex justify-end mt-2">
|
|
||||||
<v-tooltip top color="accent">
|
|
||||||
<template #activator="{ on, attrs }">
|
|
||||||
<span v-on="on">
|
|
||||||
<BaseButton
|
|
||||||
:disabled="recipe.settings.disableAmount || hasFoodOrUnit"
|
|
||||||
color="accent"
|
|
||||||
:to="`${recipe.slug}/ingredient-parser`"
|
|
||||||
v-bind="attrs"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
{{ $globals.icons.foods }}
|
|
||||||
</template>
|
|
||||||
Parse
|
|
||||||
</BaseButton>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<span>{{ paserToolTip }}</span>
|
|
||||||
</v-tooltip>
|
|
||||||
<RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
|
|
||||||
<BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-space-between align-center pt-2 pb-3">
|
|
||||||
<v-tooltip v-if="!form && recipe.recipeYield" small top color="secondary darken-1">
|
|
||||||
<template #activator="{ on, attrs }">
|
|
||||||
<RecipeScaleEditButton
|
|
||||||
v-model.number="scale"
|
|
||||||
v-bind="attrs"
|
|
||||||
:recipe-yield="recipe.recipeYield"
|
|
||||||
:basic-yield="basicYield"
|
|
||||||
:scaled-yield="scaledYield"
|
|
||||||
:edit-scale="!recipe.settings.disableAmount && !form"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<span> {{ $t("recipe.edit-scale") }} </span>
|
|
||||||
</v-tooltip>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
|
|
||||||
<RecipeRating
|
|
||||||
v-if="enableLandscape && $vuetify.breakpoint.smAndUp"
|
|
||||||
:key="recipe.slug"
|
|
||||||
:value="recipe.rating"
|
|
||||||
:name="recipe.name"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col v-if="!cookModeToggle || form" cols="12" sm="12" md="4" lg="4">
|
|
||||||
<RecipeIngredients
|
|
||||||
v-if="!form"
|
|
||||||
:value="recipe.recipeIngredient"
|
|
||||||
:scale="scale"
|
|
||||||
:disable-amount="recipe.settings.disableAmount"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 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="toolStore.actions.updateOne(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") }}
|
|
||||||
</v-card-title>
|
|
||||||
<v-divider class="mx-2"></v-divider>
|
|
||||||
<v-card-text>
|
|
||||||
<RecipeOrganizerSelector
|
|
||||||
v-if="form"
|
|
||||||
v-model="recipe.recipeCategory"
|
|
||||||
:return-object="true"
|
|
||||||
:show-add="true"
|
|
||||||
selector-type="categories"
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
<RecipeOrganizerSelector
|
|
||||||
v-if="form"
|
|
||||||
v-model="recipe.tags"
|
|
||||||
:return-object="true"
|
|
||||||
:show-add="true"
|
|
||||||
selector-type="tags"
|
|
||||||
/>
|
|
||||||
<RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- 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">
|
|
||||||
<RecipeOrganizerSelector v-model="recipe.tools" selector-type="tools" />
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<RecipeNutrition
|
|
||||||
v-if="recipe.settings.showNutrition"
|
|
||||||
v-model="recipe.nutrition"
|
|
||||||
class="mt-10"
|
|
||||||
:edit="form"
|
|
||||||
/>
|
|
||||||
<client-only>
|
|
||||||
<RecipeAssets
|
|
||||||
v-if="recipe.settings.showAssets"
|
|
||||||
v-model="recipe.assets"
|
|
||||||
:edit="form"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
/>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
<v-divider
|
|
||||||
v-if="$vuetify.breakpoint.mdAndUp && !cookModeToggle"
|
|
||||||
class="my-divider"
|
|
||||||
:vertical="true"
|
|
||||||
></v-divider>
|
|
||||||
|
|
||||||
<v-col cols="12" sm="12" :md="8 + (cookModeToggle ? 1 : 0) * 4" :lg="8 + (cookModeToggle ? 1 : 0) * 4">
|
|
||||||
<RecipeInstructions
|
|
||||||
v-model="recipe.recipeInstructions"
|
|
||||||
:assets.sync="recipe.assets"
|
|
||||||
:ingredients="recipe.recipeIngredient"
|
|
||||||
:disable-amount="recipe.settings.disableAmount"
|
|
||||||
:edit="form"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
:recipe-slug="recipe.slug"
|
|
||||||
:cook-mode="cookModeToggle"
|
|
||||||
:scale="scale"
|
|
||||||
@cookModeToggle="cookModeToggle = !cookModeToggle"
|
|
||||||
/>
|
|
||||||
<div v-if="form" class="d-flex">
|
|
||||||
<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>
|
|
||||||
<RecipeOrganizerSelector
|
|
||||||
v-if="form"
|
|
||||||
v-model="recipe.recipeCategory"
|
|
||||||
:return-object="true"
|
|
||||||
:show-add="true"
|
|
||||||
selector-type="categories"
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
<RecipeOrganizerSelector
|
|
||||||
v-if="form"
|
|
||||||
v-model="recipe.tags"
|
|
||||||
:return-object="true"
|
|
||||||
:show-add="true"
|
|
||||||
selector-type="tags"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<RecipeNutrition
|
|
||||||
v-if="recipe.settings.showNutrition && !cookModeToggle"
|
|
||||||
v-model="recipe.nutrition"
|
|
||||||
class="mt-10"
|
|
||||||
:edit="form"
|
|
||||||
/>
|
|
||||||
<client-only>
|
|
||||||
<RecipeAssets
|
|
||||||
v-if="recipe.settings.showAssets && !cookModeToggle"
|
|
||||||
v-model="recipe.assets"
|
|
||||||
:edit="form"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
/>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<RecipeNotes v-if="!cookModeToggle" v-model="recipe.notes" :edit="form" />
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-card-actions class="justify-end">
|
|
||||||
<v-text-field
|
|
||||||
v-if="form"
|
|
||||||
v-model="recipe.orgURL"
|
|
||||||
class="mt-10"
|
|
||||||
:label="$t('recipe.original-url')"
|
|
||||||
></v-text-field>
|
|
||||||
<v-btn
|
|
||||||
v-else-if="recipe.orgURL && !cookModeToggle"
|
|
||||||
dense
|
|
||||||
small
|
|
||||||
:hover="false"
|
|
||||||
type="label"
|
|
||||||
:ripple="false"
|
|
||||||
elevation="0"
|
|
||||||
:href="recipe.orgURL"
|
|
||||||
color="secondary darken-1"
|
|
||||||
target="_blank"
|
|
||||||
class="rounded-sm mr-4"
|
|
||||||
>
|
|
||||||
{{ $t("recipe.original-url") }}
|
|
||||||
</v-btn>
|
|
||||||
</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>
|
|
||||||
<div
|
|
||||||
v-if="recipe && wakeIsSupported"
|
|
||||||
class="d-print-none d-flex px-2"
|
|
||||||
:class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
|
|
||||||
>
|
|
||||||
<v-switch v-model="wakeLock" small label="Keep Screen Awake" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<RecipeComments
|
|
||||||
v-if="recipe && !recipe.settings.disableComments && !form && !cookModeToggle"
|
|
||||||
v-model="recipe.comments"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
class="px-1 my-4 d-print-none"
|
|
||||||
/>
|
|
||||||
<RecipePrintView v-if="recipe" :recipe="recipe" />
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
defineComponent,
|
|
||||||
reactive,
|
|
||||||
ref,
|
|
||||||
toRefs,
|
|
||||||
useContext,
|
|
||||||
useMeta,
|
|
||||||
useRoute,
|
|
||||||
useRouter,
|
|
||||||
onMounted,
|
|
||||||
} from "@nuxtjs/composition-api";
|
|
||||||
import draggable from "vuedraggable";
|
|
||||||
import { invoke, until, useWakeLock } from "@vueuse/core";
|
|
||||||
import { onUnmounted } from "vue-demi";
|
|
||||||
import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
|
||||||
import RecipeDialogBulkAdd from "@/components/Domain/Recipe//RecipeDialogBulkAdd.vue";
|
|
||||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
|
||||||
import { validators } from "~/composables/use-validators";
|
|
||||||
import { useRecipe, useRecipeMeta } from "~/composables/recipes";
|
|
||||||
import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
|
|
||||||
import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
|
|
||||||
import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
|
|
||||||
import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
|
|
||||||
import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
|
|
||||||
import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
|
|
||||||
import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
|
|
||||||
import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
|
|
||||||
import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
|
|
||||||
import RecipeScaleEditButton from "~/components/Domain/Recipe/RecipeScaleEditButton.vue";
|
|
||||||
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 "~/lib/api/types/recipe";
|
|
||||||
import { uuid4, deepCopy } from "~/composables/use-utils";
|
|
||||||
import { useRouteQuery } from "~/composables/use-router";
|
|
||||||
import { useToolStore } from "~/composables/store";
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
draggable,
|
|
||||||
RecipeActionMenu,
|
|
||||||
RecipeAssets: () => {
|
|
||||||
if (process.client) {
|
|
||||||
return import(/* webpackChunkName: "RecipeAssets" */ "~/components/Domain/Recipe/RecipeAssets.vue");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
RecipeOrganizerSelector,
|
|
||||||
RecipeChips,
|
|
||||||
RecipeComments,
|
|
||||||
RecipeDialogBulkAdd,
|
|
||||||
RecipeImageUploadBtn,
|
|
||||||
RecipeIngredientEditor,
|
|
||||||
RecipeIngredients,
|
|
||||||
RecipeInstructions,
|
|
||||||
RecipeNotes,
|
|
||||||
RecipeNutrition,
|
|
||||||
RecipePrintView,
|
|
||||||
RecipeRating,
|
|
||||||
RecipeSettingsMenu,
|
|
||||||
RecipeTimeCard,
|
|
||||||
RecipeTools,
|
|
||||||
RecipeScaleEditButton,
|
|
||||||
},
|
|
||||||
async beforeRouteLeave(_to, _from, next) {
|
|
||||||
const isSame = JSON.stringify(this.recipe) === JSON.stringify(this.originalRecipe);
|
|
||||||
|
|
||||||
if (this.form && !isSame && this.recipe?.slug !== undefined) {
|
|
||||||
if (
|
|
||||||
window.confirm(
|
|
||||||
"You have unsaved changes. Do you want to save before leaving?\n\nOkay to save, Cancel to discard changes."
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
next();
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const slug = route.value.params.slug;
|
|
||||||
const api = useUserApi();
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Screen Lock
|
|
||||||
|
|
||||||
const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
|
|
||||||
|
|
||||||
const wakeLock = computed({
|
|
||||||
get: () => isActive,
|
|
||||||
set: () => {
|
|
||||||
if (isActive.value) {
|
|
||||||
unlockScreen();
|
|
||||||
} else {
|
|
||||||
lockScreen();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
async function lockScreen() {
|
|
||||||
if (wakeIsSupported) {
|
|
||||||
console.log("Wake Lock Requested");
|
|
||||||
await request("screen");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function unlockScreen() {
|
|
||||||
if (wakeIsSupported || isActive) {
|
|
||||||
console.log("Wake Lock Released");
|
|
||||||
await release();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Edit on Navigate
|
|
||||||
|
|
||||||
const edit = useRouteQuery("edit", "");
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
lockScreen();
|
|
||||||
|
|
||||||
if (edit.value) {
|
|
||||||
state.form = edit.value === "true";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
unlockScreen();
|
|
||||||
});
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Check Before Leaving
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
form: false,
|
|
||||||
scale: 1,
|
|
||||||
scaleTemp: 1,
|
|
||||||
scaleDialog: false,
|
|
||||||
hideImage: false,
|
|
||||||
imageKey: 1,
|
|
||||||
skeleton: false,
|
|
||||||
jsonEditor: false,
|
|
||||||
jsonEditorOptions: {
|
|
||||||
mode: "code",
|
|
||||||
search: false,
|
|
||||||
mainMenuBar: false,
|
|
||||||
},
|
|
||||||
cookModeToggle: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { recipe, loading, fetchRecipe } = useRecipe(slug);
|
|
||||||
|
|
||||||
// Manage a deep copy of the recipe so we can detect if changes have occurred and inform
|
|
||||||
// the user if they try to navigate away from the page without saving.
|
|
||||||
const originalRecipe = ref<Recipe | null>(null);
|
|
||||||
|
|
||||||
invoke(async () => {
|
|
||||||
await until(recipe).not.toBeNull();
|
|
||||||
originalRecipe.value = deepCopy(recipe.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
const { recipeImage } = useStaticRoutes();
|
|
||||||
|
|
||||||
// ===========================================================================
|
|
||||||
// Layout Helpers
|
|
||||||
|
|
||||||
const { $vuetify } = useContext();
|
|
||||||
const enableLandscape = computed(() => {
|
|
||||||
const preferLandscape = recipe?.value?.settings?.landscapeView;
|
|
||||||
const smallScreen = !$vuetify.breakpoint.smAndUp;
|
|
||||||
|
|
||||||
if (preferLandscape) {
|
|
||||||
return true;
|
|
||||||
} else if (smallScreen) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
const imageHeight = computed(() => {
|
|
||||||
return $vuetify.breakpoint.xs ? "200" : "400";
|
|
||||||
});
|
|
||||||
|
|
||||||
// ===========================================================================
|
|
||||||
// Button Click Event Handlers
|
|
||||||
|
|
||||||
function toggleEdit() {
|
|
||||||
state.jsonEditor = false;
|
|
||||||
state.cookModeToggle = false;
|
|
||||||
state.form = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateRecipe(slug: string, recipe: Recipe) {
|
|
||||||
const { data } = await api.recipes.updateOne(slug, recipe);
|
|
||||||
state.form = false;
|
|
||||||
state.jsonEditor = false;
|
|
||||||
if (data?.slug) {
|
|
||||||
router.push("/recipe/" + data.slug);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteRecipe(slug: string) {
|
|
||||||
const { data } = await api.recipes.deleteOne(slug);
|
|
||||||
if (data?.slug) {
|
|
||||||
router.push("/");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function printRecipe() {
|
|
||||||
window.print();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function closeEditor() {
|
|
||||||
state.form = false;
|
|
||||||
state.jsonEditor = false;
|
|
||||||
await fetchRecipe();
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleJson() {
|
|
||||||
state.jsonEditor = !state.jsonEditor;
|
|
||||||
}
|
|
||||||
|
|
||||||
const scaledYield = computed(() => {
|
|
||||||
const regMatchNum = /\d+/;
|
|
||||||
const yieldString = recipe.value?.recipeYield;
|
|
||||||
const num = yieldString?.match(regMatchNum);
|
|
||||||
|
|
||||||
if (num && num?.length > 0) {
|
|
||||||
const yieldAsInt = parseInt(num[0]);
|
|
||||||
return yieldString?.replace(num[0], String(yieldAsInt * state.scale));
|
|
||||||
}
|
|
||||||
|
|
||||||
return recipe.value?.recipeYield;
|
|
||||||
});
|
|
||||||
|
|
||||||
const basicYield = computed(() => {
|
|
||||||
const regMatchNum = /\d+/;
|
|
||||||
const yieldString = recipe.value?.recipeYield;
|
|
||||||
const num = yieldString?.match(regMatchNum);
|
|
||||||
|
|
||||||
if (num && num?.length > 0) {
|
|
||||||
const yieldAsInt = parseInt(num[0]);
|
|
||||||
return yieldString?.replace(num[0], String(yieldAsInt));
|
|
||||||
}
|
|
||||||
|
|
||||||
return recipe.value?.recipeYield;
|
|
||||||
});
|
|
||||||
|
|
||||||
async function uploadImage(fileObject: File) {
|
|
||||||
if (!recipe.value || !recipe.value.slug) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
|
|
||||||
if (newVersion?.data?.image) {
|
|
||||||
recipe.value.image = newVersion.data.image;
|
|
||||||
}
|
|
||||||
state.imageKey++;
|
|
||||||
}
|
|
||||||
|
|
||||||
function addStep(steps: Array<string> | null = null) {
|
|
||||||
if (!recipe.value?.recipeInstructions) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (steps) {
|
|
||||||
const cleanedSteps = steps.map((step) => {
|
|
||||||
return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
|
|
||||||
});
|
|
||||||
|
|
||||||
recipe.value.recipeInstructions.push(...cleanedSteps);
|
|
||||||
} else {
|
|
||||||
recipe.value.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addIngredient(ingredients: Array<string> | null = null) {
|
|
||||||
if (ingredients?.length) {
|
|
||||||
const newIngredients = ingredients.map((x) => {
|
|
||||||
return {
|
|
||||||
referenceId: uuid4(),
|
|
||||||
title: "",
|
|
||||||
note: x,
|
|
||||||
unit: undefined,
|
|
||||||
food: undefined,
|
|
||||||
disableAmount: true,
|
|
||||||
quantity: 1,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
if (newIngredients) {
|
|
||||||
recipe?.value?.recipeIngredient?.push(...newIngredients);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
recipe?.value?.recipeIngredient?.push({
|
|
||||||
referenceId: uuid4(),
|
|
||||||
title: "",
|
|
||||||
note: "",
|
|
||||||
unit: undefined,
|
|
||||||
food: undefined,
|
|
||||||
disableAmount: true,
|
|
||||||
quantity: 1,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Recipe Tools
|
|
||||||
|
|
||||||
const toolStore = useToolStore();
|
|
||||||
|
|
||||||
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
|
|
||||||
const { recipeMeta } = useRecipeMeta();
|
|
||||||
useMeta(recipeMeta(recipe));
|
|
||||||
|
|
||||||
const hasFoodOrUnit = computed(() => {
|
|
||||||
if (!recipe.value) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (recipe.value.recipeIngredient) {
|
|
||||||
for (const ingredient of recipe.value.recipeIngredient) {
|
|
||||||
if (ingredient.food || ingredient.unit) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
const paserToolTip = computed(() => {
|
|
||||||
if (recipe.value?.settings?.disableAmount) {
|
|
||||||
return "Enable ingredient amounts to use this feature";
|
|
||||||
} else if (hasFoodOrUnit.value) {
|
|
||||||
return "Recipes with units or foods defined cannot be parsed.";
|
|
||||||
}
|
|
||||||
return "Parse ingredients";
|
|
||||||
});
|
|
||||||
|
|
||||||
const drag = ref(false);
|
|
||||||
|
|
||||||
// ===============================================================
|
|
||||||
// Scale
|
|
||||||
|
|
||||||
const setScale = (newScale: number) => {
|
|
||||||
state.scale = newScale;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
// Wake Lock
|
|
||||||
drag,
|
|
||||||
wakeIsSupported,
|
|
||||||
isActive,
|
|
||||||
lockScreen,
|
|
||||||
unlockScreen,
|
|
||||||
wakeLock,
|
|
||||||
//
|
|
||||||
hasFoodOrUnit,
|
|
||||||
paserToolTip,
|
|
||||||
originalRecipe,
|
|
||||||
createApiExtra,
|
|
||||||
apiNewKey,
|
|
||||||
enableLandscape,
|
|
||||||
imageHeight,
|
|
||||||
scaledYield,
|
|
||||||
basicYield,
|
|
||||||
toggleJson,
|
|
||||||
...toRefs(state),
|
|
||||||
recipe,
|
|
||||||
api,
|
|
||||||
loading,
|
|
||||||
addStep,
|
|
||||||
setScale,
|
|
||||||
deleteRecipe,
|
|
||||||
printRecipe,
|
|
||||||
closeEditor,
|
|
||||||
toggleEdit,
|
|
||||||
updateRecipe,
|
|
||||||
uploadImage,
|
|
||||||
validators,
|
|
||||||
recipeImage,
|
|
||||||
addIngredient,
|
|
||||||
removeApiExtra,
|
|
||||||
toolStore,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
head: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.flip-list-move {
|
|
||||||
transition: transform 0.5s;
|
|
||||||
}
|
|
||||||
.no-move {
|
|
||||||
transition: transform 0s;
|
|
||||||
}
|
|
||||||
.ghost {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.list-group {
|
|
||||||
min-height: 38px;
|
|
||||||
}
|
|
||||||
.list-group-item {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.list-group-item i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user