Add some autocomplete workarounds for new vendor catalog batch
when user selects a parser, it may auto-select the vendor, but keeping that all in sync is complicated. this seems to be an improvement but it could likely use more..
This commit is contained in:
Lance Edgar
parent
a36f775752
commit
b261e8bb9b
|
|
@ -251,6 +251,9 @@ class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
|
|||
service_url = None
|
||||
cleared_callback = None
|
||||
selected_callback = None
|
||||
input_callback = None
|
||||
new_label_callback = None
|
||||
ref = None
|
||||
|
||||
default_options = (
|
||||
('autoFocus', True),
|
||||
|
|
@ -277,6 +280,9 @@ class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
|
|||
kw['field_display'] = self.field_display
|
||||
kw['cleared_callback'] = self.cleared_callback
|
||||
kw['assigned_label'] = self.assigned_label
|
||||
kw['input_callback'] = self.input_callback
|
||||
kw['new_label_callback'] = self.new_label_callback
|
||||
kw['ref'] = self.ref
|
||||
kw.setdefault('selected_callback', self.selected_callback)
|
||||
tmpl_values = self.get_template_values(field, cstruct, kw)
|
||||
template = readonly and self.readonly_template or self.template
|
||||
|
|
|
|||
|
|
@ -95,21 +95,21 @@ const TailboneAutocomplete = {
|
|||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
// TODO: yikes this feels hacky. what happens is, when the
|
||||
// caller explicitly assigns a new UUID value to the tailbone
|
||||
// autocomplate component, the underlying buefy autocomplete
|
||||
// component was not getting the new value. so here we are
|
||||
// explicitly making sure it is in sync. this issue was
|
||||
// discovered on the "new vendor catalog batch" page
|
||||
value(val) {
|
||||
this.$nextTick(() => {
|
||||
if (this.buefyValue != val) {
|
||||
this.buefyValue = val
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// // TODO: yikes this feels hacky. what happens is, when the
|
||||
// // caller explicitly assigns a new UUID value to the tailbone
|
||||
// // autocomplate component, the underlying buefy autocomplete
|
||||
// // component was not getting the new value. so here we are
|
||||
// // explicitly making sure it is in sync. this issue was
|
||||
// // discovered on the "new vendor catalog batch" page
|
||||
// value(val) {
|
||||
// this.$nextTick(() => {
|
||||
// if (this.buefyValue != val) {
|
||||
// this.buefyValue = val
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// },
|
||||
|
||||
methods: {
|
||||
|
||||
|
|
@ -163,9 +163,18 @@ const TailboneAutocomplete = {
|
|||
this.buefyValue = null
|
||||
|
||||
// here is where we alert callers to the new value
|
||||
if (option) {
|
||||
this.$emit('new-label', option.label)
|
||||
}
|
||||
this.$emit('input', option ? option.value : null)
|
||||
},
|
||||
|
||||
// set selection to the given option, which should a simple
|
||||
// object with (at least) `value` and `label` properties
|
||||
setSelection(option) {
|
||||
this.$refs.autocomplete.setSelected(option)
|
||||
},
|
||||
|
||||
// clear the field of any value, i.e. set the "currently
|
||||
// selected option" to null. this is invoked when you click
|
||||
// the button, which is visible while the field has a value.
|
||||
|
|
|
|||
|
|
@ -61,17 +61,33 @@
|
|||
${form.component_studly}Data.parsers = ${json.dumps(parsers_data)|n}
|
||||
|
||||
${form.component_studly}Data.vendorName = null
|
||||
${form.component_studly}Data.vendorNameReplacement = null
|
||||
|
||||
${form.component_studly}.watch.field_model_parser_key = function(val) {
|
||||
let parser = this.parsers[val]
|
||||
if (parser.vendor_uuid) {
|
||||
if (this.field_model_vendor_uuid != parser.vendor_uuid) {
|
||||
this.field_model_vendor_uuid = parser.vendor_uuid
|
||||
this.vendorName = parser.vendor_name
|
||||
// this.field_model_vendor_uuid = parser.vendor_uuid
|
||||
// this.vendorName = parser.vendor_name
|
||||
this.$refs.vendorAutocomplete.setSelection({
|
||||
value: parser.vendor_uuid,
|
||||
label: parser.vendor_name,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${form.component_studly}.methods.vendorLabelChanging = function(label) {
|
||||
this.vendorNameReplacement = label
|
||||
}
|
||||
|
||||
${form.component_studly}.methods.vendorChanged = function(uuid) {
|
||||
if (uuid) {
|
||||
this.vendorName = this.vendorNameReplacement
|
||||
this.vendorNameReplacement = null
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
|
|
|
|||
|
|
@ -108,10 +108,13 @@
|
|||
tal:define="vmodel vmodel|'field_model_' + name;"
|
||||
tal:omit-tag="">
|
||||
<tailbone-autocomplete name="${name}"
|
||||
ref="${ref}"
|
||||
service-url="${url}"
|
||||
v-model="${vmodel}"
|
||||
initial-label="${field_display}"
|
||||
tal:attributes=":assigned-label assigned_label or 'null';">
|
||||
tal:attributes=":assigned-label assigned_label or 'null';
|
||||
@input input_callback or 'null';
|
||||
@new-label new_label_callback or 'null';">
|
||||
</tailbone-autocomplete>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,9 +203,14 @@ class VendorCatalogView(FileBatchMasterView):
|
|||
if vendor:
|
||||
vendor_display = six.text_type(vendor)
|
||||
vendors_url = self.request.route_url('vendors.autocomplete')
|
||||
f.set_widget('vendor_uuid', forms.widgets.JQueryAutocompleteWidget(
|
||||
field_display=vendor_display, service_url=vendors_url,
|
||||
assigned_label='vendorName'))
|
||||
f.set_widget('vendor_uuid',
|
||||
forms.widgets.JQueryAutocompleteWidget(
|
||||
field_display=vendor_display,
|
||||
service_url=vendors_url,
|
||||
ref='vendorAutocomplete',
|
||||
assigned_label='vendorName',
|
||||
input_callback='vendorChanged',
|
||||
new_label_callback='vendorLabelChanging'))
|
||||
else:
|
||||
f.set_readonly('vendor')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue