From ea7005e8227e0e15c7e4eb2c5bdb4e79f22469bc Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 18 Feb 2024 13:59:03 -0600
Subject: [PATCH] feat: Shopping List Editor Improvements (#3178)

* modify new item factory to default to zero qty and use last isFood value

* automatically set the label of an item when choosing a food

* fix when switching to a food with no label

* removed trivial type annotation

* more lint

* removed debug log
---
 .../Domain/ShoppingList/ShoppingListItemEditor.vue   | 12 +++++++++++-
 frontend/pages/shopping-lists/_id.vue                | 10 +++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
index f68c742e0abc..249e3f121b0e 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "@nuxtjs/composition-api";
+import { defineComponent, computed, watch } from "@nuxtjs/composition-api";
 import { ShoppingListItemCreate, ShoppingListItemOut } from "~/lib/api/types/group";
 import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@@ -128,6 +128,16 @@ export default defineComponent({
         context.emit("input", val);
       },
     });
+
+    watch(
+      () => props.value.food,
+      (newFood) => {
+        // @ts-ignore our logic already assumes there's a label attribute, even if TS doesn't think there is
+        listItem.value.label = newFood?.label || null;
+        listItem.value.labelId = listItem.value.label?.id || null;
+      }
+    );
+
     return {
       listItem,
     };
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index a8150f19bd6b..9dabc3ae1e42 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -644,15 +644,15 @@ export default defineComponent({
     // Create New Item
 
     const createEditorOpen = ref(false);
-    const createListItemData = ref<ShoppingListItemCreate>(ingredientResetFactory());
+    const createListItemData = ref<ShoppingListItemCreate>(listItemFactory());
 
-    function ingredientResetFactory(): ShoppingListItemCreate {
+    function listItemFactory(isFood = false): ShoppingListItemCreate {
       return {
         shoppingListId: id,
         checked: false,
         position: shoppingList.value?.listItems?.length || 1,
-        isFood: false,
-        quantity: 1,
+        isFood,
+        quantity: 0,
         note: "",
         labelId: undefined,
         unitId: undefined,
@@ -675,7 +675,7 @@ export default defineComponent({
       loadingCounter.value -= 1;
 
       if (data) {
-        createListItemData.value = ingredientResetFactory();
+        createListItemData.value = listItemFactory(createListItemData.value.isFood || false);
         createEditorOpen.value = false;
         refresh();
       }