step editor WIP

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-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-closable-card-title :title="$t('Instructions')"></v-closable-card-title>
-                <v-toolbar-title>Edit Instructions</v-toolbar-title>
-                <v-btn icon="fas fa-close" @click="dialogMarkdownEdit = false"></v-btn>
-            </v-toolbar>
-
             <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')
+ *
-    event.preventDefault()
+ */
-    step.value.ingredients.push(
+function parseAndInsertIngredients(){
-        {
+    let ingredientStrings = ingredientTextInput.value.split(/\r?\n/)
-            amount: 0,
+}
-            food: null,
+
-            unit: null
+/**
-        } as Ingredient
+ * 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()
+        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>
 

vue3/src/locales/ar.json

@@ -4,6 +4,7 @@
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",
+  "AddMany": "",
   "AddToShopping": "",
   "Add_Servings_to_Shopping": "",
   "Add_Step": "",

vue3/src/locales/bg.json

@@ -4,6 +4,7 @@
   "Add": "Добави",
   "AddAll": "",
   "AddFoodToShopping": "Добавете {food} към списъка си за пазаруване",
+  "AddMany": "",
   "AddToShopping": "Добавяне към списъка за пазаруване",
   "Add_Servings_to_Shopping": "Добавете {servings} порции към Пазаруване",
   "Add_Step": "Добавяне Стъпка",

vue3/src/locales/ca.json

@@ -6,6 +6,7 @@
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",
+  "AddMany": "",
   "AddToShopping": "",
   "Add_Servings_to_Shopping": "",
   "Add_Step": "",

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",

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",

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",

vue3/src/locales/el.json

@@ -6,6 +6,7 @@
   "Add": "Προσθήκη",
   "AddAll": "",
   "AddFoodToShopping": "Προσθήκη του φαγητού {food} στη λίστα αγορών σας",
+  "AddMany": "",
   "AddToShopping": "Προσθήκη στη λίστα αγορών",
   "Add_Servings_to_Shopping": "Προσθήκη {servings} μερίδων στις αγορές",
   "Add_Step": "Προσθήκη βήματος",

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",

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",

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",

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",

vue3/src/locales/he.json

@@ -6,6 +6,7 @@
   "Add": "הוספה",
   "AddAll": "",
   "AddFoodToShopping": "הוסף {מזון} לרשימת הקניות",
+  "AddMany": "",
   "AddToShopping": "הוסף לרשימת קניות",
   "Add_Servings_to_Shopping": "הוסף{מנה}מנות לקנייה",
   "Add_Step": "הוספת צעד",

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",

vue3/src/locales/hy.json

@@ -3,6 +3,7 @@
   "Actions": "",
   "Add": "",
   "AddAll": "",
+  "AddMany": "",
   "Add_nutrition_recipe": "Ավելացնել սննդայնություն բաղադրատոմսին",
   "Add_to_Book": "",
   "Add_to_Plan": "Ավելացնել պլանին",

vue3/src/locales/id.json

@@ -6,6 +6,7 @@
   "Add": "Tambahkan",
   "AddAll": "",
   "AddFoodToShopping": "",
+  "AddMany": "",
   "AddToShopping": "",
   "Add_Servings_to_Shopping": "",
   "Add_Step": "Tambahkan Langkah",

vue3/src/locales/is.json

@@ -6,6 +6,7 @@
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",
+  "AddMany": "",
   "AddToShopping": "",
   "Add_Servings_to_Shopping": "",
   "Add_Step": "",

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",

vue3/src/locales/lt.json

@@ -6,6 +6,7 @@
   "Add": "",
   "AddAll": "",
   "AddFoodToShopping": "",
+  "AddMany": "",
   "AddToShopping": "",
   "Add_Servings_to_Shopping": "",
   "Add_Step": "",

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",

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",

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",

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",

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",

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",

vue3/src/locales/ru.json

@@ -4,6 +4,7 @@
   "Add": "Добавить",
   "AddAll": "",
   "AddFoodToShopping": "Добавить {food} в ваш список покупок",
+  "AddMany": "",
   "AddToShopping": "Добавить в лист покупок",
   "Add_Servings_to_Shopping": "Добавить {servings} порции в список покупок",
   "Add_Step": "Добавить шаг",

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",

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",

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",

vue3/src/locales/uk.json

@@ -4,6 +4,7 @@
   "Add": "Додати",
   "AddAll": "",
   "AddFoodToShopping": "Додати {food} до вашого списку покупок",
+  "AddMany": "",
   "AddToShopping": "Додати до списку покупок",
   "Add_Servings_to_Shopping": "Додати {servings} Порції до Покупок",
   "Add_Step": "Додати Крок",

vue3/src/locales/zh_Hans.json

@@ -6,6 +6,7 @@
   "Add": "添加",
   "AddAll": "",
   "AddFoodToShopping": "添加 {food} 到购物清单",
+  "AddMany": "",
   "AddToShopping": "添加到购物清单",
   "Add_Servings_to_Shopping": "添加 {servings} 份到购物",
   "Add_Step": "添加步骤",

vue3/src/locales/zh_Hant.json

@@ -3,6 +3,7 @@
   "Actions": "",
   "Add": "",
   "AddAll": "",
+  "AddMany": "",
   "Add_nutrition_recipe": "為食譜添加營養資訊",
   "Add_to_Plan": "加入計劃",
   "Add_to_Shopping": "加入購物清單",