Verknüfpte Belege: Keine Verknüpfungen zu Angebot von Angebot oder Auftrag.
[kivitendo-erp.git] / js / autocomplete_project.js
1 namespace('kivi', function(k){
2   "use strict";
3
4   k.ProjectPicker = function($real, options) {
5     // short circuit in case someone double inits us
6     if ($real.data("project_picker"))
7       return $real.data("project_picker");
8
9     var KEY = {
10       ESCAPE: 27,
11       ENTER:  13,
12       TAB:    9,
13       LEFT:   37,
14       RIGHT:  39,
15       PAGE_UP: 33,
16       PAGE_DOWN: 34,
17       SHIFT:     16,
18       CTRL:      17,
19       ALT:       18,
20     };
21     var CLASSES = {
22       PICKED:       'projectpicker-picked',
23       UNDEFINED:    'projectpicker-undefined',
24     }
25     var o = $.extend({
26       limit: 20,
27       delay: 50,
28     }, $real.data('project-picker-data'), options);
29     var STATES = {
30       PICKED:    CLASSES.PICKED,
31       UNDEFINED: CLASSES.UNDEFINED
32     }
33     var real_id      = $real.attr('id');
34     var $dummy       = $('#' + real_id + '_name');
35     var $customer_id = $('#' + real_id + '_customer_id');
36     var state        = STATES.PICKED;
37     var last_real    = $real.val();
38     var last_dummy   = $dummy.val();
39     var timer;
40
41     function open_dialog () {
42       k.popup_dialog({
43         url: 'controller.pl?action=Project/project_picker_search',
44         // data that can be accessed in template project_picker_search via FORM.boss
45         data: $.extend({  // add id of part to the rest of the data in ajax_data, e.g. no_paginate, booked, ...
46           real_id: real_id,
47           select: 1,
48         }, ajax_data($dummy.val())),
49         id: 'project_selection',
50         dialog: {
51           title: k.t8('Project picker'),
52           width: 800,
53           height: 800,
54         },
55         load: function() { init_search(); }
56       });
57       window.clearTimeout(timer);
58       return true;
59     }
60
61     function init_search() {
62       $('#project_picker_filter').keypress(function(e) { result_timer(e) }).focus();
63       $('#no_paginate').change(function() { update_results() });
64       $('#project_picker_clear_filter').click(function() {
65         $('#project_picker_filter').val('').focus();
66         update_results();
67       });
68     }
69
70     function ajax_data(term) {
71       var data = {
72         'filter.all:substr:multi::ilike': term,
73         no_paginate:  $('#no_paginate').prop('checked') ? 1 : 0,
74         current:  $real.val(),
75       };
76
77       if (o.customer_id)
78         data['filter.customer_id'] = o.customer_id.split(',');
79
80       if (o.active) {
81         if (o.active === 'active')   data['filter.active'] = 'active';
82         if (o.active === 'inactive') data['filter.active'] = 'inactive';
83         // both => no filter
84       } else {
85         data['filter.active'] = 'active'; // default
86       }
87
88       if (o.valid) {
89         if (o.valid === 'valid')   data['filter.valid'] = 'valid';
90         if (o.valid === 'invalid') data['filter.valid'] = 'invalid';
91         // both => no filter
92       } else {
93         data['filter.valid'] = 'valid'; // default
94       }
95
96       if (o.description_style)
97         data['description_style'] = o.description_style;
98
99       return data;
100     }
101
102     function set_item (item) {
103       if (item.id) {
104         $real.val(item.id);
105         // autocomplete ui has name, use the value for ajax items, which contains displayable_name
106         $dummy.val(item.name ? item.name : item.value);
107       } else {
108         $real.val('');
109         $dummy.val('');
110       }
111       state      = STATES.PICKED;
112       last_real  = $real.val();
113       last_dummy = $dummy.val();
114
115       $real.trigger('change');
116       $real.trigger('set_item:ProjectPicker', item);
117
118       annotate_state();
119     }
120
121     function make_defined_state () {
122       if (state == STATES.PICKED) {
123         annotate_state();
124         return true
125       } else if (state == STATES.UNDEFINED && $dummy.val() === '')
126         set_item({})
127       else {
128         set_item({ id: last_real, name: last_dummy })
129       }
130       annotate_state();
131     }
132
133     function annotate_state () {
134       if (state == STATES.PICKED)
135         $dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED);
136       else if (state == STATES.UNDEFINED && $dummy.val() === '')
137         $dummy.removeClass(STATES.UNDEFINED).addClass(STATES.PICKED);
138       else {
139         $dummy.addClass(STATES.UNDEFINED).removeClass(STATES.PICKED);
140       }
141     }
142
143     function update_results () {
144       $.ajax({
145         url: 'controller.pl?action=Project/project_picker_result',
146         data: $.extend({
147             'real_id': $real.val(),
148         }, ajax_data(function(){ var val = $('#project_picker_filter').val(); return val === undefined ? '' : val })),
149         success: function(data){
150           $('#project_picker_result').html(data);
151         }
152       });
153     }
154
155     function result_timer (event) {
156       if (!$('no_paginate').prop('checked')) {
157         if (event.keyCode == KEY.PAGE_UP) {
158           $('#project_picker_result a.paginate-prev').click();
159           return;
160         }
161         if (event.keyCode == KEY.PAGE_DOWN) {
162           $('#project_picker_result a.paginate-next').click();
163           return;
164         }
165       }
166       window.clearTimeout(timer);
167       timer = window.setTimeout(update_results, 100);
168     }
169
170     function close_popup() {
171       $('#project_selection').dialog('close');
172     }
173
174     function handle_changed_text(callbacks) {
175       $.ajax({
176         url: 'controller.pl?action=Project/ajax_autocomplete',
177         dataType: "json",
178         data: $.extend( ajax_data($dummy.val()), { prefer_exact: 1 } ),
179         success: function (data) {
180           if (data.length == 1) {
181             set_item(data[0]);
182             if (callbacks && callbacks.match_one) callbacks.match_one(data[0]);
183           } else if (data.length > 1) {
184             state = STATES.UNDEFINED;
185             if (callbacks && callbacks.match_many) callbacks.match_many(data);
186           } else {
187             state = STATES.UNDEFINED;
188             if (callbacks &&callbacks.match_none) callbacks.match_none();
189           }
190           annotate_state();
191         }
192       });
193     }
194
195     $dummy.autocomplete({
196       source: function(req, rsp) {
197         $.ajax($.extend(o, {
198           url:      'controller.pl?action=Project/ajax_autocomplete',
199           dataType: "json",
200           data:     ajax_data(req.term),
201           success:  function (data){ rsp(data) }
202         }));
203       },
204       select: function(event, ui) {
205         set_item(ui.item);
206       },
207       search: function(event, ui) {
208         if ((event.which == KEY.SHIFT) || (event.which == KEY.CTRL) || (event.which == KEY.ALT))
209           event.preventDefault();
210       }
211     });
212     /*  In case users are impatient and want to skip ahead:
213      *  Capture <enter> key events and check if it's a unique hit.
214      *  If it is, go ahead and assume it was selected. If it wasn't don't do
215      *  anything so that autocompletion kicks in.  For <tab> don't prevent
216      *  propagation. It would be nice to catch it, but javascript is too stupid
217      *  to fire a tab event later on, so we'd have to reimplement the "find
218      *  next active element in tabindex order and focus it".
219      */
220     /* note:
221      *  event.which does not contain tab events in keypressed in firefox but will report 0
222      *  chrome does not fire keypressed at all on tab or escape
223      */
224     $dummy.keydown(function(event){
225       if (event.which == KEY.ENTER || event.which == KEY.TAB) {
226         // if string is empty assume they want to delete
227         if ($dummy.val() === '') {
228           set_item({});
229           return true;
230         } else if (state == STATES.PICKED) {
231           return true;
232         }
233         if (event.which == KEY.TAB) {
234           event.preventDefault();
235           handle_changed_text();
236         }
237         if (event.which == KEY.ENTER) {
238           handle_changed_text({
239             match_one:  function(){$('#update_button').click();},
240           });
241           return false;
242         }
243       } else if ((event.which != KEY.SHIFT) && (event.which != KEY.CTRL) && (event.which != KEY.ALT)) {
244         state = STATES.UNDEFINED;
245       }
246     });
247
248     $dummy.on('paste', function(){
249       setTimeout(function() {
250         handle_changed_text();
251       }, 1);
252     });
253
254     $dummy.blur(function(){
255       window.clearTimeout(timer);
256       timer = window.setTimeout(annotate_state, 100);
257     });
258
259     // now add a picker div after the original input
260     var popup_button = $('<span>').addClass('ppp_popup_button');
261     $dummy.after(popup_button);
262     popup_button.click(open_dialog);
263     var pp = {
264       real:           function() { return $real },
265       dummy:          function() { return $dummy },
266       update_results: update_results,
267       result_timer:   result_timer,
268       set_item:       set_item,
269       reset:          make_defined_state,
270       is_defined_state: function() { return state == STATES.PICKED },
271       init_results: function() {
272         $('div.project_picker_project').each(function(){
273           $(this).click(function(){
274             set_item({
275               id:   $(this).children('input.project_picker_id').val(),
276               name: $(this).children('input.project_picker_description').val(),
277             });
278             close_popup();
279             $dummy.focus();
280             return true;
281           });  });
282         $('#project_selection').keydown(function(e){
283           if (e.which == KEY.ESCAPE) {
284             close_popup();
285             $dummy.focus();
286           }
287         });
288       }
289     }
290     $real.data('project_picker', pp);
291     return pp;
292   }
293 });
294
295 $(function(){
296   $('input.project_autocomplete').each(function(i,real){
297     kivi.ProjectPicker($(real));
298   })
299 });