68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div v-if="active_category == -1" class="columns">
|
|
<div v-for="c in categories" :key="c.id" class="column">
|
|
<button @click="setActiveCategory(c.id)"
|
|
class="button is-large is-primary has-text-dark button-block">
|
|
{{ c.name }}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="box">
|
|
<button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
|
|
<h2 class="subtitle">{{ categories[active_category].name }}</h2>
|
|
<ul>
|
|
<li v-for="item in displayed" :key="item.id" class="has-text-left">
|
|
<a href=""
|
|
@click.prevent="$emit(
|
|
'open-details',
|
|
items.findIndex((i) => i.id ==item.id))">
|
|
{{ item.title }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export const categories = [
|
|
{id: 0, name: "Petit-déjeuner"},
|
|
{id: 1, name: "Entrée"},
|
|
{id: 2, name: "Plat principal"},
|
|
{id: 3, name: "Dessert"}
|
|
];
|
|
|
|
export default {
|
|
name: 'RecipeList',
|
|
props: ["items"],
|
|
data () {
|
|
return {
|
|
active_category: -1,
|
|
categories,
|
|
}
|
|
},
|
|
methods: {
|
|
setActiveCategory: function(id) {
|
|
this.active_category = id;
|
|
},
|
|
},
|
|
computed: {
|
|
displayed: function() {
|
|
return this.items.filter(
|
|
rec => rec.category == this.active_category
|
|
);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.button-block {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.li {
|
|
list-style: circle;
|
|
}
|
|
</style>
|