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

supermarkets rework mostly done

Browse Source
This commit is contained in:
Kaibu 2022-04-24 12:52:00 +02:00
parent a44dea64b8
commit d931feadf5
1 changed files with 113 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -33,7 +33,7 @@
<template #title> <template #title>
<b-spinner v-if="loading" type="border" small class="d-inline-block"></b-spinner> <b-spinner v-if="loading" type="border" small class="d-inline-block"></b-spinner>
<i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i> <i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i>
<span class="d-none d-inline-block">{{ $t('Shopping_list') }}</span> <span class="d-none d-md-inline-block">{{ $t('Shopping_list') }}</span>
</template> </template>
<div class="container p-0 p-md-3" id="shoppinglist"> <div class="container p-0 p-md-3" id="shoppinglist">
<div class="row"> <div class="row">
@ -120,7 +120,8 @@
<div v-for="(foods_group, category_key) in categories" :key="category_key"> <div v-for="(foods_group, category_key) in categories" :key="category_key">
<div class="dropdown b-dropdown position-static inline-block" <div class="dropdown b-dropdown position-static inline-block"
data-html2canvas-ignore="true" v-if="Object.entries(foods_group).length > 0"> data-html2canvas-ignore="true"
v-if="Object.entries(foods_group).length > 0">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
@ -143,11 +144,13 @@
</b-button> </b-button>
</div> </div>
<div class="collapse" :id="'section-' + sectionID(checked_key, category_key)" visible <div class="collapse"
:id="'section-' + sectionID(checked_key, category_key)" visible
role="tabpanel" :class="{ show: checked_key == 'false' }"> role="tabpanel" :class="{ show: checked_key == 'false' }">
<!-- passing an array of values to the table grouped by Food --> <!-- passing an array of values to the table grouped by Food -->
<transition-group name="slide-fade"> <transition-group name="slide-fade">
<div class="pl-4 pr-0" v-for="(entries, index) in Object.entries(foods_group)" <div class="pl-4 pr-0"
v-for="(entries, index) in Object.entries(foods_group)"
:key="index"> :key="index">
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<shopping-line-item <shopping-line-item
@ -265,7 +268,12 @@
<div class="container"> <div class="container">
<b-row> <b-row>
<b-col cols="12" md="6"> <b-col cols="12" md="6">
<h5>{{ $t("Supermarkets") }}</h5> <h5>{{ $t("Supermarkets") }}
<span class="float-right text-primary" style="cursor: pointer"><i
class="fa fa-plus-circle" v-plus-button
@click="addSupermarket"
aria-hidden="true"></i
></span></h5>
<b-list-group> <b-list-group>
<b-card no-body class="mt-1 list-group-item p-2" <b-card no-body class="mt-1 list-group-item p-2"
v-for="(supermarket, index) in supermarkets" v-hover v-for="(supermarket, index) in supermarkets" v-hover
@ -301,22 +309,25 @@
@click="deleteSupermarket(index)"> @click="deleteSupermarket(index)">
{{ $t("Delete") }} {{ $t("Delete") }}
</button> </button>
<button class="btn btn-primary float-right" @click="editOrSaveSupermarket(index)"> <button class="btn btn-primary float-right"
@click="editOrSaveSupermarket(index)">
{{ $t("Save") }} {{ $t("Save") }}
</button> </button>
</b-card-body> </b-card-body>
</b-card> </b-card>
</b-list-group> </b-list-group>
<button class="btn btn-success float-right mt-1"
@click="addSupermarket">
<i class="fas fa-plus"></i>
{{ $t("New_Supermarket") }}
</button>
</b-col> </b-col>
<b-col cols="12" md="6"> <b-col cols="12" md="6">
<h5 v-if="editingSupermarket.length > 0">{{ $t("Shopping_Categories") }} - <h5 v-if="editingSupermarket.length > 0">{{ $t("Shopping_Categories") }} -
{{ editingSupermarket[0].name }}</h5> {{ editingSupermarket[0].name }}</h5>
<h5 v-else>{{ $t("Shopping_Categories") }}</h5> <h5 v-else>{{ $t("Shopping_Categories") }}
<span class="float-right text-primary" v-plus-button
style="cursor: pointer"><i
class="fa fa-plus-circle" v-plus-button
@click="addSupermarketCategory"
aria-hidden="true"></i
></span>
</h5>
<div v-if="editingSupermarket.length === 0"> <div v-if="editingSupermarket.length === 0">
<b-list-group> <b-list-group>
<b-card no-body class="mt-1 list-group-item p-2" <b-card no-body class="mt-1 list-group-item p-2"
@ -361,16 +372,11 @@
</b-card-body> </b-card-body>
</b-card> </b-card>
</b-list-group> </b-list-group>
<button class="btn btn-success float-right mt-1"
@click="addSupermarketCategory">
<i class="fas fa-plus"></i>
{{ $t("New_Supermarket_Category") }}
</button>
</div> </div>
<div v-else> <div v-else>
<draggable :list="editing_supermarket_categories" group="categories" <draggable :list="editing_supermarket_categories" group="categories"
:empty-insert-threshold="10" :empty-insert-threshold="10"
@sort="sortSupermarketCategories" @change="sortSupermarketCategories"
ghost-class="ghost"> ghost-class="ghost">
<b-card no-body class="mt-1 list-group-item p-2" <b-card no-body class="mt-1 list-group-item p-2"
style="cursor: move" style="cursor: move"
@ -392,8 +398,8 @@
{{ category.name }} {{ category.name }}
<span class="float-right text-primary" <span class="float-right text-primary"
style="cursor: pointer" style="cursor: pointer"
><i class="fa fa-minus-circle" ><i class="fa fa-minus-circle" v-minus-button
@click="removeSupermarketCategoryRelation(index)" @click="removeSupermarketCategoryRelationAtIndex(index)"
aria-hidden="true"></i aria-hidden="true"></i
></span> ></span>
</h5> </h5>
@ -405,7 +411,6 @@
<h5>{{ $t("Available") }}</h5> <h5>{{ $t("Available") }}</h5>
<draggable :list="unusedSupermarketCategories" group="categories" <draggable :list="unusedSupermarketCategories" group="categories"
:empty-insert-threshold="10" :empty-insert-threshold="10"
@sort="sortSupermarketCategories"
ghost-class="ghost"> ghost-class="ghost">
<b-card no-body class="mt-1 list-group-item p-2" <b-card no-body class="mt-1 list-group-item p-2"
style="cursor: move" style="cursor: move"
@ -422,6 +427,12 @@
<div class="col-10"> <div class="col-10">
<h5 class="mt-1 mb-1"> <h5 class="mt-1 mb-1">
{{ category.name }} {{ category.name }}
<span class="float-right text-primary"
style="cursor: pointer"
><i class="fa fa-plus-circle" v-plus-button
@click="addSupermarketCategoryRelation(category)"
aria-hidden="true"></i
></span>
</h5> </h5>
</div> </div>
</div> </div>
@ -961,7 +972,7 @@ export default {
return [...new Map(this.items.filter((x) => x.list_recipe && !x.checked).map((item) => [item["list_recipe"], item])).values()] return [...new Map(this.items.filter((x) => x.list_recipe && !x.checked).map((item) => [item["list_recipe"], item])).values()]
}, },
supermarket_categories() { supermarket_categories() {
return this.new_supermarket.editmode ? this.new_supermarket.value.category_to_supermarket : this.shopping_categories return this.shopping_categories
}, },
notsupermarket_categories() { notsupermarket_categories() {
let supercats = this.new_supermarket.value.category_to_supermarket let supercats = this.new_supermarket.value.category_to_supermarket
@ -1441,7 +1452,6 @@ export default {
apiClient apiClient
.updateSupermarket(this.supermarkets[index].id, this.supermarkets[index]) .updateSupermarket(this.supermarkets[index].id, this.supermarkets[index])
.then((e) => { .then((e) => {
this.periodChangedCallback(this.current_period)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
@ -1519,21 +1529,19 @@ export default {
} }
}) })
}) })
if (category.editing) {
this.$set(this.supermarket_categories[index], "editing", false)
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient apiClient
.updateSupermarketCategory(this.supermarket_categories[index].id, this.supermarket_categories[index]) .updateSupermarketCategory(this.supermarket_categories[index].id, this.supermarket_categories[index])
.then((e) => { .then((e) => {
this.periodChangedCallback(this.current_period)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
if (category.editing) {
this.$set(this.supermarket_categories[index], "editing", false)
} else { } else {
this.supermarket_categories.forEach((market, i) => { this.supermarket_categories.forEach((market, i) => {
if (i !== index) { if (i !== index) {
@ -1544,106 +1552,79 @@ export default {
this.$set(this.supermarket_categories[index], "editing", true) this.$set(this.supermarket_categories[index], "editing", true)
} }
}, },
removeSupermarketCategoryRelation(index) { addSupermarketCategoryRelation(category) {
this.editing_supermarket_categories[index].relation_id this.sortSupermarketCategories({
added: {
let apiClient = new ApiApiFactory() element: category,
newIndex: this.editing_supermarket_categories.length
apiClient.destroySupermarketCategoryRelation(this.editing_supermarket_categories[index].relation_id)
.then((e) => {
this.editing_supermarket_categories.splice(index, 1);
})
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
})
},
sortSupermarketCategories() {
this.editing_supermarket_categories.forEach((element, index) => {
element.order = index
})
this.editing_supermarket_categories.forEach((element, index) => {
let apiClient = new ApiApiFactory()
apiClient.updateSupermarketCategoryRelation(element.relation_id, element)
.then((e) => {
})
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
})
},
sortSupermarketCategoriesR(e) {
// TODO: all of this complexity should be moved to the backend
let apiClient = new ApiApiFactory()
let supermarket = this.new_supermarket.value
let temp_supermarkets = [...this.supermarkets]
const updateMoved = function (supermarket) {
var promises = []
supermarket.category_to_supermarket.forEach((x, i) => {
x.order = i
promises.push(apiClient.partialUpdatesupermarket_categoriesRelation(x.id, {order: i}))
})
return Promise.all(promises).then(() => {
return supermarket
})
} }
})
this.editing_supermarket_categories.push(category);
},
removeSupermarketCategoryRelationAtIndex(index) {
this.sortSupermarketCategories({
removed: {
element: this.editing_supermarket_categories[index],
oldIndex: index
}
})
this.editing_supermarket_categories.splice(index, 1);
},
sortSupermarketCategories(e) {
let apiClient = new ApiApiFactory()
if ("removed" in e) { if ("removed" in e) {
// store current value in case it needs rolled back
let idx = this.supermarkets.indexOf((x) => x.id === supermarket.id)
Vue.set(this.supermarkets, idx, supermarket)
apiClient apiClient
.destroysupermarket_categoriesRelation(e.removed.element.id) .destroySupermarketCategoryRelation(e.removed.element.relation_id)
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.supermarkets = temp_supermarkets this.editing_supermarket_categories.splice(e.removed.oldIndex, 0, e.removed.element);
}) })
} }
if ("added" in e) { if ("added" in e) {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
let category = e.added.element.category
apiClient apiClient
.createsupermarket_categoriesRelation({ .createSupermarketCategoryRelation({
supermarket: supermarket.id, supermarket: this.editingSupermarket[0].id,
category: category, category: e.added.element,
order: e.added.element.newIndex, order: e.added.newIndex,
}) })
.then((results) => { .then((results) => {
this.new_supermarket.value.category_to_supermarket.filter((x) => x.category.id === category.id)[0].id = results.data.id this.editing_supermarket_categories.splice(e.added.newIndex, 1, {
name: results.data.category.name,
return updateMoved(this.new_supermarket.value) description: results.data.category.description,
}) id: results.data.category.id,
.then((updated_supermarket) => { relation_id: results.data.id,
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id) order: results.data.order,
Vue.set(this.supermarkets, idx, updated_supermarket) supermarket: results.data.supermarket,
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) category: results.data.category
});
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.supermarkets = temp_supermarkets this.editing_supermarket_categories.splice(e.added.newIndex, 1);
}) })
} }
if ("moved" in e) { if ("moved" in e) {
updateMoved(this.new_supermarket.value) let old_order = Object.assign({}, this.editing_supermarket_categories);
.then((updated_supermarket) => { let promises = []
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
Vue.set(this.supermarkets, idx, updated_supermarket) this.editing_supermarket_categories.forEach((element, index) => {
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) let apiClient = new ApiApiFactory()
promises.push(apiClient.partialUpdateSupermarketCategoryRelation(element.relation_id, {order: element.order}))
}) })
.catch((err) => { return Promise.all(promises).then(() => {
console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) }).catch((err) => {
this.supermarkets = temp_supermarkets this.editing_supermarket_categories = old_order
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
} }
}, },
@ -1679,10 +1660,7 @@ export default {
}) })
// this.$bvModal.show(`shopping_${this.new_recipe.id}`) // this.$bvModal.show(`shopping_${this.new_recipe.id}`)
}, }
handleResize: function () {
this.shoppinglist_height = document.body.clientHeight - 115
},
}, },
directives: { directives: {
hover: { hover: {
@ -1695,6 +1673,26 @@ export default {
}) })
}, },
}, },
'plus-button': {
inserted: function (el) {
el.addEventListener("mouseenter", () => {
el.classList.add("text-success")
})
el.addEventListener("mouseleave", () => {
el.classList.remove("text-success")
})
},
},
'minus-button': {
inserted: function (el) {
el.addEventListener("mouseenter", () => {
el.classList.add("text-warning")
})
el.addEventListener("mouseleave", () => {
el.classList.remove("text-warning")
})
},
},
}, },
} }
</script> </script>