Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision 7e7aae8d

Von Sven Schöling vor mehr als 7 Jahren hinzugefügt

  • ID 7e7aae8d20f3faf45073e5b888989a0ee5fce146
  • Vorgänger 4643e22c
  • Nachfolger 62bf9a5c

CustomerVendor Picker: auf prototype Picker umgestellt analog zu Part

Unterschiede anzeigen:

SL/Controller/CustomerVendor.pm
}
sub action_test_page {
$::request->{layout}->add_javascripts('autocomplete_customer.js');
$_[0]->render('customer_vendor/test_page');
}
......
$self->{template_args} ||= {};
$::request->{layout}->add_javascripts('autocomplete_customer.js');
$::request->{layout}->add_javascripts('kivi.CustomerVendor.js');
$::request->{layout}->add_javascripts('kivi.File.js');
SL/Presenter/CustomerVendor.pm
}
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');
js/autocomplete_customer.js
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));
})
});
js/kivi.CustomerVendor.js
$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 });
......
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();
});
}
});
js/kivi.js
});
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));
templates/webpages/customer_vendor/tabs/contacts.html
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>
templates/webpages/customer_vendor/tabs/shipto.html
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>
templates/webpages/customer_vendor/test_page.html
<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>

Auch abrufbar als: Unified diff