63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<template>
|
|
<div class="columns">
|
|
<div class="column is-narrow">
|
|
<a @click="$emit('close')"
|
|
class="button is-large is-outlined-dark is-fullwidth">
|
|
<span>Liste</span>
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-36px mdi-view-list"></i>
|
|
</span>
|
|
</a>
|
|
<br class="is-hidden-mobile"/>
|
|
<SlotSelect v-on:add="addToPlanning" />
|
|
</div>
|
|
<div class="column">
|
|
<h4 class="title">{{ item.title }}</h4>
|
|
<h6 class="subtitle">{{ categories[item.category].name }}</h6>
|
|
<p><strong>Ingredients</strong></p>
|
|
<ul>
|
|
<li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<a @click="$emit('delete', item.id)">
|
|
<span class="icon is-large has-text-danger">
|
|
<i class="mdi mdi-48px mdi-delete-forever"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _, {categories} from './RecipeList.vue'
|
|
import SlotSelect from './planner/SlotSelect.vue'
|
|
|
|
|
|
export default {
|
|
name: 'RecipeDetails',
|
|
components: {
|
|
SlotSelect,
|
|
},
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
default () {
|
|
return {id: 0, title: "", category: 0, ingredients: ""};
|
|
},
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
categories: categories,
|
|
}
|
|
},
|
|
methods: {
|
|
addToPlanning: function(slotKey) {
|
|
this.$emit('add', slotKey, this.item.id);
|
|
}
|
|
}
|
|
}
|
|
</script>
|