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.
This commit is contained in:
Hayden 2022-10-22 13:00:10 -08:00 committed by GitHub
parent 2e11e57e0a
commit c5613694d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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