lots of shopping list improvements

vue3/src/components/dialogs/AddToShoppingDialog.vue

@@ -99,6 +99,7 @@ function loadRecipeData() {
                             amount: ingredient.amount,
                             food: ingredient.food,
                             unit: ingredient.unit,
+                            ingredient: ingredient,
                             checked: (ingredient.food ? !(ingredient.food.ignoreShopping || ingredient.food.foodOnhand) : true),
                         })
                     })
@@ -132,7 +133,8 @@ function createShoppingListRecipe() {
                 shoppingListEntries.entries.push({
                     amount: entry.amount * (servings.value / (recipe.value.servings ? recipe.value.servings : 1)),
                     foodId: entry.food ? entry.food.id! : null,
-                    unitId: entry.unit ? entry.unit.id! : null
+                    unitId: entry.unit ? entry.unit.id! : null,
+                    ingredientId: entry.ingredient ? entry.ingredient.id! : null,
                 })
             }
         })

vue3/src/components/dialogs/ModelEditDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <v-dialog max-width="1400" :activator="dialogActivator" v-model="model">
-        <component :is="editorComponent" :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="model = false" :itemDefaults="itemDefaults"></component>
+        <component :is="editorComponent" :item="props.item" :item-id="props.itemId" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="model = false" :itemDefaults="props.itemDefaults"></component>
     </v-dialog>
 </template>
 
@@ -20,6 +20,7 @@ const props = defineProps({
     model: { type: String as PropType<EditorSupportedModels>, required: true, },
     activator: {default: 'parent'},
     item: {default: null},
+    itemId: {type: [Number, String], required: false, default: undefined},
     itemDefaults: {required: false},
     disabledFields: {default: []},
     closeAfterCreate: {default: true},

vue3/src/components/dialogs/ShoppingLineItemDialog.vue

@@ -50,42 +50,33 @@
                 </div>
                 <v-list density="compact">
                     <template v-for="[i, e] in shoppingListFood.entries" :key="e.id">
-                        <v-list-item border class="mt-1" :class="{'cursor-pointer': !e.recipeMealplan}">
+                        <v-list-item border class="mt-1">
                             <v-list-item-title>
                                 <b>
-                                    {{ $n(e.amount) }}
-                                    <span v-if="e.unit">{{ e.unit.name }}</span>
+                                    <span v-if="e.amount != 0">{{ $n(e.amount) }}&nbsp;</span>
+                                    <span v-if="e.unit">{{ e.unit.name }}&nbsp;</span>
                                 </b>
-                                {{ e.food.name }}
+                                <span v-if="e.food">
+                                    {{ e.food.name }}
+                                </span>
                             </v-list-item-title>
                             <v-list-item-subtitle v-if="e.completedAt">
                                 <v-icon icon="fa-solid fa-check" size="small" color="success"></v-icon>
                                 {{ $t('Completed') }} {{ DateTime.fromJSDate(e.completedAt).toLocaleString(DateTime.DATETIME_SHORT) }}
                             </v-list-item-subtitle>
-                            <v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.recipeName !== ''">
-                                {{ e.recipeMealplan.servings }} x
-                                <router-link :to="{name: 'view_recipe', params: {id: e.recipeMealplan.id}}" target="_blank" class="text-decoration-none"><b>
-                                    {{ e.recipeMealplan.recipeName }} </b>
-                                </router-link>
+                            <v-list-item-subtitle v-if="e.listRecipe && e.listRecipeData.recipe">
+                                {{ e.listRecipeData.servings }} x {{ e.listRecipeData.recipeData.name }}
                             </v-list-item-subtitle>
-                            <v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.mealplanType !== undefined">
-                                {{ e.recipeMealplan.mealplanType }} {{ DateTime.fromJSDate(e.recipeMealplan.mealplanFromDate).toLocaleString(DateTime.DATE_SHORT) }}
+                            <v-list-item-subtitle v-if="e.listRecipe && e.listRecipeData.mealplan">
+                                {{ e.listRecipeData.mealPlanData.mealType.name }} {{ DateTime.fromJSDate(e.listRecipeData.mealPlanData.fromDate).toLocaleString(DateTime.DATE_SHORT) }}
                             </v-list-item-subtitle>
                             <v-list-item-subtitle>
                                 {{ e.createdBy.displayName }} - {{ DateTime.fromJSDate(e.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
                             </v-list-item-subtitle>
                             <v-list-item-subtitle v-if="isDelayed(e)" class="text-info font-weight-bold">
-                                {{ $t('PostponedUntil') }} {{ DateTime.fromJSDate(e.delayUntil).toLocaleString(DateTime.DATETIME_SHORT) }}
+                                {{ $t('PostponedUntil') }} {{ DateTime.fromJSDate(e.delayUntil!).toLocaleString(DateTime.DATETIME_SHORT) }}
                             </v-list-item-subtitle>
 
-                            <!--                            <template #append>-->
-                            <!--                                <v-btn size="small" color="edit" icon="$edit" v-if="!e.recipeMealplan">-->
-                            <!--                                    <v-icon icon="$edit"></v-icon>-->
-                            <!--                                    <model-edit-dialog model="ShoppingListEntry" :item="e" @delete="useShoppingStore().entries.delete(e.id); shoppingListFood.entries.delete(e.id)"-->
-                            <!--                                                       @save="(args: ShoppingListEntry) => (shoppingListFood.entries.set(e.id, args))"></model-edit-dialog>-->
-                            <!--                                </v-btn>-->
-                            <!--                            </template>-->
-
                             <v-btn-group divided border>
                                 <v-btn icon="" @click="e.amount = e.amount / 2; updateEntryAmount(e)" v-if="!e.listRecipeData">
                                     <v-icon icon="fa-solid fa-divide"></v-icon>
@@ -102,13 +93,15 @@
                                 </v-btn>
                                 <v-btn color="edit" icon="$edit" v-if="!e.listRecipeData">
                                     <v-icon icon="$edit"></v-icon>
-                                    <model-edit-dialog model="ShoppingListEntry" :item="e" @delete="useShoppingStore().entries.delete(e.id); shoppingListFood.entries.delete(e.id)"
-                                                       @save="(args: ShoppingListEntry) => (shoppingListFood.entries.set(e.id, args))"></model-edit-dialog>
+                                    <model-edit-dialog model="ShoppingListEntry" :item="e"
+                                                       @delete="useShoppingStore().entries.delete(e.id!); shoppingListFood.entries.delete(e.id!)"
+                                                       @save="(args: ShoppingListEntry) => { useShoppingStore().entries.set(e.id!, args); shoppingListFood.entries.set(e.id!, args) }"></model-edit-dialog>
                                 </v-btn>
-                                <v-btn color="edit" icon="$recipes" v-if="e.listRecipe && e.listRecipeData.recipe" :to="{name: 'view_recipe', params: {id: e.listRecipeData.recipe}}">
+                                <v-btn color="edit" icon="$recipes" v-if="e.listRecipe && e.listRecipeData.recipe"
+                                       :to="{name: 'view_recipe', params: {id: e.listRecipeData.recipe}}">
                                     <v-icon icon="$recipes"></v-icon>
                                 </v-btn>
-                                <v-btn icon="" @click="useShoppingStore().deleteObject(e, true); shoppingListFood.entries.delete(e.id)" color="delete">
+                                <v-btn icon="" @click="useShoppingStore().deleteObject(e, true); shoppingListFood.entries.delete(e.id!)" color="delete">
                                     <v-icon icon="$delete"></v-icon>
                                 </v-btn>
                             </v-btn-group>

vue3/src/components/display/ShoppingLineItem.vue

@@ -1,6 +1,6 @@
 <template>
-    <v-list-item class="swipe-container" :id="itemContainerId" @touchend="handleSwipe()" @click="emit('clicked', entries)"
-                 v-if="(useUserPreferenceStore().deviceSettings.shopping_show_checked_entries || !isChecked) && (useUserPreferenceStore().deviceSettings.shopping_show_delayed_entries || !isShoppingLineDelayed)"
+    <v-list-item class="swipe-container" :id="itemContainerId" @touchend="handleSwipe()" @click="dialog = true;"
+                 v-if="isShoppingListFoodVisible(props.shoppingListFood, useUserPreferenceStore().deviceSettings)"
     >
         <!--        <div class="swipe-action" :class="{'bg-success': !isChecked , 'bg-warning': isChecked }">-->
         <!--            <i class="swipe-icon fa-fw fas" :class="{'fa-check': !isChecked , 'fa-cart-plus': isChecked }"></i>-->
@@ -44,6 +44,7 @@
 
     </v-list-item>
 
+    <shopping-line-item-dialog v-model="dialog" v-model:shopping-list-food="props.shoppingListFood"></shopping-line-item-dialog>
 </template>
 
 <script setup lang="ts">
@@ -56,7 +57,8 @@ import {useUserPreferenceStore} from "@/stores/UserPreferenceStore.js";
 import {ApiApi, Food, ShoppingListEntry} from '@/openapi'
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {IShoppingListFood, ShoppingLineAmount} from "@/types/Shopping";
-import {isDelayed, isShoppingListFoodDelayed} from "@/utils/logic_utils";
+import {isDelayed, isShoppingListFoodDelayed, isShoppingListFoodVisible} from "@/utils/logic_utils";
+import ShoppingLineItemDialog from "@/components/dialogs/ShoppingLineItemDialog.vue";
 
 const emit = defineEmits(['clicked'])
 
@@ -65,6 +67,8 @@ const props = defineProps({
     hideInfoRow: {type: Boolean, default: false}
 })
 
+const dialog = ref(false)
+
 const entries = computed(() => {
     return Array.from(props.shoppingListFood.entries.values())
 })
@@ -93,13 +97,6 @@ const isChecked = computed(() => {
     return true
 })
 
-/**
- * determine if any entry in a given IShoppingListFood is delayed, if so return true
- */
-const isShoppingLineDelayed = computed(() => {
-    return isShoppingListFoodDelayed(props.shoppingListFood)
-})
-
 /**
  * style action button depending on if all items are checked or not
  */

vue3/src/components/display/ShoppingListView.vue

@@ -100,8 +100,7 @@
                                     <v-divider></v-divider>
 
                                     <template v-for="[i, value] in category.foods" :key="value.food.id">
-                                        <shopping-line-item :shopping-list-food="value"
-                                                            @clicked="() => {shoppingLineItemDialog = true; shoppingLineItemDialogFood = value;}"></shopping-line-item>
+                                        <shopping-line-item :shopping-list-food="value" ></shopping-line-item>
                                     </template>
 
                                 </template>
@@ -164,15 +163,20 @@
                                 <v-list>
                                     <v-list-item v-for="r in useShoppingStore().getAssociatedRecipes()">
                                         <template #prepend>
-                                            <v-btn color="edit" icon :disabled="r.mealplan">
+                                            <v-btn color="edit" icon >
                                                 {{ r.servings }}
-                                                <number-scaler-dialog :number="r.servings"
-                                                                      @confirm="(servings: number) => {updateRecipeServings(r, servings)}"></number-scaler-dialog>
+                                                <number-scaler-dialog
+                                                    v-if="r.mealplan == undefined"
+                                                    :number="r.servings"
+                                                    @confirm="(servings: number) => {updateRecipeServings(r, servings)}"
+                                                ></number-scaler-dialog>
+                                                <model-edit-dialog model="MealPlan" :item-id="r.mealplan" v-if="r.mealplan != undefined" activator="parent"> </model-edit-dialog>
                                             </v-btn>
+
                                         </template>
 
                                         <div class="ms-2">
-                                            <p v-if="r.recipe">{{ r.recipeData.name }} <br/></p>
+                                            <p v-if="r.recipe">{{ r.recipeData.name }}<br/></p>
                                             <p v-if="r.mealplan">
                                                 {{ r.mealPlanData.mealType.name }} - {{ DateTime.fromJSDate(r.mealPlanData.fromDate).toLocaleString(DateTime.DATE_FULL) }}
                                             </p>
@@ -181,7 +185,7 @@
                                         <template #append>
                                             <v-btn icon color="delete">
                                                 <v-icon icon="$delete"></v-icon>
-                                                <delete-confirm-dialog :object-name="r.recipeName" :model-name="$t('ShoppingListRecipe')"
+                                                <delete-confirm-dialog :object-name="r.name" :model-name="$t('ShoppingListRecipe')"
                                                                        @delete="deleteListRecipe(r)"></delete-confirm-dialog>
                                             </v-btn>
                                         </template>
@@ -198,8 +202,8 @@
             <v-container>
                 <v-row>
                     <v-col>
-                        <SupermarketEditor :item="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket"
-                                           @save="(args: Supermarket) => (useUserPreferenceStore().deviceSettings.shopping_selected_supermarket = args)"></SupermarketEditor>
+                        <supermarket-editor :item="useUserPreferenceStore().deviceSettings.shopping_selected_supermarket"
+                                           @save="(args: Supermarket) => (useUserPreferenceStore().deviceSettings.shopping_selected_supermarket = args)"></supermarket-editor>
                     </v-col>
                 </v-row>
             </v-container>
@@ -207,8 +211,6 @@
         </v-window-item>
     </v-window>
 
-    <shopping-line-item-dialog v-model="shoppingLineItemDialog" v-model:shopping-list-food="shoppingLineItemDialogFood"></shopping-line-item-dialog>
-
 </template>
 
 <script setup lang="ts">
@@ -228,14 +230,13 @@ import SupermarketEditor from "@/components/model_editors/SupermarketEditor.vue"
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import ShoppingListEntryInput from "@/components/inputs/ShoppingListEntryInput.vue";
 import {DateTime} from "luxon";
+import MealPlanEditor from "@/components/model_editors/MealPlanEditor.vue";
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 
 const {t} = useI18n()
 
 const currentTab = ref("shopping")
 
-const shoppingLineItemDialog = ref(false)
-const shoppingLineItemDialogFood = ref({} as IShoppingListFood)
-
 /**
  * VSelect items for shopping list grouping options with localized names
  */

vue3/src/openapi/.openapi-generator/FILES

@@ -7,6 +7,8 @@ models/AccessToken.ts
 models/AuthToken.ts
 models/AutoMealPlan.ts
 models/Automation.ts
+models/AutomationTypeEnum.ts
+models/BaseUnitEnum.ts
 models/BookmarkletImport.ts
 models/BookmarkletImportList.ts
 models/ConnectorConfigConfig.ts
@@ -31,6 +33,16 @@ models/MealPlan.ts
 models/MealType.ts
 models/MethodEnum.ts
 models/NutritionInformation.ts
+models/OpenDataCategory.ts
+models/OpenDataConversion.ts
+models/OpenDataFood.ts
+models/OpenDataFoodProperty.ts
+models/OpenDataProperty.ts
+models/OpenDataStore.ts
+models/OpenDataStoreCategory.ts
+models/OpenDataUnit.ts
+models/OpenDataUnitTypeEnum.ts
+models/OpenDataVersion.ts
 models/PaginatedAutomationList.ts
 models/PaginatedBookmarkletImportListList.ts
 models/PaginatedCookLogList.ts
@@ -77,6 +89,13 @@ models/PatchedInviteLink.ts
 models/PatchedKeyword.ts
 models/PatchedMealPlan.ts
 models/PatchedMealType.ts
+models/PatchedOpenDataCategory.ts
+models/PatchedOpenDataConversion.ts
+models/PatchedOpenDataFood.ts
+models/PatchedOpenDataProperty.ts
+models/PatchedOpenDataStore.ts
+models/PatchedOpenDataUnit.ts
+models/PatchedOpenDataVersion.ts
 models/PatchedProperty.ts
 models/PatchedPropertyType.ts
 models/PatchedRecipe.ts
@@ -136,7 +155,6 @@ models/SupermarketCategoryRelation.ts
 models/Sync.ts
 models/SyncLog.ts
 models/ThemeEnum.ts
-models/TypeEnum.ts
 models/Unit.ts
 models/UnitConversion.ts
 models/User.ts

vue3/src/openapi/models/Automation.ts

@@ -13,13 +13,13 @@
  */
 
 import { mapValues } from '../runtime';
-import type { TypeEnum } from './TypeEnum';
+import type { AutomationTypeEnum } from './AutomationTypeEnum';
 import {
-    TypeEnumFromJSON,
-    TypeEnumFromJSONTyped,
-    TypeEnumToJSON,
-    TypeEnumToJSONTyped,
-} from './TypeEnum';
+    AutomationTypeEnumFromJSON,
+    AutomationTypeEnumFromJSONTyped,
+    AutomationTypeEnumToJSON,
+    AutomationTypeEnumToJSONTyped,
+} from './AutomationTypeEnum';
 
 /**
  * 
@@ -35,10 +35,10 @@ export interface Automation {
     id?: number;
     /**
      * 
-     * @type {TypeEnum}
+     * @type {AutomationTypeEnum}
      * @memberof Automation
      */
-    type: TypeEnum;
+    type: AutomationTypeEnum;
     /**
      * 
      * @type {string}
@@ -111,7 +111,7 @@ export function AutomationFromJSONTyped(json: any, ignoreDiscriminator: boolean)
     return {
         
         'id': json['id'] == null ? undefined : json['id'],
-        'type': TypeEnumFromJSON(json['type']),
+        'type': AutomationTypeEnumFromJSON(json['type']),
         'name': json['name'] == null ? undefined : json['name'],
         'description': json['description'] == null ? undefined : json['description'],
         'param1': json['param_1'] == null ? undefined : json['param_1'],
@@ -135,7 +135,7 @@ export function AutomationToJSONTyped(value?: Omit<Automation, 'created_by'> | n
     return {
         
         'id': value['id'],
-        'type': TypeEnumToJSON(value['type']),
+        'type': AutomationTypeEnumToJSON(value['type']),
         'name': value['name'],
         'description': value['description'],
         'param_1': value['param1'],

vue3/src/openapi/models/PatchedAutomation.ts

@@ -13,13 +13,13 @@
  */
 
 import { mapValues } from '../runtime';
-import type { TypeEnum } from './TypeEnum';
+import type { AutomationTypeEnum } from './AutomationTypeEnum';
 import {
-    TypeEnumFromJSON,
-    TypeEnumFromJSONTyped,
-    TypeEnumToJSON,
-    TypeEnumToJSONTyped,
-} from './TypeEnum';
+    AutomationTypeEnumFromJSON,
+    AutomationTypeEnumFromJSONTyped,
+    AutomationTypeEnumToJSON,
+    AutomationTypeEnumToJSONTyped,
+} from './AutomationTypeEnum';
 
 /**
  * 
@@ -35,10 +35,10 @@ export interface PatchedAutomation {
     id?: number;
     /**
      * 
-     * @type {TypeEnum}
+     * @type {AutomationTypeEnum}
      * @memberof PatchedAutomation
      */
-    type?: TypeEnum;
+    type?: AutomationTypeEnum;
     /**
      * 
      * @type {string}
@@ -109,7 +109,7 @@ export function PatchedAutomationFromJSONTyped(json: any, ignoreDiscriminator: b
     return {
         
         'id': json['id'] == null ? undefined : json['id'],
-        'type': json['type'] == null ? undefined : TypeEnumFromJSON(json['type']),
+        'type': json['type'] == null ? undefined : AutomationTypeEnumFromJSON(json['type']),
         'name': json['name'] == null ? undefined : json['name'],
         'description': json['description'] == null ? undefined : json['description'],
         'param1': json['param_1'] == null ? undefined : json['param_1'],
@@ -133,7 +133,7 @@ export function PatchedAutomationToJSONTyped(value?: Omit<PatchedAutomation, 'cr
     return {
         
         'id': value['id'],
-        'type': TypeEnumToJSON(value['type']),
+        'type': AutomationTypeEnumToJSON(value['type']),
         'name': value['name'],
         'description': value['description'],
         'param_1': value['param1'],

vue3/src/openapi/models/ShoppingListEntrySimpleCreate.ts

@@ -37,6 +37,12 @@ export interface ShoppingListEntrySimpleCreate {
      * @memberof ShoppingListEntrySimpleCreate
      */
     foodId: number | null;
+    /**
+     * 
+     * @type {number}
+     * @memberof ShoppingListEntrySimpleCreate
+     */
+    ingredientId: number | null;
 }
 
 /**
@@ -46,6 +52,7 @@ export function instanceOfShoppingListEntrySimpleCreate(value: object): value is
     if (!('amount' in value) || value['amount'] === undefined) return false;
     if (!('unitId' in value) || value['unitId'] === undefined) return false;
     if (!('foodId' in value) || value['foodId'] === undefined) return false;
+    if (!('ingredientId' in value) || value['ingredientId'] === undefined) return false;
     return true;
 }
 
@@ -62,6 +69,7 @@ export function ShoppingListEntrySimpleCreateFromJSONTyped(json: any, ignoreDisc
         'amount': json['amount'],
         'unitId': json['unit_id'],
         'foodId': json['food_id'],
+        'ingredientId': json['ingredient_id'],
     };
 }
 
@@ -79,6 +87,7 @@ export function ShoppingListEntrySimpleCreateToJSONTyped(value?: ShoppingListEnt
         'amount': value['amount'],
         'unit_id': value['unitId'],
         'food_id': value['foodId'],
+        'ingredient_id': value['ingredientId'],
     };
 }
 

vue3/src/openapi/models/index.ts

@@ -4,6 +4,8 @@ export * from './AccessToken';
 export * from './AuthToken';
 export * from './AutoMealPlan';
 export * from './Automation';
+export * from './AutomationTypeEnum';
+export * from './BaseUnitEnum';
 export * from './BookmarkletImport';
 export * from './BookmarkletImportList';
 export * from './ConnectorConfigConfig';
@@ -28,6 +30,16 @@ export * from './MealPlan';
 export * from './MealType';
 export * from './MethodEnum';
 export * from './NutritionInformation';
+export * from './OpenDataCategory';
+export * from './OpenDataConversion';
+export * from './OpenDataFood';
+export * from './OpenDataFoodProperty';
+export * from './OpenDataProperty';
+export * from './OpenDataStore';
+export * from './OpenDataStoreCategory';
+export * from './OpenDataUnit';
+export * from './OpenDataUnitTypeEnum';
+export * from './OpenDataVersion';
 export * from './PaginatedAutomationList';
 export * from './PaginatedBookmarkletImportListList';
 export * from './PaginatedCookLogList';
@@ -74,6 +86,13 @@ export * from './PatchedInviteLink';
 export * from './PatchedKeyword';
 export * from './PatchedMealPlan';
 export * from './PatchedMealType';
+export * from './PatchedOpenDataCategory';
+export * from './PatchedOpenDataConversion';
+export * from './PatchedOpenDataFood';
+export * from './PatchedOpenDataProperty';
+export * from './PatchedOpenDataStore';
+export * from './PatchedOpenDataUnit';
+export * from './PatchedOpenDataVersion';
 export * from './PatchedProperty';
 export * from './PatchedPropertyType';
 export * from './PatchedRecipe';
@@ -133,7 +152,6 @@ export * from './SupermarketCategoryRelation';
 export * from './Sync';
 export * from './SyncLog';
 export * from './ThemeEnum';
-export * from './TypeEnum';
 export * from './Unit';
 export * from './UnitConversion';
 export * from './User';

vue3/src/stores/ShoppingStore.ts

@@ -14,7 +14,7 @@ import {
 } from "@/types/Shopping";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
-import {isDelayed} from "@/utils/logic_utils";
+import {isDelayed, isEntryVisible} from "@/utils/logic_utils";
 import {DateTime} from "luxon";
 
 const _STORE_ID = "shopping_store"
@@ -194,9 +194,11 @@ export const useShoppingStore = defineStore(_STORE_ID, () => {
             let requestParameters = {pageSize: 50, page: 1} as ApiShoppingListEntryListRequest
             if (mealPlanId) {
                 requestParameters.mealplan = mealPlanId
+            } else {
+                // only clear local entries when not given a meal plan to not accidentally filter the shopping list
+                entries.value = new Map<number, ShoppingListEntry>
             }
 
-            entries.value = new Map<number, ShoppingListEntry>
             recLoadShoppingListEntries(requestParameters)
 
             api.apiSupermarketCategoryList().then(r => {
@@ -217,23 +219,23 @@ export const useShoppingStore = defineStore(_STORE_ID, () => {
      * recursively load shopping list entries from paginated api
      * @param requestParameters
      */
-    function recLoadShoppingListEntries(requestParameters: ApiShoppingListEntryListRequest){
+    function recLoadShoppingListEntries(requestParameters: ApiShoppingListEntryListRequest) {
         let api = new ApiApi()
         api.apiShoppingListEntryList(requestParameters).then((r) => {
-                r.results.forEach((e) => {
-                    entries.value.set(e.id!, e)
-                })
-                if(r.next){
-                    requestParameters.page = requestParameters.page + 1
-                    recLoadShoppingListEntries(requestParameters)
-                } else {
-                    currentlyUpdating.value = false
-                    initialized.value = true
-                }
-            }).catch((err) => {
-                currentlyUpdating.value = false
-                useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+            r.results.forEach((e) => {
+                entries.value.set(e.id!, e)
             })
+            if (r.next) {
+                requestParameters.page = requestParameters.page + 1
+                recLoadShoppingListEntries(requestParameters)
+            } else {
+                currentlyUpdating.value = false
+                initialized.value = true
+            }
+        }).catch((err) => {
+            currentlyUpdating.value = false
+            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+        })
     }
 
     /**
@@ -321,7 +323,7 @@ export const useShoppingStore = defineStore(_STORE_ID, () => {
         let recipes = [] as ShoppingListRecipe[]
 
         entries.value.forEach(e => {
-            if (e.listRecipe != null && recipes.findIndex(x => x.id == e.listRecipe) == -1) {
+            if (e.listRecipe != null && recipes.findIndex(x => x.id == e.listRecipe) == -1 && isEntryVisible(e, useUserPreferenceStore().deviceSettings)) {
                 recipes.push(e.listRecipeData)
             }
         })

vue3/src/stores/UserPreferenceStore.ts

@@ -4,6 +4,7 @@ import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/Messa
 import {ApiApi, ServerSettings, Space, Supermarket, UserPreference, UserSpace} from "@/openapi";
 import {ShoppingGroupingOptions} from "@/types/Shopping";
 import {computed, ComputedRef} from "vue";
+import {DeviceSettings} from "@/types/settings";
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
 const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
@@ -11,31 +12,11 @@ const SERVER_SETTINGS_KEY = 'TANDOOR_SERVER_SETTINGS'
 const ACTIVE_SPACE_KEY = 'TANDOOR_ACTIVE_SPACE'
 const USER_SPACES_KEY = 'TANDOOR_USER_SPACES'
 
-class DeviceSettings {
-    shopping_show_checked_entries = false
-    shopping_show_delayed_entries = false
-    shopping_show_selected_supermarket_only = false
-    shopping_selected_grouping = ShoppingGroupingOptions.CATEGORY
-    shopping_selected_supermarket: Supermarket | null = null
-    shopping_item_info_created_by = false
-    shopping_item_info_mealplan = true
-    shopping_item_info_recipe = true
-    shopping_show_debug = false
-
-    mealplan_displayPeriod = 'week'
-    mealplan_displayPeriodCount = 3
-    mealplan_startingDayOfWeek = 1
-    mealplan_displayWeekNumbers = true
-
-    general_tableItemsPerPage = 10
-    general_closedHelpAlerts: String[] = []
-}
-
 export const useUserPreferenceStore = defineStore('user_preference_store', () => {
     /**
      * settings only saved on device to allow per device customization
      */
-    let deviceSettings = useStorage(DEVICE_SETTINGS_KEY, new DeviceSettings(), localStorage, {mergeDefaults: true})
+    let deviceSettings = useStorage(DEVICE_SETTINGS_KEY, getDefaultDeviceSettings(), localStorage, {mergeDefaults: true})
     /**
      * database user settings, cache in local storage in case application is started offline
      */
@@ -140,7 +121,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
     function switchSpace(space: Space) {
         let api = new ApiApi()
 
-        api.apiSwitchActiveSpaceRetrieve({spaceId: space.id}).then(r => {
+        api.apiSwitchActiveSpaceRetrieve({spaceId: space.id!}).then(r => {
             loadActiveSpace()
             location.reload()
         }).catch(err => {
@@ -152,7 +133,32 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      * resets all device settings to their default value
      */
     function resetDeviceSettings() {
-        deviceSettings.value = new DeviceSettings()
+        deviceSettings.value = getDefaultDeviceSettings()
+    }
+
+    /**
+     * returns a default device settings object
+     */
+    function getDefaultDeviceSettings(): DeviceSettings {
+        return {
+            shopping_show_checked_entries: false,
+            shopping_show_delayed_entries: false,
+            shopping_show_selected_supermarket_only: false,
+            shopping_selected_grouping: ShoppingGroupingOptions.CATEGORY,
+            shopping_selected_supermarket: null,
+            shopping_item_info_created_by: false,
+            shopping_item_info_mealplan: true,
+            shopping_item_info_recipe: true,
+            shopping_show_debug: false,
+
+            mealplan_displayPeriod: 'week',
+            mealplan_displayPeriodCount: 3,
+            mealplan_startingDayOfWeek: 1,
+            mealplan_displayWeekNumbers: true,
+
+            general_tableItemsPerPage: 10,
+            general_closedHelpAlerts: [],
+        }
     }
 
     // always load settings on first initialization of store

vue3/src/types/Shopping.ts

@@ -1,4 +1,4 @@
-import {Food, Recipe, ShoppingListEntry, Unit} from "@/openapi";
+import {Food, Ingredient, Recipe, ShoppingListEntry, Unit} from "@/openapi";
 
 /**
  * enum of different options a shopping list can be grouped by
@@ -98,5 +98,6 @@ export type ShoppingDialogRecipeEntry = {
     amount: number,
     unit: Unit|null,
     food: Food|null,
+    ingredient: Ingredient|null,
     checked: boolean,
 }

vue3/src/types/settings.ts

@@ -0,0 +1,21 @@
+import {Supermarket} from "@/openapi";
+
+export type DeviceSettings = {
+    shopping_show_checked_entries: boolean
+    shopping_show_delayed_entries: boolean
+    shopping_show_selected_supermarket_only: boolean
+    shopping_selected_grouping: string
+    shopping_selected_supermarket: Supermarket | null
+    shopping_item_info_created_by: boolean
+    shopping_item_info_mealplan: boolean
+    shopping_item_info_recipe: boolean
+    shopping_show_debug: boolean
+
+    mealplan_displayPeriod: string
+    mealplan_displayPeriodCount: number
+    mealplan_startingDayOfWeek: number
+    mealplan_displayWeekNumbers: boolean
+
+    general_tableItemsPerPage: number
+    general_closedHelpAlerts: String[]
+}

vue3/src/utils/logic_utils.ts

@@ -1,5 +1,37 @@
 import {ShoppingListEntry, Space} from "@/openapi";
 import {IShoppingListFood} from "@/types/Shopping";
+import {DeviceSettings} from "@/types/settings";
+
+// -------------- SHOPPING RELATED ----------------------
+
+/**
+ * determines if an entry should be visible to the user based on its delayed/checked state and the current device settings
+ * @param entry entry for which visibility should be determined
+ * @param deviceSettings user device settings based on which entry visibility is controlled
+ */
+export function isEntryVisible(entry: ShoppingListEntry, deviceSettings: DeviceSettings) {
+    let entryVisible = true
+    if (isDelayed(entry) && !deviceSettings.shopping_show_delayed_entries) {
+        entryVisible = false
+    }
+    if (entry.checked && !deviceSettings.shopping_show_checked_entries) {
+        entryVisible = false
+    }
+    return entryVisible
+}
+
+/**
+ * loops through all entries of a shopping list food and determines if it should be visible based on the isEntryVisible function
+ * @param slf shopping list food holder
+ * @param deviceSettings user device settings based on which entry visibility is controlled
+ */
+export function isShoppingListFoodVisible(slf: IShoppingListFood, deviceSettings: DeviceSettings){
+    let foodVisible = false
+    slf.entries.forEach(entry => {
+        foodVisible = foodVisible || isEntryVisible(entry, deviceSettings)
+    })
+    return foodVisible
+}
 
 /**
  * determine if a shopping list entry is delayed
@@ -22,6 +54,8 @@ export function isShoppingListFoodDelayed(slf: IShoppingListFood) {
     return hasDelayedEntry
 }
 
+// -------------- SPACE RELATED ----------------------
+
 /**
  * checks if the given space is above any of the configured limits
  * @param space space to check limit for