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

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,
     };

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();
       }