supermarkets rework mostly done
This commit is contained in:
parent
a44dea64b8
commit
d931feadf5
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user