TandoorRecipes/vue/src/components/Modals/LookupInput.vue

172 lines
5.5 KiB
Vue

<template>
<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"
:initial_single_selection="initialSingleSelection"
:model="model"
:multiple="useMultiple || false"
:sticky_options="sticky_options"
:allow_create="form.allow_create"
:create_placeholder="createPlaceholder"
:clear="clear"
:label="list_label"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="modelName"
>
</generic-multiselect>
<em v-if="help" class="small text-muted">{{ help }}</em>
</b-form-group>
</div>
</template>
<script>
import GenericMultiselect from "@/components/GenericMultiselect"
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
},
},
class_list: { type: String, default: "mb-3" },
show_label: { type: Boolean, default: true },
clear: { type: Number },
help: { type: String, default: undefined },
},
data() {
return {
new_value: undefined,
field: undefined,
label: undefined,
list_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 ?? []
this.sticky_options = this.sticky_options.map((x) => {
return { ...x, name: this.$t(x.name) }
})
this.list_label = this.form?.list_label ?? undefined
if (this.list_label?.includes("::")) {
this.list_label = this.list_label.split("::")[1]
}
},
computed: {
modelName() {
return this.$t(this?.model?.name) ?? this.$t("Search")
},
useMultiple() {
return this.form?.multiple || this.form?.ordered || false
},
initialSelection() {
if (!this.new_value || !this.useMultiple) {
return undefined
}
if (this.form?.ordered && this.first_run) {
return this.flattenItems(this.new_value)
} else {
return this.new_value
}
},
initialSingleSelection() {
if (this.useMultiple) {
return undefined
} else {
return this.new_value
}
},
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: {
// 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 = { ...x }
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 label = this.form.list_label.split("::")
let order = 0
let this_label
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>