ingredient step sorting dialog and headline option on desktop

TandoorRecipes · Jan 18, 2025 · efa9e8a · efa9e8a
1 parent d294341
commit efa9e8a
Show file tree

Hide file tree

Showing 34 changed files with 219 additions and 10 deletions.
diff --git a/vue3/src/components/inputs/StepEditor.vue b/vue3/src/components/inputs/StepEditor.vue
@@ -53,7 +53,7 @@
                     <div v-if="!mobile">
                         <vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" empty-insert-threshold="25" group="ingredients">
                             <v-row v-for="(ingredient, index) in step.ingredients" dense>
-                                <v-col cols="2">
+                                <v-col cols="2" v-if="!ingredient.isHeader">
                                     <v-text-field :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact"
                                                   hide-details>
 
@@ -62,21 +62,33 @@
                                         </template>
                                     </v-text-field>
                                 </v-col>
-                                <v-col cols="3">
+                                <v-col cols="3" v-if="!ingredient.isHeader">
                                     <model-select model="Unit" v-model="ingredient.unit" density="compact" allow-create hide-details></model-select>
                                 </v-col>
-                                <v-col cols="3">
+                                <v-col cols="3" v-if="!ingredient.isHeader">
                                     <model-select model="Food" v-model="ingredient.food" density="compact" allow-create hide-details></model-select>
                                 </v-col>
-                                <v-col cols="3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
-                                    <v-text-field :label="$t('Note')" v-model="ingredient.note" density="compact" hide-details></v-text-field>
+                                <v-col :cols="(ingredient.isHeader) ? 11 : 3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
+                                    <v-text-field :label="(ingredient.isHeader) ? $t('Headline') : $t('Note')" v-model="ingredient.note" density="compact" hide-details>
+                                        <template #prepend v-if="ingredient.isHeader">
+                                            <v-icon icon="$dragHandle" class="drag-handle cursor-grab"></v-icon>
+                                        </template>
+                                    </v-text-field>
                                 </v-col>
                                 <v-col cols="1">
                                     <v-btn variant="plain" 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 link>
+                                                    <v-switch v-model="step.ingredients[index].isHeader" :label="$t('Headline')" hide-details></v-switch>
+                                                </v-list-item>
+                                                <v-list-item @click="editingIngredientIndex = index; dialogIngredientSorter = true" prepend-icon="fa-solid fa-sort">{{
+                                                        $t('Move')
+                                                    }}
+                                                </v-list-item>
+
                                             </v-list>
                                         </v-menu>
                                     </v-btn>
@@ -87,7 +99,7 @@
                     </div>
 
                     <v-list v-if="mobile">
-                        <vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" group="ingredients">
+                        <vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" group="ingredients" empty-insert-threshold="25">
                             <v-list-item v-for="(ingredient, index) in step.ingredients" border @click="editingIngredientIndex = index; dialogIngredientEditor = true">
                                 <ingredient-string :ingredient="ingredient"></ingredient-string>
                                 <template #append>
@@ -151,6 +163,36 @@
         </v-card>
     </v-dialog>
 
+    <v-dialog
+        v-model="dialogIngredientSorter"
+        :max-width="(mobile) ? '100vw': '25vw'"
+        :fullscreen="mobile">
+        <v-card>
+            <v-closable-card-title :title="$t('Move')" v-model="dialogIngredientSorter"
+                                   :sub-title="ingredientToString(step.ingredients[editingIngredientIndex])"></v-closable-card-title>
+            <v-card-text>
+                <v-btn block :disabled="editingIngredientIndex== 0" @click="moveIngredient(editingIngredientIndex, props.stepIndex, 0)">{{ $t('First') }}</v-btn>
+                <v-btn block :disabled="editingIngredientIndex == 0" class="mt-1" @click="moveIngredient(editingIngredientIndex, props.stepIndex, editingIngredientIndex - 1)">{{
+                        $t('Up')
+                    }}
+                </v-btn>
+                <v-btn block :disabled="editingIngredientIndex + 1 == step.ingredients.length" class="mt-1"
+                       @click="moveIngredient(editingIngredientIndex, props.stepIndex, editingIngredientIndex + 1)"> {{ $t('Down') }}
+                </v-btn>
+                <v-btn block :disabled="editingIngredientIndex + 1 == step.ingredients.length" class="mt-1"
+                       @click="moveIngredient(editingIngredientIndex, props.stepIndex, step.ingredients.length - 1)">{{ $t('Last') }}
+                </v-btn>
+                {{ $t('Step') }}
+                <v-btn block v-for="(s,i) in recipe.steps" :disabled="i == props.stepIndex" class="mt-1"
+                       @click="moveIngredient(editingIngredientIndex, i, recipe.steps[i].ingredients.length)">{{ i + 1 }} {{ s.name }}
+                </v-btn>
+            </v-card-text>
+            <v-card-actions>
+
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
     <v-bottom-sheet v-model="dialogIngredientEditor">
         <v-card v-if="editingIngredientIndex >= 0">
             <v-closable-card-title :title="$t('Ingredient Editor')" v-model="dialogIngredientEditor"></v-closable-card-title>
@@ -186,7 +228,7 @@
 
 <script setup lang="ts">
 import {nextTick, onMounted, ref} from 'vue'
-import {ApiApi, Ingredient, ParsedIngredient, Step, Unit} from "@/openapi";
+import {ApiApi, Ingredient, ParsedIngredient, Recipe, Step, Unit} from "@/openapi";
 import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput'
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
@@ -196,16 +238,17 @@ import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import IngredientString from "@/components/display/IngredientString.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {ingredientToString} from "@/utils/model_utils";
 
 const emit = defineEmits(['delete'])
 
 const step = defineModel<Step>({required: true})
+const recipe = defineModel<Recipe>('recipe', {required: true})
 const props = defineProps({
     stepIndex: {type: Number, required: true},
 })
 
 const {mobile} = useDisplay()
-const test = ref([])
 
 const showName = ref(false)
 const showTime = ref(false)
@@ -215,8 +258,9 @@ const showFile = ref(false)
 const dialogMarkdownEditor = ref(false)
 const dialogIngredientEditor = ref(false)
 const dialogIngredientParser = ref(false)
+const dialogIngredientSorter = ref(false)
 
-const editingIngredientIndex = ref(Number)
+const editingIngredientIndex = ref(0)
 const ingredientTextInput = ref("")
 
 const defaultUnit = ref<null | Unit>(null)
@@ -237,6 +281,25 @@ onMounted(() => {
     }
 })
 
+/**
+ * move the ingredient at the given index of this step to the step and index at that step given in the target
+ * @param sourceIngredientIndex index of the ingredient to move
+ * @param targetStepIndex index of the step to place ingredient into
+ * @param targetIngredientIndex place in the target steps ingredient list to insert into
+ */
+function moveIngredient(sourceIngredientIndex: number, targetStepIndex: number, targetIngredientIndex: number,) {
+    let ingredient = step.value.ingredients[sourceIngredientIndex]
+    step.value.ingredients.splice(sourceIngredientIndex, 1)
+    recipe.value.steps[targetStepIndex].ingredients.splice(targetIngredientIndex, 0, ingredient)
+
+    // close dialog if moved to a new step, update index if its in the same step
+    if (targetStepIndex != props.stepIndex) {
+        dialogIngredientSorter.value = false
+    } else {
+        editingIngredientIndex.value = targetIngredientIndex
+    }
+}
+
 /**
  * sort function called by draggable when ingredient table is sorted
  */

diff --git a/vue3/src/components/model_editors/RecipeEditor.vue b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -70,7 +70,7 @@
                     <v-form :disabled="loading || fileApiLoading">
                         <v-row v-for="(s,i ) in editingObj.steps" :key="s.id">
                             <v-col>
-                                <step-editor v-model="editingObj.steps[i]" :step-index="i" @delete="deleteStepAtIndex(i)"></step-editor>
+                                <step-editor v-model="editingObj.steps[i]" v-model:recipe="editingObj" :step-index="i" @delete="deleteStepAtIndex(i)"></step-editor>
                             </v-col>
                         </v-row>
                         <v-row>

diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
@@ -83,6 +83,7 @@
   "DeviceSettingsHelp": "",
   "Disable_Amount": "",
   "Documentation": "",
+  "Down": "",
   "Download": "",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "",
@@ -110,6 +111,7 @@
   "File": "",
   "Files": "",
   "FinishedAt": "",
+  "First": "",
   "Food": "",
   "FoodInherit": "",
   "FoodNotOnHand": "",
@@ -163,6 +165,7 @@
   "Keyword": "",
   "Keyword_Alias": "",
   "Keywords": "",
+  "Last": "",
   "Link": "",
   "Load_More": "",
   "Log_Cooking": "",
@@ -348,6 +351,7 @@
   "Unit_Alias": "",
   "Units": "",
   "Unrated": "",
+  "Up": "",
   "UpgradeNow": "",
   "Url_Import": "",
   "Use_Plural_Food_Always": "",

diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
@@ -80,6 +80,7 @@
   "DeviceSettingsHelp": "",
   "Disable_Amount": "Деактивиране на сумата",
   "Documentation": "Документация",
+  "Down": "",
   "Download": "Изтегляне",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "Плъзнете тук, за да изтриете",
@@ -107,6 +108,7 @@
   "File": "Файл",
   "Files": "Файлове",
   "FinishedAt": "",
+  "First": "",
   "Food": "Храна",
   "FoodInherit": "Хранителни наследствени полета",
   "FoodNotOnHand": "Нямате {храна} под ръка.",
@@ -158,6 +160,7 @@
   "Keyword": "Ключова дума",
   "Keyword_Alias": "Псевдоним на ключова дума",
   "Keywords": "Ключови думи",
+  "Last": "",
   "Link": "Връзка",
   "Load_More": "Зареди още",
   "Log_Cooking": "Дневник на Готвене",
@@ -341,6 +344,7 @@
   "Unit_Alias": "Псевдоним на единица",
   "Units": "Единици",
   "Unrated": "Без оценка",
+  "Up": "",
   "UpgradeNow": "",
   "Url_Import": "Импортиране на URL адрес",
   "Use_Plural_Food_Always": "",

diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
@@ -115,6 +115,7 @@
   "Disable_Amount": "Deshabiliteu quantitat",
   "Disabled": "",
   "Documentation": "",
+  "Down": "",
   "Download": "",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "",
@@ -148,6 +149,7 @@
   "File": "",
   "Files": "",
   "FinishedAt": "",
+  "First": "",
   "First_name": "",
   "Food": "",
   "FoodInherit": "",
@@ -209,6 +211,7 @@
   "Keyword_Alias": "",
   "Keywords": "",
   "Language": "",
+  "Last": "",
   "Last_name": "",
   "Learn_More": "",
   "Link": "",
@@ -437,6 +440,7 @@
   "Unpin": "",
   "UnpinnedConfirmation": "",
   "Unrated": "",
+  "Up": "",
   "Update_Existing_Data": "",
   "Updated": "",
   "UpgradeNow": "",

diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
@@ -115,6 +115,7 @@
   "Disable_Amount": "Skrýt množství",
   "Disabled": "Deaktivované",
   "Documentation": "Dokumentace",
+  "Down": "",
   "Download": "Stáhnout",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "Přesunutím sem smazat",
@@ -148,6 +149,7 @@
   "File": "Soubor",
   "Files": "Soubory",
   "FinishedAt": "",
+  "First": "",
   "First_name": "Jméno",
   "Food": "Potravina",
   "FoodInherit": "Propisovatelná pole potraviny",
@@ -208,6 +210,7 @@
   "Keyword_Alias": "Přezdívka štítku",
   "Keywords": "Štítky",
   "Language": "Jazyk",
+  "Last": "",
   "Last_name": "Příjmení",
   "Learn_More": "Zjistit víc",
   "Link": "Odkaz",
@@ -431,6 +434,7 @@
   "Unpin": "Odepnout",
   "UnpinnedConfirmation": "{recipe} byl odepnut.",
   "Unrated": "Nehodnocené",
+  "Up": "",
   "Update_Existing_Data": "Aktualizovat existující data",
   "UpgradeNow": "",
   "Url_Import": "Import pomocí URL odkazu",

diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
@@ -106,6 +106,7 @@
   "Disable_Amount": "Deaktiver antal",
   "Disabled": "Slået fra",
   "Documentation": "Dokumentation",
+  "Down": "",
   "Download": "Download",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "Træk herhen for at slette",
@@ -136,6 +137,7 @@
   "File": "Fil",
   "Files": "Filer",
   "FinishedAt": "",
+  "First": "",
   "First_name": "Fornavn",
   "Food": "Mad",
   "FoodInherit": "Nedarvelige mad felter",
@@ -196,6 +198,7 @@
   "Keyword_Alias": "Alternativt navn til nøgleord",
   "Keywords": "Nøgleord",
   "Language": "Sprog",
+  "Last": "",
   "Last_name": "Efternavn",
   "Learn_More": "Lær mere",
   "Link": "Link",
@@ -409,6 +412,7 @@
   "Unpin": "Frigør",
   "UnpinnedConfirmation": "{recipe} er frigjort.",
   "Unrated": "Ikke bedømt",
+  "Up": "",
   "Update_Existing_Data": "Opdaterer eksisterende data",
   "UpgradeNow": "",
   "Url_Import": "Importer fra link",

diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
@@ -117,6 +117,7 @@
   "Disable_Amount": "Menge deaktivieren",
   "Disabled": "Deaktiviert",
   "Documentation": "Dokumentation",
+  "Down": "Runter",
   "Download": "Herunterladen",
   "DragToUpload": "Drag & Drop oder Klicken zum Auswählen",
   "Drag_Here_To_Delete": "Hierher ziehen zum Löschen",
@@ -150,6 +151,7 @@
   "File": "Datei",
   "Files": "Dateien",
   "FinishedAt": "Fertig um",
+  "First": "Erstes",
   "First_name": "Vorname",
   "Food": "Lebensmittel",
   "FoodInherit": "Lebensmittel vererbbare Felder",
@@ -211,6 +213,7 @@
   "Keyword_Alias": "Schlagwort Alias",
   "Keywords": "Stichwörter",
   "Language": "Sprache",
+  "Last": "Letztes",
   "Last_name": "Nachname",
   "Learn_More": "Mehr erfahren",
   "Link": "Link",
@@ -440,6 +443,7 @@
   "Unpin": "Lösen",
   "UnpinnedConfirmation": "{recipe} wurde gelöst.",
   "Unrated": "Unbewertet",
+  "Up": "Hoch",
   "Update_Existing_Data": "Vorhandene Daten aktualisieren",
   "Updated": "Aktualisiert",
   "UpgradeNow": "Jetzt Upgraden",

diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
@@ -105,6 +105,7 @@
   "Disable_Amount": "Απενεργοποίηση ποσότητας",
   "Disabled": "Απενεροποιημένο",
   "Documentation": "Τεκμηρίωση",
+  "Down": "",
   "Download": "Λήψη",
   "DragToUpload": "",
   "Drag_Here_To_Delete": "Σύρετε εδώ για διαγραφή",
@@ -132,6 +133,7 @@
   "File": "Αρχείο",
   "Files": "Αρχεία",
   "FinishedAt": "",
+  "First": "",
   "First_name": "Όνομα",
   "Food": "Φαγητό",
   "FoodInherit": "Πεδία φαγητών που κληρονομούνται",
@@ -191,6 +193,7 @@
   "Keyword_Alias": "Ψευδώνυμο λέξης-κλειδί",
   "Keywords": "Λέξεις κλειδιά",
   "Language": "Γλώσσα",
+  "Last": "",
   "Last_name": "Επίθετο",
   "Learn_More": "Μάθετε περισσότερα",
   "Link": "Σύνδεσμος",
@@ -398,6 +401,7 @@
   "Unpin": "Αφαίρεση καρφιτσώματος",
   "UnpinnedConfirmation": "Η συνταγή {recipe} αφαιρέθηκε από τις καρφιτσωμένες.",
   "Unrated": "Χωρίς βαθμολογία",
+  "Up": "",
   "Update_Existing_Data": "Ενημέρωση υπαρχόντων δεδομένων",
   "UpgradeNow": "",
   "Url_Import": "Εισαγωγή Url",