From 5a0c0343915f9a91145ca4add7ef09fe0801693f Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 2 Jun 2022 09:12:05 -0800
Subject: [PATCH] fix: shopping list label editor (#1333)

* remove head props

* lazily compute itemsByLabel with watcher on fetch

* remove unused import
---
 .../ShoppingList/ShoppingListItemEditor.vue      |  5 +----
 frontend/pages/group/data/foods.vue              |  1 -
 frontend/pages/shopping-lists/_id.vue            | 16 +++++++++++-----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
index 57498a329..83c9ecaee 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
@@ -122,8 +122,5 @@ export default defineComponent({
       listItem,
     };
   },
-  head: {
-    title: "vbase-nuxt",
-  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/pages/group/data/foods.vue b/frontend/pages/group/data/foods.vue
index a5fa8eba4..36f5d546a 100644
--- a/frontend/pages/group/data/foods.vue
+++ b/frontend/pages/group/data/foods.vue
@@ -130,7 +130,6 @@ import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import { IngredientFood } from "~/types/api-types/recipe";
 import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
-import { MultiPurposeLabelSummary } from "~/types/api-types/labels";
 import { useLocales } from "~/composables/use-locales";
 import { useFoodStore, useLabelStore } from "~/composables/store";
 
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 807e34cb0..8fab7a55f 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -187,7 +187,7 @@
 <script lang="ts">
 import draggable from "vuedraggable";
 
-import { defineComponent, useAsync, useRoute, computed, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useRoute, computed, ref, watch } from "@nuxtjs/composition-api";
 import { useToggle } from "@vueuse/core";
 import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
@@ -367,11 +367,13 @@ export default defineComponent({
       return labels;
     });
 
-    const itemsByLabel = computed(() => {
-      const items: { [prop: string]: ShoppingListItemCreate[] } = {};
+    const itemsByLabel = ref<{ [key: string]: ShoppingListItemOut[] }>({});
+
+    function updateItemsByLabel() {
+      const items: { [prop: string]: ShoppingListItemOut[] } = {};
 
       const noLabel = {
-        "No Label": [] as ShoppingListItemCreate[],
+        "No Label": [] as ShoppingListItemOut[],
       };
 
       shoppingList.value?.listItems?.forEach((item) => {
@@ -394,7 +396,11 @@ export default defineComponent({
         items["No Label"] = noLabel["No Label"];
       }
 
-      return items;
+      itemsByLabel.value = items;
+    }
+
+    watch(shoppingList, () => {
+      updateItemsByLabel();
     });
 
     async function refreshLabels() {