218 lines
9.7 KiB
Vue
218 lines
9.7 KiB
Vue
<template>
|
|
<tr>
|
|
<template v-if="ingredient.is_header">
|
|
<td colspan="5" @click="done">
|
|
<b>{{ ingredient.note }}</b>
|
|
</td>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<td class="d-print-non" v-if="detailed && !add_shopping_mode" @click="done">
|
|
<i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
|
|
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
|
|
</td>
|
|
<td class="text-nowrap" @click="done">
|
|
<span v-if="ingredient.amount !== 0" v-html="calculateAmount(ingredient.amount)"></span>
|
|
</td>
|
|
<td @click="done">
|
|
<span v-if="ingredient.unit !== null && !ingredient.no_amount">{{ ingredient.unit.name }}</span>
|
|
</td>
|
|
<td @click="done">
|
|
<template v-if="ingredient.food !== null">
|
|
<!-- <i
|
|
v-if="show_shopping && !add_shopping_mode"
|
|
class="far fa-edit fa-sm px-1"
|
|
@click="editFood()"
|
|
></i> -->
|
|
<a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">{{
|
|
ingredient.food.name
|
|
}}</a>
|
|
<span v-if="ingredient.food.recipe === null">{{ ingredient.food.name }}</span>
|
|
</template>
|
|
</td>
|
|
<td v-if="detailed && !show_shopping">
|
|
<div v-if="ingredient.note">
|
|
<span v-b-popover.hover="ingredient.note" class="d-print-none touchable">
|
|
<i class="far fa-comment"></i>
|
|
</span>
|
|
<!-- v-if="ingredient.note.length > 15" -->
|
|
<!-- <span v-else>-->
|
|
<!-- {{ ingredient.note }}-->
|
|
<!-- </span>-->
|
|
|
|
<div class="d-none d-print-block"><i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}</div>
|
|
</div>
|
|
</td>
|
|
<td v-else-if="show_shopping" class="text-right text-nowrap">
|
|
<!-- in shopping mode and ingredient is not ignored -->
|
|
<div v-if="!ingredient.food.ignore_shopping">
|
|
<b-button
|
|
class="btn text-decoration-none fas fa-shopping-cart px-2 user-select-none"
|
|
variant="link"
|
|
v-b-popover.hover.click.blur.html.top="{ title: ShoppingPopover, variant: 'outline-dark' }"
|
|
:class="{
|
|
'text-success': shopping_status === true,
|
|
'text-muted': shopping_status === false,
|
|
'text-warning': shopping_status === null,
|
|
}"
|
|
/>
|
|
<span class="px-2">
|
|
<input type="checkbox" class="align-middle" v-model="shop" @change="changeShopping" />
|
|
</span>
|
|
<on-hand-badge :item="ingredient.food" />
|
|
</div>
|
|
<div v-else>
|
|
<!-- or in shopping mode and food is ignored: Shopping Badge bypasses linking ingredient to Recipe which would get ignored -->
|
|
<shopping-badge :item="ingredient.food" :override_ignore="true" class="px-1" />
|
|
<span class="px-2">
|
|
<input type="checkbox" class="align-middle" disabled v-b-popover.hover.click.blur :title="$t('IgnoredFood', { food: ingredient.food.name })" />
|
|
</span>
|
|
<on-hand-badge :item="ingredient.food" />
|
|
</div>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
|
|
<script>
|
|
import { calculateAmount, ResolveUrlMixin, ApiMixin } from "@/utils/utils"
|
|
import OnHandBadge from "@/components/Badges/OnHand"
|
|
import ShoppingBadge from "@/components/Badges/Shopping"
|
|
|
|
export default {
|
|
name: "Ingredient",
|
|
components: { OnHandBadge, ShoppingBadge },
|
|
props: {
|
|
ingredient: Object,
|
|
ingredient_factor: { type: Number, default: 1 },
|
|
detailed: { type: Boolean, default: true },
|
|
recipe_list: { type: Number }, // ShoppingListRecipe ID, to filter ShoppingStatus
|
|
show_shopping: { type: Boolean, default: false },
|
|
add_shopping_mode: { type: Boolean, default: false },
|
|
shopping_list: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
},
|
|
}, // list of unchecked ingredients in shopping list
|
|
},
|
|
mixins: [ResolveUrlMixin, ApiMixin],
|
|
data() {
|
|
return {
|
|
checked: false,
|
|
shopping_status: null,
|
|
shopping_items: [],
|
|
shop: false,
|
|
dirty: undefined,
|
|
}
|
|
},
|
|
watch: {
|
|
ShoppingListAndFilter: {
|
|
immediate: true,
|
|
handler(newVal, oldVal) {
|
|
let filtered_list = this.shopping_list
|
|
// if a recipe list is provided, filter the shopping list
|
|
if (this.recipe_list) {
|
|
filtered_list = filtered_list.filter((x) => x.list_recipe == this.recipe_list)
|
|
}
|
|
// how many ShoppingListRecipes are there for this recipe?
|
|
let count_shopping_recipes = [...new Set(filtered_list.map((x) => x.list_recipe))].length
|
|
let count_shopping_ingredient = filtered_list.filter((x) => x.ingredient == this.ingredient.id).length
|
|
|
|
if (count_shopping_recipes > 1) {
|
|
this.shop = false // don't check any boxes until user selects a shopping list to edit
|
|
if (count_shopping_ingredient >= 1) {
|
|
this.shopping_status = true
|
|
} else if (this.ingredient.food.shopping) {
|
|
this.shopping_status = null // food is in the shopping list, just not for this ingredient/recipe
|
|
} else {
|
|
this.shopping_status = false // food is not in any shopping list
|
|
}
|
|
} else {
|
|
// mark checked if the food is in the shopping list for this ingredient/recipe
|
|
if (count_shopping_ingredient >= 1) {
|
|
// ingredient is in this shopping list
|
|
this.shop = true
|
|
this.shopping_status = true
|
|
} else if (count_shopping_ingredient == 0 && this.ingredient.food.shopping) {
|
|
// food is in the shopping list, just not for this ingredient/recipe
|
|
this.shop = false
|
|
this.shopping_status = null
|
|
} else {
|
|
// the food is not in any shopping list
|
|
this.shop = false
|
|
this.shopping_status = false
|
|
}
|
|
}
|
|
// if we are in add shopping mode start with all checks marked
|
|
if (this.add_shopping_mode) {
|
|
this.shop = !this.ingredient.food.on_hand && !this.ingredient.food.ignore_shopping && !this.ingredient.food.recipe
|
|
}
|
|
},
|
|
},
|
|
},
|
|
mounted() {},
|
|
computed: {
|
|
ShoppingListAndFilter() {
|
|
// hack to watch the shopping list and the recipe list at the same time
|
|
return this.shopping_list.map((x) => x.id).join(this.recipe_list)
|
|
},
|
|
ShoppingPopover() {
|
|
if (this.shopping_status == false) {
|
|
return this.$t("NotInShopping", { food: this.ingredient.food.name })
|
|
} else {
|
|
let list = this.shopping_list.filter((x) => x.food.id == this.ingredient.food.id)
|
|
let category = this.$t("Category") + ": " + this.ingredient?.food?.supermarket_category?.name ?? this.$t("Undefined")
|
|
let popover = []
|
|
|
|
list.forEach((x) => {
|
|
popover.push(
|
|
[
|
|
"<tr style='border-bottom: 1px solid #ccc'>",
|
|
"<td style='padding: 3px;'><em>",
|
|
x?.recipe_mealplan?.name ?? "",
|
|
"</em></td>",
|
|
"<td style='padding: 3px;'>",
|
|
x?.amount ?? "",
|
|
"</td>",
|
|
"<td style='padding: 3px;'>",
|
|
x?.unit?.name ?? "" + "</td>",
|
|
"<td style='padding: 3px;'>",
|
|
x?.food?.name ?? "",
|
|
"</td></tr>",
|
|
].join("")
|
|
)
|
|
})
|
|
return "<table class='table-small'><th colspan='4'>" + category + "</th>" + popover.join("") + "</table>"
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
calculateAmount: function(x) {
|
|
return calculateAmount(x, this.ingredient_factor)
|
|
},
|
|
// sends parent recipe ingredient to notify complete has been toggled
|
|
done: function() {
|
|
this.$emit("checked-state-changed", this.ingredient)
|
|
},
|
|
// sends true/false to parent to save all ingredient shopping updates as a batch
|
|
changeShopping: function() {
|
|
this.$emit("add-to-shopping", { item: this.ingredient, add: this.shop })
|
|
},
|
|
editFood: function() {
|
|
console.log("edit the food")
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* increase size of hover/touchable space without changing spacing */
|
|
.touchable {
|
|
padding-right: 2em;
|
|
padding-left: 2em;
|
|
margin-right: -2em;
|
|
margin-left: -2em;
|
|
}
|
|
</style>
|