commit 7e7aae8d20f3faf45073e5b888989a0ee5fce146
Author: Sven Schöling <s.schoeling@googlemail.com>
Date:   Fri Sep 22 16:49:56 2017 +0200

    CustomerVendor Picker: auf prototype Picker umgestellt analog zu Part

diff --git a/SL/Controller/CustomerVendor.pm b/SL/Controller/CustomerVendor.pm
index 86bba25f6..042ec25bf 100644
--- a/SL/Controller/CustomerVendor.pm
+++ b/SL/Controller/CustomerVendor.pm
@@ -640,7 +640,6 @@ sub action_ajaj_autocomplete {
 }
 
 sub action_test_page {
-  $::request->{layout}->add_javascripts('autocomplete_customer.js');
   $_[0]->render('customer_vendor/test_page');
 }
 
@@ -939,7 +938,6 @@ sub _pre_render {
 
   $self->{template_args} ||= {};
 
-  $::request->{layout}->add_javascripts('autocomplete_customer.js');
   $::request->{layout}->add_javascripts('kivi.CustomerVendor.js');
   $::request->{layout}->add_javascripts('kivi.File.js');
 
diff --git a/SL/Presenter/CustomerVendor.pm b/SL/Presenter/CustomerVendor.pm
index fccfa1daf..d00c54d7e 100644
--- a/SL/Presenter/CustomerVendor.pm
+++ b/SL/Presenter/CustomerVendor.pm
@@ -53,18 +53,17 @@ sub customer_vendor_picker {
   }
 
   my $id = delete($params{id}) || $self->name_to_id($name);
-  my $fat_set_item = delete $params{fat_set_item};
 
   my @classes = $params{class} ? ($params{class}) : ();
   push @classes, 'customer_vendor_autocomplete';
-  push @classes, 'customer-vendor-picker-fat-set-item' if $fat_set_item;
 
   my $ret =
-    $self->input_tag($name, (ref $value && $value->can('id') ? $value->id : ''), class => "@classes", type => 'hidden', id => $id) .
-    join('', map { $params{$_} ? $self->input_tag("", delete $params{$_}, id => "${id}_${_}", type => 'hidden') : '' } qw(type)) .
+    $self->input_tag($name, (ref $value && $value->can('id') ? $value->id : ''), class => "@classes", type => 'hidden', id => $id,
+      'data-customer-vendor-picker-data' => JSON::to_json(\%params),
+    ) .
     $self->input_tag("", ref $value  ? $value->displayable_name : '', id => "${id}_name", %params);
 
-  $::request->layout->add_javascripts('autocomplete_customer.js');
+  $::request->layout->add_javascripts('kivi.CustomerVendor.js');
   $::request->presenter->need_reinit_widgets($id);
 
   $self->html_tag('span', $ret, class => 'customer_vendor_picker');
diff --git a/js/autocomplete_customer.js b/js/autocomplete_customer.js
deleted file mode 100644
index 8f8771d86..000000000
--- a/js/autocomplete_customer.js
+++ /dev/null
@@ -1,208 +0,0 @@
-namespace('kivi', function(k){
-  "use strict";
-
-  k.CustomerVendorPicker = function($real, options) {
-    // short circuit in case someone double inits us
-    if ($real.data("customer_vendor_picker"))
-      return $real.data("customer_vendor_picker");
-
-    var KEY = {
-      ESCAPE: 27,
-      ENTER:  13,
-      TAB:    9,
-      LEFT:   37,
-      RIGHT:  39,
-      PAGE_UP: 33,
-      PAGE_DOWN: 34,
-      SHIFT:     16,
-      CTRL:      17,
-      ALT:       18,
-    };
-    var CLASSES = {
-      PICKED:       'customer-vendor-picker-picked',
-      UNDEFINED:    'customer-vendor-picker-undefined',
-      FAT_SET_ITEM: 'customer-vendor-picker-fat-set-item',
-    }
-    var o = $.extend({
-      limit: 20,
-      delay: 50,
-      fat_set_item: $real.hasClass(CLASSES.FAT_SET_ITEM),
-    }, options);
-    var STATES = {
-      PICKED:    CLASSES.PICKED,
-      UNDEFINED: CLASSES.UNDEFINED
-    }
-    var real_id = $real.attr('id');
-    var $dummy  = $('#' + real_id + '_name');
-    var $type   = $('#' + real_id + '_type');
-    var $unit   = $('#' + real_id + '_unit');
-    var state   = STATES.PICKED;
-    var last_real = $real.val();
-    var last_dummy = $dummy.val();
-    var timer;
-
-    function ajax_data(term) {
-      var data = {
-        'filter.all:substr:multi::ilike': term,
-        'filter.obsolete': 0,
-        current:  $real.val(),
-        type:     $type.val(),
-      };
-
-      return data;
-    }
-
-    function set_item (item) {
-      if (item.id) {
-        $real.val(item.id);
-        // autocomplete ui has name, ajax items have description
-        $dummy.val(item.name ? item.name : item.description);
-      } else {
-        $real.val('');
-        $dummy.val('');
-      }
-      state = STATES.PICKED;
-      last_real = $real.val();
-      last_dummy = $dummy.val();
-      $real.trigger('change');
-
-      if (o.fat_set_item && item.id) {
-        $.ajax({
-          url: 'controller.pl?action=CustomerVendor/show.json',
-          data: { id: item.id, db: item.type },
-          success: function(rsp) {
-            $real.trigger('set_item:CustomerVendorPicker', rsp);
-          },
-        });
-      } else {
-        $real.trigger('set_item:CustomerVendorPicker', item);
-      }
-      annotate_state();
-    }
-
-    function make_defined_state () {
-      if (state == STATES.PICKED) {
-        annotate_state();
-        return true
-      } else if (state == STATES.UNDEFINED && $dummy.val() === '')
-        set_item({})
-      else {
-        set_item({ id: last_real, name: last_dummy })
-      }
-      annotate_state();
-    }
-
-    function annotate_state () {
-      if (state == STATES.PICKED)
-        $dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED);
-      else if (state == STATES.UNDEFINED && $dummy.val() === '')
-        $dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED);
-      else {
-        $dummy.addClass(STATES.UNDEFINED).removeClass(STATES.PICKED);
-      }
-    }
-
-    function handle_changed_text(callbacks) {
-      $.ajax({
-        url: 'controller.pl?action=CustomerVendor/ajaj_autocomplete',
-        dataType: "json",
-        data: $.extend( ajax_data($dummy.val()), { prefer_exact: 1 } ),
-        success: function (data) {
-          if (data.length == 1) {
-            set_item(data[0]);
-            if (callbacks && callbacks.match_one) callbacks.match_one(data[0]);
-          } else if (data.length > 1) {
-            state = STATES.UNDEFINED;
-            if (callbacks && callbacks.match_many) callbacks.match_many(data);
-          } else {
-            state = STATES.UNDEFINED;
-            if (callbacks &&callbacks.match_none) callbacks.match_none();
-          }
-          annotate_state();
-        }
-      });
-    }
-
-    $dummy.autocomplete({
-      source: function(req, rsp) {
-        $.ajax($.extend(o, {
-          url:      'controller.pl?action=CustomerVendor/ajaj_autocomplete',
-          dataType: "json",
-          data:     ajax_data(req.term),
-          success:  function (data){ rsp(data) }
-        }));
-      },
-      select: function(event, ui) {
-        set_item(ui.item);
-      },
-      search: function(event, ui) {
-        if ((event.which == KEY.SHIFT) || (event.which == KEY.CTRL) || (event.which == KEY.ALT))
-          event.preventDefault();
-      }
-    });
-    /*  In case users are impatient and want to skip ahead:
-     *  Capture <enter> key events and check if it's a unique hit.
-     *  If it is, go ahead and assume it was selected. If it wasn't don't do
-     *  anything so that autocompletion kicks in.  For <tab> don't prevent
-     *  propagation. It would be nice to catch it, but javascript is too stupid
-     *  to fire a tab event later on, so we'd have to reimplement the "find
-     *  next active element in tabindex order and focus it".
-     */
-    /* note:
-     *  event.which does not contain tab events in keypressed in firefox but will report 0
-     *  chrome does not fire keypressed at all on tab or escape
-     */
-    $dummy.keydown(function(event){
-      if (event.which == KEY.ENTER || event.which == KEY.TAB) {
-        // if string is empty assume they want to delete
-        if ($dummy.val() === '') {
-          set_item({});
-          return true;
-        } else if (state == STATES.PICKED) {
-          return true;
-        }
-        if (event.which == KEY.TAB) {
-          event.preventDefault();
-          handle_changed_text();
-        }
-        if (event.which == KEY.ENTER) {
-          handle_changed_text({
-            match_one:  function(){$('#update_button').click();},
-          });
-          return false;
-        }
-      } else if ((event.which != KEY.SHIFT) && (event.which != KEY.CTRL) && (event.which != KEY.ALT)) {
-        state = STATES.UNDEFINED;
-      }
-    });
-
-    $dummy.on('paste', function(){
-      setTimeout(function() {
-        handle_changed_text();
-      }, 1);
-    });
-
-    $dummy.blur(function(){
-      window.clearTimeout(timer);
-      timer = window.setTimeout(annotate_state, 100);
-    });
-
-    // now add a picker div after the original input
-    var pp = {
-      real:           function() { return $real },
-      dummy:          function() { return $dummy },
-      type:           function() { return $type },
-      set_item:       set_item,
-      reset:          make_defined_state,
-      is_defined_state: function() { return state == STATES.PICKED },
-    }
-    $real.data('customer_vendor_picker', pp);
-    return pp;
-  }
-});
-
-$(function(){
-  $('input.customer_vendor_autocomplete').each(function(i,real){
-    kivi.CustomerVendorPicker($(real));
-  })
-});
diff --git a/js/kivi.CustomerVendor.js b/js/kivi.CustomerVendor.js
index 9efb990f1..14e02e0d1 100644
--- a/js/kivi.CustomerVendor.js
+++ b/js/kivi.CustomerVendor.js
@@ -45,7 +45,7 @@ namespace('kivi.CustomerVendor', function(ns) {
         $ctrl.prop('checked', cvar.value == 1 ? 'checked' : '');
 
       else if ((cvar.type == 'customer') || (cvar.type == 'vendor'))
-        kivi.CustomerVendorPicker($ctrl).set_item({ id: cvar.id, name: cvar.value });
+        kivi.CustomerVendor.Picker($ctrl).set_item({ id: cvar.id, name: cvar.value });
 
       else if (cvar.type == 'part')
         kivi.Part.Picker($ctrl).set_item({ id: cvar.id, name: cvar.value });
@@ -222,10 +222,232 @@ namespace('kivi.CustomerVendor', function(ns) {
     event.preventDefault();
     ns.inline_report(target, event.target + '', {});
   };
-});
 
-function local_reinit_widgets() {
-  $('#cv_phone,#shipto_shiptophone,#contact_cp_phone1,#contact_cp_phone2,#contact_cp_mobile1,#contact_cp_mobile2').each(function(idx, elt) {
-    kivi.CustomerVendor.init_dial_action($(elt));
+  var KEY = {
+    TAB:       9,
+    ENTER:     13,
+    SHIFT:     16,
+    CTRL:      17,
+    ALT:       18,
+    ESCAPE:    27,
+    PAGE_UP:   33,
+    PAGE_DOWN: 34,
+    LEFT:      37,
+    UP:        38,
+    RIGHT:     39,
+    DOWN:      40,
+  };
+
+  ns.Picker = function($real, options) {
+    var self = this;
+    this.o = $.extend(true, {
+      limit: 20,
+      delay: 50,
+      action: {
+        commit_none: function(){ },
+        commit_one:  function(){ $('#update_button').click(); },
+        commit_many: function(){ }
+      }
+    }, $real.data('customer-vendor-picker-data'), options);
+    this.$real              = $real;
+    this.real_id            = $real.attr('id');
+    this.last_real          = $real.val();
+    this.$dummy             = $($real.siblings()[0]);
+    this.autocomplete_open  = false;
+    this.state              = this.STATES.PICKED;
+    this.last_dummy         = this.$dummy.val();
+    this.timer              = undefined;
+
+    this.init();
+  };
+
+  ns.Picker.prototype = {
+    CLASSES: {
+      PICKED:       'customer-vendor-picker-picked',
+      UNDEFINED:    'customer-vendor-picker-undefined',
+    },
+    ajax_data: function(term) {
+      return {
+        'filter.all:substr:multi::ilike': term,
+        'filter.obsolete': 0,
+        current:  this.$real.val(),
+        type:     this.o.type,
+      };
+    },
+    set_item: function(item) {
+      var self = this;
+      if (item.id) {
+        this.$real.val(item.id);
+        // autocomplete ui has name, use the value for ajax items, which contains displayable_name
+        this.$dummy.val(item.name ? item.name : item.value);
+      } else {
+        this.$real.val('');
+        this.$dummy.val('');
+      }
+      this.state      = this.STATES.PICKED;
+      this.last_real  = this.$real.val();
+      this.last_dummy = this.$dummy.val();
+      this.$real.trigger('change');
+
+      if (this.o.fat_set_item && item.id) {
+        $.ajax({
+          url: 'controller.pl?action=CustomerVendor/show.json',
+          data: { 'id': item.id, 'db': item.type },
+          success: function(rsp) {
+            self.$real.trigger('set_item:CustomerVendorPicker', rsp);
+          },
+        });
+      } else {
+        this.$real.trigger('set_item:CustomerVendorPicker', item);
+      }
+      this.annotate_state();
+    },
+    set_multi_items: function(data) {
+      this.run_action(this.o.action.set_multi_items, [ data ]);
+    },
+    make_defined_state: function() {
+      if (this.state == this.STATES.PICKED) {
+        this.annotate_state();
+        return true
+      } else if (this.state == this.STATES.UNDEFINED && this.$dummy.val() === '')
+        this.set_item({})
+      else {
+        this.set_item({ id: this.last_real, name: this.last_dummy })
+      }
+      this.annotate_state();
+    },
+    annotate_state: function() {
+      if (this.state == this.STATES.PICKED)
+        this.$dummy.removeClass(this.STATES.UNDEFINED).addClass(this.STATES.PICKED);
+      else if (this.state == this.STATES.UNDEFINED && this.$dummy.val() === '')
+        this.$dummy.removeClass(this.STATES.UNDEFINED).addClass(this.STATES.PICKED);
+      else {
+        this.$dummy.addClass(this.STATES.UNDEFINED).removeClass(this.STATES.PICKED);
+      }
+    },
+    handle_changed_text: function(callbacks) {
+      var self = this;
+      $.ajax({
+        url: 'controller.pl?action=CustomerVendor/ajaj_autocomplete',
+        dataType: "json",
+        data: $.extend( self.ajax_data(self.$dummy.val()), { prefer_exact: 1 } ),
+        success: function (data) {
+          if (data.length == 1) {
+            self.set_item(data[0]);
+            if (callbacks && callbacks.match_one) self.run_action(callbacks.match_one, [ data[0] ]);
+          } else if (data.length > 1) {
+            self.state = self.STATES.UNDEFINED;
+            if (callbacks && callbacks.match_many) self.run_action(callbacks.match_many, [ data ]);
+          } else {
+            self.state = self.STATES.UNDEFINED;
+            if (callbacks && callbacks.match_none) self.run_action(callbacks.match_none, [ self, self.$dummy.val() ]);
+          }
+          self.annotate_state();
+        }
+      });
+    },
+    handle_keydown: function(event) {
+      var self = this;
+      if (event.which == KEY.ENTER || event.which == KEY.TAB) {
+        // if string is empty assume they want to delete
+        if (self.$dummy.val() === '') {
+          self.set_item({});
+          return true;
+        } else if (self.state == self.STATES.PICKED) {
+          if (self.o.action.commit_one) {
+            self.run_action(self.o.action.commit_one);
+          }
+          return true;
+        }
+        if (event.which == KEY.TAB) {
+          event.preventDefault();
+          self.handle_changed_text();
+        }
+        if (event.which == KEY.ENTER) {
+          self.handle_changed_text({
+            match_none: self.o.action.commit_none,
+            match_one:  self.o.action.commit_one,
+            match_many: self.o.action.commit_many
+          });
+          return false;
+        }
+      } else if (event.which == KEY.DOWN && !self.autocomplete_open) {
+        var old_options = self.$dummy.autocomplete('option');
+        self.$dummy.autocomplete('option', 'minLength', 0);
+        self.$dummy.autocomplete('search', self.$dummy.val());
+        self.$dummy.autocomplete('option', 'minLength', old_options.minLength);
+      } else if ((event.which != KEY.SHIFT) && (event.which != KEY.CTRL) && (event.which != KEY.ALT)) {
+        self.state = self.STATES.UNDEFINED;
+      }
+    },
+    init: function() {
+      var self = this;
+      this.$dummy.autocomplete({
+        source: function(req, rsp) {
+          $.ajax($.extend({}, self.o, {
+            url:      'controller.pl?action=CustomerVendor/ajaj_autocomplete',
+            dataType: "json",
+            type:     'get',
+            data:     self.ajax_data(req.term),
+            success:  function (data){ rsp(data) }
+          }));
+        },
+        select: function(event, ui) {
+          self.set_item(ui.item);
+        },
+        search: function(event, ui) {
+          if ((event.which == KEY.SHIFT) || (event.which == KEY.CTRL) || (event.which == KEY.ALT))
+            event.preventDefault();
+        },
+        open: function() {
+          self.autocomplete_open = true;
+        },
+        close: function() {
+          self.autocomplete_open = false;
+        }
+      });
+      this.$dummy.keydown(function(event){ self.handle_keydown(event) });
+      this.$dummy.on('paste', function(){
+        setTimeout(function() {
+          self.handle_changed_text();
+        }, 1);
+      });
+      this.$dummy.blur(function(){
+        window.clearTimeout(self.timer);
+        self.timer = window.setTimeout(function() { self.annotate_state() }, 100);
+      });
+    },
+    run_action: function(code, args) {
+      if (typeof code === 'function')
+        code.apply(this, args)
+      else
+        kivi.run(code, args);
+    },
+    clear: function() {
+      this.set_item({});
+    }
+  };
+  ns.Picker.prototype.STATES = {
+    PICKED:    ns.Picker.prototype.CLASSES.PICKED,
+    UNDEFINED: ns.Picker.prototype.CLASSES.UNDEFINED
+  };
+
+  ns.reinit_widgets = function() {
+    kivi.run_once_for('input.customer_vendor_autocomplete', 'customer_vendor_picker', function(elt) {
+      if (!$(elt).data('customer_vendor_picker'))
+        $(elt).data('customer_vendor_picker', new kivi.CustomerVendor.Picker($(elt)));
+    });
+
+    $('#cv_phone,#shipto_shiptophone,#contact_cp_phone1,#contact_cp_phone2,#contact_cp_mobile1,#contact_cp_mobile2').each(function(idx, elt) {
+      kivi.CustomerVendor.init_dial_action($(elt));
+    });
+  }
+
+  ns.init = function() {
+    ns.reinit_widgets();
+  }
+
+  $(function(){
+    ns.init();
   });
-}
+});
diff --git a/js/kivi.js b/js/kivi.js
index 4e415d97f..210020a60 100644
--- a/js/kivi.js
+++ b/js/kivi.js
@@ -242,17 +242,13 @@ namespace("kivi", function(ns) {
     });
 
     if (ns.Part) ns.Part.reinit_widgets();
+    if (ns.CustomerVendor) ns.CustomerVendor.reinit_widgets();
 
     if (ns.ProjectPicker)
       ns.run_once_for('input.project_autocomplete', 'project_picker', function(elt) {
         kivi.ProjectPicker($(elt));
       });
 
-    if (ns.CustomerVendorPicker)
-      ns.run_once_for('input.customer_vendor_autocomplete', 'customer_vendor_picker', function(elt) {
-        kivi.CustomerVendorPicker($(elt));
-      });
-
     if (ns.ChartPicker)
       ns.run_once_for('input.chart_autocomplete', 'chart_picker', function(elt) {
         kivi.ChartPicker($(elt));
diff --git a/templates/webpages/customer_vendor/tabs/contacts.html b/templates/webpages/customer_vendor/tabs/contacts.html
index 8361c6065..602352cea 100644
--- a/templates/webpages/customer_vendor/tabs/contacts.html
+++ b/templates/webpages/customer_vendor/tabs/contacts.html
@@ -18,7 +18,7 @@
             empty_title = LxERP.t8('New contact'),
             value_key = 'cp_id',
             title_key = 'full_name',
-            onchange = "kivi.CustomerVendor.selectContact({onFormSet: function(){ contactsMapWidget.testInputs(); local_reinit_widgets(); }});",
+            onchange = "kivi.CustomerVendor.selectContact({onFormSet: function(){ contactsMapWidget.testInputs(); kivi.reinit_widgets(); }});",
           )
         %]
       </td>
diff --git a/templates/webpages/customer_vendor/tabs/shipto.html b/templates/webpages/customer_vendor/tabs/shipto.html
index e93531a30..5dd6d85e0 100644
--- a/templates/webpages/customer_vendor/tabs/shipto.html
+++ b/templates/webpages/customer_vendor/tabs/shipto.html
@@ -16,7 +16,7 @@
              title_key = 'displayable_id',
              with_empty = 1,
              empty_title = LxERP.t8('New shipto'),
-             onchange = "kivi.CustomerVendor.selectShipto({onFormSet: function(){ shiptoMapWidget.testInputs(); local_reinit_widgets(); }});",
+             onchange = "kivi.CustomerVendor.selectShipto({onFormSet: function(){ shiptoMapWidget.testInputs(); kivi.reinit_widgets(); }});",
            )
         %]
       </td>
diff --git a/templates/webpages/customer_vendor/test_page.html b/templates/webpages/customer_vendor/test_page.html
index 4e2989719..c1d26f939 100644
--- a/templates/webpages/customer_vendor/test_page.html
+++ b/templates/webpages/customer_vendor/test_page.html
@@ -24,9 +24,8 @@ fat vendor with change<br>
 
 <br><hr>
 this one will be a reinit_widget after 4s:<br>
-<span id='vendor3' class="">
-<input id="vendor3_id" class="" type="hidden" name="vendor3_id" value="">
-<input id="vendor3_id_type" type="hidden" name="" value="vendor">
+<span id='vendor3' class="customer_vendor_picker">
+<input id="vendor3_id" class="" type="hidden" name="vendor3_id" value="" data-customer-vendor-picker-data="{&quot;type&quot;:&quot;vendor&quot;}">
 <input id="vendor3_id_name" type="text" name="" value="">
 </span>
 
