From d931feadf5cd255ec11bfe8789b251e399d7deaa Mon Sep 17 00:00:00 2001 From: Kaibu Date: Sun, 24 Apr 2022 12:52:00 +0200 Subject: [PATCH] supermarkets rework mostly done --- .../ShoppingListView/ShoppingListView.vue | 228 +++++++++--------- 1 file changed, 113 insertions(+), 115 deletions(-) diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue index 2e0277949..454524df0 100644 --- a/vue/src/apps/ShoppingListView/ShoppingListView.vue +++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue @@ -33,7 +33,7 @@
@@ -120,7 +120,8 @@
+ data-html2canvas-ignore="true" + v-if="Object.entries(foods_group).length > 0">
-
-
-
{{ $t("Supermarkets") }}
+
{{ $t("Supermarkets") }} +
{{ $t("Delete") }} - -
{{ $t("Shopping_Categories") }} - {{ editingSupermarket[0].name }}
-
{{ $t("Shopping_Categories") }}
+
{{ $t("Shopping_Categories") }} + +
-
@@ -405,7 +411,6 @@
{{ $t("Available") }}
{{ category.name }} +
@@ -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()] }, supermarket_categories() { - return this.new_supermarket.editmode ? this.new_supermarket.value.category_to_supermarket : this.shopping_categories + return this.shopping_categories }, notsupermarket_categories() { let supercats = this.new_supermarket.value.category_to_supermarket @@ -1441,7 +1452,6 @@ export default { apiClient .updateSupermarket(this.supermarkets[index].id, this.supermarkets[index]) .then((e) => { - this.periodChangedCallback(this.current_period) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) }) .catch((err) => { @@ -1519,21 +1529,19 @@ export default { } }) }) - - let apiClient = new ApiApiFactory() - - apiClient - .updateSupermarketCategory(this.supermarket_categories[index].id, this.supermarket_categories[index]) - .then((e) => { - this.periodChangedCallback(this.current_period) - StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) - }) - .catch((err) => { - StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err) - }) - if (category.editing) { this.$set(this.supermarket_categories[index], "editing", false) + + let apiClient = new ApiApiFactory() + + apiClient + .updateSupermarketCategory(this.supermarket_categories[index].id, this.supermarket_categories[index]) + .then((e) => { + StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) + }) + .catch((err) => { + StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err) + }) } else { this.supermarket_categories.forEach((market, i) => { if (i !== index) { @@ -1544,107 +1552,80 @@ export default { this.$set(this.supermarket_categories[index], "editing", true) } }, - removeSupermarketCategoryRelation(index) { - this.editing_supermarket_categories[index].relation_id - - let apiClient = new ApiApiFactory() - - 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) - }) + addSupermarketCategoryRelation(category) { + this.sortSupermarketCategories({ + added: { + element: category, + newIndex: this.editing_supermarket_categories.length + } }) + this.editing_supermarket_categories.push(category); }, - sortSupermarketCategoriesR(e) { - // TODO: all of this complexity should be moved to the backend + 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() - 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 - }) - } 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 - .destroysupermarket_categoriesRelation(e.removed.element.id) + .destroySupermarketCategoryRelation(e.removed.element.relation_id) .then((result) => { - StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) + }) .catch((err) => { - console.log(err, Object.keys(err)) 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) { let apiClient = new ApiApiFactory() - let category = e.added.element.category apiClient - .createsupermarket_categoriesRelation({ - supermarket: supermarket.id, - category: category, - order: e.added.element.newIndex, + .createSupermarketCategoryRelation({ + supermarket: this.editingSupermarket[0].id, + category: e.added.element, + order: e.added.newIndex, }) .then((results) => { - this.new_supermarket.value.category_to_supermarket.filter((x) => x.category.id === category.id)[0].id = results.data.id - - return updateMoved(this.new_supermarket.value) - }) - .then((updated_supermarket) => { - let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id) - Vue.set(this.supermarkets, idx, updated_supermarket) - StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) + this.editing_supermarket_categories.splice(e.added.newIndex, 1, { + name: results.data.category.name, + description: results.data.category.description, + id: results.data.category.id, + relation_id: results.data.id, + order: results.data.order, + supermarket: results.data.supermarket, + category: results.data.category + }); }) .catch((err) => { - console.log(err, Object.keys(err)) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) - this.supermarkets = temp_supermarkets + this.editing_supermarket_categories.splice(e.added.newIndex, 1); }) } if ("moved" in e) { - updateMoved(this.new_supermarket.value) - .then((updated_supermarket) => { - let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id) - Vue.set(this.supermarkets, idx, updated_supermarket) - StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) - }) - .catch((err) => { - console.log(err, Object.keys(err)) - StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) - this.supermarkets = temp_supermarkets - }) + let old_order = Object.assign({}, this.editing_supermarket_categories); + let promises = [] + + this.editing_supermarket_categories.forEach((element, index) => { + let apiClient = new ApiApiFactory() + + promises.push(apiClient.partialUpdateSupermarketCategoryRelation(element.relation_id, {order: element.order})) + }) + return Promise.all(promises).then(() => { + + }).catch((err) => { + this.editing_supermarket_categories = old_order + StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err) + }) } }, categoryName(item) { @@ -1679,10 +1660,7 @@ export default { }) // this.$bvModal.show(`shopping_${this.new_recipe.id}`) - }, - handleResize: function () { - this.shoppinglist_height = document.body.clientHeight - 115 - }, + } }, directives: { 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") + }) + }, + }, }, }