cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plan type editing

Browse Source
This commit is contained in:
vabene1111
2020-06-11 16:58:57 +02:00
parent 8aa24d4771
commit d734cb813e
2 changed files with 119 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
cookbook/templates/meal_plan.html
View File

@ -54,36 +54,32 @@
</th>
</tr>
</thead>
<tbody v-for="mp in meal_plan">
<tr>
<tbody v-for="t in meal_types">
<tr v-if="meal_plan[t.id] !== undefined">
<td colspan="7" style="text-align: center">
[[mp.name]]
[[ meal_plan[t.id].name]]
</td>
</tr>
<tr>
<td v-for="d in mp.days">
<tr v-if="meal_plan[t.id] !== undefined">
<td v-for="d in meal_plan[t.id].days">
<draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
@change="dragChanged(d.date, mp.meal_type, $event)"
@change="dragChanged(d.date, meal_plan[t.id].meal_type, $event)"
:empty-insert-threshold="10" handle=".handle">
<div class="" v-for="(element, index) in d.items" :key="element.id">
<div class="d-block d-md-none">
<div class="col-">
<i class="fas fa-arrows-alt handle input-group-text"
style="width: 100%"></i>
</div>
<div class="list-group-item">
<a href="#" @click="plan_detail = element" data-toggle="modal"
data-target="#exampleModal">[[ planElementName(element)]]</a>
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
</div>
</div>
<div class="list-group-item handle d-md-block d-none">
<div class="col-md-12">
<a href="#" @click="plan_detail = element" data-toggle="modal"
data-target="#exampleModal">[[ planElementName(element)]]</a>
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
</div>
</div>
</div>
@ -107,7 +103,6 @@
<div class="col-md-12">
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
placeholder="{% trans 'Search Recipe' %}" style="margin-bottom: 8px">
<!-- TODO remove recipes by backdropping them -->
</div>
</div>
<draggable class="list-group" :list="recipes"
@ -143,12 +138,13 @@
</div>
<br>
<div class="card">
<div class="card-header">
<i class="fas fa-shopping-cart"></i> {% trans 'Shopping List' %}
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<i class="fas fa-shopping-cart"></i> {% trans 'Shopping List' %}
</div>
<div class="card-body">
<template v-if="shopping_list.length < 1">{% trans 'Shopping List currently empty' %}</template>
<template v-else>
@ -156,28 +152,30 @@
target="_blank">{% trans 'Open Shopping List' %}</a>
<br/>
<br/>
{% trans 'Recipes' %}
{% trans 'Recipes' %}
<ul class="list-group" style="margin-top: 8px">
<li class="list-group-item" v-for="item in shopping_list"> [[ item.recipe_name ]]</li>
</ul>
</template>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<i class="fas fa-shopping-cart"></i> {% trans 'Plan' %}
</div>
<div class="col-md-6">
<div class="card-body">
<a href="#" data-toggle="modal"
data-target="#id_plan_types_modal">{% trans 'Edit plan types' %}</a>
</div>
</div>
</div>
</div>
<br/>
<hr/>
<br/>
[[meal_plan]]
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
<div class="modal fade" id="id_plan_detail_modal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@ -234,6 +232,50 @@
</div>
</div>
<div class="modal fade" id="id_plan_types_modal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans 'Edit plan types' %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<draggable :list="meal_types_edit" handle=".handle"
:group="{ name: 'types'}">
<div v-for="(element, index) in meal_types_edit"
:key="element.id">
<template v-if="!element.delete">
<div class="input-group mb-3">
<div class="input-group-prepend handle">
<button tabindex="-1" class="btn btn-outline-secondary"><i
class="fas fa-arrows-alt-v"></i></button>
</div>
<input class="form-control" v-model="element.name">
<div class="input-group-append">
<button tabindex="-1" class="btn btn-outline-danger" type="button"
@click="markTypeDelete(element)"><i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</template>
</div>
</draggable>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
@click="meal_types_edit.push({name:'{% trans 'New meal type' %}'})">{% trans 'New' %}</button>
<button type="button" class="btn btn-success"
@click="updatePlanTypes()">{% trans 'Save' %}</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div>
</div>
</div>
</div>
@ -251,6 +293,7 @@
days: moment.weekdays(true),
plan_entries: [],
meal_types: [],
meal_types_edit: [],
meal_plan: {},
plan_detail: {shared: []},
recipes: [],
@ -300,6 +343,10 @@
console.log("GET TYPE EXECUTED")
return this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
this.meal_types = response.data;
this.meal_types_edit = Array.from(this.meal_types)
for (let mte of this.meal_types_edit) {
this.$set(mte, 'delete', false)
}
}).catch((err) => {
console.log(err);
})
@ -312,6 +359,7 @@
this.$set(this.meal_plan, t.id, {
name: t.name,
meal_type: t.id,
type: t,
days: {}
})
for (let d of this.days) {
@ -396,7 +444,7 @@
},
deleteEntry: function (entry) {
console.log("delete click")
$('#exampleModal').modal('hide')
$('#id_plan_detail_modal').modal('hide')
this.$http.delete(`{% url 'api:mealplan-list' %}${entry.id}/`, entry).then((response) => {
console.log("delete success", response)
this.meal_plan[entry.meal_type].days[entry.date].items = this.meal_plan[entry.meal_type].days[entry.date].items.filter(item => item !== entry)
@ -404,6 +452,47 @@
console.log("delete error", err);
})
},
updatePlanTypes: function () {
console.log("UPDATING TYPES")
let promise_list = []
let i = 0
for (let x of this.meal_types_edit) {
x.order = i
i++
if (x.id === undefined && !x.delete) {
console.log("creating new ", x)
x.created_by = {{ request.user.id }}
promise_list.push(this.$http.post("{% url 'api:mealtype-list' %}", x).then((response) => {
console.log("successfully created plan type");
}).catch((err) => {
console.log(err);
}))
} else if (x.delete) {
console.log("deleting ", x)
promise_list.push(this.$http.delete(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {
console.log("successfully deleted plan type");
}).catch((err) => {
console.log(err);
}))
} else {
console.log("updating ", x)
promise_list.push(this.$http.put(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {
console.log("successfully updated plan type");
}).catch((err) => {
console.log(err);
}))
}
}
Promise.allSettled(promise_list).then(() => {
this.updatePlan()
$('#id_plan_types_modal').modal('hide')
})
},
markTypeDelete: function (element) {
if (confirm('{% trans 'When deleting a meal type all entries using that type will be deleted as well. Deletion will apply when configuration is saved. Do you want to proceed?' %}')) {
element.delete = true
}
},
cloneRecipe: function (recipe) {
console.log("clone recipe")
return {

4
cookbook/views/api.py
View File

@ -52,12 +52,12 @@ class MealPlanViewSet(viewsets.ModelViewSet):
class MealTypeViewSet(viewsets.ModelViewSet):
queryset = MealType.objects.all()
queryset = MealType.objects.order_by('order').all()
serializer_class = MealTypeSerializer
permission_classes = [permissions.IsAuthenticated]
def get_queryset(self):
queryset = MealType.objects.filter(created_by=self.request.user).all()
queryset = MealType.objects.order_by('order', 'id').filter(created_by=self.request.user).all()
return queryset