From 6fc078090a29c8a95d6dcc0fff3ee4af27aaaf75 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 28 Dec 2024 15:24:07 +0100
Subject: [PATCH] improved shopping

---
 .../dialogs/ShoppingLineItemDialog.vue        | 30 ++++++++++++++-----
 .../components/display/ShoppingListView.vue   | 10 +++++--
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
index 6fc541480..3629bc5a9 100644
--- a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
+++ b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
@@ -35,20 +35,25 @@
                         </v-btn>
                     </v-col>
                     <v-col class="pt-0">
-                        <v-btn height="80px" color="success" density="compact" size="small" @click="addEntryForFood()" block stacked>
-                            <i class="fa-solid fa-plus fa-2x mb-2"></i>
-                            {{ $t('Add') }}
+                        <v-btn height="80px" color="error" density="compact" size="small" @click="deleteAllEntries()" block stacked>
+                            <i class="fa-solid fa-trash fa-2x mb-2"></i>
+                            {{ $t('Delete_All') }}
                         </v-btn>
                     </v-col>
                 </v-row>
 
-                <v-label class="mt-3">{{ $t('Entries') }}</v-label>
+                <div class="mt-2">
+                    <v-label class="mt-3">{{ $t('Entries') }}</v-label>
+                    <v-btn color="success" class="float-right" @click="addEntryForFood()">
+                        <v-icon icon="$create"></v-icon>
+                    </v-btn>
+                </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-title>
                                 <b>
-                                    {{ e.amount }}
+                                    {{ $n(e.amount) }}
                                     <span v-if="e.unit">{{ e.unit.name }}</span>
                                 </b>
                                 {{ e.food.name }}
@@ -110,7 +115,7 @@ import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 const {mobile} = useDisplay()
 
 const showDialog = defineModel<Boolean>()
-const shoppingListFood = defineModel<IShoppingListFood>('shoppingListFood')
+const shoppingListFood = defineModel<IShoppingListFood>('shoppingListFood', {required: true})
 
 /**
  * returns a flat list of entries for the given shopping list food
@@ -152,13 +157,22 @@ function addEntryForFood() {
         food: shoppingListFood.value?.food,
         unit: null,
         amount: 1,
-    } as ShoppingListEntry, false).then((r: ShoppingListEntry|undefined) => {
-        if(r != undefined){
+    } as ShoppingListEntry, false).then((r: ShoppingListEntry | undefined) => {
+        if (r != undefined) {
             shoppingListFood.value?.entries.set(r.id!, r)
         }
     })
 }
 
+/**
+ * delete all shopping list entries for the given shopping list food
+ */
+function deleteAllEntries() {
+    shoppingListFood.value.entries.forEach(e => {
+        useShoppingStore().deleteObject(e, true)
+    })
+}
+
 </script>
 
 <style scoped>
diff --git a/vue3/src/components/display/ShoppingListView.vue b/vue3/src/components/display/ShoppingListView.vue
index b09e5c4ba..21160e6bf 100644
--- a/vue3/src/components/display/ShoppingListView.vue
+++ b/vue3/src/components/display/ShoppingListView.vue
@@ -61,6 +61,11 @@
 
             </v-list>
         </v-menu>
+
+        <v-btn height="100%" rounded="0" variant="plain" @click="useShoppingStore().undoChange()">
+            <i class="fa-solid fa-arrow-rotate-left"></i>
+        </v-btn>
+
     </v-tabs>
 
     <v-window v-model="currentTab">
@@ -180,7 +185,8 @@
                                         <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="deleteListRecipe(r)"></delete-confirm-dialog>
+                                                <delete-confirm-dialog :object-name="r.recipeName" :model-name="$t('ShoppingListRecipe')"
+                                                                       @delete="deleteListRecipe(r)"></delete-confirm-dialog>
                                             </v-btn>
                                         </template>
                                     </v-list-item>
@@ -346,7 +352,7 @@ function autoSyncLoop() {
 /**
  * delete shopping list recipe
  */
-function deleteListRecipe(slr: ShoppingListRecipe){
+function deleteListRecipe(slr: ShoppingListRecipe) {
     let api = new ApiApi()
 
     api.apiShoppingListRecipeDestroy({id: slr.id!}).then(r => {