From 77748a951b05c6d07f66f687501778b7e73f5817 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 23 Oct 2024 18:23:48 +0200
Subject: [PATCH] various improvements for shopping line item dialog

---
 .../dialogs/ShoppingLineItemDialog.vue        | 91 +++++++++++--------
 .../components/dialogs/VClosableCardTitle.vue |  6 +-
 .../model_editors/ShoppingListEntryEditor.vue | 62 +++++++++++++
 .../composables/useModelEditorFunctions.ts    |  4 +-
 vue3/src/locales/ar.json                      |  1 +
 vue3/src/locales/bg.json                      |  1 +
 vue3/src/locales/ca.json                      |  1 +
 vue3/src/locales/cs.json                      |  1 +
 vue3/src/locales/da.json                      |  1 +
 vue3/src/locales/de.json                      |  1 +
 vue3/src/locales/el.json                      |  1 +
 vue3/src/locales/en.json                      |  1 +
 vue3/src/locales/es.json                      |  1 +
 vue3/src/locales/fi.json                      |  1 +
 vue3/src/locales/fr.json                      |  1 +
 vue3/src/locales/he.json                      |  1 +
 vue3/src/locales/hu.json                      |  1 +
 vue3/src/locales/hy.json                      |  1 +
 vue3/src/locales/id.json                      |  1 +
 vue3/src/locales/is.json                      |  1 +
 vue3/src/locales/it.json                      |  1 +
 vue3/src/locales/lt.json                      |  1 +
 vue3/src/locales/nb_NO.json                   |  1 +
 vue3/src/locales/nl.json                      |  1 +
 vue3/src/locales/pl.json                      |  1 +
 vue3/src/locales/pt.json                      |  1 +
 vue3/src/locales/pt_BR.json                   |  1 +
 vue3/src/locales/ro.json                      |  1 +
 vue3/src/locales/ru.json                      |  1 +
 vue3/src/locales/sl.json                      |  1 +
 vue3/src/locales/sv.json                      |  1 +
 vue3/src/locales/tr.json                      |  1 +
 vue3/src/locales/uk.json                      |  1 +
 vue3/src/locales/zh_Hans.json                 |  1 +
 vue3/src/locales/zh_Hant.json                 |  1 +
 vue3/src/types/Models.ts                      | 25 ++++-
 vue3/src/utils/utils.ts                       | 18 ++++
 37 files changed, 193 insertions(+), 44 deletions(-)
 create mode 100644 vue3/src/components/model_editors/ShoppingListEntryEditor.vue
 create mode 100644 vue3/src/utils/utils.ts

diff --git a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
index b148fa99fe..c57eccbec9 100644
--- a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
+++ b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
@@ -1,73 +1,85 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="500px">
+    <v-dialog :fullscreen="mobile" v-model="showDialog" max-width="500px">
         <v-card>
             <v-closable-card-title :title="props.shoppingListFood.food.name" v-model="showDialog"></v-closable-card-title>
 
-            <v-card-text>
+            <v-card-text class="pt-0 pr-4 pl-4">
 
                 <v-label>{{ $t('Choose_Category') }}</v-label>
                 <ModelSelect model="SupermarketCategory"></ModelSelect>
 
                 <v-row>
-                    <v-col>
-                        <v-btn height="80px" color="info" block stacked>
+                    <v-col class="pr-0">
+                        <v-btn height="80px" color="info" density="compact" size="small" block stacked>
                             <i class="fa-solid fa-clock-rotate-left fa-2x mb-2"></i>
                             {{ $t('Postpone') }}
                         </v-btn>
                     </v-col>
                     <v-col>
-                        <v-btn height="80px" color="secondary" block stacked>
+                        <v-btn height="80px" color="secondary" density="compact" size="small" block stacked>
                             <i class="fa-solid fa-eye-slash fa-2x mb-2"></i>
                             {{ $t('Ignore_Shopping') }}
                         </v-btn>
                     </v-col>
                 </v-row>
                 <v-row>
-                    <v-col>
-                        <v-btn height="80px" color="primary" block stacked>
+                    <v-col class="pr-0 pt-0">
+                        <v-btn height="80px" color="primary" density="compact" size="small" block stacked>
                             <i class="fa-solid fa-pencil fa-2x mb-2"></i>
                             {{ $t('Edit_Food') }}
                         </v-btn>
                     </v-col>
-                    <v-col>
-                        <v-btn height="80px" color="success" block stacked>
+                    <v-col class="pt-0">
+                        <v-btn height="80px" color="success" density="compact" size="small" block stacked>
                             <i class="fa-solid fa-plus fa-2x mb-2"></i>
                             {{ $t('Add') }}
                         </v-btn>
                     </v-col>
                 </v-row>
 
-                <v-label class="mt-2">{{ $t('Entries') }}</v-label>
+                <v-label class="mt-3">{{ $t('Entries') }}</v-label>
                 <v-list density="compact">
-                    <v-list-item variant="tonal" class="mt-1" v-for="[i, e] in props.shoppingListFood.entries" :key="e.id">
-                        <v-list-item-title>
-                            <b>
-                                {{ e.amount }}
-                                <span v-if="e.unit">{{ e.unit.name }}</span>
-                            </b>
-                            {{ e.food.name }}
-                        </v-list-item-title>
-                        <v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.recipeName !== ''">
-                            <v-icon icon="$recipes" size="x-small"></v-icon> {{ e.recipeMealplan.servings }} {{ $t('Servings') }}
-                            <router-link :to="{name: 'view_recipe', params: {id: e.recipeMealplan.id}}" target="_blank"><b>
-                                {{ e.recipeMealplan.recipeName }} </b>
-                            </router-link>
-                        </v-list-item-subtitle>
-                        <v-list-item-subtitle v-if="e.recipeMealplan && e.recipeMealplan.mealplanType !== undefined">
-                            <v-icon icon="$mealplan" size="x-small"></v-icon> {{ e.recipeMealplan.mealplanType }} {{ DateTime.fromJSDate(e.recipeMealplan.mealplanFromDate).toLocaleString(DateTime.DATE_SHORT) }}
-                        </v-list-item-subtitle>
-                        <v-list-item-subtitle>
-                            <v-icon icon="fa-solid fa-user" size="x-small"></v-icon> {{ e.createdBy.displayName }} - {{ DateTime.fromJSDate(e.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
-                        </v-list-item-subtitle>
-
-                        <template #append>
-                            <v-btn size="small" color="edit"> <v-icon icon="$edit"></v-icon></v-btn>
-                            <v-btn size="small" color="delete"> <v-icon icon="$delete"></v-icon></v-btn>
-                        </template>
-                    </v-list-item>
+                    <template v-for="[i, e] in props.shoppingListFood.entries" :key="e.id">
+                        <v-list-item border class="mt-1" :class="{'cursor-pointer': !e.recipeMealplan}">
+                            <v-list-item-title>
+                                <b>
+                                    {{ e.amount }}
+                                    <span v-if="e.unit">{{ e.unit.name }}</span>
+                                </b>
+                                {{ e.food.name }}
+                            </v-list-item-title>
+                            <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-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-list-item-subtitle>
+                                {{ e.createdBy.displayName }} - {{ DateTime.fromJSDate(e.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
+                            </v-list-item-subtitle>
+
+                            <template #append>
+                                <v-btn size="small" color="delete" icon="$delete" v-if="!e.recipeMealplan">
+                                    <v-icon icon="$delete"></v-icon>
+                                </v-btn>
+                            </template>
+
+                            <!-- TODO make properly reactive or delete from the food instance in this component as well-->
+                            <model-edit-dialog model="ShoppingListEntry" :item="e" @delete="useShoppingStore().entries.delete(e.id!);" v-if="!e.recipeMealplan"></model-edit-dialog>
+                        </v-list-item>
+                    </template>
+
+
                 </v-list>
 
+
             </v-card-text>
+            <v-card-actions v-if="mobile">
+                <v-btn @click="showDialog = false">{{ $t('Close') }}</v-btn>
+            </v-card-actions>
         </v-card>
     </v-dialog>
 </template>
@@ -79,7 +91,13 @@ import {ShoppingListEntry} from "@/openapi";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import {IShoppingList, IShoppingListFood} from "@/types/Shopping";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
+import {VNumberInput} from "vuetify/labs/VNumberInput";
 import {DateTime} from "luxon";
+import {useDisplay} from "vuetify";
+import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import {useShoppingStore} from "@/stores/ShoppingStore";
+
+const {mobile} = useDisplay()
 
 const showDialog = defineModel<Boolean>()
 
@@ -91,4 +109,5 @@ const props = defineProps({
 
 <style scoped>
 
+
 </style>
\ No newline at end of file
diff --git a/vue3/src/components/dialogs/VClosableCardTitle.vue b/vue3/src/components/dialogs/VClosableCardTitle.vue
index 2cf346d9cc..3cb8028916 100644
--- a/vue3/src/components/dialogs/VClosableCardTitle.vue
+++ b/vue3/src/components/dialogs/VClosableCardTitle.vue
@@ -1,13 +1,13 @@
 <template>
-    <v-card-title >
-        <v-row align="center">
+    <v-card-title class="pb-0">
+        <v-row align="center" >
             <v-col cols="11" class="text-truncate">
                 <i :class="props.icon" v-if="props.icon != ''"></i>
                 {{ props.title }}
                 <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle}}</v-card-subtitle>
             </v-col>
             <v-col cols="1" v-if="!props.hideClose">
-                <v-btn class="float-right" icon="$close" variant="plain" @click="model = false; emit('close')"></v-btn>
+                <v-btn class="float-right pr-2" icon="$close" variant="plain" @click="model = false; emit('close')"></v-btn>
             </v-col>
         </v-row>
     </v-card-title>
diff --git a/vue3/src/components/model_editors/ShoppingListEntryEditor.vue b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
new file mode 100644
index 0000000000..9e4e5a56a3
--- /dev/null
+++ b/vue3/src/components/model_editors/ShoppingListEntryEditor.vue
@@ -0,0 +1,62 @@
+<template>
+    <model-editor-base
+        :loading="loading"
+        :dialog="dialog"
+        @save="saveObject"
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-class="modelClass"
+        :object-name="editingObjName()">
+        <v-card-text>
+            <v-form :disabled="loading">
+                <v-number-input v-model="editingObj.amount" control-variant="split">
+                    <template #prepend>
+                        <v-btn icon="" @click="editingObj.amount = editingObj.amount / 2">
+                            <v-icon icon="fa-solid fa-divide"></v-icon>
+                        </v-btn>
+                    </template>
+                    <template #append>
+                        <v-btn icon="" @click="editingObj.amount = editingObj.amount * 2">
+                            <v-icon icon="fa-solid fa-times"></v-icon>
+                        </v-btn>
+                    </template>
+                </v-number-input>
+                <model-select model="Unit" v-model="editingObj.unit"></model-select>
+                <model-select model="Food" v-model="editingObj.food"></model-select>
+            </v-form>
+        </v-card-text>
+    </model-editor-base>
+
+</template>
+
+<script setup lang="ts">
+
+import {onMounted, PropType} from "vue";
+import {ShoppingListEntry} from "@/openapi";
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import {useI18n} from "vue-i18n";
+import {VNumberInput} from "vuetify/labs/VNumberInput";
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+
+const props = defineProps({
+    item: {type: {} as PropType<ShoppingListEntry>, required: false, default: null},
+    itemId: {type: [Number, String], required: false, default: undefined},
+    dialog: {type: Boolean, default: false}
+})
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<ShoppingListEntry>('ShoppingListEntry', emit)
+
+// object specific data (for selects/display)
+
+onMounted(() => {
+    setupState(props.item, props.itemId)
+})
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/composables/useModelEditorFunctions.ts b/vue3/src/composables/useModelEditorFunctions.ts
index b5613db82b..461d0c2698 100644
--- a/vue3/src/composables/useModelEditorFunctions.ts
+++ b/vue3/src/composables/useModelEditorFunctions.ts
@@ -3,6 +3,7 @@ import {onBeforeMount, ref} from "vue";
 import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models";
 import {useI18n} from "vue-i18n";
 import {ResponseError} from "@/openapi";
+import {getNestedProperty} from "@/utils/utils";
 
 // TODO type emit parameter (https://mokkapps.de/vue-tips/emit-event-from-composable)
 // TODO alternatively there seems to be a getContext method to get the calling context (good practice?)
@@ -120,7 +121,8 @@ export function useModelEditorFunctions<T>(modelName: EditorSupportedModels, emi
         let name = ''
         if (editingObj.value.id) {
             modelClass.value.model.toStringKeys.forEach(key => {
-                name += ' ' + key.split('.').reduce((a, b) => a[b], editingObj.value);
+                let value = getNestedProperty(editingObj.value, key)
+                name += ' ' + ((value != null) ? value : '')
             })
         }
 
diff --git a/vue3/src/locales/ar.json b/vue3/src/locales/ar.json
index 29db61be4d..60e1ce6756 100644
--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -260,6 +260,7 @@
   "Servings": "",
   "Settings": "",
   "Share": "",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "",
   "Shopping_Category": "",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/bg.json b/vue3/src/locales/bg.json
index c09d6ddc65..6193d38baf 100644
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -253,6 +253,7 @@
   "Servings": "Порции",
   "Settings": "Настройки",
   "Share": "Споделяне",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Категории за пазаруване",
   "Shopping_Category": "Категория за пазаруване",
   "Shopping_List_Empty": "Вашият списък за пазаруване в момента е празен, можете да добавяте артикули чрез контекстното меню на запис на план за хранене (щракнете с десния бутон върху картата или щракнете с левия бутон върху иконата на менюто)",
diff --git a/vue3/src/locales/ca.json b/vue3/src/locales/ca.json
index c065e1ac76..6c2b254533 100644
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -333,6 +333,7 @@
   "Settings": "",
   "Share": "",
   "ShoppingBackgroundSyncWarning": "",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "",
   "Shopping_Category": "",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/cs.json b/vue3/src/locales/cs.json
index 8a2f6acbb3..45b2b3d02c 100644
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -330,6 +330,7 @@
   "Servings": "Porce",
   "Settings": "Nastavení",
   "Share": "Sdílet",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Kategorie nákupního seznamu",
   "Shopping_Category": "Kategorie nákupního seznamu",
   "Shopping_List_Empty": "Váš nákupní seznam je momentálně prázdný, můžete přidat položky pomocí kontextového menu záznamu v jídelníčku (pravým kliknutím na kartu nebo levým kliknutím na ikonu menu)",
diff --git a/vue3/src/locales/da.json b/vue3/src/locales/da.json
index ee7d332822..2d97edb661 100644
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -312,6 +312,7 @@
   "Servings": "Serveringer",
   "Settings": "Indstillinger",
   "Share": "Del",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Indkøbskategorier",
   "Shopping_Category": "Indkøbskategori",
   "Shopping_List_Empty": "Din indkøbsliste er i øjeblikket tom, du kan tilføje varer via menuen for et madplanspunkt (højreklik på punktet eller venstreklik på menu ikonet)",
diff --git a/vue3/src/locales/de.json b/vue3/src/locales/de.json
index 2bfe443f47..55f392bbd5 100644
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -336,6 +336,7 @@
   "Settings": "Einstellungen",
   "Share": "Teilen",
   "ShoppingBackgroundSyncWarning": "Schlechte Netzwerkverbindung, Warten auf Synchronisation ...",
+  "ShoppingListEntry": "Einkaufslisten Eintrag",
   "Shopping_Categories": "Einkaufskategorien",
   "Shopping_Category": "Einkaufskategorie",
   "Shopping_List_Empty": "Deine Einkaufsliste ist aktuell leer. Einträge können über das Kontextmenü hinzugefügt werden (Rechtsklick auf einen Eintrag oder Klick auf das Menü-Icon)",
diff --git a/vue3/src/locales/el.json b/vue3/src/locales/el.json
index 59de36fbf0..d971f2dd05 100644
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -304,6 +304,7 @@
   "Servings": "Μερίδες",
   "Settings": "Ρυθμίσεις",
   "Share": "Κοινοποίηση",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Κατηγορίες αγορών",
   "Shopping_Category": "Κατηγορία αγορών",
   "Shopping_List_Empty": "Η λίστα αγορών σας είναι κενή, μπορείτε να προσθέσετε αντικείμενα από το μενού μιας εγγραφής στο πρόγραμμα γευμάτων (δεξί κλικ στην κάρτα ή αριστερό κλικ στο εικονίδιο του μενού)",
diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
index 3dfe8a8892..b71c0f6c80 100644
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -335,6 +335,7 @@
   "Settings": "Settings",
   "Share": "Share",
   "ShoppingBackgroundSyncWarning": "Bad network, waiting to sync ...",
+  "ShoppingListEntry": "Shoppinglist Entry",
   "Shopping_Categories": "Shopping Categories",
   "Shopping_Category": "Shopping Category",
   "Shopping_List_Empty": "Your shopping list is currently empty, you can add items via the context menu of a meal plan entry (right click on the card or left click the menu icon)",
diff --git a/vue3/src/locales/es.json b/vue3/src/locales/es.json
index 355d28327a..691e5d25e9 100644
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -332,6 +332,7 @@
   "Settings": "Opciones",
   "Share": "Compartir",
   "ShoppingBackgroundSyncWarning": "Red defectuosa, esperando para sincronizar ...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Categorías Compras",
   "Shopping_Category": "Categoría Compras",
   "Shopping_List_Empty": "Tu lista de la compra esta actualmente vacía, puedes añadir nuevos elementos mediante el menú de un régimen de comidas (click derecho en la tarjeta o click sobre el menú de la misma)",
diff --git a/vue3/src/locales/fi.json b/vue3/src/locales/fi.json
index aa3edf1240..90b4151000 100644
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -185,6 +185,7 @@
   "Servings": "Annokset",
   "Settings": "Asetukset",
   "Share": "Jaa",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Ostoskategoriat",
   "Shopping_Category": "Ostosluokka",
   "Shopping_List_Empty": "Ostoslistasi on tällä hetkellä tyhjä, voit lisätä tuotteita ateriasuunnitelmamerkinnän valikon kautta(klikkaa korttia hiiren kaksoispainikkeella tai valikkokuvaketta)",
diff --git a/vue3/src/locales/fr.json b/vue3/src/locales/fr.json
index 2af5491737..437a9c6f26 100644
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -333,6 +333,7 @@
   "Settings": "Paramètres",
   "Share": "Partager",
   "ShoppingBackgroundSyncWarning": "Mauvais réseau, en attente de synchronisation ...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Catégories de courses",
   "Shopping_Category": "Catégorie de courses",
   "Shopping_List_Empty": "Votre liste de courses est actuellement vide, vous pouvez ajouter des articles via le menu contextuel d’une entrée de menu de la semaine (clic droit sur la carte ou clic gauche sur l’icône du menu)",
diff --git a/vue3/src/locales/he.json b/vue3/src/locales/he.json
index ad18476612..0ddf767523 100644
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -334,6 +334,7 @@
   "Settings": "הגדרות",
   "Share": "שיתוף",
   "ShoppingBackgroundSyncWarning": "בעיית תקשורת, מחכה לסנכון...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "קטגוריות קניות",
   "Shopping_Category": "קטגוריית קניות",
   "Shopping_List_Empty": "רשימת הקניות שלך ריקה כרגע. ניתן להוסיף פריטים דרך תפריט תוכנית אוכל (מקש ימני על הכרטיס או מקש שמאלי על האייקון בתפריט)",
diff --git a/vue3/src/locales/hu.json b/vue3/src/locales/hu.json
index ce144a09c0..c225ca6bab 100644
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -306,6 +306,7 @@
   "Servings": "Adag",
   "Settings": "Beállítások",
   "Share": "Megosztás",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Vásárlási kategóriák",
   "Shopping_Category": "Vásárlási kategória",
   "Shopping_List_Empty": "A bevásárlólista jelenleg üres. A tételeket a menüterv menüjében (jobb klikk a kártyára vagy bal klikk a menü ikonjára) adhatja hozzá.",
diff --git a/vue3/src/locales/hy.json b/vue3/src/locales/hy.json
index 865b56c914..e85f2c7623 100644
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -129,6 +129,7 @@
   "Servings": "",
   "Settings": "Կարգավորումներ",
   "Share": "",
+  "ShoppingListEntry": "",
   "Shopping_Category": "Գնումների կատեգորիա",
   "Shopping_list": "Գնումների ցուցակ",
   "Show_as_header": "Ցույց տալ որպես խորագիր",
diff --git a/vue3/src/locales/id.json b/vue3/src/locales/id.json
index 9d5213dc03..f20db97aaf 100644
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -282,6 +282,7 @@
   "Servings": "Porsi",
   "Settings": "Pengaturan",
   "Share": "Bagikan",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Kategori Belanja",
   "Shopping_Category": "Kategori Belanja",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/is.json b/vue3/src/locales/is.json
index 588e3033ad..570e31f4a3 100644
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -333,6 +333,7 @@
   "Settings": "",
   "Share": "",
   "ShoppingBackgroundSyncWarning": "",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "",
   "Shopping_Category": "",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/it.json b/vue3/src/locales/it.json
index d7903c6f88..89f825a756 100644
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -290,6 +290,7 @@
   "Servings": "Porzioni",
   "Settings": "Impostazioni",
   "Share": "Condividi",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Categorie di spesa",
   "Shopping_Category": "Categoria Spesa",
   "Shopping_List_Empty": "La tua lista della spesa è vuota, puoi aggiungere elementi dal menù contestuale di una voce nel piano alimentare (clicca con il tasto destro sulla scheda o clicca con il tasto sinistro sull'icona del menù)",
diff --git a/vue3/src/locales/lt.json b/vue3/src/locales/lt.json
index 6ec0e58618..a927d31347 100644
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -310,6 +310,7 @@
   "Servings": "",
   "Settings": "",
   "Share": "",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "",
   "Shopping_Category": "",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/nb_NO.json b/vue3/src/locales/nb_NO.json
index cb31b948b4..c1b3e6e821 100644
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -302,6 +302,7 @@
   "Servings": "Porsjoner",
   "Settings": "Innstillinger",
   "Share": "Del",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Butikk Kategorier",
   "Shopping_Category": "Butikk Kategori",
   "Shopping_List_Empty": "",
diff --git a/vue3/src/locales/nl.json b/vue3/src/locales/nl.json
index e0c275c282..c2a7ae780f 100644
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -306,6 +306,7 @@
   "Servings": "Porties",
   "Settings": "Instellingen",
   "Share": "Deel",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Boodschappen categorieën",
   "Shopping_Category": "Boodschappencategorie",
   "Shopping_List_Empty": "Je boodschappenlijst is op dit moment leeg, je kan artikelen via het context menu of een maaltijdplan (rechtermuisknop op de kaart of linkermuisknop op het menu icoon) toevoegen",
diff --git a/vue3/src/locales/pl.json b/vue3/src/locales/pl.json
index 86143ac023..6d5927c69e 100644
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -335,6 +335,7 @@
   "Settings": "Ustawienia",
   "Share": "Udostępnij",
   "ShoppingBackgroundSyncWarning": "Słaba sieć, oczekiwanie na synchronizację...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Kategorie zakupów",
   "Shopping_Category": "Kategoria zakupów",
   "Shopping_List_Empty": "Twoja lista zakupów jest obecnie pusta, możesz dodawać pozycje za pomocą menu kontekstowego wpisu planu posiłków (kliknij prawym przyciskiem myszy na karcie lub lewym przyciskiem myszy ikonę menu)",
diff --git a/vue3/src/locales/pt.json b/vue3/src/locales/pt.json
index 197164c623..e2ca580a30 100644
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -248,6 +248,7 @@
   "Servings": "Doses",
   "Settings": "Definições",
   "Share": "Partilhar",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Categorias de Compras",
   "Shopping_Category": "Categoria de Compras",
   "Shopping_List_Empty": "A sua lista de compras encontra-se vazia, pode adicionar itens através do menu de contexto de um plano de refeições (carregar com o botão direito no cartão ou carregar com o botão esquerdo no ícone do menu)",
diff --git a/vue3/src/locales/pt_BR.json b/vue3/src/locales/pt_BR.json
index 2da07263b9..3c97a92048 100644
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -322,6 +322,7 @@
   "Settings": "Configurações",
   "Share": "Compartilhar",
   "ShoppingBackgroundSyncWarning": "Rede ruim, aguardando sincronização...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Categorias de Mercado",
   "Shopping_Category": "Categoria de Mercado",
   "Shopping_List_Empty": "Sua lista de compras está vazia. Você pode incluir itens pelo menu Plano de Refeição (click direiro no cartão ou click esquerdo no ícone do menu)",
diff --git a/vue3/src/locales/ro.json b/vue3/src/locales/ro.json
index e13ba107fb..e5f58eb070 100644
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -294,6 +294,7 @@
   "Servings": "Porții",
   "Settings": "Setări",
   "Share": "Împărtășire",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Categorii de cumpărături",
   "Shopping_Category": "Categorie de cumpărături",
   "Shopping_List_Empty": "Lista de cumpărături este în prezent goală, puteți adăuga articole prin meniul contextual al unei intrări în planul de alimentație (faceți click dreapta pe card sau faceți click stânga pe iconița meniului)",
diff --git a/vue3/src/locales/ru.json b/vue3/src/locales/ru.json
index b1918c9df1..0632694e6d 100644
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -233,6 +233,7 @@
   "Servings": "Порции",
   "Settings": "Настройки",
   "Share": "Поделиться",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Категории покупок",
   "Shopping_Category": "Категория покупок",
   "Shopping_List_Empty": "В настоящее время ваш список покупок пуст, вы можете добавить пункты через контекстное меню записи плана питания (щелкните правой кнопкой мыши на карточке или щелкните левой кнопкой мыши на значке меню)",
diff --git a/vue3/src/locales/sl.json b/vue3/src/locales/sl.json
index ed1bcd21f6..3c30d51388 100644
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -223,6 +223,7 @@
   "Servings": "Porcije",
   "Settings": "Nastavitve",
   "Share": "Deli",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Kategorije nakupa",
   "Shopping_Category": "Kategorija nakupa",
   "Shopping_List_Empty": "Tvoj nakupovalni listek je trenutno prazen. Stvari lahko dodaš preko menija za načrt obroka (desni klik na kartico ali levi klik na ikono za meni)",
diff --git a/vue3/src/locales/sv.json b/vue3/src/locales/sv.json
index 200d1ea28e..0976f0d003 100644
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -335,6 +335,7 @@
   "Settings": "Inställningar",
   "Share": "Dela",
   "ShoppingBackgroundSyncWarning": "Dålig uppkoppling, inväntar synkronisering...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Shopping kategorier",
   "Shopping_Category": "Shopping kategori",
   "Shopping_List_Empty": "Din inköpslista är för närvarande tom, du kan lägga till varor via snabbmenyn för en måltidsplan (högerklicka på kortet eller vänsterklicka på menyikonen)",
diff --git a/vue3/src/locales/tr.json b/vue3/src/locales/tr.json
index 0b77019f03..2a7af8d0ff 100644
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -334,6 +334,7 @@
   "Settings": "Ayarlar",
   "Share": "Paylaş",
   "ShoppingBackgroundSyncWarning": "Kötü bağlantı, senkronizasyon bekleniyor...",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Alışveriş Kategorileri",
   "Shopping_Category": "Alışveriş Kategorisi",
   "Shopping_List_Empty": "Alışveriş listeniz şu anda boş, yemek planı girişinin içerik menüsü aracılığıyla öğeler ekleyebilirsiniz (karta sağ tıklayın veya menü simgesine sol tıklayın)",
diff --git a/vue3/src/locales/uk.json b/vue3/src/locales/uk.json
index 0b3cd78156..d142f46826 100644
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -268,6 +268,7 @@
   "Servings": "Порції",
   "Settings": "Налаштування",
   "Share": "Поділитися",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "Категорії Покупок",
   "Shopping_Category": "Категорія Покупок",
   "Shopping_List_Empty": "Ваш список покупок зараз пустий, ви можете додати товари за допомогою контекстного меню плану харчування (права кнопка мишки на картку або на ліву кнопку на іконку меню)",
diff --git a/vue3/src/locales/zh_Hans.json b/vue3/src/locales/zh_Hans.json
index 1a2701730f..ca19e21534 100644
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -329,6 +329,7 @@
   "Settings": "设置",
   "Share": "分享",
   "ShoppingBackgroundSyncWarning": "网络状况不佳，正在等待进行同步……",
+  "ShoppingListEntry": "",
   "Shopping_Categories": "购物类别",
   "Shopping_Category": "购物类别",
   "Shopping_List_Empty": "您的购物列表当前为空，您可以通过用餐计划条目的上下文菜单添加项目（右键单击卡片或左键单击菜单图标）",
diff --git a/vue3/src/locales/zh_Hant.json b/vue3/src/locales/zh_Hant.json
index 79e7e3f3cf..ff738517f6 100644
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -101,6 +101,7 @@
   "Servings": "",
   "Settings": "",
   "Share": "",
+  "ShoppingListEntry": "",
   "Show_as_header": "顯示為標題",
   "Size": "",
   "Sort_by_new": "按最新排序",
diff --git a/vue3/src/types/Models.ts b/vue3/src/types/Models.ts
index 465399f35a..ede848560a 100644
--- a/vue3/src/types/Models.ts
+++ b/vue3/src/types/Models.ts
@@ -70,7 +70,7 @@ export type Model = {
 }
 export let SUPPORTED_MODELS = new Map<string, Model>()
 
-export type EditorSupportedModels = 'UnitConversion' | 'AccessToken' | 'InviteLink' | 'UserSpace' | 'MealType' | 'MealPlan' | 'Property' | 'Food' | 'Supermarket' | 'SupermarketCategory' | 'PropertyType' | 'Automation' | 'Keyword' | 'UserFile'
+export type EditorSupportedModels = 'UnitConversion' | 'AccessToken' | 'InviteLink' | 'UserSpace' | 'MealType' | 'MealPlan' | 'Property' | 'Food' | 'Supermarket' | 'SupermarketCategory' | 'PropertyType' | 'Automation' | 'Keyword' | 'UserFile' | 'ShoppingListEntry'
 
 export const TFood = {
     name: 'Food',
@@ -215,6 +215,23 @@ export const TSupermarketCategory = {
 } as Model
 registerModel(TSupermarketCategory)
 
+export const TShoppingListEntry = {
+    name: 'ShoppingListEntry',
+    localizationKey: 'ShoppingListEntry',
+    icon: 'fa-solid fa-list-check',
+
+    isPaginated: true,
+    toStringKeys: ['amount', 'unit.name', 'food.name'],
+
+    tableHeaders: [
+        {title: 'Amount', key: 'amount'},
+        {title: 'Unit', key: 'unit.name'},
+        {title: 'Food', key: 'food.name'},
+        {title: 'Actions', key: 'action', align: 'end'},
+    ]
+} as Model
+registerModel(TShoppingListEntry)
+
 export const TPropertyType = {
     name: 'PropertyType',
     localizationKey: 'Property',
@@ -236,7 +253,7 @@ export const TProperty = {
     icon: 'fa-solid fa-database',
 
     isPaginated: true,
-    toStringKeys: ['propertyType'], // TODO improve
+    toStringKeys: ['propertyAmount','propertyType.name'],
 
     tableHeaders: [
         {title: 'Amount', key: 'propertyAmount'},
@@ -252,7 +269,7 @@ export const TUnitConversion = {
     icon: 'fa-solid fa-exchange-alt',
 
     isPaginated: true,
-    toStringKeys: ['food'], // TODO improve
+    toStringKeys: ['food.name','baseUnit.name','convertedUnit.name'],
 
     tableHeaders: [
         {title: 'Food', key: 'food.name'},
@@ -350,7 +367,7 @@ export const TUserSpace = {
     icon: 'fa-solid fa-users',
 
     isPaginated: true,
-    toStringKeys: ['user'], // TODO improve
+    toStringKeys: ['user.displayName'],
 
     disableCreate: true,
 
diff --git a/vue3/src/utils/utils.ts b/vue3/src/utils/utils.ts
new file mode 100644
index 0000000000..2a82349c9a
--- /dev/null
+++ b/vue3/src/utils/utils.ts
@@ -0,0 +1,18 @@
+/**
+ * Gets a nested property of an object given a dot-notation path.
+ *
+ * @param object The object to access the property from.
+ * @param path The dot-notation path to the property.
+ * @returns The value of the nested property, or `undefined` if not found.
+ */
+export function getNestedProperty(object: any, path: string): any {
+  const pathParts = path.split('.');
+
+  return pathParts.reduce((obj, key) => {
+    if (obj && typeof obj === 'object') {
+      return obj[key]
+    } else {
+      return undefined;
+    }
+  }, object);
+}
\ No newline at end of file