51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<tr>
|
|
<td>
|
|
<input type="checkbox">
|
|
</td>
|
|
<td>
|
|
<span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="ingredient.unit !== null">{{ ingredient.unit.name }}</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="ingredient.food !== null">{{ ingredient.food.name }}</span>
|
|
</td>
|
|
<td>
|
|
<div v-if="ingredient.note">
|
|
<span v-b-popover.hover="ingredient.note"
|
|
class="d-print-none"> <i class="far fa-comment"></i>
|
|
</span>
|
|
|
|
<div class="d-none d-print-block">
|
|
<i class="far fa-comment-alt"></i> {{ ingredient.note }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {calculateAmount} from "@/utils/utils";
|
|
|
|
export default {
|
|
name: 'Ingredient',
|
|
props: {
|
|
ingredient: Object,
|
|
servings: {
|
|
type: Number,
|
|
default: 1,
|
|
}
|
|
},
|
|
methods: {
|
|
calculateAmount: function (x) {
|
|
return calculateAmount(x, this.servings)
|
|
}
|
|
}
|
|
}
|
|
</script>
|