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

fix reactivity of detailed items

Browse Source
This commit is contained in:
smilerz
2021-12-29 09:36:18 -06:00
parent a4f2c994a0
commit 52d1069353
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1007,16 +1007,18 @@ export default {
// when checking a sub item don't refresh the screen until all entries complete but change class to cross out // when checking a sub item don't refresh the screen until all entries complete but change class to cross out
let promises = [] let promises = []
update.entries.forEach((x) => { update.entries.forEach((x) => {
promises.push(this.saveThis({ id: x, checked: update.checked }, false)) const id = x?.id ?? x
let item = this.items.filter((entry) => entry.id == x)[0] let completed_at = undefined
Vue.set(item, "checked", update.checked)
if (update.checked) { if (update.checked) {
Vue.set(item, "completed_at", new Date().toISOString()) completed_at = new Date().toISOString()
} else {
Vue.set(item, "completed_at", undefined)
} }
promises.push(this.saveThis({ id: id, checked: update.checked }, false))
let item = this.items.filter((entry) => entry.id == id)[0]
Vue.set(item, "checked", update.checked)
Vue.set(item, "completed_at", completed_at)
}) })
Promise.all(promises).catch((err) => { Promise.all(promises).catch((err) => {
console.log(err, err.response) console.log(err, err.response)
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)

17
vue/src/components/ShoppingLineItem.vue
View File

@ -47,7 +47,7 @@
<!-- detail rows --> <!-- detail rows -->
<div class="card no-body" v-if="showDetails"> <div class="card no-body" v-if="showDetails">
<b-container fluid> <b-container fluid>
<div v-for="(e, z) in entries" :key="z"> <div v-for="e in entries" :key="e.id">
<b-row class="ml-2 small"> <b-row class="ml-2 small">
<b-col cols="6" md="4" class="overflow-hidden text-nowrap"> <b-col cols="6" md="4" class="overflow-hidden text-nowrap">
<button <button
@ -63,7 +63,10 @@
</button> </button>
</b-col> </b-col>
<b-col cols="6" md="4" class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</b-col> <b-col cols="6" md="4" class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</b-col>
<b-col cols="12" md="4" class="col-md-4 text-muted text-right overflow-hidden text-nowrap">{{ formatOneCreatedBy(e) }}</b-col> <b-col cols="12" md="4" class="col-md-4 text-muted text-right overflow-hidden text-nowrap">
{{ formatOneCreatedBy(e) }}
<div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
</b-col>
</b-row> </b-row>
<b-row class="ml-2 light"> <b-row class="ml-2 light">
@ -240,9 +243,6 @@ export default {
formatOneFood: function (item) { formatOneFood: function (item) {
return item.food.name return item.food.name
}, },
formatOneChecked: function (item) {
return item.checked
},
formatOneDelayUntil: function (item) { formatOneDelayUntil: function (item) {
if (!item.delay_until || (item.delay_until && item.checked)) { if (!item.delay_until || (item.delay_until && item.checked)) {
return false return false
@ -273,12 +273,13 @@ export default {
}) })
}, },
updateChecked: function (e, item) { updateChecked: function (e, item) {
let update = undefined
if (!item) { if (!item) {
let update = { entries: this.entries.map((x) => x.id), checked: !this.formatChecked } update = { entries: this.entries.map((x) => x.id), checked: !this.formatChecked }
this.$emit("update-checkbox", update)
} else { } else {
this.$emit("update-checkbox", { id: item.id, checked: !item.checked }) update = { entries: [item], checked: !item.checked }
} }
this.$emit("update-checkbox", update)
}, },
}, },
} }