added merged steps overview

vue3/src/components/display/StepsOverview.vue

@@ -1,10 +1,19 @@
 <template>
     <v-expansion-panels>
         <v-expansion-panel>
-            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> {{ $t('StepsOverview') }}</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-row>
+                        <v-col>
+                            <v-btn-toggle density="compact" v-model="useUserPreferenceStore().deviceSettings.recipe_mergeStepOverview" border divided>
+                                <v-btn :value="false" prepend-icon="fa-solid fa-folder-tree">{{ $t('Structured') }}</v-btn>
+                                <v-btn :value="true" prepend-icon="fa-solid fa-arrows-to-circle">{{ $t('Summary') }}</v-btn>
+                            </v-btn-toggle>
+                        </v-col>
+                    </v-row>
+                    <v-row v-for="(s, i) in props.steps" v-if="!useUserPreferenceStore().deviceSettings.recipe_mergeStepOverview">
                         <v-col class="pa-1" cols="12" md="6">
                             <b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
                             <ingredients-table v-model="s.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
@@ -21,7 +30,13 @@
                             </template>
                         </v-col>
                     </v-row>
-                </v-container>
+
+                    <v-row v-if="useUserPreferenceStore().deviceSettings.recipe_mergeStepOverview">
+                        <v-col class="pa-1" cols="12" md="6">
+                            <ingredients-table v-model="mergedIngredients" :ingredient-factor="props.ingredientFactor" :show-checkbox="false"></ingredients-table>
+                        </v-col>
+                    </v-row>
+
             </v-expansion-panel-text>
         </v-expansion-panel>
 
@@ -30,10 +45,10 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
-import {Step} from "@/openapi";
+import {computed, PropType, ref} from 'vue'
+import {Ingredient, Step} from "@/openapi";
 import IngredientsTable from "@/components/display/IngredientsTable.vue";
-import StepView from "@/components/display/StepView.vue";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore.ts";
 
 const props = defineProps({
     steps: {
@@ -46,6 +61,70 @@ const props = defineProps({
     },
 })
 
+const showMergedIngredients = ref(false)
+
+const mergedIngredients = computed(() => {
+    // Function to collect all ingredients from recipe steps
+    const getAllIngredients = () => {
+        const ingredients: Array<Ingredient> = [];
+
+        // Add ingredients from steps
+        props.steps.forEach(step => {
+            step.ingredients.forEach(ingredient => {
+                if (ingredient.food && !ingredient.isHeader && !ingredient.noAmount) {
+                    ingredients.push(ingredient);
+                }
+            });
+
+            // Add ingredients from step recipes if they exist
+            if (step.stepRecipeData) {
+                step.stepRecipeData.steps?.forEach((subStep: Step) => {
+                    subStep.ingredients.forEach((ingredient: Ingredient) => {
+                        if (ingredient.food && !ingredient.isHeader && !ingredient.noAmount) {
+                            ingredients.push(ingredient);
+                        }
+                    });
+                });
+            }
+        });
+
+        return ingredients;
+    };
+
+    // Get all ingredients
+    const allIngredients = getAllIngredients();
+
+    // Create a map to group and sum ingredients by food and unit
+    const groupedIngredients = new Map<string, Ingredient>();
+
+    allIngredients.forEach(ingredient => {
+        if (!ingredient.food || !ingredient.unit) return;
+
+        // Create a unique key for food-unit combination
+        const key = `${ingredient.food.id}-${ingredient.unit.id}`;
+
+        if (groupedIngredients.has(key)) {
+            // If this food-unit combination already exists, sum the amounts
+            const existingIngredient = groupedIngredients.get(key)!;
+            existingIngredient.amount += ingredient.amount;
+        } else {
+            // Create a new entry with the adjusted amount
+            const clonedIngredient = {...ingredient};
+            groupedIngredients.set(key, clonedIngredient);
+        }
+    });
+
+    // Convert the map back to an array
+    const result = Array.from(groupedIngredients.values());
+
+    // Sort alphabetically by food name
+    return result.sort((a, b) => {
+        const foodNameA = a.food?.name.toLowerCase() || '';
+        const foodNameB = b.food?.name.toLowerCase() || '';
+        return foodNameA.localeCompare(foodNameB);
+    });
+})
+
 </script>
 
 

vue3/src/locales/de.json

@@ -2,6 +2,8 @@
   "AI": "AI",
   "AIImportSubtitle": "Verwende AI um Fotos von Rezepten zu importieren.",
   "API": "API",
+  "Summary": "Zusammenfassung",
+  "Structured": "Strukturiert",
   "API_Browser": "API Browser",
   "API_Documentation": "API Dokumentation",
   "AccessTokenHelp": "Zugriffsschlüssel für die REST Schnittstelle.",

vue3/src/locales/en.json

@@ -292,6 +292,8 @@
   "Meal_Type_Required": "Meal type is required",
   "Meal_Types": "Meal types",
   "Merge": "Merge",
+  "Summary": "Summary",
+  "Structured": "Structured",
   "MergeAutomateHelp": "Create an automation that replaces future objects of this type with the selected object.",
   "Merge_Keyword": "Merge Keyword",
   "Message": "Message",

vue3/src/stores/UserPreferenceStore.ts

@@ -197,6 +197,8 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
             mealplan_startingDayOfWeek: 1,
             mealplan_displayWeekNumbers: true,
 
+            recipe_mergeStepOverview: false,
+
             search_itemsPerPage: 50,
             search_viewMode: 'grid',
             search_visibleFilters: [],

vue3/src/types/settings.ts

@@ -17,6 +17,8 @@ export type DeviceSettings = {
     mealplan_startingDayOfWeek: number
     mealplan_displayWeekNumbers: boolean
 
+    recipe_mergeStepOverview: boolean,
+
     search_itemsPerPage: number,
     search_viewMode: 'table'|'grid',
     search_visibleFilters: String[],