From b261e8bb9bfba808beaa8f30fe7eb3ac5449ffb9 Mon Sep 17 00:00:00 2001 From: Lance Edgar Date: Sat, 5 Feb 2022 21:41:05 -0600 Subject: [PATCH] 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.. --- tailbone/forms/widgets.py | 6 +++ .../static/js/tailbone.buefy.autocomplete.js | 39 ++++++++++++------- .../templates/batch/vendorcatalog/create.mako | 20 +++++++++- .../templates/deform/autocomplete_jquery.pt | 5 ++- tailbone/views/batch/vendorcatalog.py | 11 ++++-- 5 files changed, 60 insertions(+), 21 deletions(-) diff --git a/tailbone/forms/widgets.py b/tailbone/forms/widgets.py index 3dac0a6a..91b6cb32 100644 --- a/tailbone/forms/widgets.py +++ b/tailbone/forms/widgets.py @@ -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 diff --git a/tailbone/static/js/tailbone.buefy.autocomplete.js b/tailbone/static/js/tailbone.buefy.autocomplete.js index ce0aece9..f615c2a9 100644 --- a/tailbone/static/js/tailbone.buefy.autocomplete.js +++ b/tailbone/static/js/tailbone.buefy.autocomplete.js @@ -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. diff --git a/tailbone/templates/batch/vendorcatalog/create.mako b/tailbone/templates/batch/vendorcatalog/create.mako index 78b5b17d..19e91dd0 100644 --- a/tailbone/templates/batch/vendorcatalog/create.mako +++ b/tailbone/templates/batch/vendorcatalog/create.mako @@ -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 + } + } + diff --git a/tailbone/templates/deform/autocomplete_jquery.pt b/tailbone/templates/deform/autocomplete_jquery.pt index 6e1a1e61..c0e79c29 100644 --- a/tailbone/templates/deform/autocomplete_jquery.pt +++ b/tailbone/templates/deform/autocomplete_jquery.pt @@ -108,10 +108,13 @@ tal:define="vmodel vmodel|'field_model_' + name;" tal:omit-tag=""> + tal:attributes=":assigned-label assigned_label or 'null'; + @input input_callback or 'null'; + @new-label new_label_callback or 'null';"> diff --git a/tailbone/views/batch/vendorcatalog.py b/tailbone/views/batch/vendorcatalog.py index b463a5f7..8173cac5 100644 --- a/tailbone/views/batch/vendorcatalog.py +++ b/tailbone/views/batch/vendorcatalog.py @@ -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')