step editor WIP

2026-01-03 21:37:49 -05:00 · 2024-12-04 17:39:22 +01:00
parent 15122387f4
commit d7487c6d5c
32 changed files with 87 additions and 22 deletions
--- a/vue3/src/components/inputs/StepEditor.vue
+++ b/vue3/src/components/inputs/StepEditor.vue
@@ -50,7 +50,8 @@
                    <vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients">
                        <v-row v-for="(ingredient, index) in step.ingredients" dense>
                            <v-col cols="2">
-                                <v-number-input  :label="$t('Amount')" v-model="ingredient.amount" inset control-variant="stacked" :min="0"></v-number-input>
+                                <v-number-input :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" v-model="ingredient.amount" inset control-variant="stacked"
+                                                :min="0"></v-number-input>
                            </v-col>
                            <v-col cols="3">
                                <model-select model="Unit" v-model="ingredient.unit"></model-select>
@@ -58,15 +59,15 @@
                            <v-col cols="3">
                                <model-select model="Food" v-model="ingredient.food"></model-select>
                            </v-col>
-                            <v-col cols="3" @keydown.tab="insertAndFocusIngredient">
+                            <v-col cols="3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
                                <v-text-field :label="$t('Note')" v-model="ingredient.note"></v-text-field>
                            </v-col>
                            <v-col cols="1">
                                <v-btn variant="plain" icon>
-                                    <v-icon icon="$settings" ></v-icon>
+                                    <v-icon icon="$settings"></v-icon>
                                    <v-menu activator="parent">
                                        <v-list>
-                                            <v-list-item @click="step.ingredients.splice(index, 1)" prepend-icon="$delete">{{$t('Delete')}}</v-list-item>
+                                            <v-list-item @click="step.ingredients.splice(index, 1)" prepend-icon="$delete">{{ $t('Delete') }}</v-list-item>
                                        </v-list>
                                    </v-menu>
                                </v-btn>
@@ -74,6 +75,8 @@
                            </v-col>
                        </v-row>
                    </vue-draggable>
+                    <v-btn color="primary" @click="insertAndFocusIngredient()">{{ $t('Add') }}</v-btn>
+                    <v-btn color="secondary" @click="dialogIngredientParser = true">{{ $t('AddMany') }}</v-btn>
                </v-col>
                <v-col cols="12">
                    <v-label>{{ $t('Instructions') }}</v-label>
@@ -92,18 +95,29 @@
        :max-width="(mobile) ? '100vw': '75vw'"
        :fullscreen="mobile">
        <v-card>
-            <v-toolbar>
-                <v-toolbar-title>Edit Instructions</v-toolbar-title>
-                <v-btn icon="fas fa-close" @click="dialogMarkdownEdit = false"></v-btn>
-            </v-toolbar>
-
+            <v-closable-card-title :title="$t('Instructions')"></v-closable-card-title>
            <step-markdown-editor class="h-100" v-model="step"></step-markdown-editor>
        </v-card>
    </v-dialog>
+
+    <v-dialog
+        v-model="dialogIngredientParser"
+        :max-width="(mobile) ? '100vw': '75vw'"
+        :fullscreen="mobile">
+        <v-card>
+            <v-closable-card-title :title="$t('Ingredients')"></v-closable-card-title>
+            <v-card-text>
+                <v-textarea v-model="ingredientTextInput"></v-textarea>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn @click="parseAndInsertIngredients()" color="save">{{$t('Add')}}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
 </template>

 <script setup lang="ts">
-import {ref} from 'vue'
+import {nextTick, ref} from 'vue'
 import {Ingredient, Step} from "@/openapi";
 import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
@@ -111,6 +125,7 @@ import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import {useDisplay} from "vuetify";
 import {VueDraggable} from "vue-draggable-plus";
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";

 const step = defineModel<Step>({required: true})

@@ -124,8 +139,10 @@ const showTime = ref(false)
 const showRecipe = ref(false)
 const showFile = ref(false)

-
 const dialogMarkdownEdit = ref(false)
+const dialogIngredientParser = ref(false)
+
+const ingredientTextInput = ref("")

 /**
 * sort function called by draggable when ingredient table is sorted
@@ -136,16 +153,33 @@ function sortIngredients() {
    })
 }

-function insertAndFocusIngredient(event: KeyboardEvent){
-    console.log('TRIGGER TAB')
+/**
+ *
+ */
+function parseAndInsertIngredients(){
+    let ingredientStrings = ingredientTextInput.value.split(/\r?\n/)
+}
+
+/**
+ * handle tab presses on the note field of the last ingredient to insert a new ingredient
+ * @param event key event
+ * @param index index tab was pressed at
+ */
+function handleIngredientNoteTab(event: KeyboardEvent, index: number) {
+    if (step.value.ingredients.length == (index + 1) && !event.shiftKey && !event.altKey && !event.ctrlKey) {
        event.preventDefault()
-    step.value.ingredients.push(
-        {
-            amount: 0,
-            food: null,
-            unit: null
-        } as Ingredient
-    )
+        insertAndFocusIngredient()
+    }
+}
+
+/**
+ * insert a new ingredient and focus its first input
+ */
+function insertAndFocusIngredient() {
+    step.value.ingredients.push({} as Ingredient)
+    nextTick(() => {
+        document.getElementById(`id_input_amount_${step.value.id}_${step.value.ingredients.length - 1}`).select()
+    })
 }
 </script>

--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -4,6 +4,7 @@
  "Add": "",
  "AddAll": "",
  "AddFoodToShopping": "",
+  "AddMany": "",
  "AddToShopping": "",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "",
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -4,6 +4,7 @@
  "Add": "Добави",
  "AddAll": "",
  "AddFoodToShopping": "Добавете {food} към списъка си за пазаруване",
+  "AddMany": "",
  "AddToShopping": "Добавяне към списъка за пазаруване",
  "Add_Servings_to_Shopping": "Добавете {servings} порции към Пазаруване",
  "Add_Step": "Добавяне Стъпка",
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -6,6 +6,7 @@
  "Add": "",
  "AddAll": "",
  "AddFoodToShopping": "",
+  "AddMany": "",
  "AddToShopping": "",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "",
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -6,6 +6,7 @@
  "Add": "Přidat",
  "AddAll": "",
  "AddFoodToShopping": "Přidat {food} na váš nákupní seznam",
+  "AddMany": "",
  "AddToShopping": "Přidat do nákupního seznamu",
  "Add_Servings_to_Shopping": "Přidat {servings} porce na nákupní seznam",
  "Add_Step": "Přidat krok",
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -6,6 +6,7 @@
  "Add": "Tilføj",
  "AddAll": "",
  "AddFoodToShopping": "Tilføj {food} til indkøbsliste",
+  "AddMany": "",
  "AddToShopping": "Tilføj til indkøbsliste",
  "Add_Servings_to_Shopping": "Tilføj {servings} serveringer til indkøb",
  "Add_Step": "Tilføj trin",
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -6,6 +6,7 @@
  "Add": "Hinzufügen",
  "AddAll": "Alle Hinzufügen",
  "AddFoodToShopping": "Fügen Sie {food} zur Einkaufsliste hinzu",
+  "AddMany": "Mehrere Hinzufügen",
  "AddToShopping": "Zur Einkaufsliste hinzufügen",
  "Add_Servings_to_Shopping": "{servings} Portionen zum Einkauf hinzufügen",
  "Add_Step": "Schritt hinzufügen",
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -6,6 +6,7 @@
  "Add": "Προσθήκη",
  "AddAll": "",
  "AddFoodToShopping": "Προσθήκη του φαγητού {food} στη λίστα αγορών σας",
+  "AddMany": "",
  "AddToShopping": "Προσθήκη στη λίστα αγορών",
  "Add_Servings_to_Shopping": "Προσθήκη {servings} μερίδων στις αγορές",
  "Add_Step": "Προσθήκη βήματος",
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -6,6 +6,7 @@
  "Add": "Add",
  "AddAll": "Add all",
  "AddFoodToShopping": "Add {food} to your shopping list",
+  "AddMany": "Add Many",
  "AddToShopping": "Add to shopping list",
  "Add_Servings_to_Shopping": "Add {servings} Servings to Shopping",
  "Add_Step": "Add Step",
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -6,6 +6,7 @@
  "Add": "Añadir",
  "AddAll": "",
  "AddFoodToShopping": "Añadir {food} a la lista de la compra",
+  "AddMany": "",
  "AddToShopping": "Añadir a la lista de la compra",
  "Add_Servings_to_Shopping": "Añadir {servings} raciones a la compra",
  "Add_Step": "Añadir paso",
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -3,6 +3,7 @@
  "Actions": "",
  "Add": "Lisää",
  "AddAll": "",
+  "AddMany": "",
  "Add_Step": "Lisää Vaihe",
  "Add_nutrition_recipe": "Lisää ravintoaine reseptiin",
  "Add_to_Plan": "Lisää suunnitelmaan",
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -6,6 +6,7 @@
  "Add": "Ajouter",
  "AddAll": "",
  "AddFoodToShopping": "Ajouter l’aliment {food} à votre liste de courses",
+  "AddMany": "",
  "AddToShopping": "Ajouter à la liste de courses",
  "Add_Servings_to_Shopping": "Ajouter {servings} portions aux courses",
  "Add_Step": "Ajouter une étape",
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -6,6 +6,7 @@
  "Add": "הוספה",
  "AddAll": "",
  "AddFoodToShopping": "הוסף {מזון} לרשימת הקניות",
+  "AddMany": "",
  "AddToShopping": "הוסף לרשימת קניות",
  "Add_Servings_to_Shopping": "הוסף{מנה}מנות לקנייה",
  "Add_Step": "הוספת צעד",
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -6,6 +6,7 @@
  "Add": "Hozzáadás",
  "AddAll": "",
  "AddFoodToShopping": "{food} hozzáadása bevásárlólistához",
+  "AddMany": "",
  "AddToShopping": "Hozzáadás a bevásárlólistához",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "Lépés hozzáadása",
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -3,6 +3,7 @@
  "Actions": "",
  "Add": "",
  "AddAll": "",
+  "AddMany": "",
  "Add_nutrition_recipe": "Ավելացնել սննդայնություն բաղադրատոմսին",
  "Add_to_Book": "",
  "Add_to_Plan": "Ավելացնել պլանին",
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -6,6 +6,7 @@
  "Add": "Tambahkan",
  "AddAll": "",
  "AddFoodToShopping": "",
+  "AddMany": "",
  "AddToShopping": "",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "Tambahkan Langkah",
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -6,6 +6,7 @@
  "Add": "",
  "AddAll": "",
  "AddFoodToShopping": "",
+  "AddMany": "",
  "AddToShopping": "",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "",
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -6,6 +6,7 @@
  "Add": "Aggiungi",
  "AddAll": "",
  "AddFoodToShopping": "Aggiungi {food} alla tua lista della spesa",
+  "AddMany": "",
  "AddToShopping": "Aggiungi a lista della spesa",
  "Add_Servings_to_Shopping": "Aggiungi {servings} porzioni alla spesa",
  "Add_Step": "Aggiungi Step",
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -6,6 +6,7 @@
  "Add": "",
  "AddAll": "",
  "AddFoodToShopping": "",
+  "AddMany": "",
  "AddToShopping": "",
  "Add_Servings_to_Shopping": "",
  "Add_Step": "",
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -6,6 +6,7 @@
  "Add": "Legg til",
  "AddAll": "",
  "AddFoodToShopping": "Legg til {food] i handlelisten din",
+  "AddMany": "",
  "AddToShopping": "Legg til i handleliste",
  "Add_Servings_to_Shopping": "Legg til {servings} serveringer i handlelisten",
  "Add_Step": "Legg til steg",
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -6,6 +6,7 @@
  "Add": "Voeg toe",
  "AddAll": "",
  "AddFoodToShopping": "Voeg {food} toe aan je boodschappenlijst",
+  "AddMany": "",
  "AddToShopping": "Voeg toe aan boodschappenlijst",
  "Add_Servings_to_Shopping": "Voeg {servings} porties toe aan Winkelen",
  "Add_Step": "Voeg Stap toe",
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -6,6 +6,7 @@
  "Add": "Dodaj",
  "AddAll": "",
  "AddFoodToShopping": "Dodaj {food} do swojej listy zakupów",
+  "AddMany": "",
  "AddToShopping": "Dodaj do listy zakupów",
  "Add_Servings_to_Shopping": "Dodaj {servings} porcje do zakupów",
  "Add_Step": "Dodaj krok",
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -4,6 +4,7 @@
  "Add": "Adicionar",
  "AddAll": "",
  "AddFoodToShopping": "Adicionar {food} à sua lista de compras",
+  "AddMany": "",
  "AddToShopping": "Adicionar á lista de compras",
  "Add_Servings_to_Shopping": "Adicionar {servings} doses ás compras",
  "Add_Step": "Adicionar passo",
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -6,6 +6,7 @@
  "Add": "Adicionar",
  "AddAll": "",
  "AddFoodToShopping": "Incluir {food} na sua lista de compras",
+  "AddMany": "",
  "AddToShopping": "Incluir na Lista de Compras",
  "Add_Servings_to_Shopping": "Adicionar {servings} porções às compras",
  "Add_Step": "Adicionar Etapa",
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -6,6 +6,7 @@
  "Add": "Adaugă",
  "AddAll": "",
  "AddFoodToShopping": "Adăugă {food} în lista de cumpărături",
+  "AddMany": "",
  "AddToShopping": "Adaugă la lista de cumpărături",
  "Add_Servings_to_Shopping": "Adăugă {servings} porții la cumpărături",
  "Add_Step": "Adaugă pas",
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -4,6 +4,7 @@
  "Add": "Добавить",
  "AddAll": "",
  "AddFoodToShopping": "Добавить {food} в ваш список покупок",
+  "AddMany": "",
  "AddToShopping": "Добавить в лист покупок",
  "Add_Servings_to_Shopping": "Добавить {servings} порции в список покупок",
  "Add_Step": "Добавить шаг",
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -4,6 +4,7 @@
  "Add": "Dodaj",
  "AddAll": "",
  "AddFoodToShopping": "Dodaj {food} v nakupovalni listek",
+  "AddMany": "",
  "AddToShopping": "Dodaj nakupovlanemu listku",
  "Add_Step": "Dodaj korak",
  "Add_nutrition_recipe": "Receptu dodaj hranilno vrednost",
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -6,6 +6,7 @@
  "Add": "Lägg till",
  "AddAll": "",
  "AddFoodToShopping": "Lägg till {food} på din inköpslista",
+  "AddMany": "",
  "AddToShopping": "Lägg till i inköpslista",
  "Add_Servings_to_Shopping": "Lägg till {servings} portioner till inköp",
  "Add_Step": "Lägg till steg",
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -6,6 +6,7 @@
  "Add": "Ekle",
  "AddAll": "",
  "AddFoodToShopping": "{food}'ı alışveriş listenize ekleyin",
+  "AddMany": "",
  "AddToShopping": "Alışveriş listesine ekle",
  "Add_Servings_to_Shopping": "Alışverişe {servings} Porsiyon Ekle",
  "Add_Step": "Adım Ekle",
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -4,6 +4,7 @@
  "Add": "Додати",
  "AddAll": "",
  "AddFoodToShopping": "Додати {food} до вашого списку покупок",
+  "AddMany": "",
  "AddToShopping": "Додати до списку покупок",
  "Add_Servings_to_Shopping": "Додати {servings} Порції до Покупок",
  "Add_Step": "Додати Крок",
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -6,6 +6,7 @@
  "Add": "添加",
  "AddAll": "",
  "AddFoodToShopping": "添加 {food} 到购物清单",
+  "AddMany": "",
  "AddToShopping": "添加到购物清单",
  "Add_Servings_to_Shopping": "添加 {servings} 份到购物",
  "Add_Step": "添加步骤",
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -3,6 +3,7 @@
  "Actions": "",
  "Add": "",
  "AddAll": "",
+  "AddMany": "",
  "Add_nutrition_recipe": "為食譜添加營養資訊",
  "Add_to_Plan": "加入計劃",
  "Add_to_Shopping": "加入購物清單",