107 lines
No EOL
2.7 KiB
Vue
107 lines
No EOL
2.7 KiB
Vue
<template>
|
|
|
|
<div :class="{ editing: editing }">
|
|
<button v-if="editing" @click="$emit('on-add')">
|
|
<img class="icon" :src="require('@/assets/add-cart.svg')" /> <br />
|
|
Add Ingredient
|
|
</button>
|
|
<button @click="toggleEditing" v-if="!editOnly">
|
|
<span v-if="editing">
|
|
<img class="icon" :src="require('@/assets/edit-off.svg')" /> <br />
|
|
Done Editing
|
|
</span>
|
|
<span v-else>
|
|
<img class="icon" :src="require('@/assets/edit.svg')" /> <br />
|
|
Edit My List
|
|
</span>
|
|
</button>
|
|
<ul>
|
|
<li v-for="ingredient in ingredients" :key="ingredient">
|
|
<div v-if="editing">
|
|
<p class="ingredient-line">
|
|
<ingredient-line
|
|
:ingredient="ingredient"
|
|
@update-ingredient="updateIngredient"
|
|
@update-product-link="updateProduct" />
|
|
</p>
|
|
<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>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
li > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.editing li {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.ingredient-line {
|
|
flex: 1;
|
|
margin: 0;
|
|
margin-right: 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]);
|
|
},
|
|
toggleEditing() {
|
|
this.editing = !this.editing;
|
|
this.$emit('on-editing', this.editing);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script> |