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

move supermarket editing to store

Browse Source
This commit is contained in:
vabene1111 2023-12-30 08:52:43 +01:00
parent 492d266fbe
commit 475ce44df9
1 changed files with 87 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -111,7 +111,7 @@
<b-tab> <b-tab>
<template #title> <template #title>
<i class="fas fa-store-alt fa-fw d-block d-md-none"></i> <i class="fas fa-store-alt fa-fw d-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Supermarkets') + ` (${supermarkets.length})` }}</span> <span class="d-none d-md-block">{{ $t('Supermarkets') + ` (${shopping_list_store.supermarkets.length})` }}</span>
</template> </template>
<div class="container p-0"> <div class="container p-0">
<div class="row"> <div class="row">
@ -129,7 +129,7 @@
></span></h5> ></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 shopping_list_store.supermarkets" v-hover
:key="supermarket.id"> :key="supermarket.id">
<b-card-header class="p-2 border-0"> <b-card-header class="p-2 border-0">
<b-row> <b-row>
@ -188,7 +188,7 @@
<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"
v-for="(category, index) in supermarket_categories" v-hover v-for="(category, index) in shopping_list_store.supermarket_categories" v-hover
:key="category.id"> :key="category.id">
<b-card-header class="p-2 border-0"> <b-card-header class="p-2 border-0">
<b-row> <b-row>
@ -319,6 +319,7 @@
</b-tab> </b-tab>
</b-tabs> </b-tabs>
<!-- TODO maybe change to a modal ? -->
<b-popover target="id_filters_button" triggers="click" placement="bottomleft" :title="$t('Filters')"> <b-popover target="id_filters_button" triggers="click" placement="bottomleft" :title="$t('Filters')">
<div> <div>
<b-form-group v-bind:label="$t('GroupBy')" label-for="popover-input-1" label-cols="6" class="mb-1"> <b-form-group v-bind:label="$t('GroupBy')" label-for="popover-input-1" label-cols="6" class="mb-1">
@ -522,21 +523,17 @@ export default {
return [] return []
}, },
editingSupermarket() { editingSupermarket() {
return this.supermarkets.filter((el) => { return this.shopping_list_store.supermarkets.filter((el) => {
return el.editing return el.editing
}) })
}, },
unusedSupermarketCategories() { unusedSupermarketCategories() {
if (this.editingSupermarket.length > 0) { if (this.editingSupermarket.length > 0) {
return this.supermarket_categories.filter(a => !this.editing_supermarket_categories.map(b => b.id).includes(a.id)) return this.shopping_list_store.supermarket_categories.filter(a => !this.editing_supermarket_categories.map(b => b.id).includes(a.id))
} else { } else {
return [] return []
} }
}, },
supermarket_categories() {
return this.shopping_categories
},
}, },
watch: { watch: {
@ -565,8 +562,6 @@ export default {
}, },
mounted() { mounted() {
//this.getShoppingList() //this.getShoppingList()
this.getSupermarkets()
this.getShoppingCategories()
if (this.settings.shopping_auto_sync) { if (this.settings.shopping_auto_sync) {
window.addEventListener("online", this.updateOnlineStatus) window.addEventListener("online", this.updateOnlineStatus)
@ -637,15 +632,6 @@ export default {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}) })
}, },
getShoppingCategories: function () {
let api = new ApiApiFactory()
api.listSupermarketCategorys().then((result) => {
result.data.forEach((category) => {
category.editing = false
})
this.shopping_categories = result.data
})
},
getShoppingList: function (autosync = false) { getShoppingList: function (autosync = false) {
let params = {} let params = {}
params.supermarket = this.ui.selected_supermarket params.supermarket = this.ui.selected_supermarket
@ -683,16 +669,6 @@ export default {
// } // }
// }) // })
}, },
getSupermarkets: function () {
let api = new ApiApiFactory()
api.listSupermarkets().then((result) => {
result.data.forEach((supermarket) => {
supermarket.editing = false
})
this.supermarkets = result.data
})
},
mergeShoppingList: function (data) { mergeShoppingList: function (data) {
this.items.map((x) => this.items.map((x) =>
data.map((y) => { data.map((y) => {
@ -770,6 +746,8 @@ export default {
return recipe.servings return recipe.servings
} }
}, },
// TODO cleanup, review data structure, probably move to its own component --> FOR ALL SUPERMARKET FUNCTIONS
deleteSupermarket(index) { deleteSupermarket(index) {
this.$bvModal.msgBoxConfirm(this.$t('Are_You_Sure'), { this.$bvModal.msgBoxConfirm(this.$t('Are_You_Sure'), {
title: this.$t('Confirm'), title: this.$t('Confirm'),
@ -784,12 +762,9 @@ export default {
}).then(value => { }).then(value => {
if (value) { if (value) {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.destroySupermarket(this.supermarkets[index].id) apiClient.destroySupermarket(this.shopping_list_store.supermarkets[index].id)
.then((e) => { .then((e) => {
this.getShoppingList() this.shopping_list_store.refreshFromAPI()
this.getSupermarkets()
this.getShoppingCategories()
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
@ -797,48 +772,50 @@ export default {
} }
}) })
}, },
/**
* add new supermarket to list of supermarkets
*/
addSupermarket: function () { addSupermarket: function () {
// TODO integrate into store
let api = new ApiApiFactory() let api = new ApiApiFactory()
api.createSupermarket({name: this.$t('Supermarket') + Math.floor(1000 + Math.random() * 9000)}) api.createSupermarket({name: this.$t('Supermarket') + Math.floor(1000 + Math.random() * 9000)}).then((r) => {
.then((result) => { this.shopping_list_store.supermarkets.push(r.data)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE) this.new_supermarket.value = undefined
this.supermarkets.push(result.data) }).catch((err) => {
this.new_supermarket.value = undefined StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
}) })
.catch((err) => {
console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
})
}, },
/**
* handle updating a supermarket
* @param index
*/
editOrSaveSupermarket(index) { editOrSaveSupermarket(index) {
let supermarket = this.supermarkets[index] let supermarket = this.shopping_list_store.supermarkets[index]
if (supermarket.editing) { if (supermarket.editing) {
this.$set(this.supermarkets[index], "editing", false) this.$set(this.shopping_list_store.supermarkets[index], "editing", false)
this.$set(this.supermarkets[index], "category_to_supermarket", this.editing_supermarket_categories) this.$set(this.shopping_list_store.supermarkets[index], "category_to_supermarket", this.editing_supermarket_categories)
this.editing_supermarket_categories = [] this.editing_supermarket_categories = []
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient apiClient.updateSupermarket(this.shopping_list_store.supermarkets[index].id, this.shopping_list_store.supermarkets[index]).then((r) => {
.updateSupermarket(this.supermarkets[index].id, this.supermarkets[index]) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
.then((e) => { this.shopping_list_store.refreshFromAPI()
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) }).catch((err) => {
}) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
.catch((err) => { })
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
} else { } else {
this.supermarkets.forEach((market, i) => { this.shopping_list_store.supermarkets.forEach((market, i) => {
if (i !== index) { if (i !== index) {
this.$set(this.supermarkets[i], "editing", false) this.$set(this.shopping_list_store.supermarkets[i], "editing", false)
} }
}) })
this.$set(this.supermarkets[index], "editing", true) this.$set(this.shopping_list_store.supermarkets[index], "editing", true)
this.editing_supermarket_categories = [] this.editing_supermarket_categories = []
this.supermarkets[index].category_to_supermarket.forEach((cur, i) => { this.shopping_list_store.supermarkets[index].category_to_supermarket.forEach((cur, i) => {
this.editing_supermarket_categories.push({ this.editing_supermarket_categories.push({
name: cur.category.name, name: cur.category.name,
description: cur.category.description, description: cur.category.description,
@ -851,6 +828,10 @@ export default {
}) })
} }
}, },
/**
* delete a supermarket category
* @param index
*/
deleteSupermarketCategory(index) { deleteSupermarketCategory(index) {
this.$bvModal.msgBoxConfirm(this.$t('Warning_Delete_Supermarket_Category'), { this.$bvModal.msgBoxConfirm(this.$t('Warning_Delete_Supermarket_Category'), {
title: this.$t('Confirm'), title: this.$t('Confirm'),
@ -865,48 +846,40 @@ export default {
}).then(value => { }).then(value => {
if (value) { if (value) {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.destroySupermarketCategory(this.supermarket_categories[index].id) apiClient.destroySupermarketCategory(this.shopping_list_store.supermarket_categories[index].id).then((e) => {
.then((e) => { this.shopping_list_store.refreshFromAPI()
this.getShoppingList() }).catch((err) => {
this.getSupermarkets() StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
this.getShoppingCategories() })
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
})
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
})
} }
}) })
}, },
addSupermarketCategory() { addSupermarketCategory() {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.createSupermarketCategory({name: this.$t("Shopping_Category") + Math.floor(1000 + Math.random() * 9000)}) apiClient.createSupermarketCategory({name: this.$t("Shopping_Category") + Math.floor(1000 + Math.random() * 9000)}).then((result) => {
.then((result) => { this.shopping_list_store.supermarket_categories.push(result.data)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE) }).catch((err) => {
this.shopping_categories.push(result.data) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
}) })
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
})
}, },
editOrSaveSupermarketCategory(index) { editOrSaveSupermarketCategory(index) {
let category = this.supermarket_categories[index] let category = this.shopping_list_store.supermarket_categories[index]
this.supermarkets.forEach((supermarket) => { this.shopping_list_store.supermarkets.forEach((supermarket) => {
supermarket.category_to_supermarket.forEach((cat) => { supermarket.category_to_supermarket.forEach((cat) => {
if (cat.category.id === this.supermarket_categories[index].id) { if (cat.category.id === this.shopping_list_store.supermarket_categories[index].id) {
cat.category = this.supermarket_categories[index] cat.category = this.shopping_list_store.supermarket_categories[index]
} }
}) })
}) })
if (category.editing) { if (category.editing) {
this.$set(this.supermarket_categories[index], "editing", false) this.$set(this.shopping_list_store.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.shopping_list_store.supermarket_categories[index].id, this.shopping_list_store.supermarket_categories[index])
.then((e) => { .then((e) => {
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
@ -914,13 +887,13 @@ export default {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
} else { } else {
this.supermarket_categories.forEach((market, i) => { this.shopping_list_store.supermarket_categories.forEach((market, i) => {
if (i !== index) { if (i !== index) {
this.$set(this.supermarket_categories[i], "editing", false) this.$set(this.shopping_list_store.supermarket_categories[i], "editing", false)
} }
}) })
this.$set(this.supermarket_categories[index], "editing", true) this.$set(this.shopping_list_store.supermarket_categories[index], "editing", true)
} }
}, },
addSupermarketCategoryRelation(category) { addSupermarketCategoryRelation(category) {
@ -945,41 +918,35 @@ export default {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
if ("removed" in e) { if ("removed" in e) {
apiClient apiClient.destroySupermarketCategoryRelation(e.removed.element.relation_id).then((result) => {
.destroySupermarketCategoryRelation(e.removed.element.relation_id)
.then((result) => {
}) }).catch((err) => {
.catch((err) => { StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE) this.editing_supermarket_categories.splice(e.removed.oldIndex, 0, e.removed.element);
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()
apiClient apiClient.createSupermarketCategoryRelation({
.createSupermarketCategoryRelation({ supermarket: this.editingSupermarket[0].id,
supermarket: this.editingSupermarket[0].id, category: e.added.element,
category: e.added.element, order: e.added.newIndex,
order: e.added.newIndex, }).then((results) => {
}) this.editing_supermarket_categories.splice(e.added.newIndex, 1, {
.then((results) => { name: results.data.category.name,
this.editing_supermarket_categories.splice(e.added.newIndex, 1, { description: results.data.category.description,
name: results.data.category.name, id: results.data.category.id,
description: results.data.category.description, relation_id: results.data.id,
id: results.data.category.id, order: results.data.order,
relation_id: results.data.id, supermarket: results.data.supermarket,
order: results.data.order, category: results.data.category
supermarket: results.data.supermarket, });
category: results.data.category }).catch((err) => {
}); StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
}) this.editing_supermarket_categories.splice(e.added.newIndex, 1);
.catch((err) => { })
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.editing_supermarket_categories.splice(e.added.newIndex, 1);
})
} }
if ("moved" in e) { if ("moved" in e) {
@ -1016,23 +983,14 @@ export default {
this.$bvModal.show(`shopping_${this.new_recipe.id}`) this.$bvModal.show(`shopping_${this.new_recipe.id}`)
}) })
}, },
/**
* called after adding a new recipe trough the shopping modal
* cleanup and data refresh
*/
finishShopping() { finishShopping() {
this.new_recipe = {id: undefined} this.new_recipe = {id: undefined}
useShoppingListStore().refreshFromAPI() //TODO only do partial fetch useShoppingListStore().refreshFromAPI() //TODO only do partial fetch
}, },
editRecipeList(e, r) {
this.new_recipe = {
id: r.recipe_mealplan.recipe,
name: r.recipe_mealplan.recipe_name,
servings: r.recipe_mealplan.servings,
list_recipe: r.list_recipe
}
this.$nextTick(function () {
this.$bvModal.show(`shopping_${this.new_recipe.id}`)
})
// this.$bvModal.show(`shopping_${this.new_recipe.id}`)
}
}, },
directives: { directives: {
hover: { hover: {