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