56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li v-for="ingredient in ingredients" :key="ingredient.id">
|
||
|
|
<div v-if="editing">
|
||
|
|
<ingredient-line :ingredient="ingredient" @update="updateIngredient" @update-ingredient="updateIngredient" @update-product-link="updateProduct" />
|
||
|
|
<button @click="$emit('on-delete', ingredient)">
|
||
|
|
<img class="icon" :src="require('@/assets/trash.svg')" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<compact-parsed-ingredient :ingredient="ingredient" />
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<button v-if="editing" @click="$emit('on-add')">Add Ingredient</button>
|
||
|
|
<button @click="editing = !editing">{{ editing ? 'Done' : 'Edit' }}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.icon {
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import data from '@/data.js'
|
||
|
|
import IngredientLine from './IngredientLine.vue'
|
||
|
|
import CompactParsedIngredient from './CompactParsedIngredient.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'EditableIngredientsPanel',
|
||
|
|
components: { IngredientLine, CompactParsedIngredient },
|
||
|
|
props: ['ingredients', 'editOnly'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
editing: this.editOnly ?? false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async updateProduct(ingredient, product_link) {
|
||
|
|
const product = await data.parseProduct(ingredient, product_link);
|
||
|
|
this.$emit('on-update-ingredient', ingredient, { ...ingredient, product });
|
||
|
|
},
|
||
|
|
async updateIngredient(ingredient, line) {
|
||
|
|
const newIngredients = await data.parseIngredients([line]);
|
||
|
|
this.$emit('on-update-ingredient', ingredient, newIngredients[0]);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|