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

@@ -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

tailbone/static/js/tailbone.buefy.autocomplete.js

@@ -95,21 +95,21 @@ const TailboneAutocomplete = {
         }
     },
 
-    watch: {
+    // watch: {
-        // TODO: yikes this feels hacky.  what happens is, when the
+    //     // TODO: yikes this feels hacky.  what happens is, when the
-        // caller explicitly assigns a new UUID value to the tailbone
+    //     // caller explicitly assigns a new UUID value to the tailbone
-        // autocomplate component, the underlying buefy autocomplete
+    //     // autocomplate component, the underlying buefy autocomplete
-        // component was not getting the new value.  so here we are
+    //     // component was not getting the new value.  so here we are
-        // explicitly making sure it is in sync.  this issue was
+    //     // explicitly making sure it is in sync.  this issue was
-        // discovered on the "new vendor catalog batch" page
+    //     // discovered on the "new vendor catalog batch" page
-        value(val) {
+    //     value(val) {
-            this.$nextTick(() => {
+    //         this.$nextTick(() => {
-                if (this.buefyValue != val) {
+    //             if (this.buefyValue != val) {
-                    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.

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.field_model_vendor_uuid = parser.vendor_uuid
-                this.vendorName = parser.vendor_name
+                // 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>
 

tailbone/templates/deform/autocomplete_jquery.pt

@@ -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>
 

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(
+                f.set_widget('vendor_uuid',
-                    field_display=vendor_display, service_url=vendors_url,
+                             forms.widgets.JQueryAutocompleteWidget(
-                    assigned_label='vendorName'))
+                                 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')