shopping list ux improvements
This commit is contained in:
Kaibu
parent
7c5ffdaef4
commit
c60141940d
File diff suppressed because it is too large
Load Diff
@ -1,172 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form-group class="mb-3">
|
||||
<template #label v-if="show_label">
|
||||
{{ form.label }}
|
||||
</template>
|
||||
<generic-multiselect
|
||||
@change="new_value = $event.val"
|
||||
@remove="new_value = undefined"
|
||||
:initial_selection="initialSelection"
|
||||
:model="model"
|
||||
:multiple="useMultiple"
|
||||
:sticky_options="sticky_options"
|
||||
:allow_create="form.allow_create"
|
||||
:create_placeholder="createPlaceholder"
|
||||
:clear="clear"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
:placeholder="modelName"
|
||||
@new="addNew"
|
||||
>
|
||||
</generic-multiselect>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div>
|
||||
<b-form-group :class="class_list">
|
||||
<template #label v-if="show_label">
|
||||
{{ form.label }}
|
||||
</template>
|
||||
<generic-multiselect
|
||||
@change="new_value = $event.val"
|
||||
@remove="new_value = undefined"
|
||||
:initial_selection="initialSelection"
|
||||
:model="model"
|
||||
:multiple="useMultiple"
|
||||
:sticky_options="sticky_options"
|
||||
:allow_create="form.allow_create"
|
||||
:create_placeholder="createPlaceholder"
|
||||
:clear="clear"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
:placeholder="modelName"
|
||||
@new="addNew"
|
||||
>
|
||||
</generic-multiselect>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import { StandardToasts, ApiMixin } from "@/utils/utils"
|
||||
import {StandardToasts, ApiMixin} from "@/utils/utils"
|
||||
|
||||
export default {
|
||||
name: "LookupInput",
|
||||
components: { GenericMultiselect },
|
||||
mixins: [ApiMixin],
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
default() {
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default() {
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
show_label: { type: Boolean, default: true },
|
||||
clear: { type: Number },
|
||||
name: "LookupInput",
|
||||
components: {GenericMultiselect},
|
||||
mixins: [ApiMixin],
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
default() {
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
new_value: undefined,
|
||||
field: undefined,
|
||||
label: undefined,
|
||||
sticky_options: undefined,
|
||||
first_run: true,
|
||||
model: {
|
||||
type: Object,
|
||||
default() {
|
||||
return undefined
|
||||
},
|
||||
},
|
||||
class_list: {type: String, default: "mb-3"},
|
||||
show_label: {type: Boolean, default: true},
|
||||
clear: {type: Number},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
new_value: undefined,
|
||||
field: undefined,
|
||||
label: undefined,
|
||||
sticky_options: undefined,
|
||||
first_run: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.new_value = this.form?.value
|
||||
this.field = this.form?.field ?? "You Forgot To Set Field Name"
|
||||
this.label = this.form?.label ?? ""
|
||||
this.sticky_options = this.form?.sticky_options ?? []
|
||||
},
|
||||
computed: {
|
||||
modelName() {
|
||||
return this?.model?.name ?? this.$t("Search")
|
||||
},
|
||||
useMultiple() {
|
||||
return this.form?.multiple || this.form?.ordered || false
|
||||
},
|
||||
initialSelection() {
|
||||
let this_value = this.new_value
|
||||
let arrayValues = undefined
|
||||
// multiselect is expect to get an array of objects - make sure it gets one
|
||||
if (Array.isArray(this_value)) {
|
||||
arrayValues = this_value
|
||||
} else if (!this_value) {
|
||||
arrayValues = []
|
||||
} else if (typeof this_value === "object") {
|
||||
arrayValues = [this_value]
|
||||
} else {
|
||||
arrayValues = [{id: -1, name: this_value}]
|
||||
}
|
||||
if (this.form?.ordered && this.first_run && arrayValues.length > 0) {
|
||||
return this.flattenItems(arrayValues)
|
||||
} else {
|
||||
return arrayValues
|
||||
}
|
||||
},
|
||||
createPlaceholder() {
|
||||
return this.$t("Create_New_" + this?.model?.name)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"form.value": function (newVal, oldVal) {
|
||||
this.new_value = newVal
|
||||
},
|
||||
new_value: function () {
|
||||
let x = this?.new_value
|
||||
// pass the unflattened attributes that can be restored when ready to save/update
|
||||
if (this.form?.ordered) {
|
||||
x["__override__"] = this.unflattenItem(this?.new_value)
|
||||
}
|
||||
this.$root.$emit("change", this.form.field, x)
|
||||
this.$emit("change", x)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNew: function (e) {
|
||||
// if create a new item requires more than 1 parameter or the field 'name' is insufficient this will need reworked
|
||||
// in a perfect world this would trigger a new modal and allow editing all fields
|
||||
this.genericAPI(this.model, this.Actions.CREATE, {name: e})
|
||||
.then((result) => {
|
||||
this.new_value = result.data
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
// ordered lookups have nested attributes that need flattened attributes to drive lookup
|
||||
flattenItems: function (itemlist) {
|
||||
let flat_items = []
|
||||
let item = undefined
|
||||
let label = this.form.list_label.split("::")
|
||||
itemlist.forEach((x) => {
|
||||
item = {}
|
||||
for (const [k, v] of Object.entries(x)) {
|
||||
if (k == label[0]) {
|
||||
item["id"] = v.id
|
||||
item[label[1]] = v[label[1]]
|
||||
} else {
|
||||
item[this.form.field + "__" + k] = v
|
||||
}
|
||||
}
|
||||
flat_items.push(item)
|
||||
})
|
||||
this.first_run = false
|
||||
return flat_items
|
||||
},
|
||||
mounted() {
|
||||
this.new_value = this.form?.value
|
||||
this.field = this.form?.field ?? "You Forgot To Set Field Name"
|
||||
this.label = this.form?.label ?? ""
|
||||
this.sticky_options = this.form?.sticky_options ?? []
|
||||
},
|
||||
computed: {
|
||||
modelName() {
|
||||
return this?.model?.name ?? this.$t("Search")
|
||||
},
|
||||
useMultiple() {
|
||||
return this.form?.multiple || this.form?.ordered || false
|
||||
},
|
||||
initialSelection() {
|
||||
let this_value = this.new_value
|
||||
let arrayValues = undefined
|
||||
// multiselect is expect to get an array of objects - make sure it gets one
|
||||
if (Array.isArray(this_value)) {
|
||||
arrayValues = this_value
|
||||
} else if (!this_value) {
|
||||
arrayValues = []
|
||||
} else if (typeof this_value === "object") {
|
||||
arrayValues = [this_value]
|
||||
} else {
|
||||
arrayValues = [{ id: -1, name: this_value }]
|
||||
}
|
||||
if (this.form?.ordered && this.first_run && arrayValues.length > 0) {
|
||||
return this.flattenItems(arrayValues)
|
||||
} else {
|
||||
return arrayValues
|
||||
}
|
||||
},
|
||||
createPlaceholder() {
|
||||
return this.$t("Create_New_" + this?.model?.name)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"form.value": function (newVal, oldVal) {
|
||||
this.new_value = newVal
|
||||
},
|
||||
new_value: function () {
|
||||
let x = this?.new_value
|
||||
// pass the unflattened attributes that can be restored when ready to save/update
|
||||
if (this.form?.ordered) {
|
||||
x["__override__"] = this.unflattenItem(this?.new_value)
|
||||
}
|
||||
this.$root.$emit("change", this.form.field, x)
|
||||
this.$emit("change", x)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNew: function (e) {
|
||||
// if create a new item requires more than 1 parameter or the field 'name' is insufficient this will need reworked
|
||||
// in a perfect world this would trigger a new modal and allow editing all fields
|
||||
this.genericAPI(this.model, this.Actions.CREATE, { name: e })
|
||||
.then((result) => {
|
||||
this.new_value = result.data
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
// ordered lookups have nested attributes that need flattened attributes to drive lookup
|
||||
flattenItems: function (itemlist) {
|
||||
let flat_items = []
|
||||
let item = undefined
|
||||
let label = this.form.list_label.split("::")
|
||||
itemlist.forEach((x) => {
|
||||
item = {}
|
||||
for (const [k, v] of Object.entries(x)) {
|
||||
if (k == label[0]) {
|
||||
item["id"] = v.id
|
||||
item[label[1]] = v[label[1]]
|
||||
} else {
|
||||
item[this.form.field + "__" + k] = v
|
||||
}
|
||||
}
|
||||
flat_items.push(item)
|
||||
})
|
||||
this.first_run = false
|
||||
return flat_items
|
||||
},
|
||||
unflattenItem: function (itemList) {
|
||||
let unflat_items = []
|
||||
let item = undefined
|
||||
let this_label = undefined
|
||||
let label = this.form.list_label.split("::")
|
||||
let order = 0
|
||||
itemList.forEach((x) => {
|
||||
item = {}
|
||||
item[label[0]] = {}
|
||||
for (const [k, v] of Object.entries(x)) {
|
||||
switch (k) {
|
||||
case "id":
|
||||
item[label[0]]["id"] = v
|
||||
break
|
||||
case label[1]:
|
||||
item[label[0]][label[1]] = v
|
||||
break
|
||||
default:
|
||||
this_label = k.replace(this.form.field + "__", "")
|
||||
}
|
||||
}
|
||||
item["order"] = order
|
||||
order++
|
||||
unflat_items.push(item)
|
||||
})
|
||||
return unflat_items
|
||||
},
|
||||
unflattenItem: function (itemList) {
|
||||
let unflat_items = []
|
||||
let item = undefined
|
||||
let this_label = undefined
|
||||
let label = this.form.list_label.split("::")
|
||||
let order = 0
|
||||
itemList.forEach((x) => {
|
||||
item = {}
|
||||
item[label[0]] = {}
|
||||
for (const [k, v] of Object.entries(x)) {
|
||||
switch (k) {
|
||||
case "id":
|
||||
item[label[0]]["id"] = v
|
||||
break
|
||||
case label[1]:
|
||||
item[label[0]][label[1]] = v
|
||||
break
|
||||
default:
|
||||
this_label = k.replace(this.form.field + "__", "")
|
||||
}
|
||||
}
|
||||
item["order"] = order
|
||||
order++
|
||||
unflat_items.push(item)
|
||||
})
|
||||
return unflat_items
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,287 +1,322 @@
|
||||
<template>
|
||||
<div id="shopping_line_item">
|
||||
<div class="col-12">
|
||||
<b-container fluid>
|
||||
<!-- summary rows -->
|
||||
<b-row align-h="start">
|
||||
<b-col cols="12" sm="2">
|
||||
<div style="position: static" class="btn-group">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
|
||||
@click.stop="$emit('open-context-menu', $event, entries)"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<input type="checkbox" class="text-right mx-3 mt-2" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="10">
|
||||
<b-row>
|
||||
<b-col cols="6" sm="3">
|
||||
<div v-if="Object.entries(formatAmount).length == 1">{{ Object.entries(formatAmount)[0][1] }}   {{ Object.entries(formatAmount)[0][0] }}</div>
|
||||
<div class="small" v-else v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }}   {{ x[0] }}</div>
|
||||
</b-col>
|
||||
<div id="shopping_line_item">
|
||||
<b-container fluid class="pr-0 pl-1 pl-md-3">
|
||||
<!-- summary rows -->
|
||||
<b-row align-h="start">
|
||||
<b-col cols="1" class="align-items-center d-flex">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
|
||||
@click.stop="$emit('open-context-menu', $event, entries)">
|
||||
<i class="fas fa-ellipsis-v fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
|
||||
@change="updateChecked"
|
||||
:key="entries[0].id"/>
|
||||
</b-col>
|
||||
<b-col cols="8" md="9">
|
||||
<b-row class="d-flex h-100" @click.stop="$emit('open-context-menu', $event, entries)">
|
||||
<b-col cols="6" md="6" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
|
||||
<div><strong>{{ Object.entries(formatAmount)[0][1] }}</strong>  
|
||||
{{ Object.entries(formatAmount)[0][0] }}
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6" md="6" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
|
||||
<div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }}  
|
||||
{{ x[0] }}
|
||||
</div>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="7">
|
||||
{{ formatFood }}
|
||||
</b-col>
|
||||
<b-col cols="6" sm="2" data-html2canvas-ignore="true">
|
||||
<b-button size="sm" @click="showDetails = !showDetails" class="mr-2" variant="link">
|
||||
<div class="text-nowrap">{{ showDetails ? "Hide" : "Show" }} Details</div>
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-h="center">
|
||||
<b-col cols="12">
|
||||
<div class="small text-muted text-truncate">{{ formatHint }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<!-- detail rows -->
|
||||
<div class="card no-body" v-if="showDetails">
|
||||
<b-container fluid>
|
||||
<div v-for="e in entries" :key="e.id">
|
||||
<b-row class="ml-2 small">
|
||||
<b-col cols="6" md="4" class="overflow-hidden text-nowrap">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn btn-link btn-sm m-0 p-0"
|
||||
style="text-overflow: ellipsis"
|
||||
@click.stop="openRecipeCard($event, e)"
|
||||
@mouseover="openRecipeCard($event, e)"
|
||||
>
|
||||
{{ formatOneRecipe(e) }}
|
||||
</button>
|
||||
</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) }}
|
||||
<div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="ml-2 light">
|
||||
<b-col cols="12" sm="2">
|
||||
<div style="position: static" class="btn-group">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
|
||||
@click.stop="$emit('open-context-menu', $event, e)"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<input type="checkbox" class="text-right mx-3 mt-2" :checked="e.checked" @change="updateChecked($event, e)" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="12" sm="10">
|
||||
<b-row>
|
||||
<b-col cols="2" sm="2" md="1" class="text-nowrap">{{ formatOneAmount(e) }}</b-col>
|
||||
<b-col cols="10" sm="4" md="2" class="text-nowrap">{{ formatOneUnit(e) }}</b-col>
|
||||
|
||||
<b-col cols="12" sm="6" md="4" class="text-nowrap">{{ formatOneFood(e) }}</b-col>
|
||||
|
||||
<b-col cols="12" sm="6" md="5">
|
||||
<div class="small" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr class="w-75" />
|
||||
</div>
|
||||
</b-container>
|
||||
<b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
|
||||
{{ formatFood }}
|
||||
</b-col>
|
||||
<b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex">
|
||||
<b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2" variant="link">
|
||||
<div class="text-nowrap"><i class="fa fa-chevron-right rotate"
|
||||
:class="showDetails ? 'rotated' : ''"></i> <span
|
||||
class="d-none d-md-inline-block">{{ $t('Details') }}</span>
|
||||
</div>
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
|
||||
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
|
||||
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
|
||||
</div>
|
||||
<hr class="m-1" />
|
||||
</b-button>
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
|
||||
@change="updateChecked"
|
||||
:key="entries[0].id"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-h="center" class="d-none d-md-flex">
|
||||
<b-col cols="12">
|
||||
<div class="small text-muted text-truncate">{{ formatHint }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<!-- detail rows -->
|
||||
<div class="card no-body mb-1 pt-2 align-content-center ml-2" v-if="showDetails">
|
||||
<b-container fluid>
|
||||
<div v-for="(e, x) in entries" :key="e.id">
|
||||
<b-row class="small justify-content-around">
|
||||
<b-col cols="auto" md="4" class="overflow-hidden text-nowrap">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn btn-link btn-sm m-0 p-0"
|
||||
style="text-overflow: ellipsis"
|
||||
@click.stop="openRecipeCard($event, e)"
|
||||
@mouseover="openRecipeCard($event, e)">
|
||||
{{ formatOneRecipe(e) }}
|
||||
</button>
|
||||
</b-col>
|
||||
<b-col cols="auto" md="4" class="text-muted">{{ formatOneMealPlan(e) }}</b-col>
|
||||
<b-col cols="auto" md="4" class="text-muted text-right overflow-hidden text-nowrap">
|
||||
{{ formatOneCreatedBy(e) }}
|
||||
<div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
|
||||
|
||||
|
||||
<b-row align-h="start">
|
||||
<b-col cols="1" class="align-items-center d-flex">
|
||||
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
|
||||
@click.stop="$emit('open-context-menu', $event, e)">
|
||||
<i class="fas fa-ellipsis-v fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
|
||||
@change="updateChecked"
|
||||
:key="entries[0].id"/>
|
||||
</b-col>
|
||||
<b-col cols="8" md="9">
|
||||
<b-row class="d-flex justify-content-around">
|
||||
<b-col cols="6" md="6" class="d-flex align-items-center">
|
||||
<div>{{ formatOneAmount(e) }}  
|
||||
{{ formatOneUnit(e) }}
|
||||
</div>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
|
||||
{{ formatOneFood(e) }}
|
||||
</b-col>
|
||||
<b-col cols="12" class="d-flex d-md-none">
|
||||
<div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
|
||||
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
|
||||
:checked="formatChecked"
|
||||
@change="updateChecked"
|
||||
:key="entries[0].id"/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="w-75" v-if="x !== entries.length -1"/>
|
||||
<div class="pb-4" v-if="x === entries.length -1"></div>
|
||||
</div>
|
||||
<ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300">
|
||||
<template #menu="{ contextData }" v-if="recipe">
|
||||
<ContextMenuItem><RecipeCard :recipe="contextData" :detail="false"></RecipeCard></ContextMenuItem>
|
||||
<ContextMenuItem @click="$refs.menu.close()">
|
||||
<b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2">
|
||||
<template #label>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i> {{ $t("Servings") }}</a>
|
||||
</template>
|
||||
<div @click.prevent.stop>
|
||||
<b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input>
|
||||
</div>
|
||||
</b-form-group>
|
||||
</ContextMenuItem>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
</b-container>
|
||||
</div>
|
||||
<hr class="m-1" v-if="!showDetails"/>
|
||||
<ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300">
|
||||
<template #menu="{ contextData }" v-if="recipe">
|
||||
<ContextMenuItem>
|
||||
<RecipeCard :recipe="contextData" :detail="false"></RecipeCard>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="$refs.menu.close()">
|
||||
<b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2">
|
||||
<template #label>
|
||||
<a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i> {{ $t("Servings") }}</a>
|
||||
</template>
|
||||
<div @click.prevent.stop>
|
||||
<b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input>
|
||||
</div>
|
||||
</b-form-group>
|
||||
</ContextMenuItem>
|
||||
</template>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue } from "bootstrap-vue"
|
||||
import {BootstrapVue} from "bootstrap-vue"
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
import ContextMenu from "@/components/ContextMenu/ContextMenu"
|
||||
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
|
||||
import { ApiMixin } from "@/utils/utils"
|
||||
import {ApiMixin} from "@/utils/utils"
|
||||
import RecipeCard from "./RecipeCard.vue"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
export default {
|
||||
// TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
|
||||
// or i'm capturing it incorrectly
|
||||
name: "ShoppingLineItem",
|
||||
mixins: [ApiMixin],
|
||||
components: { RecipeCard, ContextMenu, ContextMenuItem },
|
||||
props: {
|
||||
entries: {
|
||||
type: Array,
|
||||
},
|
||||
groupby: { type: String },
|
||||
// TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
|
||||
// or i'm capturing it incorrectly
|
||||
name: "ShoppingLineItem",
|
||||
mixins: [ApiMixin],
|
||||
components: {RecipeCard, ContextMenu, ContextMenuItem},
|
||||
props: {
|
||||
entries: {
|
||||
type: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDetails: false,
|
||||
recipe: undefined,
|
||||
servings: 1,
|
||||
groupby: {type: String},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDetails: false,
|
||||
recipe: undefined,
|
||||
servings: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatAmount: function () {
|
||||
let amount = {}
|
||||
this.entries.forEach((entry) => {
|
||||
let unit = entry?.unit?.name ?? "----"
|
||||
if (entry.amount) {
|
||||
if (amount[unit]) {
|
||||
amount[unit] += entry.amount
|
||||
} else {
|
||||
amount[unit] = entry.amount
|
||||
}
|
||||
}
|
||||
})
|
||||
for (const [k, v] of Object.entries(amount)) {
|
||||
amount[k] = Math.round(v * 100 + Number.EPSILON) / 100 // javascript hack to force rounding at 2 places
|
||||
}
|
||||
return amount
|
||||
},
|
||||
computed: {
|
||||
formatAmount: function () {
|
||||
let amount = {}
|
||||
this.entries.forEach((entry) => {
|
||||
let unit = entry?.unit?.name ?? "----"
|
||||
if (entry.amount) {
|
||||
if (amount[unit]) {
|
||||
amount[unit] += entry.amount
|
||||
} else {
|
||||
amount[unit] = entry.amount
|
||||
}
|
||||
}
|
||||
})
|
||||
for (const [k, v] of Object.entries(amount)) {
|
||||
amount[k] = Math.round(v * 100 + Number.EPSILON) / 100 // javascript hack to force rounding at 2 places
|
||||
}
|
||||
return amount
|
||||
},
|
||||
formatCategory: function () {
|
||||
return this.formatOneCategory(this.entries[0]) || this.$t("Undefined")
|
||||
},
|
||||
formatChecked: function () {
|
||||
return this.entries.map((x) => x.checked).every((x) => x === true)
|
||||
},
|
||||
formatHint: function () {
|
||||
if (this.groupby == "recipe") {
|
||||
return this.formatCategory
|
||||
} else {
|
||||
return this.formatRecipe
|
||||
}
|
||||
},
|
||||
formatFood: function () {
|
||||
return this.formatOneFood(this.entries[0])
|
||||
},
|
||||
formatUnit: function () {
|
||||
return this.formatOneUnit(this.entries[0])
|
||||
},
|
||||
formatRecipe: function () {
|
||||
if (this.entries?.length == 1) {
|
||||
return this.formatOneMealPlan(this.entries[0]) || ""
|
||||
} else {
|
||||
let mealplan_name = this.entries.filter((x) => x?.recipe_mealplan?.name)
|
||||
// return [this.formatOneMealPlan(mealplan_name?.[0]), this.$t("CountMore", { count: this.entries?.length - 1 })].join(" ")
|
||||
formatCategory: function () {
|
||||
return this.formatOneCategory(this.entries[0]) || this.$t("Undefined")
|
||||
},
|
||||
formatChecked: function () {
|
||||
return this.entries.map((x) => x.checked).every((x) => x === true)
|
||||
},
|
||||
formatHint: function () {
|
||||
if (this.groupby == "recipe") {
|
||||
return this.formatCategory
|
||||
} else {
|
||||
return this.formatRecipe
|
||||
}
|
||||
},
|
||||
formatFood: function () {
|
||||
return this.formatOneFood(this.entries[0])
|
||||
},
|
||||
formatUnit: function () {
|
||||
return this.formatOneUnit(this.entries[0])
|
||||
},
|
||||
formatRecipe: function () {
|
||||
if (this.entries?.length == 1) {
|
||||
return this.formatOneMealPlan(this.entries[0]) || ""
|
||||
} else {
|
||||
let mealplan_name = this.entries.filter((x) => x?.recipe_mealplan?.name)
|
||||
// return [this.formatOneMealPlan(mealplan_name?.[0]), this.$t("CountMore", { count: this.entries?.length - 1 })].join(" ")
|
||||
|
||||
return mealplan_name
|
||||
.map((x) => {
|
||||
return this.formatOneMealPlan(x)
|
||||
})
|
||||
.join(" - ")
|
||||
}
|
||||
},
|
||||
formatNotes: function () {
|
||||
if (this.entries?.length == 1) {
|
||||
return this.formatOneNote(this.entries[0]) || ""
|
||||
}
|
||||
return ""
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.servings = this.entries?.[0]?.recipe_mealplan?.servings ?? 0
|
||||
},
|
||||
methods: {
|
||||
// this.genericAPI inherited from ApiMixin
|
||||
|
||||
formatDate: function (datetime) {
|
||||
if (!datetime) {
|
||||
return
|
||||
}
|
||||
return Intl.DateTimeFormat(window.navigator.language, { dateStyle: "short", timeStyle: "short" }).format(Date.parse(datetime))
|
||||
},
|
||||
formatOneAmount: function (item) {
|
||||
return item?.amount ?? 1
|
||||
},
|
||||
formatOneUnit: function (item) {
|
||||
return item?.unit?.name ?? ""
|
||||
},
|
||||
formatOneCategory: function (item) {
|
||||
return item?.food?.supermarket_category?.name
|
||||
},
|
||||
formatOneCompletedAt: function (item) {
|
||||
if (!item.completed_at) {
|
||||
return false
|
||||
}
|
||||
return [this.$t("Completed"), "@", this.formatDate(item.completed_at)].join(" ")
|
||||
},
|
||||
formatOneFood: function (item) {
|
||||
return item.food.name
|
||||
},
|
||||
formatOneDelayUntil: function (item) {
|
||||
if (!item.delay_until || (item.delay_until && item.checked)) {
|
||||
return false
|
||||
}
|
||||
return [this.$t("DelayUntil"), "-", this.formatDate(item.delay_until)].join(" ")
|
||||
},
|
||||
formatOneMealPlan: function (item) {
|
||||
return item?.recipe_mealplan?.name ?? ""
|
||||
},
|
||||
formatOneRecipe: function (item) {
|
||||
return item?.recipe_mealplan?.recipe_name ?? ""
|
||||
},
|
||||
formatOneNote: function (item) {
|
||||
if (!item) {
|
||||
item = this.entries[0]
|
||||
}
|
||||
return [item?.recipe_mealplan?.mealplan_note, item?.ingredient_note].filter(String)
|
||||
},
|
||||
formatOneCreatedBy: function (item) {
|
||||
return [this.$t("Added_by"), item?.created_by.username, "@", this.formatDate(item.created_at)].join(" ")
|
||||
},
|
||||
openRecipeCard: function (e, item) {
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, { id: item.recipe_mealplan.recipe }).then((result) => {
|
||||
let recipe = result.data
|
||||
recipe.steps = undefined
|
||||
this.recipe = true
|
||||
this.$refs.recipe_card.open(e, recipe)
|
||||
return mealplan_name
|
||||
.map((x) => {
|
||||
return this.formatOneMealPlan(x)
|
||||
})
|
||||
},
|
||||
updateChecked: function (e, item) {
|
||||
let update = undefined
|
||||
if (!item) {
|
||||
update = { entries: this.entries.map((x) => x.id), checked: !this.formatChecked }
|
||||
} else {
|
||||
update = { entries: [item], checked: !item.checked }
|
||||
}
|
||||
this.$emit("update-checkbox", update)
|
||||
},
|
||||
.join(" - ")
|
||||
}
|
||||
},
|
||||
formatNotes: function () {
|
||||
if (this.entries?.length == 1) {
|
||||
return this.formatOneNote(this.entries[0]) || ""
|
||||
}
|
||||
return ""
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.servings = this.entries?.[0]?.recipe_mealplan?.servings ?? 0
|
||||
},
|
||||
methods: {
|
||||
// this.genericAPI inherited from ApiMixin
|
||||
|
||||
formatDate: function (datetime) {
|
||||
if (!datetime) {
|
||||
return
|
||||
}
|
||||
return Intl.DateTimeFormat(window.navigator.language, {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short"
|
||||
}).format(Date.parse(datetime))
|
||||
},
|
||||
formatOneAmount: function (item) {
|
||||
return item?.amount ?? 1
|
||||
},
|
||||
formatOneUnit: function (item) {
|
||||
return item?.unit?.name ?? ""
|
||||
},
|
||||
formatOneCategory: function (item) {
|
||||
return item?.food?.supermarket_category?.name
|
||||
},
|
||||
formatOneCompletedAt: function (item) {
|
||||
if (!item.completed_at) {
|
||||
return false
|
||||
}
|
||||
return [this.$t("Completed"), "@", this.formatDate(item.completed_at)].join(" ")
|
||||
},
|
||||
formatOneFood: function (item) {
|
||||
return item.food.name
|
||||
},
|
||||
formatOneDelayUntil: function (item) {
|
||||
if (!item.delay_until || (item.delay_until && item.checked)) {
|
||||
return false
|
||||
}
|
||||
return [this.$t("DelayUntil"), "-", this.formatDate(item.delay_until)].join(" ")
|
||||
},
|
||||
formatOneMealPlan: function (item) {
|
||||
return item?.recipe_mealplan?.name ?? ""
|
||||
},
|
||||
formatOneRecipe: function (item) {
|
||||
return item?.recipe_mealplan?.recipe_name ?? ""
|
||||
},
|
||||
formatOneNote: function (item) {
|
||||
if (!item) {
|
||||
item = this.entries[0]
|
||||
}
|
||||
return [item?.recipe_mealplan?.mealplan_note, item?.ingredient_note].filter(String)
|
||||
},
|
||||
formatOneCreatedBy: function (item) {
|
||||
return [this.$t("Added_by"), item?.created_by.username, "@", this.formatDate(item.created_at)].join(" ")
|
||||
},
|
||||
openRecipeCard: function (e, item) {
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, {id: item.recipe_mealplan.recipe}).then((result) => {
|
||||
let recipe = result.data
|
||||
recipe.steps = undefined
|
||||
this.recipe = true
|
||||
this.$refs.recipe_card.open(e, recipe)
|
||||
})
|
||||
},
|
||||
updateChecked: function (e, item) {
|
||||
let update = undefined
|
||||
if (!item) {
|
||||
update = {entries: this.entries.map((x) => x.id), checked: !this.formatChecked}
|
||||
} else {
|
||||
update = {entries: [item], checked: !item.checked}
|
||||
}
|
||||
this.$emit("update-checkbox", update)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -296,4 +331,28 @@ export default {
|
||||
/* left: 0; top: 50%; width: 100%; /* …with the top across the middle */
|
||||
/* border-bottom: 1px solid #000; /* …and with a border on the top */
|
||||
/* } */
|
||||
.checkbox-control {
|
||||
font-size: 0.6rem
|
||||
}
|
||||
|
||||
.checkbox-control-mobile {
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.rotate {
|
||||
-moz-transition: all 0.25s linear;
|
||||
-webkit-transition: all 0.25s linear;
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
.rotated {
|
||||
-moz-transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.unit-badge-lg {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user