From c5613694d9cc2f4c6941e9a87b225dc33e3099d4 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 22 Oct 2022 13:00:10 -0800
Subject: [PATCH] fix: display food label if no label present (#1757)

The only label that was applied to the shopping list view was one that was manually assigned. Now we first check if the item has a label, if not we check if the food has a label, then if there really is no label we display nothing.
---
 .../Domain/ShoppingList/ShoppingListItem.vue  | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index a5757bf89972..081cab71318b 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -14,7 +14,7 @@
         </div>
       </template>
     </v-checkbox>
-    <MultiPurposeLabel v-if="listItem.label" :label="listItem.label" class="ml-auto mt-2" small />
+    <MultiPurposeLabel v-if="label" :label="label" class="ml-auto mt-2" small />
     <div style="min-width: 72px">
       <v-menu offset-x left min-width="125px">
         <template #activator="{ on, attrs }">
@@ -59,6 +59,7 @@ import { ShoppingListItemCreate } from "~/lib/api/types/group";
 import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
 import { getDisplayText } from "~/composables/use-display-text";
+import { MultiPurposeLabelSummary } from "~/lib/api/types/user";
 
 interface actions {
   text: string;
@@ -137,6 +138,24 @@ export default defineComponent({
       getDisplayText(listItem.value.note, listItem.value.quantity, listItem.value.food, listItem.value.unit)
     );
 
+    /**
+     * Get's the label for the shopping list item. Either the label assign to the item
+     * or the label of the food applied.
+     */
+    const label = computed<MultiPurposeLabelSummary | undefined>(() => {
+      // @ts-ignore - it _might_ exists
+      if (listItem.value.label) {
+        // @ts-ignore - it _might_ exists
+        return listItem.value.label as MultiPurposeLabelSummary;
+      }
+
+      if (listItem.value.food?.label) {
+        return listItem.value.food.label;
+      }
+
+      return undefined;
+    });
+
     return {
       displayText,
       updatedLabels,
@@ -145,6 +164,7 @@ export default defineComponent({
       edit,
       contextMenu,
       listItem,
+      label,
     };
   },
 });