83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<ul v-if="meals.length">
|
||
|
|
<li v-for="meal in meals" :key="meal.id">
|
||
|
|
<meal-card :meal="meal" @edit-meal="editmeal"/>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<ul v-if="!meals.length">
|
||
|
|
<li>No meals planned</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul class="actions" v-if="selectedMeal">
|
||
|
|
<li><router-link class="nav-link" to="/meal/{{meal.id}}/edit" active-class="active">Edit Meal</router-link></li>
|
||
|
|
<li><router-link class="nav-link" to="/meal/{{meal.id}}/swap" active-class="active">Swap Day</router-link></li>
|
||
|
|
<li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
|
||
|
|
<li><a @click="selectedMeal = null">Cancel</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
li {
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions ul {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions li {
|
||
|
|
display: block;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 2ex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions li:hover {
|
||
|
|
background-color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions li a {
|
||
|
|
display: block;
|
||
|
|
text-decoration: none;
|
||
|
|
color: #000;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MealCard from './MealCard.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MealPlanPage',
|
||
|
|
components: {
|
||
|
|
MealCard
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
meals: [{
|
||
|
|
'date': new Date(),
|
||
|
|
'recipe': {'name': 'Sar Tay'},
|
||
|
|
'chefs': [{
|
||
|
|
'name': 'Ryan'
|
||
|
|
}],
|
||
|
|
'consumers': [{'name': 'Ryan'}, {'name': 'Jacob'}],
|
||
|
|
}],
|
||
|
|
selectedMeal: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
editmeal(meal) {
|
||
|
|
console.log('editmeal', meal)
|
||
|
|
this.selectedMeal = meal;
|
||
|
|
},
|
||
|
|
deleteSelectedMeal() {
|
||
|
|
console.log('deleteSelectedMeal', this.selectedMeal)
|
||
|
|
this.selectedMeal = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|