From 846a4796e2faea78c6cba817c58ba5938146fbe3 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 31 Dec 2024 15:23:44 +0100
Subject: [PATCH] recipe view as model chain and ingredient checkbox

---
 cookbook/serializer.py                        |  1 +
 .../components/dialogs/ModelMergeDialog.vue   |  2 +-
 .../components/display/IngredientsTable.vue   | 12 +++---
 .../display/IngredientsTableRow.vue           | 21 +++++-----
 vue3/src/components/display/RecipeView.vue    | 41 +++++++++----------
 vue3/src/components/display/Step.vue          | 22 +++++-----
 vue3/src/components/display/StepsOverview.vue |  4 +-
 vue3/src/components/display/Timer.vue         |  2 +-
 vue3/src/locales/ar.json                      |  2 +
 vue3/src/locales/bg.json                      |  2 +
 vue3/src/locales/ca.json                      |  2 +
 vue3/src/locales/cs.json                      |  2 +
 vue3/src/locales/da.json                      |  2 +
 vue3/src/locales/de.json                      |  2 +
 vue3/src/locales/el.json                      |  2 +
 vue3/src/locales/en.json                      |  2 +
 vue3/src/locales/es.json                      |  2 +
 vue3/src/locales/fi.json                      |  2 +
 vue3/src/locales/fr.json                      |  2 +
 vue3/src/locales/he.json                      |  2 +
 vue3/src/locales/hu.json                      |  2 +
 vue3/src/locales/hy.json                      |  2 +
 vue3/src/locales/id.json                      |  2 +
 vue3/src/locales/is.json                      |  2 +
 vue3/src/locales/it.json                      |  2 +
 vue3/src/locales/lt.json                      |  2 +
 vue3/src/locales/nb_NO.json                   |  2 +
 vue3/src/locales/nl.json                      |  2 +
 vue3/src/locales/pl.json                      |  2 +
 vue3/src/locales/pt.json                      |  2 +
 vue3/src/locales/pt_BR.json                   |  2 +
 vue3/src/locales/ro.json                      |  2 +
 vue3/src/locales/ru.json                      |  2 +
 vue3/src/locales/sl.json                      |  2 +
 vue3/src/locales/sv.json                      |  2 +
 vue3/src/locales/tr.json                      |  2 +
 vue3/src/locales/uk.json                      |  2 +
 vue3/src/locales/zh_Hans.json                 |  2 +
 vue3/src/locales/zh_Hant.json                 |  2 +
 vue3/src/pages/RecipeViewPage.vue             |  2 +-
 40 files changed, 113 insertions(+), 56 deletions(-)

diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 8f5401e44..03f56c53e 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -808,6 +808,7 @@ class IngredientSimpleSerializer(WritableNestedModelSerializer):
     used_in_recipes = serializers.SerializerMethodField('get_used_in_recipes')
     amount = CustomDecimalField()
     conversions = serializers.SerializerMethodField('get_conversions')
+    checked = serializers.BooleanField(read_only=True, default=False, help_text='Just laziness to have a checked field on the frontend API client')
 
     @extend_schema_field(list)
     def get_used_in_recipes(self, obj):
diff --git a/vue3/src/components/dialogs/ModelMergeDialog.vue b/vue3/src/components/dialogs/ModelMergeDialog.vue
index 5232a2b5c..84232b805 100644
--- a/vue3/src/components/dialogs/ModelMergeDialog.vue
+++ b/vue3/src/components/dialogs/ModelMergeDialog.vue
@@ -37,7 +37,7 @@ const target = ref({} as Food)
 
 function mergeModel() {
     let api = new ApiApi()
-    if (target != null) {
+    if (target.value != null) {
         loading.value = true
         api.apiFoodMergeUpdate({id: props.sourceId!, food: {} as Food, target: target.value.id!}).then(r => {
             useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
index d2cf8573e..42e377c46 100644
--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-table density="compact" v-if="props.ingredients.length > 0">
+    <v-table density="compact" v-if="ingredients.length > 0">
 
         <tbody>
-        <ingredients-table-row v-for="i in props.ingredients" :ingredient="i" :key="i.id" :show-notes="props.showNotes"
+        <ingredients-table-row v-for="(ing, i) in ingredients" v-model="ingredients[i]" :key="ing.id" :show-notes="props.showNotes"
                                :ingredient-factor="ingredientFactor"></ingredients-table-row>
         </tbody>
 
@@ -15,11 +15,9 @@ import {Ingredient} from "@/openapi";
 import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
 import draggable from 'vuedraggable'
 
+const ingredients = defineModel<Ingredient[]>({required: true})
+
 const props = defineProps({
-    ingredients: {
-        type: Array as PropType<Array<Ingredient>>,
-        default: [],
-    },
     showNotes: {
         type: Boolean,
         default: true
@@ -33,7 +31,7 @@ const props = defineProps({
 const mutable_ingredients = ref([] as Ingredient[])
 
 onMounted(() => {
-    mutable_ingredients.value = props.ingredients
+    mutable_ingredients.value = ingredients.value
 })
 
 </script>
diff --git a/vue3/src/components/display/IngredientsTableRow.vue b/vue3/src/components/display/IngredientsTableRow.vue
index 899c21ebc..4625cc33b 100644
--- a/vue3/src/components/display/IngredientsTableRow.vue
+++ b/vue3/src/components/display/IngredientsTableRow.vue
@@ -1,15 +1,16 @@
 <template>
     <tr>
-        <template v-if="props.ingredient.isHeader">
-            <td colspan="4"><b>{{ props.ingredient.note }}</b></td>
+        <template v-if="ingredient.isHeader">
+            <td colspan="4"><b>{{ ingredient.note }}</b></td>
         </template>
         <template v-else>
-            <td>{{ props.ingredient.amount * props.ingredientFactor }}</td>
-            <td><span v-if="props.ingredient.unit != null">{{ props.ingredient.unit.name }}</span></td>
-            <td><span v-if="props.ingredient.food != null">{{ props.ingredient.food.name }}</span></td>
+            <td><v-checkbox-btn v-model="ingredient.checked" color="success"></v-checkbox-btn></td>
+            <td>{{ ingredient.amount * props.ingredientFactor }}</td>
+            <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
+            <td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
             <td v-if="props.showNotes">
-                <v-icon class="far fa-comment float-right" v-if="props.ingredient.note != '' && props.ingredient.note != undefined" @click="showTooltip = !showTooltip">
-                    <v-tooltip v-model="showTooltip" activator="parent" location="start">{{ props.ingredient.note }}</v-tooltip>
+                <v-icon class="far fa-comment float-right" v-if="ingredient.note != '' && ingredient.note != undefined" @click="showTooltip = !showTooltip">
+                    <v-tooltip v-model="showTooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
                 </v-icon>
             </td>
         </template>
@@ -21,11 +22,9 @@
 import {PropType, ref} from 'vue'
 import {Ingredient} from "@/openapi";
 
+const ingredient = defineModel<Ingredient>({required: true})
+
 const props = defineProps({
-    ingredient: {
-        type: {} as PropType<Ingredient>,
-        required: true
-    },
     showNotes: {
         type: Boolean,
         default: true
diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index c998dc7e1..1fe604b2d 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <template v-if="props.recipe.name == undefined">
+    <template v-if="recipe.name == undefined">
         <v-skeleton-loader type="card" class="mt-md-4 rounded-0"></v-skeleton-loader>
         <v-skeleton-loader type="article" class="mt-2"></v-skeleton-loader>
         <v-skeleton-loader type="article" class="mt-2"></v-skeleton-loader>
@@ -8,17 +8,17 @@
         <v-skeleton-loader type="list-item-avatar-three-line"></v-skeleton-loader>
     </template>
 
-    <template v-if="props.recipe.name != undefined">
+    <template v-if="recipe.name != undefined">
 
         <v-card class="mt-md-4 rounded-0">
             <recipe-image
                 max-height="25vh"
-                :recipe="props.recipe"
+                :recipe="recipe"
                 v-if="recipe.internal"
             >
                 <template #overlay>
-                    <v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy.displayName }}</v-chip>
-                    <keywords-component variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></keywords-component>
+                    <v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ recipe.createdBy.displayName }}</v-chip>
+                    <keywords-component variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></keywords-component>
                 </template>
             </recipe-image>
 
@@ -26,7 +26,7 @@
             <v-card>
                 <v-sheet class="d-flex align-center">
                     <span class="ps-2 text-h5  flex-grow-1 pa-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
-                        {{ props.recipe.name }}
+                        {{ recipe.name }}
                     </span>
                     <recipe-context-menu :recipe="recipe"></recipe-context-menu>
                 </v-sheet>
@@ -42,18 +42,18 @@
                 <v-container>
                     <v-row class="text-center text-body-2">
                         <v-col class="pt-1 pb-1">
-                            <i class="fas fa-cogs fa-fw mr-1"></i> {{ props.recipe.workingTime }} min<br/>
+                            <i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} min<br/>
                             <div class="text-grey">{{ $t('WorkingTime') }}</div>
                         </v-col>
                         <v-col class="pt-1 pb-1">
-                            <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ props.recipe.waitingTime }} min</div>
+                            <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} min</div>
                             <div class="text-grey">{{ $t('WaitingTime') }}</div>
                         </v-col>
                         <v-col class="pt-1 pb-1">
 
                             <div class="cursor-pointer">
                                 <i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
-                                <div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
+                                <div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
                                 <number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
                                 </number-scaler-dialog>
                             </div>
@@ -64,12 +64,12 @@
                 </v-container>
             </v-card>
 
-            <v-card class="mt-1" v-if="props.recipe.steps.length > 1">
-                <steps-overview :steps="props.recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
+            <v-card class="mt-1" v-if="recipe.steps.length > 1">
+                <steps-overview :steps="recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
             </v-card>
 
-            <v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
-                <step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
+            <v-card class="mt-1" v-for="(step, index) in recipe.steps" :key="step.id">
+                <step v-model="recipe.steps[index]" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
             </v-card>
         </template>
 
@@ -94,23 +94,22 @@ import PdfViewer from "../../../../vue/src/components/PdfViewer.vue";
 import ImageViewer from "../../../../vue/src/components/ImageViewer.vue";
 import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
 
+const recipe = defineModel<Recipe>({required: true})
+
 const props = defineProps({
-    recipe: {
-        type: Object as PropType<Recipe>,
-        required: true
-    }
+    
 })
 
 const servings = ref(1)
 const showFullRecipeName = ref(false)
 
 const ingredientFactor = computed(() => {
-    return servings.value / ((props.recipe.servings != undefined) ? props.recipe.servings : 1)
+    return servings.value / ((recipe.value.servings != undefined) ? recipe.value.servings : 1)
 })
 
-watch(() => props.recipe.servings, () => {
-    if (props.recipe.servings) {
-        servings.value = props.recipe.servings
+watch(() => recipe.value.servings, () => {
+    if (recipe.value.servings) {
+        servings.value = recipe.value.servings
     }
 })
 
diff --git a/vue3/src/components/display/Step.vue b/vue3/src/components/display/Step.vue
index 8a411076c..a3ed92a28 100644
--- a/vue3/src/components/display/Step.vue
+++ b/vue3/src/components/display/Step.vue
@@ -2,11 +2,11 @@
     <v-card>
         <v-card-title>
             <v-row>
-                <v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
+                <v-col><span v-if="step.name">{{ step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
                 <v-col class="text-right">
                     <v-btn-group density="compact" variant="tonal">
-                        <v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i
-                            class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}
+                        <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
+                            class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
                         </v-btn>
                         <v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw"
                                                                                                                      :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i>
@@ -16,14 +16,14 @@
             </v-row>
         </v-card-title>
         <template v-if="!stepChecked">
-            <timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
+            <timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
             <v-card-text>
                 <v-row>
-                    <v-col cols="12" md="6" v-if="props.step?.ingredients.length > 0">
-                        <ingredients-table :ingredients="props.step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
+                    <v-col cols="12" md="6" v-if="step.ingredients.length > 0">
+                        <ingredients-table v-model="step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
                     </v-col>
                     <v-col cols="12" md="6">
-                        <instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
+                        <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
                     </v-col>
                 </v-row>
             </v-card-text>
@@ -41,11 +41,9 @@ import {Step} from "@/openapi";
 import Instructions from "@/components/display/Instructions.vue";
 import Timer from "@/components/display/Timer.vue";
 
+const step = defineModel<Step>({required: true})
+
 const props = defineProps({
-    step: {
-        type: {} as PropType<Step>,
-        required: true,
-    },
     stepNumber: {
         type: Number,
         required: false,
@@ -61,7 +59,7 @@ const timerRunning = ref(false)
 const stepChecked = ref(false)
 
 const hasDetails = computed(() => {
-    return props.step.ingredients.length > 0 || (props.step.instruction != undefined && props.step.instruction.length > 0) || props.step.stepRecipeData != undefined || props.step.file != undefined
+    return step.value.ingredients.length > 0 || (step.value.instruction != undefined && step.value.instruction.length > 0) || step.value.stepRecipeData != undefined || step.value.file != undefined
 })
 
 </script>
diff --git a/vue3/src/components/display/StepsOverview.vue b/vue3/src/components/display/StepsOverview.vue
index b4cfeba84..5934fbc8b 100644
--- a/vue3/src/components/display/StepsOverview.vue
+++ b/vue3/src/components/display/StepsOverview.vue
@@ -1,13 +1,13 @@
 <template>
     <v-expansion-panels>
         <v-expansion-panel>
-            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> Steps Overview</v-expansion-panel-title>
+            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> {{$t('StepsOverview')}}</v-expansion-panel-title>
             <v-expansion-panel-text>
                 <v-container>
                     <v-row v-for="(s, i) in props.steps">
                         <v-col class="pa-1">
                             <b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
-                            <ingredients-table :ingredients="s.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
+                            <ingredients-table v-model="s.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
                         </v-col>
                     </v-row>
                 </v-container>
diff --git a/vue3/src/components/display/Timer.vue b/vue3/src/components/display/Timer.vue
index 8defdef1a..491887ea6 100644
--- a/vue3/src/components/display/Timer.vue
+++ b/vue3/src/components/display/Timer.vue
@@ -2,7 +2,7 @@
     <v-progress-linear :model-value="timerProgress" color="primary" height="5"></v-progress-linear>
     <v-alert :color="timerColor" class="rounded-0" variant="tonal">
         <v-alert-title><i class="fas fa-stopwatch mr-1"></i> {{ Duration.fromMillis(durationSeconds * 1000).toFormat('hh:mm:ss') }}</v-alert-title>
-        Finished at {{ DateTime.now().plus({'seconds': durationSeconds}).toLocaleString(DateTime.TIME_SIMPLE) }}
+        {{$t('FinishedAt')}} {{ DateTime.now().plus({'seconds': durationSeconds}).toLocaleString(DateTime.TIME_SIMPLE) }}
         <template #close>
             <v-btn-group divided>
                 <v-btn width="40" @click="changeTimer(-60)"><i class="fas fa-minus"></i>1</v-btn>
diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
index 4b7538c9e..145c42522 100644
--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -107,6 +107,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "Food": "",
   "FoodInherit": "",
   "FoodNotOnHand": "",
@@ -308,6 +309,7 @@
   "Step_Type": "",
   "Step_start_time": "",
   "Steps": "",
+  "StepsOverview": "",
   "SubstituteOnHand": "",
   "Substitutes": "",
   "Success": "",
diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
index 5239616c3..713de7860 100644
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -104,6 +104,7 @@
   "Fats": "Мазнини",
   "File": "Файл",
   "Files": "Файлове",
+  "FinishedAt": "",
   "Food": "Храна",
   "FoodInherit": "Хранителни наследствени полета",
   "FoodNotOnHand": "Нямате {храна} под ръка.",
@@ -301,6 +302,7 @@
   "Step_Type": "Стъпка Тип",
   "Step_start_time": "Стъпка Начално време",
   "Steps": "",
+  "StepsOverview": "",
   "SubstituteOnHand": "Имате заместител под ръка.",
   "Substitutes": "",
   "Success": "Успешно",
diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
index 45b762dc2..f8eca6e8e 100644
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -145,6 +145,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "First_name": "",
   "Food": "",
   "FoodInherit": "",
@@ -388,6 +389,7 @@
   "Step_Type": "Tipus de pas",
   "Step_start_time": "Hora d'inici",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "",
   "Sticky_Nav_Help": "",
   "SubstituteOnHand": "",
diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
index 7d44d67d8..4dab752a8 100644
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -145,6 +145,7 @@
   "Fats": "Tuky",
   "File": "Soubor",
   "Files": "Soubory",
+  "FinishedAt": "",
   "First_name": "Jméno",
   "Food": "Potravina",
   "FoodInherit": "Propisovatelná pole potraviny",
@@ -384,6 +385,7 @@
   "Step_Type": "Druh kroku",
   "Step_start_time": "Nastav počáteční čas",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Připnout navigační panel",
   "Sticky_Nav_Help": "Vždy zobrazit navigační panel na vrchu stránky.",
   "SubstituteOnHand": "Máte k dispozici náhradu.",
diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
index 8c663e2f5..97544ea8e 100644
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -133,6 +133,7 @@
   "Fats": "Fedtstoffer",
   "File": "Fil",
   "Files": "Filer",
+  "FinishedAt": "",
   "First_name": "Fornavn",
   "Food": "Mad",
   "FoodInherit": "Nedarvelige mad felter",
@@ -362,6 +363,7 @@
   "Step_Type": "Trin type",
   "Step_start_time": "Trin starttid",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Fastlåst navigation",
   "Sticky_Nav_Help": "Vis altid navigationsmenuen øverst på skærmen.",
   "SubstituteOnHand": "Du har erstatninger tilgængeligt.",
diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
index 27cd7a3c0..6a7e16b8a 100644
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -147,6 +147,7 @@
   "Fats": "Fette",
   "File": "Datei",
   "Files": "Dateien",
+  "FinishedAt": "Fertig um",
   "First_name": "Vorname",
   "Food": "Lebensmittel",
   "FoodInherit": "Lebensmittel vererbbare Felder",
@@ -391,6 +392,7 @@
   "Step_Type": "Schritt Typ",
   "Step_start_time": "Schritt Startzeit",
   "Steps": "Schritte",
+  "StepsOverview": "Schrittübersicht",
   "Sticky_Nav": "Navigationsleiste immer sichtbar (sticky navigation)",
   "Sticky_Nav_Help": "Navigationsleiste immer im Seitenkopf anzeigen.",
   "SubstituteOnHand": "Du hast eine Alternative vorrätig.",
diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
index bee2e8bd3..911841fb8 100644
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -129,6 +129,7 @@
   "Fats": "Λιπαρά",
   "File": "Αρχείο",
   "Files": "Αρχεία",
+  "FinishedAt": "",
   "First_name": "Όνομα",
   "Food": "Φαγητό",
   "FoodInherit": "Πεδία φαγητών που κληρονομούνται",
@@ -353,6 +354,7 @@
   "Step_Type": "Είδος βήματος",
   "Step_start_time": "Χρόνος αρχής βήματος",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Κολλητική πλοήγηση",
   "Sticky_Nav_Help": "Μόνιμη εμφάνιση του μενού πλοήγησης στο πάνω μέρος της οθόνης.",
   "SubstituteOnHand": "Έχετε διαθέσιμο ένα υποκατάστατο.",
diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
index 3101a47a5..aa38f460b 100644
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -146,6 +146,7 @@
   "Fats": "Fats",
   "File": "File",
   "Files": "Files",
+  "FinishedAt": "Finished at",
   "First_name": "First Name",
   "Food": "Food",
   "FoodInherit": "Food Inheritable Fields",
@@ -390,6 +391,7 @@
   "Step_Type": "Step Type",
   "Step_start_time": "Step start time",
   "Steps": "Steps",
+  "StepsOverview": "Steps Overview",
   "Sticky_Nav": "Sticky Navigation",
   "Sticky_Nav_Help": "Always show the navigation menu at the top of the screen.",
   "SubstituteOnHand": "You have a substitute on hand.",
diff --git a/vue3/src/locales/es.json b/vue3/src/locales/es.json
index 0568f6c99..dc23e5fba 100644
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -146,6 +146,7 @@
   "Fats": "Grasas",
   "File": "Archivo",
   "Files": "Archivos",
+  "FinishedAt": "",
   "First_name": "Nombre",
   "Food": "Alimento",
   "FoodInherit": "Campos heredables",
@@ -387,6 +388,7 @@
   "Step_Type": "Tipo Paso",
   "Step_start_time": "Hora de inicio",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Navegación Fija",
   "Sticky_Nav_Help": "Mostrar siempre el menú de navegación el la parte superior de la pantalla.",
   "SubstituteOnHand": "Tienen un sustituto disponible.",
diff --git a/vue3/src/locales/fi.json b/vue3/src/locales/fi.json
index d221510e8..adbd98424 100644
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -81,6 +81,7 @@
   "Fats": "Rasvat",
   "File": "Tiedosto",
   "Files": "Tiedostot",
+  "FinishedAt": "",
   "Food": "Ruoka",
   "Food_Alias": "Ruoan nimimerkki",
   "Friday": "",
@@ -230,6 +231,7 @@
   "Step_Type": "Vaiheen Tyyppi",
   "Step_start_time": "Vaiheen aloitusaika",
   "Steps": "",
+  "StepsOverview": "",
   "Substitutes": "",
   "Success": "Onnistui",
   "Sunday": "",
diff --git a/vue3/src/locales/fr.json b/vue3/src/locales/fr.json
index 8442524ec..1433c6362 100644
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -145,6 +145,7 @@
   "Fats": "Matières grasses",
   "File": "Fichier",
   "Files": "Fichiers",
+  "FinishedAt": "",
   "First_name": "Prénom",
   "Food": "Aliment",
   "FoodInherit": "Ingrédient hérité",
@@ -388,6 +389,7 @@
   "Step_Type": "Type d’étape",
   "Step_start_time": "Heure de début de l’étape",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Barre de navigation collante",
   "Sticky_Nav_Help": "Toujours afficher le menu de navigation en haut de l’écran.",
   "Substitutes": "",
diff --git a/vue3/src/locales/he.json b/vue3/src/locales/he.json
index 019c51429..152e5f821 100644
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -146,6 +146,7 @@
   "Fats": "שומנים",
   "File": "קובץ",
   "Files": "קבצים",
+  "FinishedAt": "",
   "First_name": "שם פרטי",
   "Food": "אוכל",
   "FoodInherit": "ערכי מזון",
@@ -389,6 +390,7 @@
   "Step_Type": "סוג צעד",
   "Step_start_time": "זמן התחלת הצעד",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "ניווט דביק",
   "Sticky_Nav_Help": "תמיד הצג את תפריט הניווט בראש העמוד.",
   "SubstituteOnHand": "יש לך תחלופה זמינה.",
diff --git a/vue3/src/locales/hu.json b/vue3/src/locales/hu.json
index 0641d32fa..c166d76f3 100644
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -129,6 +129,7 @@
   "Fats": "Zsírok",
   "File": "Fájl",
   "Files": "Fájlok",
+  "FinishedAt": "",
   "First_name": "Keresztnév",
   "Food": "Alapanyag",
   "FoodInherit": "",
@@ -356,6 +357,7 @@
   "Step_Type": "Lépés típusa",
   "Step_start_time": "A lépés kezdési ideje",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav_Help": "A navigációs menü mindig a képernyő tetején jelenjen meg.",
   "SubstituteOnHand": "Van elérhető helyettesítője.",
   "Substitutes": "",
diff --git a/vue3/src/locales/hy.json b/vue3/src/locales/hy.json
index 6ecd5bb3a..7a7962ecf 100644
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -61,6 +61,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "Food": "Սննդամթերք",
   "Friday": "",
   "GettingStarted": "",
@@ -168,6 +169,7 @@
   "Step": "",
   "Step_start_time": "Քայլի սկսելու ժամանակը",
   "Steps": "",
+  "StepsOverview": "",
   "Substitutes": "",
   "Success": "",
   "Sunday": "",
diff --git a/vue3/src/locales/id.json b/vue3/src/locales/id.json
index 6364d86d4..5c4eeb17d 100644
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -118,6 +118,7 @@
   "Fats": "Lemak",
   "File": "Berkas",
   "Files": "File",
+  "FinishedAt": "",
   "First_name": "",
   "Food": "",
   "FoodInherit": "",
@@ -330,6 +331,7 @@
   "Step_Type": "Tipe Langkah",
   "Step_start_time": "Langkah waktu mulai",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "",
   "Sticky_Nav_Help": "",
   "SubstituteOnHand": "",
diff --git a/vue3/src/locales/is.json b/vue3/src/locales/is.json
index 04ef2e755..60af4db4e 100644
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -145,6 +145,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "First_name": "",
   "Food": "",
   "FoodInherit": "",
@@ -387,6 +388,7 @@
   "Step_Type": "",
   "Step_start_time": "",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "",
   "Sticky_Nav_Help": "",
   "SubstituteOnHand": "",
diff --git a/vue3/src/locales/it.json b/vue3/src/locales/it.json
index d772d36d5..22adfc290 100644
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -123,6 +123,7 @@
   "Fats": "Grassi",
   "File": "File",
   "Files": "File",
+  "FinishedAt": "",
   "First_name": "Nome",
   "Food": "Alimento",
   "FoodInherit": "Campi ereditabili dagli Alimenti",
@@ -339,6 +340,7 @@
   "Step_Type": "Tipo di Step",
   "Step_start_time": "Ora di inizio dello Step",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Navigazione con menu fissato",
   "Sticky_Nav_Help": "Mostra sempre il menu di navigazione in alto.",
   "SubstituteOnHand": "Hai un sostituto disponibile.",
diff --git a/vue3/src/locales/lt.json b/vue3/src/locales/lt.json
index a8f5b46bc..29c4997ef 100644
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -131,6 +131,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "First_name": "",
   "Food": "",
   "FoodInherit": "",
@@ -360,6 +361,7 @@
   "Step_Type": "Žingsnio tipas",
   "Step_start_time": "Žingsnio pradžios laikas",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "",
   "Sticky_Nav_Help": "",
   "SubstituteOnHand": "",
diff --git a/vue3/src/locales/nb_NO.json b/vue3/src/locales/nb_NO.json
index 126aa6e81..e9eb6376e 100644
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -127,6 +127,7 @@
   "Fats": "Fett",
   "File": "Fil",
   "Files": "Filer",
+  "FinishedAt": "",
   "First_name": "Fornavn",
   "Food": "Matretter",
   "FoodInherit": "Arvbare felt for matvarer",
@@ -351,6 +352,7 @@
   "Step_Type": "Trinn type",
   "Step_start_time": "Trinn starttid",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "",
   "Sticky_Nav_Help": "",
   "SubstituteOnHand": "",
diff --git a/vue3/src/locales/nl.json b/vue3/src/locales/nl.json
index 276254b84..1ce15ec88 100644
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -131,6 +131,7 @@
   "Fats": "Vetten",
   "File": "Bestand",
   "Files": "Bestanden",
+  "FinishedAt": "",
   "First_name": "Voornaam",
   "Food": "Ingrediënt",
   "FoodInherit": "Eten erfbare velden",
@@ -355,6 +356,7 @@
   "Step_Type": "Stap Type",
   "Step_start_time": "Starttijd stap",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Navigatie altijd zichbaar",
   "Sticky_Nav_Help": "Geef navigatiemenu altijd bovenin weer.",
   "SubstituteOnHand": "Je hebt een vervanger op voorraad.",
diff --git a/vue3/src/locales/pl.json b/vue3/src/locales/pl.json
index 867fedd24..313b84361 100644
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -147,6 +147,7 @@
   "Fats": "Tłuszcze",
   "File": "Plik",
   "Files": "Pliki",
+  "FinishedAt": "",
   "First_name": "Imię",
   "Food": "Żywność",
   "FoodInherit": "Pola dziedziczone w żywności",
@@ -390,6 +391,7 @@
   "Step_Type": "Typ kroku",
   "Step_start_time": "Czas rozpoczęcia kroku",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Przyklejona nawigacja",
   "Sticky_Nav_Help": "Zawsze pokazuj menu nawigacyjne u góry ekranu.",
   "SubstituteOnHand": "Masz pod ręką zamienniki.",
diff --git a/vue3/src/locales/pt.json b/vue3/src/locales/pt.json
index 5a0c4e732..786262bb2 100644
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -106,6 +106,7 @@
   "Fats": "Gorduras",
   "File": "Ficheiro",
   "Files": "Ficheiros",
+  "FinishedAt": "",
   "Food": "Comida",
   "FoodInherit": "Campos herdados por comida",
   "FoodNotOnHand": "Não têm {food} disponível.",
@@ -295,6 +296,7 @@
   "Step_Type": "Tipo do passo",
   "Step_start_time": "Hora de Inicio do passo",
   "Steps": "",
+  "StepsOverview": "",
   "SubstituteOnHand": "",
   "Substitutes": "",
   "Success": "Sucesso",
diff --git a/vue3/src/locales/pt_BR.json b/vue3/src/locales/pt_BR.json
index 07f2cdbb2..8b45a9071 100644
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -141,6 +141,7 @@
   "Fats": "Gorduras",
   "File": "Arquivo",
   "Files": "Arquivos",
+  "FinishedAt": "",
   "First_name": "Primeiro Nome",
   "Food": "Comida",
   "FoodInherit": "Campos herdados por alimento",
@@ -373,6 +374,7 @@
   "Step_Type": "Tipo de etapa",
   "Step_start_time": "Hora de início",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav_Help": "Permitir mostrar o menu de navegação no topo da tela.",
   "SubstituteOnHand": "Você tem um substituto disponível.",
   "Substitutes": "",
diff --git a/vue3/src/locales/ro.json b/vue3/src/locales/ro.json
index 94ce8bbdc..e65fd5661 100644
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -125,6 +125,7 @@
   "Fats": "Grăsimi",
   "File": "Fișier",
   "Files": "Fișiere",
+  "FinishedAt": "",
   "First_name": "Prenume",
   "Food": "Mâncare",
   "FoodInherit": "Câmpuri moștenite de alimente",
@@ -343,6 +344,7 @@
   "Step_Type": "Tip pas",
   "Step_start_time": "Pasule de începere a orei",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Navigare lipicioasă",
   "Sticky_Nav_Help": "Afișați întotdeauna meniul de navigare din partea de sus a ecranului.",
   "SubstituteOnHand": "Ai un înlocuitor la îndemână.",
diff --git a/vue3/src/locales/ru.json b/vue3/src/locales/ru.json
index 15e1b7074..7142cb505 100644
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -96,6 +96,7 @@
   "Fats": "Жиры",
   "File": "Файл",
   "Files": "Файлы",
+  "FinishedAt": "",
   "Food": "Еда",
   "FoodInherit": "Наследуемые поля продуктов питания",
   "FoodNotOnHand": "{food} отсутствует в наличии.",
@@ -280,6 +281,7 @@
   "Step_Type": "Тип шага",
   "Step_start_time": "Время начала шага",
   "Steps": "",
+  "StepsOverview": "",
   "Substitutes": "",
   "Success": "Успешно",
   "Sunday": "",
diff --git a/vue3/src/locales/sl.json b/vue3/src/locales/sl.json
index 5a797d2bc..bef252de9 100644
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -96,6 +96,7 @@
   "Fats": "Maščobe",
   "File": "Datoteka",
   "Files": "Datoteke",
+  "FinishedAt": "",
   "Food": "Hrana",
   "FoodInherit": "Podedovana polja hrane",
   "FoodNotOnHand": "Nimaš {food} v roki.",
@@ -270,6 +271,7 @@
   "Step_Type": "Tip koraka",
   "Step_start_time": "Začetni čas koraka",
   "Steps": "",
+  "StepsOverview": "",
   "Substitutes": "",
   "Success": "Uspešno",
   "SuccessClipboard": "Nakupovalni listek je kopiran v odložišče",
diff --git a/vue3/src/locales/sv.json b/vue3/src/locales/sv.json
index 05859c48a..1e1605413 100644
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -147,6 +147,7 @@
   "Fats": "Fett",
   "File": "Fil",
   "Files": "Filer",
+  "FinishedAt": "",
   "First_name": "Förnamn",
   "Food": "Livsmedel",
   "FoodInherit": "Ärftliga livsmedels fält",
@@ -390,6 +391,7 @@
   "Step_Type": "Stegets typ",
   "Step_start_time": "Steg starttid",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Fastlåst navigering",
   "Sticky_Nav_Help": "Visa alltid navigeringsmenyn högst upp på skärmen.",
   "SubstituteOnHand": "Du har ett substitut till hands.",
diff --git a/vue3/src/locales/tr.json b/vue3/src/locales/tr.json
index 89e4169e0..343822ff0 100644
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -146,6 +146,7 @@
   "Fats": "Yağlar",
   "File": "Dosya",
   "Files": "Dosyalar",
+  "FinishedAt": "",
   "First_name": "İsim",
   "Food": "Yiyecek",
   "FoodInherit": "Yiyeceğin Devralınabileceği Alanlar",
@@ -389,6 +390,7 @@
   "Step_Type": "Adım Tipi",
   "Step_start_time": "Adım başlangıç zamanı",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "Yapışkan Gezinme Çubuğu",
   "Sticky_Nav_Help": "Gezinme menüsünü her zaman ekranın üst kısmında gösterin.",
   "SubstituteOnHand": "Elinizde bir yedek var.",
diff --git a/vue3/src/locales/uk.json b/vue3/src/locales/uk.json
index d5e9e905b..4dd71241f 100644
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -113,6 +113,7 @@
   "Fats": "Жири",
   "File": "Файл",
   "Files": "Файли",
+  "FinishedAt": "",
   "Food": "Їжа",
   "FoodInherit": "Пола Успадкованої Їжі",
   "FoodNotOnHand": "У вас немає {food} на руках.",
@@ -316,6 +317,7 @@
   "Step_Type": "Тип Кроку",
   "Step_start_time": "Час початку кроку",
   "Steps": "",
+  "StepsOverview": "",
   "SubstituteOnHand": "",
   "Substitutes": "",
   "Success": "Успішно",
diff --git a/vue3/src/locales/zh_Hans.json b/vue3/src/locales/zh_Hans.json
index 6317bc027..37a30b404 100644
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -142,6 +142,7 @@
   "Fats": "脂肪",
   "File": "文件",
   "Files": "文件",
+  "FinishedAt": "",
   "First_name": "名",
   "Food": "食物",
   "FoodInherit": "食物可继承的字段",
@@ -383,6 +384,7 @@
   "Step_Type": "步骤类型",
   "Step_start_time": "步骤开始时间",
   "Steps": "",
+  "StepsOverview": "",
   "Sticky_Nav": "粘性导航",
   "Sticky_Nav_Help": "始终在屏幕顶部显示导航菜单。",
   "SubstituteOnHand": "你手头有一个替代品。",
diff --git a/vue3/src/locales/zh_Hant.json b/vue3/src/locales/zh_Hant.json
index 23834427f..580ae5c50 100644
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -50,6 +50,7 @@
   "Fats": "",
   "File": "",
   "Files": "",
+  "FinishedAt": "",
   "Friday": "",
   "GettingStarted": "",
   "Hide_as_header": "隱藏為標題",
@@ -138,6 +139,7 @@
   "Step": "",
   "Step_start_time": "步驟開始時間",
   "Steps": "",
+  "StepsOverview": "",
   "Substitutes": "",
   "Success": "",
   "Sunday": "",
diff --git a/vue3/src/pages/RecipeViewPage.vue b/vue3/src/pages/RecipeViewPage.vue
index 44dc07c26..6e52bcb98 100644
--- a/vue3/src/pages/RecipeViewPage.vue
+++ b/vue3/src/pages/RecipeViewPage.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container :class="{'ps-0 pe-0 pt-0': mobile}">
-        <recipe-view :recipe="recipe"></recipe-view>
+        <recipe-view v-model="recipe"></recipe-view>
     </v-container>
 
 </template>