X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=plugins%2Fquerytable%2Fstatic%2Fjs%2Fquerytable.js;h=bca90c3551224ea35410d498f680ae2b990ffe3f;hb=8c82aaebbe810904dd985aacf92ebc9eab3fd5f5;hp=8712e523ec08393ae56e8c1127dbad1dd0d33673;hpb=38077fa6e864ddbb6b66ba2cd4723f6d18800305;p=myslice.git

diff --git a/plugins/querytable/static/js/querytable.js b/plugins/querytable/static/js/querytable.js
index 8712e523..bca90c35 100644
--- a/plugins/querytable/static/js/querytable.js
+++ b/plugins/querytable/static/js/querytable.js
@@ -1,9 +1,24 @@
 /**
- * Description: display a query result in a datatables-powered <table>
+ * Description: display a query result in a slickgrid-powered <table>
  * Copyright (c) 2012-2013 UPMC Sorbonne Universite - INRIA
  * License: GPLv3
  */
 
+/* ongoing adaptation to slickgrid 
+   still missing are
+. checkboxes really running properly
+. ability to sort on columns (should be straightforward
+  IIRC this got broken when moving to dataview, see dataview doc
+. ability to sort on the checkboxes column 
+  (e.g. have resources 'in' the slice show up first)
+  not quite clear how to do this
+. searching
+. filtering
+. style improvement
+. rendering in the sliceview - does not use up all space, 
+  this is different from the behaviour with simpleview
+*/
+
 (function($) {
 
     var debug=false;
@@ -24,18 +39,14 @@
             this.received_all_query = false;
             this.received_query = false;
 
-//            // We need to remember the active filter for datatables filtering
+//            // We need to remember the active filter for filtering
 //            this.filters = Array(); 
 
             // an internal buffer for records that are 'in' and thus need to be checked 
             this.buffered_records_to_check = [];
 
-            /* XXX Events XXX */
-            // this.$element.on('show.Datatables', this.on_show);
+            /* Events */
             this.elmt().on('show', this, this.on_show);
-            // Unbind all events using namespacing
-            // TODO in destructor
-            // $(window).unbind('QueryTable');
 
             var query = manifold.query_store.find_analyzed_query(this.options.query_uuid);
             this.method = query.object;
@@ -65,7 +76,7 @@
 
         on_show: function(e) {
             var self = e.data;
-            self.table.fnAdjustColumnSizing()
+            self.redraw_table();
         }, // on_show
 
         /* GUI EVENTS */
@@ -84,6 +95,10 @@
 					   cssClass: "querytable-column-"+column,
 					   width:100, minWidth:40, });
 	    }
+	    var checkbox_selector = new Slick.CheckboxSelectColumn({
+		cssClass: "slick-checkbox"
+	    });
+	    this.slick_columns.push(checkbox_selector.getColumnDefinition());
 
 	    // xxx should be extensible from caller with this.options.slickgrid_options 
 	    this.slick_options = {
@@ -112,11 +127,7 @@
 		    messages.debug("slick_column["+c+"]:"+msg);
 		}
 	    }
-	    // add a checkbox column
-	    var checkbox_selector = new Slick.CheckboxSelectColumn({
-		cssClass: "slick-cell-checkboxsel"
-	    });
-	    this.slick_columns.push(checkbox_selector.getColumnDefinition());
+
 	    this.slick_grid = new Slick.Grid(selector, this.slick_dataview, this.slick_columns, this.slick_options);
 	    this.slick_grid.setSelectionModel (new Slick.RowSelectionModel ({selectActiveRow: false}));
 	    this.slick_grid.registerPlugin (checkbox_selector);
@@ -126,92 +137,30 @@
 	    
 	    this.columnpicker = new Slick.Controls.ColumnPicker (this.slick_columns, this.slick_grid, this.slick_options)
 
-        }, // initialize_table
+	    g=this.slick_grid;
 
-	// Determine index of key in the table columns 
-        getColIndex: function(key, cols) {
-            var tabIndex = $.map(cols, function(x, i) { if (x.sTitle == key) return i; });
-            return (tabIndex.length > 0) ? tabIndex[0] : -1;
-        }, // getColIndex
-
-        checkbox_html : function (key, value) {
-	    if (debug_deep) messages.debug("checkbox_html, value="+value);
-            var result="";
-            // Prefix id with plugin_uuid
-            result += "<input";
-            result += " class='querytable-checkbox'";
-            result += " id='" + this.flat_id(this.id('checkbox', value)) + "'";
-            result += " name='" + key + "'";
-            result += " type='checkbox'";
-            result += " autocomplete='off'";
-	    if (value === undefined) {
-		messages.warning("querytable.checkbox_html - undefined value");
-	    } else {
-		result += " value='" + value + "'";
-	    }
-            result += "></input>";
-            return result;
-        }, 
+        }, // initialize_table
 
         new_record: function(record) {
 	    this.slick_data.push(record);
         },
 
         clear_table: function() {
-	    console.log("clear_table not implemented");
+	    this.slick_data=[];
+	    this.slick_dataview.setItems(this.slick_data,this.key);
         },
 
         redraw_table: function() {
-            this.table.fnDraw();
+	    this.slick_grid.autosizeColumns();
+            this.slick_grid.render();
         },
 
         show_column: function(field) {
-            var oSettings = this.table.fnSettings();
-            var cols = oSettings.aoColumns;
-            var index = this.getColIndex(field,cols);
-            if (index != -1)
-                this.table.fnSetColumnVis(index, true);
+	    console.log ("querytable.show_column not yet implemented with slickgrid - field="+field);
         },
 
         hide_column: function(field) {
-	    console.log("hide_column not implemented - field="+field);
-        },
-
-        set_checkbox: function(record, checked) {
-	    console.log("set_checkbox not yet implemented with slickgrid");
-	    return;
-            /* Default: checked = true */
-            if (checked === undefined) checked = true;
-
-            var id;
-            /* The function accepts both records and their key */
-            switch (manifold.get_type(record)) {
-            case TYPE_VALUE:
-                id = record;
-                break;
-            case TYPE_RECORD:
-                /* XXX Test the key before ? */
-                id = record[this.key];
-                break;
-            default:
-                throw "Not implemented";
-                break;
-            }
-
-
-	    if (id === undefined) {
-		messages.warning("querytable.set_checkbox record has no id to figure which line to tick");
-		return;
-	    }
-            var checkbox_id = this.flat_id(this.id('checkbox', id));
-            // function escape_id(myid) is defined in portal/static/js/common.functions.js
-            checkbox_id = escape_id(checkbox_id);
-            // using dataTables's $ to search also in nodes that are not currently displayed
-            var element = this.table.$(checkbox_id);
-            if (debug_deep) 
-                messages.debug("set_checkbox checked=" + checked
-                               + " id=" + checkbox_id + " matches=" + element.length);
-            element.attr('checked', checked);
+	    console.log("querytable.hide_column not implemented with slickgrid - field="+field);
         },
 
         /*************************** QUERY HANDLER ****************************/
@@ -281,7 +230,7 @@
         on_new_record: function(record) {
             if (this.received_all_query) {
         	// if the 'all' query has been dealt with already we may turn on the checkbox
-                this.set_checkbox(record, true);
+                this._set_checkbox(record, true);
             } else {
         	// otherwise we need to remember that and do it later on
         	if (debug) messages.debug("Remembering record to check " + record[this.key]);
@@ -300,18 +249,21 @@
         on_query_done: function() {
             this.received_query = true;
     	    // unspin once we have received both
-            if (this.received_all_query && this.received_query) this.unspin();
+            if (this.received_all_query && this.received_query) {
+		this._init_checkboxes();
+		this.unspin();
+	    }
         },
         
         on_field_state_changed: function(data) {
             switch(data.request) {
                 case FIELD_REQUEST_ADD:
                 case FIELD_REQUEST_ADD_RESET:
-                    this.set_checkbox(data.value, true);
+                    this._set_checkbox(data.value, true);
                     break;
                 case FIELD_REQUEST_REMOVE:
                 case FIELD_REQUEST_REMOVE_RESET:
-                    this.set_checkbox(data.value, false);
+                    this._set_checkbox(data.value, false);
                     break;
                 default:
                     break;
@@ -324,11 +276,11 @@
             switch(data.request) {
                 case FIELD_REQUEST_ADD:
                 case FIELD_REQUEST_ADD_RESET:
-                    this.set_checkbox(data.value, true);
+                    this._set_checkbox(data.value, true);
                     break;
                 case FIELD_REQUEST_REMOVE:
                 case FIELD_REQUEST_REMOVE_RESET:
-                    this.set_checkbox(data.value, false);
+                    this._set_checkbox(data.value, false);
                     break;
                 default:
                     break;
@@ -350,8 +302,8 @@
         }, // on_all_query_in_progress
 
         on_all_query_done: function() {
-	    if (debug) messages.debug("1-shot initializing dataTables content with " + this.slick_data.length + " lines");
 	    var start=new Date();
+	    if (debug) messages.debug("1-shot initializing slickgrid content with " + this.slick_data.length + " lines");
 	    // use this.key as the key for identifying rows
 	    this.slick_dataview.setItems (this.slick_data, this.key);
 	    var duration=new Date()-start;
@@ -366,21 +318,100 @@
 	    // checkboxes on the fly at that time (dom not yet created)
             $.each(this.buffered_records_to_check, function(i, record) {
 		if (debug) messages.debug ("delayed turning on checkbox " + i + " record= " + record);
-                self.set_checkbox(record, true);
+                self._set_checkbox(record, true);
             });
 	    this.buffered_records_to_check = [];
 
             this.received_all_query = true;
 	    // unspin once we have received both
-            if (this.received_all_query && this.received_query) this.unspin();
+            if (this.received_all_query && this.received_query) {
+		this._init_checkboxes();
+		this.unspin();
+	    }
 
         }, // on_all_query_done
 
         /************************** PRIVATE METHODS ***************************/
 
-        /** 
-         * @brief QueryTable filtering function
-         */
+        _set_checkbox: function(record, checked) {
+            /* Default: checked = true */
+            if (checked === undefined) checked = true;
+
+            var id;
+            /* The function accepts both records and their key */
+            switch (manifold.get_type(record)) {
+            case TYPE_VALUE:
+                id = record;
+                break;
+            case TYPE_RECORD:
+                /* XXX Test the key before ? */
+                id = record[this.key];
+                break;
+            default:
+                throw "Not implemented";
+                break;
+            }
+
+
+	    if (id === undefined) {
+		messages.warning("querytable._set_checkbox record has no id to figure which line to tick");
+		return;
+	    }
+	    var index = this.slick_dataview.getIdxById(id);
+	    var selectedRows=this.slick_grid.getSelectedRows();
+	    if (checked) // add index in current list
+		selectedRows=selectedRows.concat(index);
+	    else // remove index from current list
+		selectedRows=selectedRows.filter(function(idx) {return idx!=index;});
+	    this.slick_grid.setSelectedRows(selectedRows);
+        },
+
+// initializing checkboxes
+// have tried 2 approaches, but none seems to work as we need it
+// issue summarized in here 
+// http://stackoverflow.com/questions/20425193/slickgrid-selection-changed-callback-how-to-tell-between-manual-and-programmat
+	// arm the click callback on checkboxes
+	_init_checkboxes_manual : function () {
+	    // xxx looks like checkboxes can only be the last column??
+	    var checkbox_col = this.slick_grid.getColumns().length-1; // -1 +1 =0
+	    console.log ("checkbox_col="+checkbox_col);
+	    var self=this;
+	    console.log ("HERE 1 with "+this.slick_dataview.getLength()+" sons");
+	    for (var index=0; index < this.slick_dataview.getLength(); index++) {
+		// retrieve key (i.e. hrn) for this line
+		var key=this.slick_dataview.getItem(index)[this.key];
+		// locate cell <div> for the checkbox
+		var div=this.slick_grid.getCellNode(index,checkbox_col);
+		if (index <=30) console.log("HERE2 div",div," index="+index+" col="+checkbox_col);
+		// arm callback on single son of <div> that is the <input>
+		$(div).children("input").each(function () {
+		    if (index<=30) console.log("HERE 3, index="+index+" key="+key);
+		    $(this).click(function() {self._checkbox_clicked(self,this,key);});
+		});
+	    }
+	},
+
+	// onSelectedRowsChanged will fire even when 
+	_init_checkboxes : function () {
+	    console.log("_init_checkboxes");
+	    var grid=this.slick_grid;
+	    this.slick_grid.onSelectedRowsChanged.subscribe(function(){
+		row_ids = grid.getSelectedRows();
+		console.log(row_ids);
+	    });
+	},
+
+	// the callback for when user clicks 
+        _checkbox_clicked: function(querytable,input,key) {
+            // XXX this.value = key of object to be added... what about multiple keys ?
+	    if (debug) messages.debug("querytable click handler checked=" + input.checked + " key=" + key);
+            manifold.raise_event(querytable.options.query_uuid, input.checked?SET_ADD:SET_REMOVED, key);
+            //return false; // prevent checkbox to be checked, waiting response from manifold plugin api
+            
+        },
+
+	// xxx from this and down, probably needs further tweaks for slickgrid
+
         _querytable_filter: function(oSettings, aData, iDataIndex) {
             var ret = true;
             $.each (this.filters, function(index, filter) { 
@@ -426,47 +457,6 @@
             return ret;
         },
 
-        _querytable_draw_callback: function() {
-            /* 
-             * Handle clicks on checkboxes: reassociate checkbox click every time
-             * the table is redrawn 
-             */
-            this.elts('querytable-checkbox').unbind('click').click(this, this._check_click);
-
-            if (!this.table)
-                return;
-
-            /* Remove pagination if we show only a few results */
-            var wrapper = this.table; //.parent().parent().parent();
-            var rowsPerPage = this.table.fnSettings()._iDisplayLength;
-            var rowsToShow = this.table.fnSettings().fnRecordsDisplay();
-            var minRowsPerPage = this.table.fnSettings().aLengthMenu[0];
-
-            if ( rowsToShow <= rowsPerPage || rowsPerPage == -1 ) {
-                $('.querytable_paginate', wrapper).css('visibility', 'hidden');
-            } else {
-                $('.querytable_paginate', wrapper).css('visibility', 'visible');
-            }
-
-            if ( rowsToShow <= minRowsPerPage ) {
-                $('.querytable_length', wrapper).css('visibility', 'hidden');
-            } else {
-                $('.querytable_length', wrapper).css('visibility', 'visible');
-            }
-        },
-
-        _check_click: function(e) {
-            e.stopPropagation();
-
-            var self = e.data;
-
-            // XXX this.value = key of object to be added... what about multiple keys ?
-	    if (debug) messages.debug("querytable click handler checked=" + this.checked + " hrn=" + this.value);
-            manifold.raise_event(self.options.query_uuid, this.checked?SET_ADD:SET_REMOVED, this.value);
-            //return false; // prevent checkbox to be checked, waiting response from manifold plugin api
-            
-        },
-
         _selectAll: function() {
             // requires jQuery id
             var uuid=this.id.split("-");