From c8a070f4732afd31c7a4811e995d7731e4f868d4 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 19 Jan 2024 19:42:03 +0800
Subject: [PATCH] properly display item counter

---
 vue/src/apps/ShoppingListView/ShoppingListView.vue |  4 ++--
 vue/src/stores/ShoppingListStore.js                | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 4db5b9b8..8d31b8e2 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -40,8 +40,8 @@
                     <b-spinner v-if="shopping_list_store.currently_updating" type="border" small
                                style="width: 1.25em!important; height: 1.25em!important;"></b-spinner>
                     <span class="d-none d-md-inline-block ml-1">
-                        {{ $t('Shopping_list') + ` (${Object.keys(shopping_list_store.entries).length})` }}
-                    </span> <!-- TODO properly count only checked -->
+                        {{ $t('Shopping_list') + ` (${shopping_list_store.total_unchecked_food})` }}
+                    </span>
 
                 </template>
 
diff --git a/vue/src/stores/ShoppingListStore.js b/vue/src/stores/ShoppingListStore.js
index be163cb5..715fa6a4 100644
--- a/vue/src/stores/ShoppingListStore.js
+++ b/vue/src/stores/ShoppingListStore.js
@@ -18,6 +18,11 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
         supermarket_categories: [],
         supermarkets: [],
 
+        total_unchecked:0,
+        total_checked:0,
+        total_unchecked_food:0,
+        total_checked_food:0,
+
         // internal
         currently_updating: false,
         last_autosync: null,
@@ -85,10 +90,11 @@ export const useShoppingListStore = defineStore(_STORE_ID, {
                 total_unchecked_food += count_unchecked_food
                 total_checked_food += count_checked_food
             }
-            // Vue.set(structure, 'count_unchecked', total_unchecked)
-            // Vue.set(structure, 'count_checked', total_checked)
-            // Vue.set(structure, 'count_unchecked_food', total_unchecked_food)
-            // Vue.set(structure, 'count_checked_food', total_checked_food)
+
+            this.total_unchecked = total_unchecked
+            this.total_checked = total_checked
+            this.total_unchecked_food = total_unchecked_food
+            this.total_checked_food = total_checked_food
 
             // ordering
             if (useUserPreferenceStore().device_settings.shopping_selected_grouping === this.GROUP_CATEGORY && useUserPreferenceStore().device_settings.shopping_selected_supermarket !== null) {