miscell cosmetic
[myslice.git] / plugins / querytable / static / js / querytable.js
1 /**
2  * Description: display a query result in a datatables-powered <table>
3  * Copyright (c) 2012-2013 UPMC Sorbonne Universite - INRIA
4  * License: GPLv3
5  */
6
7 (function($) {
8
9     var debug=false;
10 //    debug=true
11
12     var QueryTable = Plugin.extend({
13
14         init: function(options, element) {
15             this._super(options, element);
16
17             /* Member variables */
18             // in general we expect 2 queries here
19             // query_uuid refers to a single object (typically a slice)
20             // query_all_uuid refers to a list (typically resources or users)
21             // these can return in any order so we keep track of which has been received yet
22             this.received_all_query = false;
23             this.received_query = false;
24
25 //            // We need to remember the active filter for datatables filtering
26 //            this.filters = Array(); 
27
28             // an internal buffer for records that are 'in' and thus need to be checked 
29             this.buffered_records_to_check = [];
30
31             /* XXX Events XXX */
32             // this.$element.on('show.Datatables', this.on_show);
33             this.elmt().on('show', this, this.on_show);
34             // Unbind all events using namespacing
35             // TODO in destructor
36             // $(window).unbind('QueryTable');
37
38             var query = manifold.query_store.find_analyzed_query(this.options.query_uuid);
39             this.method = query.object;
40
41             // xxx beware that this.key needs to contain a key that all records will have
42             // in general query_all will return well populated records, but query
43             // returns records with only the fields displayed on startup. 
44             this.key = (this.options.id_key);
45             if (! this.key) {
46                 // if not specified by caller, decide from metadata
47                 var keys = manifold.metadata.get_key(this.method);
48                 this.key = (keys && keys.length == 1) ? keys[0] : null;
49             }
50             if (! this.key) messages.warning("querytable.init could not kind valid key");
51
52             if (debug) messages.debug("querytable: key="+this.key);
53
54             /* Setup query and record handlers */
55             this.listen_query(options.query_uuid);
56             this.listen_query(options.query_all_uuid, 'all');
57
58             /* GUI setup and event binding */
59             this.initialize_table();
60         },
61
62         /* PLUGIN EVENTS */
63
64         on_show: function(e) {
65             var self = e.data;
66             self.table.fnAdjustColumnSizing()
67         }, // on_show
68
69         /* GUI EVENTS */
70
71         /* GUI MANIPULATION */
72
73         initialize_table: function() {
74             // compute columns based on columns and hidden_columns
75             this.slick_columns = [];
76             var all_columns = this.options.columns; // .concat(this.options.hidden_columns)
77             for (c in all_columns) {
78                 var column=all_columns[c];
79                 this.slick_columns.push ( {id:column, name:column, field:column });
80             }
81
82             // xxx should be extensible from caller with this.options.slickgrid_options 
83             this.slick_options = {
84                 enableCellNavigation: false,
85                 enableColumnReorder: true,
86             };
87
88             this.slick_data=[];
89             
90             var selector="#grid-"+this.options.domid;
91             if (debug) {
92                 messages.debug("slick grid selector is " + selector);
93                 for (c in this.slick_columns) {
94                     var col=this.slick_columns[c];
95                     var msg="";
96                     for (k in col) msg = msg+" col["+k+"]="+col[k];
97                     messages.debug("slick_column["+c+"]:"+msg);
98                 }
99             }
100             // add a checkbox column
101             var checkbox_selector = new Slick.CheckboxSelectColumn({
102                 cssClass: "slick-cell-checkboxsel"
103             });
104             this.slick_columns.push(checkbox_selector.getColumnDefinition());
105             this.slick_grid = new Slick.Grid(selector, this.slick_data, this.slick_columns, this.slick_options);
106             this.slick_grid.setSelectionModel (new Slick.RowSelectionModel ({selectActiveRow: false}));
107             this.slick_grid.registerPlugin (checkbox_selector);
108             
109             this.columnpicker = new Slick.Controls.ColumnPicker (this.slick_columns, this.slick_grid, this.slick_options)
110
111         }, // initialize_table
112
113         // Determine index of key in the table columns 
114         getColIndex: function(key, cols) {
115             var tabIndex = $.map(cols, function(x, i) { if (x.sTitle == key) return i; });
116             return (tabIndex.length > 0) ? tabIndex[0] : -1;
117         }, // getColIndex
118
119         checkbox_html : function (key, value) {
120 //          if (debug) messages.debug("checkbox_html, value="+value);
121             var result="";
122             // Prefix id with plugin_uuid
123             result += "<input";
124             result += " class='querytable-checkbox'";
125             result += " id='" + this.flat_id(this.id('checkbox', value)) + "'";
126             result += " name='" + key + "'";
127             result += " type='checkbox'";
128             result += " autocomplete='off'";
129             if (value === undefined) {
130                 messages.warning("querytable.checkbox_html - undefined value");
131             } else {
132                 result += " value='" + value + "'";
133             }
134             result += "></input>";
135             return result;
136         }, 
137
138         new_record: function(record) {
139             this.slick_data.push(record);
140         },
141
142         clear_table: function() {
143             console.log("clear_table not implemented");
144         },
145
146         redraw_table: function() {
147             this.table.fnDraw();
148         },
149
150         show_column: function(field) {
151             var oSettings = this.table.fnSettings();
152             var cols = oSettings.aoColumns;
153             var index = this.getColIndex(field,cols);
154             if (index != -1)
155                 this.table.fnSetColumnVis(index, true);
156         },
157
158         hide_column: function(field) {
159             console.log("hide_column not implemented - field="+field);
160         },
161
162         set_checkbox: function(record, checked) {
163             console.log("set_checkbox not implemented");
164             return;
165             /* Default: checked = true */
166             if (checked === undefined) checked = true;
167
168             var id;
169             /* The function accepts both records and their key */
170             switch (manifold.get_type(record)) {
171             case TYPE_VALUE:
172                 id = record;
173                 break;
174             case TYPE_RECORD:
175                 /* XXX Test the key before ? */
176                 id = record[this.key];
177                 break;
178             default:
179                 throw "Not implemented";
180                 break;
181             }
182
183
184             if (id === undefined) {
185                 messages.warning("querytable.set_checkbox record has no id to figure which line to tick");
186                 return;
187             }
188             var checkbox_id = this.flat_id(this.id('checkbox', id));
189             // function escape_id(myid) is defined in portal/static/js/common.functions.js
190             checkbox_id = escape_id(checkbox_id);
191             // using dataTables's $ to search also in nodes that are not currently displayed
192             var element = this.table.$(checkbox_id);
193             if (debug) 
194                 messages.debug("set_checkbox checked=" + checked
195                                + " id=" + checkbox_id + " matches=" + element.length);
196             element.attr('checked', checked);
197         },
198
199         /*************************** QUERY HANDLER ****************************/
200
201         on_filter_added: function(filter) {
202             this.filters.push(filter);
203             this.redraw_table();
204         },
205
206         on_filter_removed: function(filter) {
207             // Remove corresponding filters
208             this.filters = $.grep(this.filters, function(x) {
209                 return x != filter;
210             });
211             this.redraw_table();
212         },
213         
214         on_filter_clear: function() {
215             this.redraw_table();
216         },
217
218         on_field_added: function(field) {
219             this.show_column(field);
220         },
221
222         on_field_removed: function(field) {
223             this.hide_column(field);
224         },
225
226         on_field_clear: function() {
227             alert('QueryTable::clear_fields() not implemented');
228         },
229
230         /* XXX TODO: make this generic a plugin has to subscribe to a set of Queries to avoid duplicated code ! */
231         /*************************** ALL QUERY HANDLER ****************************/
232
233         on_all_filter_added: function(filter) {
234             // XXX
235             this.redraw_table();
236         },
237
238         on_all_filter_removed: function(filter) {
239             // XXX
240             this.redraw_table();
241         },
242         
243         on_all_filter_clear: function() {
244             // XXX
245             this.redraw_table();
246         },
247
248         on_all_field_added: function(field) {
249             this.show_column(field);
250         },
251
252         on_all_field_removed: function(field) {
253             this.hide_column(field);
254         },
255
256         on_all_field_clear: function() {
257             alert('QueryTable::clear_fields() not implemented');
258         },
259
260
261         /*************************** RECORD HANDLER ***************************/
262
263         on_new_record: function(record) {
264             if (this.received_all_query) {
265                 // if the 'all' query has been dealt with already we may turn on the checkbox
266                 this.set_checkbox(record, true);
267             } else {
268                 // otherwise we need to remember that and do it later on
269                 if (debug) messages.debug("Remembering record to check " + record[this.key]);
270                 this.buffered_records_to_check.push(record);
271             }
272         },
273
274         on_clear_records: function() {
275         },
276
277         // Could be the default in parent
278         on_query_in_progress: function() {
279             this.spin();
280         },
281
282         on_query_done: function() {
283             this.received_query = true;
284             // unspin once we have received both
285             if (this.received_all_query && this.received_query) this.unspin();
286         },
287         
288         on_field_state_changed: function(data) {
289             switch(data.request) {
290                 case FIELD_REQUEST_ADD:
291                 case FIELD_REQUEST_ADD_RESET:
292                     this.set_checkbox(data.value, true);
293                     break;
294                 case FIELD_REQUEST_REMOVE:
295                 case FIELD_REQUEST_REMOVE_RESET:
296                     this.set_checkbox(data.value, false);
297                     break;
298                 default:
299                     break;
300             }
301         },
302
303         /* XXX TODO: make this generic a plugin has to subscribe to a set of Queries to avoid duplicated code ! */
304         // all
305         on_all_field_state_changed: function(data) {
306             switch(data.request) {
307                 case FIELD_REQUEST_ADD:
308                 case FIELD_REQUEST_ADD_RESET:
309                     this.set_checkbox(data.value, true);
310                     break;
311                 case FIELD_REQUEST_REMOVE:
312                 case FIELD_REQUEST_REMOVE_RESET:
313                     this.set_checkbox(data.value, false);
314                     break;
315                 default:
316                     break;
317             }
318         },
319
320         on_all_new_record: function(record) {
321             this.new_record(record);
322         },
323
324         on_all_clear_records: function() {
325             this.clear_table();
326
327         },
328
329         on_all_query_in_progress: function() {
330             // XXX parent
331             this.spin();
332         }, // on_all_query_in_progress
333
334         on_all_query_done: function() {
335             if (debug) messages.debug("1-shot initializing dataTables content with " + this.slick_data.length + " lines");
336             this.slick_grid.setData (this.slick_data, true);
337             if (debug) 
338                 for (k in this.slick_data[0]) messages.debug("slick_data[0]["+k+"]="+this.slick_data[0][k]);
339             this.slick_grid.render();
340             
341             var self = this;
342             // if we've already received the slice query, we have not been able to set 
343             // checkboxes on the fly at that time (dom not yet created)
344             $.each(this.buffered_records_to_check, function(i, record) {
345                 if (debug) messages.debug ("delayed turning on checkbox " + i + " record= " + record);
346                 self.set_checkbox(record, true);
347             });
348             this.buffered_records_to_check = [];
349
350             this.received_all_query = true;
351             // unspin once we have received both
352             if (this.received_all_query && this.received_query) this.unspin();
353
354         }, // on_all_query_done
355
356         /************************** PRIVATE METHODS ***************************/
357
358         /** 
359          * @brief QueryTable filtering function
360          */
361         _querytable_filter: function(oSettings, aData, iDataIndex) {
362             var ret = true;
363             $.each (this.filters, function(index, filter) { 
364                 /* XXX How to manage checkbox ? */
365                 var key = filter[0]; 
366                 var op = filter[1];
367                 var value = filter[2];
368
369                 /* Determine index of key in the table columns */
370                 var col = $.map(oSettings.aoColumns, function(x, i) {if (x.sTitle == key) return i;})[0];
371
372                 /* Unknown key: no filtering */
373                 if (typeof(col) == 'undefined')
374                     return;
375
376                 col_value=unfold.get_value(aData[col]);
377                 /* Test whether current filter is compatible with the column */
378                 if (op == '=' || op == '==') {
379                     if ( col_value != value || col_value==null || col_value=="" || col_value=="n/a")
380                         ret = false;
381                 }else if (op == '!=') {
382                     if ( col_value == value || col_value==null || col_value=="" || col_value=="n/a")
383                         ret = false;
384                 } else if(op=='<') {
385                     if ( parseFloat(col_value) >= value || col_value==null || col_value=="" || col_value=="n/a")
386                         ret = false;
387                 } else if(op=='>') {
388                     if ( parseFloat(col_value) <= value || col_value==null || col_value=="" || col_value=="n/a")
389                         ret = false;
390                 } else if(op=='<=' || op=='≤') {
391                     if ( parseFloat(col_value) > value || col_value==null || col_value=="" || col_value=="n/a")
392                         ret = false;
393                 } else if(op=='>=' || op=='≥') {
394                     if ( parseFloat(col_value) < value || col_value==null || col_value=="" || col_value=="n/a")
395                         ret = false;
396                 }else{
397                     // How to break out of a loop ?
398                     alert("filter not supported");
399                     return false;
400                 }
401
402             });
403             return ret;
404         },
405
406         _querytable_draw_callback: function() {
407             /* 
408              * Handle clicks on checkboxes: reassociate checkbox click every time
409              * the table is redrawn 
410              */
411             this.elts('querytable-checkbox').unbind('click').click(this, this._check_click);
412
413             if (!this.table)
414                 return;
415
416             /* Remove pagination if we show only a few results */
417             var wrapper = this.table; //.parent().parent().parent();
418             var rowsPerPage = this.table.fnSettings()._iDisplayLength;
419             var rowsToShow = this.table.fnSettings().fnRecordsDisplay();
420             var minRowsPerPage = this.table.fnSettings().aLengthMenu[0];
421
422             if ( rowsToShow <= rowsPerPage || rowsPerPage == -1 ) {
423                 $('.querytable_paginate', wrapper).css('visibility', 'hidden');
424             } else {
425                 $('.querytable_paginate', wrapper).css('visibility', 'visible');
426             }
427
428             if ( rowsToShow <= minRowsPerPage ) {
429                 $('.querytable_length', wrapper).css('visibility', 'hidden');
430             } else {
431                 $('.querytable_length', wrapper).css('visibility', 'visible');
432             }
433         },
434
435         _check_click: function(e) {
436             e.stopPropagation();
437
438             var self = e.data;
439
440             // XXX this.value = key of object to be added... what about multiple keys ?
441             if (debug) messages.debug("querytable click handler checked=" + this.checked + " hrn=" + this.value);
442             manifold.raise_event(self.options.query_uuid, this.checked?SET_ADD:SET_REMOVED, this.value);
443             //return false; // prevent checkbox to be checked, waiting response from manifold plugin api
444             
445         },
446
447         _selectAll: function() {
448             // requires jQuery id
449             var uuid=this.id.split("-");
450             var oTable=$("#querytable-"+uuid[1]).dataTable();
451             // Function available in QueryTable 1.9.x
452             // Filter : displayed data only
453             var filterData = oTable._('tr', {"filter":"applied"});   
454             /* TODO: WARNING if too many nodes selected, use filters to reduce nuber of nodes */        
455             if(filterData.length<=100){
456                 $.each(filterData, function(index, obj) {
457                     var last=$(obj).last();
458                     var key_value=unfold.get_value(last[0]);
459                     if(typeof($(last[0]).attr('checked'))=="undefined"){
460                         $.publish('selected', 'add/'+key_value);
461                     }
462                 });
463             }
464         },
465
466     });
467
468     $.plugin('QueryTable', QueryTable);
469
470 //  /* define the 'dom-checkbox' type for sorting in datatables 
471 //     http://datatables.net/examples/plug-ins/dom_sort.html
472 //     using trial and error I found that the actual column number
473 //     was in fact given as a third argument, and not second 
474 //     as the various online resources had it - go figure */
475 //    $.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, _, iColumn ) {
476 //      return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
477 //          return result=$('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
478 //      } );
479 //    }
480
481 })(jQuery);
482