mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,21 +1,34 @@
|
|||
<template>
|
||||
<section @keyup.ctrl.90="undoMerge">
|
||||
<section @keyup.ctrl.z="undoMerge">
|
||||
<!-- Ingredient Link Editor -->
|
||||
<v-dialog v-if="dialog" v-model="dialog" width="600">
|
||||
<v-dialog
|
||||
v-if="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>
|
||||
<v-sheet
|
||||
color="primary"
|
||||
class="mt-n1 mb-3 pa-3 d-flex align-center"
|
||||
style="border-radius: 6px; width: 100%;"
|
||||
>
|
||||
<v-icon
|
||||
size="large"
|
||||
start
|
||||
>
|
||||
{{ $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-toolbar-title class="headline">
|
||||
{{ $t("recipe.ingredient-linker") }}
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</v-sheet>
|
||||
|
||||
<v-card-text class="pt-4">
|
||||
<p>
|
||||
{{ activeText }}
|
||||
</p>
|
||||
<v-divider class="mb-4"></v-divider>
|
||||
<v-divider class="mb-4" />
|
||||
<v-checkbox
|
||||
v-for="ing in unusedIngredients"
|
||||
:key="ing.referenceId"
|
||||
|
|
@ -29,7 +42,9 @@
|
|||
</v-checkbox>
|
||||
|
||||
<template v-if="usedIngredients.length > 0">
|
||||
<h4 class="py-3 ml-1">{{ $t("recipe.linked-to-other-step") }}</h4>
|
||||
<h4 class="py-3 ml-1">
|
||||
{{ $t("recipe.linked-to-other-step") }}
|
||||
</h4>
|
||||
<v-checkbox
|
||||
v-for="ing in usedIngredients"
|
||||
:key="ing.referenceId"
|
||||
|
|
@ -44,19 +59,38 @@
|
|||
</template>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions>
|
||||
<BaseButton cancel @click="dialog = false"> </BaseButton>
|
||||
<v-spacer></v-spacer>
|
||||
<BaseButton
|
||||
cancel
|
||||
@click="dialog = false"
|
||||
/>
|
||||
<v-spacer />
|
||||
<div class="d-flex flex-wrap justify-end">
|
||||
<BaseButton class="my-1" color="info" @click="autoSetReferences">
|
||||
<template #icon> {{ $globals.icons.robot }}</template>
|
||||
<BaseButton
|
||||
class="my-1"
|
||||
color="info"
|
||||
@click="autoSetReferences"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.robot }}
|
||||
</template>
|
||||
{{ $t("recipe.auto") }}
|
||||
</BaseButton>
|
||||
<BaseButton class="ml-2 my-1" save @click="setIngredientIds"> </BaseButton>
|
||||
<BaseButton v-if="availableNextStep" class="ml-2 my-1" @click="saveAndOpenNextLinkIngredients">
|
||||
<template #icon> {{ $globals.icons.forward }}</template>
|
||||
<BaseButton
|
||||
class="ml-2 my-1"
|
||||
save
|
||||
@click="setIngredientIds"
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="availableNextStep"
|
||||
class="ml-2 my-1"
|
||||
@click="saveAndOpenNextLinkIngredients"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.forward }}
|
||||
</template>
|
||||
{{ $t("recipe.nextStep") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
|
@ -65,169 +99,200 @@
|
|||
</v-dialog>
|
||||
|
||||
<div class="d-flex justify-space-between justify-start">
|
||||
<h2 v-if="!isCookMode" class="mb-4 mt-1">{{ $t("recipe.instructions") }}</h2>
|
||||
<BaseButton v-if="!isEditForm && !isCookMode" minor cancel color="primary" @click="toggleCookMode()">
|
||||
<h2
|
||||
v-if="!isCookMode"
|
||||
class="mt-1 text-h5 font-weight-medium opacity-80"
|
||||
>
|
||||
{{ $t("recipe.instructions") }}
|
||||
</h2>
|
||||
<BaseButton
|
||||
v-if="!isEditForm && !isCookMode"
|
||||
minor
|
||||
cancel
|
||||
color="primary"
|
||||
@click="toggleCookMode()"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.primary }}
|
||||
</template>
|
||||
{{ $t("recipe.cook-mode") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<draggable
|
||||
<VueDraggable
|
||||
v-model="instructionList"
|
||||
:disabled="!isEditForm"
|
||||
:value="value"
|
||||
handle=".handle"
|
||||
delay="250"
|
||||
:delay="250"
|
||||
:delay-on-touch-only="true"
|
||||
v-bind="{
|
||||
animation: 200,
|
||||
group: 'recipe-instructions',
|
||||
ghostClass: 'ghost',
|
||||
}"
|
||||
@input="updateIndex"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
|
||||
<div v-for="(step, index) in value" :key="step.id" class="list-group-item">
|
||||
<v-app-bar
|
||||
<TransitionGroup
|
||||
type="transition"
|
||||
>
|
||||
<div
|
||||
v-for="(step, index) in instructionList"
|
||||
:key="step.id!"
|
||||
class="list-group-item"
|
||||
>
|
||||
<v-sheet
|
||||
v-if="step.id && showTitleEditor[step.id]"
|
||||
class="primary mt-6"
|
||||
style="cursor: pointer"
|
||||
dark
|
||||
dense
|
||||
rounded
|
||||
color="primary"
|
||||
class="mt-6 mb-2 d-flex align-center"
|
||||
:class="isEditForm ? 'pa-2' : 'pa-3'"
|
||||
style="border-radius: 6px; cursor: pointer; width: 100%;"
|
||||
@click="toggleCollapseSection(index)"
|
||||
>
|
||||
<v-toolbar-title v-if="!isEditForm" class="headline">
|
||||
<v-app-bar-title> {{ step.title }} </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
<v-text-field
|
||||
v-if="isEditForm"
|
||||
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 }">
|
||||
<template v-if="isEditForm">
|
||||
<v-text-field
|
||||
v-model="step.title"
|
||||
class="pa-0"
|
||||
density="compact"
|
||||
variant="solo"
|
||||
flat
|
||||
:placeholder="$t('recipe.section-title')"
|
||||
bg-color="primary"
|
||||
hide-details
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-toolbar-title class="section-title-text">
|
||||
{{ step.title }}
|
||||
</v-toolbar-title>
|
||||
</template>
|
||||
</v-sheet>
|
||||
<v-hover v-slot="{ isHovering }">
|
||||
<v-card
|
||||
class="my-3"
|
||||
:class="[{ 'on-hover': hover }, isChecked(index)]"
|
||||
:elevation="hover ? 12 : 2"
|
||||
:class="[{ 'on-hover': isHovering }, isChecked(index)]"
|
||||
:elevation="isHovering ? 12 : 2"
|
||||
:ripple="false"
|
||||
@click="toggleDisabled(index)"
|
||||
>
|
||||
<v-card-title :class="{ 'pb-0': !isChecked(index) }">
|
||||
<v-text-field
|
||||
v-if="isEditForm"
|
||||
v-model="step.summary"
|
||||
class="headline handle"
|
||||
hide-details
|
||||
dense
|
||||
solo
|
||||
flat
|
||||
:placeholder="$t('recipe.step-index', { step: index + 1 })"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon size="26">{{ $globals.icons.arrowUpDown }}</v-icon>
|
||||
<div class="d-flex align-center">
|
||||
<v-text-field
|
||||
v-if="isEditForm"
|
||||
v-model="step.summary"
|
||||
class="headline handle"
|
||||
hide-details
|
||||
density="compact"
|
||||
variant="solo"
|
||||
flat
|
||||
:placeholder="$t('recipe.step-index', { step: index + 1 })"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon size="26">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<span v-else>
|
||||
{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
|
||||
</span>
|
||||
<template v-if="isEditForm">
|
||||
<div class="ml-auto">
|
||||
<BaseButtonGroup
|
||||
:large="false"
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.dotsVertical,
|
||||
text: '',
|
||||
event: 'open',
|
||||
children: [
|
||||
{
|
||||
text: $t('recipe.toggle-section'),
|
||||
event: 'toggle-section',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.link-ingredients'),
|
||||
event: 'link-ingredients',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.upload-image'),
|
||||
event: 'upload-image',
|
||||
},
|
||||
{
|
||||
icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
|
||||
text: previewStates[index] ? $t('recipe.edit-markdown') : $t('markdown-editor.preview-markdown-button-label'),
|
||||
event: 'preview-step',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
text: $t('recipe.merge-above'),
|
||||
event: 'merge-above',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.move-to-top'),
|
||||
event: 'move-to-top',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.move-to-bottom'),
|
||||
event: 'move-to-bottom',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.insert-above'),
|
||||
event: 'insert-above',
|
||||
},
|
||||
{
|
||||
text: $t('recipe.insert-below'),
|
||||
event: 'insert-below',
|
||||
},
|
||||
],
|
||||
},
|
||||
]"
|
||||
@merge-above="mergeAbove(index - 1, index)"
|
||||
@move-to-top="moveTo('top', index)"
|
||||
@move-to-bottom="moveTo('bottom', index)"
|
||||
@insert-above="insert(index)"
|
||||
@insert-below="insert(index + 1)"
|
||||
@toggle-section="toggleShowTitle(step.id!)"
|
||||
@link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
|
||||
@preview-step="togglePreviewState(index)"
|
||||
@upload-image="openImageUpload(index)"
|
||||
@delete="instructionList.splice(index, 1)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<span v-else>
|
||||
{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
|
||||
</span>
|
||||
<template v-if="isEditForm">
|
||||
<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: $tc('recipe.toggle-section'),
|
||||
event: 'toggle-section',
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.link-ingredients'),
|
||||
event: 'link-ingredients',
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.upload-image'),
|
||||
event: 'upload-image'
|
||||
},
|
||||
{
|
||||
icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
|
||||
text: previewStates[index] ? $tc('recipe.edit-markdown') : $tc('markdown-editor.preview-markdown-button-label'),
|
||||
event: 'preview-step',
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.merge-above'),
|
||||
event: 'merge-above',
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.move-to-top'),
|
||||
event: 'move-to-top',
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.move-to-bottom'),
|
||||
event: 'move-to-bottom',
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.insert-above'),
|
||||
event: 'insert-above'
|
||||
},
|
||||
{
|
||||
text: $tc('recipe.insert-below'),
|
||||
event: 'insert-below'
|
||||
},
|
||||
],
|
||||
},
|
||||
]"
|
||||
@merge-above="mergeAbove(index - 1, index)"
|
||||
@move-to-top="moveTo('top', index)"
|
||||
@move-to-bottom="moveTo('bottom', index)"
|
||||
@insert-above="insert(index)"
|
||||
@insert-below="insert(index+1)"
|
||||
@toggle-section="toggleShowTitle(step.id)"
|
||||
@link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
|
||||
@preview-step="togglePreviewState(index)"
|
||||
@upload-image="openImageUpload(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-fade-transition>
|
||||
<v-icon
|
||||
v-show="isChecked(index)"
|
||||
size="24"
|
||||
class="ml-auto"
|
||||
color="success"
|
||||
>
|
||||
{{ $globals.icons.checkboxMarkedCircle }}
|
||||
</v-icon>
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<v-progress-linear v-if="isEditForm && loadingStates[index]" :active="true" :indeterminate="true" />
|
||||
<v-progress-linear
|
||||
v-if="isEditForm && loadingStates[index]"
|
||||
:active="true"
|
||||
:indeterminate="true"
|
||||
/>
|
||||
|
||||
<!-- Content -->
|
||||
<DropZone @drop="(f) => handleImageDrop(index, f)">
|
||||
<v-card-text
|
||||
v-if="isEditForm"
|
||||
@click="$emit('click-instruction-field', `${index}.text`)"
|
||||
v-if="isEditForm"
|
||||
@click="$emit('click-instruction-field', `${index}.text`)"
|
||||
>
|
||||
<MarkdownEditor
|
||||
v-model="value[index]['text']"
|
||||
v-model="instructionList[index]['text']"
|
||||
v-model:preview="previewStates[index]"
|
||||
class="mb-2"
|
||||
:preview.sync="previewStates[index]"
|
||||
:display-preview="false"
|
||||
:textarea="{
|
||||
hint: $t('recipe.attach-images-hint'),
|
||||
|
|
@ -236,14 +301,16 @@
|
|||
/>
|
||||
<RecipeIngredientHtml
|
||||
v-for="ing in step.ingredientReferences"
|
||||
:key="ing.referenceId"
|
||||
:markup="getIngredientByRefId(ing.referenceId)"
|
||||
:key="ing.referenceId!"
|
||||
:markup="getIngredientByRefId(ing.referenceId!)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</DropZone>
|
||||
<v-expand-transition>
|
||||
<div v-show="!isChecked(index) && !isEditForm" class="m-0 p-0">
|
||||
|
||||
<div
|
||||
v-if="!isChecked(index) && !isEditForm"
|
||||
class="m-0 p-0"
|
||||
>
|
||||
<v-card-text class="markdown">
|
||||
<v-row>
|
||||
<v-col
|
||||
|
|
@ -254,7 +321,7 @@
|
|||
<div class="ml-n4">
|
||||
<RecipeIngredients
|
||||
:value="recipe.recipeIngredient.filter((ing) => {
|
||||
if(!step.ingredientReferences) return false
|
||||
if (!step.ingredientReferences) return false
|
||||
return step.ingredientReferences.map((ref) => ref.referenceId).includes(ing.referenceId || '')
|
||||
})"
|
||||
:scale="scale"
|
||||
|
|
@ -263,9 +330,15 @@
|
|||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-divider v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0 && $vuetify.breakpoint.smAndUp" vertical ></v-divider>
|
||||
<v-divider
|
||||
v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0 && $vuetify.display.smAndUp"
|
||||
vertical
|
||||
/>
|
||||
<v-col>
|
||||
<SafeMarkdown class="markdown" :source="step.text" />
|
||||
<SafeMarkdown
|
||||
class="markdown"
|
||||
:source="step.text"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
|
@ -275,34 +348,27 @@
|
|||
</v-hover>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</draggable>
|
||||
<v-divider v-if="!isCookMode" class="mt-10 d-flex d-md-none"/>
|
||||
</VueDraggable>
|
||||
<v-divider
|
||||
v-if="!isCookMode"
|
||||
class="mt-10 d-flex d-md-none"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import draggable from "vuedraggable";
|
||||
import {
|
||||
ref,
|
||||
toRefs,
|
||||
reactive,
|
||||
defineComponent,
|
||||
watch,
|
||||
onMounted,
|
||||
useContext,
|
||||
computed,
|
||||
nextTick,
|
||||
} from "@nuxtjs/composition-api";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import RecipeIngredientHtml from "../../RecipeIngredientHtml.vue";
|
||||
import { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
|
||||
import type { RecipeStep, IngredientReferences, RecipeIngredient, RecipeAsset, Recipe } from "~/lib/api/types/recipe";
|
||||
import { parseIngredientText } from "~/composables/recipes";
|
||||
import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
|
||||
import { uuid4 } from "~/composables/use-utils";
|
||||
import { useUserApi, useStaticRoutes } from "~/composables/api";
|
||||
import { usePageState } from "~/composables/recipe-page/shared-state";
|
||||
import { useExtractIngredientReferences } from "~/composables/recipe-page/use-extract-ingredient-references";
|
||||
import { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||
import DropZone from "~/components/global/DropZone.vue";
|
||||
import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
|
||||
|
||||
interface MergerHistory {
|
||||
target: number;
|
||||
source: number;
|
||||
|
|
@ -310,15 +376,15 @@ interface MergerHistory {
|
|||
sourceText: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
draggable,
|
||||
VueDraggable,
|
||||
RecipeIngredientHtml,
|
||||
DropZone,
|
||||
RecipeIngredients
|
||||
RecipeIngredients,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Array as () => RecipeStep[],
|
||||
required: false,
|
||||
default: () => [],
|
||||
|
|
@ -336,10 +402,11 @@ export default defineComponent({
|
|||
default: 1,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue", "click-instruction-field", "update:assets"],
|
||||
|
||||
setup(props, context) {
|
||||
const { i18n, req } = useContext();
|
||||
const BASE_URL = detectServerBaseUrl(req);
|
||||
const i18n = useI18n();
|
||||
const BASE_URL = useRequestURL().origin;
|
||||
|
||||
const { isCookMode, toggleCookMode, isEditForm } = usePageState(props.recipe.slug);
|
||||
|
||||
|
|
@ -374,12 +441,12 @@ export default defineComponent({
|
|||
return !(title === null || title === "" || title === undefined);
|
||||
}
|
||||
|
||||
watch(props.value, (v) => {
|
||||
watch(props.modelValue, (v) => {
|
||||
state.disabledSteps = [];
|
||||
|
||||
v.forEach((element: RecipeStep) => {
|
||||
if (element.id !== undefined) {
|
||||
showTitleEditor.value[element.id] = hasSectionTitle(element.title);
|
||||
showTitleEditor.value[element.id!] = hasSectionTitle(element.title!);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -388,9 +455,9 @@ export default defineComponent({
|
|||
|
||||
// Eliminate state with an eager call to watcher?
|
||||
onMounted(() => {
|
||||
props.value.forEach((element: RecipeStep) => {
|
||||
props.modelValue.forEach((element: RecipeStep) => {
|
||||
if (element.id !== undefined) {
|
||||
showTitleEditor.value[element.id] = hasSectionTitle(element.title);
|
||||
showTitleEditor.value[element.id!] = hasSectionTitle(element.title!);
|
||||
}
|
||||
|
||||
// showCookMode.value = false;
|
||||
|
|
@ -411,7 +478,8 @@ export default defineComponent({
|
|||
if (index !== -1) {
|
||||
state.disabledSteps.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
state.disabledSteps.push(stepIndex);
|
||||
}
|
||||
}
|
||||
|
|
@ -433,8 +501,19 @@ export default defineComponent({
|
|||
showTitleEditor.value = temp;
|
||||
}
|
||||
|
||||
function updateIndex(data: RecipeStep) {
|
||||
context.emit("input", data);
|
||||
const instructionList = ref<RecipeStep[]>([...props.modelValue]);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
instructionList.value = [...newVal];
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
function onDragEnd() {
|
||||
context.emit("update:modelValue", [...instructionList.value]);
|
||||
drag.value = false;
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
|
|
@ -445,21 +524,21 @@ export default defineComponent({
|
|||
|
||||
function openDialog(idx: number, text: string, refs?: IngredientReferences[]) {
|
||||
if (!refs) {
|
||||
props.value[idx].ingredientReferences = [];
|
||||
refs = props.value[idx].ingredientReferences as IngredientReferences[];
|
||||
instructionList.value[idx].ingredientReferences = [];
|
||||
refs = props.modelValue[idx].ingredientReferences as IngredientReferences[];
|
||||
}
|
||||
|
||||
setUsedIngredients();
|
||||
activeText.value = text;
|
||||
activeIndex.value = idx;
|
||||
state.dialog = true;
|
||||
activeRefs.value = refs.map((ref) => ref.referenceId ?? "");
|
||||
activeRefs.value = refs.map(ref => ref.referenceId ?? "");
|
||||
}
|
||||
|
||||
const availableNextStep = computed(() => activeIndex.value < props.value.length - 1);
|
||||
const availableNextStep = computed(() => activeIndex.value < props.modelValue.length - 1);
|
||||
|
||||
function setIngredientIds() {
|
||||
const instruction = props.value[activeIndex.value];
|
||||
const instruction = props.modelValue[activeIndex.value];
|
||||
instruction.ingredientReferences = activeRefs.value.map((ref) => {
|
||||
return {
|
||||
referenceId: ref,
|
||||
|
|
@ -468,7 +547,7 @@ export default defineComponent({
|
|||
|
||||
// Update the visibility of the cook mode button
|
||||
showCookMode.value = false;
|
||||
props.value.forEach((element) => {
|
||||
props.modelValue.forEach((element) => {
|
||||
if (showCookMode.value === false && element.ingredientReferences && element.ingredientReferences.length > 0) {
|
||||
showCookMode.value = true;
|
||||
}
|
||||
|
|
@ -479,24 +558,23 @@ export default defineComponent({
|
|||
function saveAndOpenNextLinkIngredients() {
|
||||
const currentStepIndex = activeIndex.value;
|
||||
|
||||
if(!availableNextStep.value) {
|
||||
if (!availableNextStep.value) {
|
||||
return; // no next step, the button calling this function should not be shown
|
||||
}
|
||||
|
||||
setIngredientIds();
|
||||
const nextStep = props.value[currentStepIndex + 1];
|
||||
const nextStep = props.modelValue[currentStepIndex + 1];
|
||||
// close dialog before opening to reset the scroll position
|
||||
nextTick(() => openDialog(currentStepIndex + 1, nextStep.text, nextStep.ingredientReferences));
|
||||
|
||||
}
|
||||
|
||||
function setUsedIngredients() {
|
||||
const usedRefs: { [key: string]: boolean } = {};
|
||||
|
||||
props.value.forEach((element) => {
|
||||
props.modelValue.forEach((element) => {
|
||||
element.ingredientReferences?.forEach((ref) => {
|
||||
if (ref.referenceId !== undefined) {
|
||||
usedRefs[ref.referenceId] = true;
|
||||
usedRefs[ref.referenceId!] = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -515,7 +593,7 @@ export default defineComponent({
|
|||
props.recipe.recipeIngredient,
|
||||
activeRefs.value,
|
||||
activeText.value,
|
||||
props.recipe.settings.disableAmount
|
||||
props.recipe.settings.disableAmount,
|
||||
).forEach((ingredient: string) => activeRefs.value.push(ingredient));
|
||||
}
|
||||
|
||||
|
|
@ -535,10 +613,8 @@ export default defineComponent({
|
|||
return "";
|
||||
}
|
||||
|
||||
const ing = ingredientLookup.value[refId] ?? "";
|
||||
if (ing === "") {
|
||||
return "";
|
||||
}
|
||||
const ing = ingredientLookup.value[refId];
|
||||
if (!ing) return "";
|
||||
return parseIngredientText(ing, props.recipe.settings.disableAmount, props.scale);
|
||||
}
|
||||
|
||||
|
|
@ -554,12 +630,12 @@ export default defineComponent({
|
|||
mergeHistory.value.push({
|
||||
target,
|
||||
source,
|
||||
targetText: props.value[target].text,
|
||||
sourceText: props.value[source].text,
|
||||
targetText: props.modelValue[target].text,
|
||||
sourceText: props.modelValue[source].text,
|
||||
});
|
||||
|
||||
props.value[target].text += " " + props.value[source].text;
|
||||
props.value.splice(source, 1);
|
||||
instructionList.value[target].text += " " + props.modelValue[source].text;
|
||||
instructionList.value.splice(source, 1);
|
||||
}
|
||||
|
||||
function undoMerge(event: KeyboardEvent) {
|
||||
|
|
@ -573,8 +649,8 @@ export default defineComponent({
|
|||
return;
|
||||
}
|
||||
|
||||
props.value[lastMerge.target].text = lastMerge.targetText;
|
||||
props.value.splice(lastMerge.source, 0, {
|
||||
instructionList.value[lastMerge.target].text = lastMerge.targetText;
|
||||
instructionList.value.splice(lastMerge.source, 0, {
|
||||
id: uuid4(),
|
||||
title: "",
|
||||
text: lastMerge.sourceText,
|
||||
|
|
@ -585,14 +661,15 @@ export default defineComponent({
|
|||
|
||||
function moveTo(dest: string, source: number) {
|
||||
if (dest === "top") {
|
||||
props.value.unshift(props.value.splice(source, 1)[0]);
|
||||
} else {
|
||||
props.value.push(props.value.splice(source, 1)[0]);
|
||||
instructionList.value.unshift(instructionList.value.splice(source, 1)[0]);
|
||||
}
|
||||
else {
|
||||
instructionList.value.push(instructionList.value.splice(source, 1)[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function insert(dest: number) {
|
||||
props.value.splice(dest, 0, { id: uuid4(), text: "", title: "", ingredientReferences: [] });
|
||||
instructionList.value.splice(dest, 0, { id: uuid4(), text: "", title: "", ingredientReferences: [] });
|
||||
}
|
||||
|
||||
const previewStates = ref<boolean[]>([]);
|
||||
|
|
@ -606,19 +683,21 @@ export default defineComponent({
|
|||
function toggleCollapseSection(index: number) {
|
||||
const sectionSteps: number[] = [];
|
||||
|
||||
for (let i = index; i < props.value.length; i++) {
|
||||
if (!(i === index) && hasSectionTitle(props.value[i].title)) {
|
||||
for (let i = index; i < instructionList.value.length; i++) {
|
||||
if (!(i === index) && hasSectionTitle(instructionList.value[i].title!)) {
|
||||
break;
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
sectionSteps.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
const allCollapsed = sectionSteps.every((idx) => state.disabledSteps.includes(idx));
|
||||
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.filter(idx => !sectionSteps.includes(idx));
|
||||
}
|
||||
else {
|
||||
state.disabledSteps = [...state.disabledSteps, ...sectionSteps];
|
||||
}
|
||||
}
|
||||
|
|
@ -674,7 +753,7 @@ export default defineComponent({
|
|||
context.emit("update:assets", [...props.assets, data]);
|
||||
const assetUrl = BASE_URL + recipeAssetPath(props.recipe.id, data.fileName as string);
|
||||
const text = `<img src="${assetUrl}" height="100%" width="100%"/>`;
|
||||
props.value[index].text += text;
|
||||
instructionList.value[index].text += text;
|
||||
}
|
||||
|
||||
function openImageUpload(index: number) {
|
||||
|
|
@ -690,6 +769,8 @@ export default defineComponent({
|
|||
input.click();
|
||||
}
|
||||
|
||||
const breakpoint = useDisplay();
|
||||
|
||||
return {
|
||||
// Image Uploader
|
||||
toggleDragMode,
|
||||
|
|
@ -699,6 +780,7 @@ export default defineComponent({
|
|||
loadingStates,
|
||||
|
||||
// Rest
|
||||
onDragEnd,
|
||||
drag,
|
||||
togglePreviewState,
|
||||
toggleCollapseSection,
|
||||
|
|
@ -719,7 +801,7 @@ export default defineComponent({
|
|||
toggleDisabled,
|
||||
isChecked,
|
||||
toggleShowTitle,
|
||||
updateIndex,
|
||||
instructionList,
|
||||
autoSetReferences,
|
||||
parseIngredientText,
|
||||
toggleCookMode,
|
||||
|
|
@ -727,6 +809,7 @@ export default defineComponent({
|
|||
isCookMode,
|
||||
isEditForm,
|
||||
insert,
|
||||
breakpoint,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -738,28 +821,32 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
/** Select all li under .markdown class */
|
||||
.markdown >>> ul > li {
|
||||
.markdown :deep(ul > li) {
|
||||
display: list-item;
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
|
||||
/** Select all li under .markdown class */
|
||||
.markdown >>> ol > li {
|
||||
.markdown :deep(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 i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -780,4 +867,8 @@ export default defineComponent({
|
|||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.v-text-field >>> input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue