TableAjax refactor, add initialRender, fix bug in from/to, fix copy primaryKey, rm br tag in columnPicker

SE/se-lib/TableAjax.php

@@ -537,8 +537,8 @@ class TableAjax extends ViewAjax {
 			mapEditorContainer: 'window' // 'window' or 'dock'
 		};
 
-		var _cont; // container holding table
-		var _table; // the table
+		var _uiNodeCont; // container holding table
+		var _uiNode$Table; // the table node
 		var _head; // table header
 		var _headSort; // table header sorting row
 		var _headFilter; // table header columns filter row
@@ -575,8 +575,9 @@ class TableAjax extends ViewAjax {
 		 initialize the plugin.
 		 */
 		priv.init = function () {
-			_cont = priv.options.id;
+			_uiNodeCont = priv.options.id;
 			priv.initEvents();
+			priv.initialRender();// set up _uiNode$...
 			priv.options.types.string = ((priv.options.types || {}).string || {});
 			priv.options.types.number = ((priv.options.types || {}).number || {});
 			priv.options.types.bool = ((priv.options.types || {}).bool || {});
@@ -610,7 +611,7 @@ class TableAjax extends ViewAjax {
 		};
 
 		priv.initEvents = function () {
-			jQuery(_cont).on('TableAjax:render', priv.onRender);
+			jQuery(_uiNodeCont).on('TableAjax:render', priv.onRender);
 		};
 
 		priv.onRender = function(e) {
@@ -637,6 +638,26 @@ class TableAjax extends ViewAjax {
 			}
 		};
 
+		priv.initialRender = function () {
+			_uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiNodeCont);
+				_head = $('<thead></thead>').prependTo(_uiNode$Table);
+				_body = $('<tbody></tbody>').insertAfter(_head);
+			$('<tfoot></tfoot>').insertAfter(_body);
+			_foot = $('<div class="foot tblAjax__footer"></div>').insertAfter(_uiNodeCont);
+				var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar"></div>').appendTo(_foot);
+					$('<span class="tblAjax__footer__toolbar__info"></span>').appendTo(footToolbar);
+					$('<span class="tblAjax__footer__toolbar__pagination"></span>').appendTo(footToolbar);
+					$('<span class="tblAjax__footer__toolbar__pagesizes"></span>').appendTo(footToolbar);
+					$('<span class="tblAjax__footer__toolbar__columnPicker"></span>').appendTo(footToolbar);
+					$('<span class="tblAjax__footer__toolbar__functions"></span>').appendTo(footToolbar);
+					$('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
+			_mapEditorWrap = $('<div class="mapEditor" style="display:none"></div>').insertAfter(_foot);
+				_mapEditor = $('<div class="mapEditor-map"></div>').appendTo(_mapEditorWrap);
+			_popoverCell = $('<div class="popoverCell" style="display:none"></div>').insertAfter(_foot);
+
+			_foot = _head = _body = undefined;// TODO: refactor
+		}
+
 		/*
 		 creates the table with all its parts and handlers.
 		 note that only the parts we need is created.
@@ -645,18 +666,14 @@ class TableAjax extends ViewAjax {
 		priv.renderTable = function () {
 			//create table itself
 /// console.log('renderTable:: _data', _data);//TODO:DBG:RMME
-/// console.log('renderTable:: _table', _table);//TODO:DBG:RMME
-			if (!_table) {
-				_head = _body = _foot = undefined;
-				_table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_cont);
-			}
+/// console.log('renderTable:: _uiNode$Table', _uiNode$Table);//TODO:DBG:RMME
 
 			//create the header which will later hold both sorting and filtering
 /// console.log('renderTable:: _head', _head);//TODO:DBG:RMME
 			if (!_head) {
-				_table.find('thead').remove();
 				_headSort = _headFilter = _headSpecialFilter = undefined;
-				_head = $('<thead></thead>').prependTo(_table);
+				_head = $('<thead></thead>');
+				_uiNode$Table.find('thead').replaceWith(_head);
 			}
 
 			//sort the columns in index order
@@ -931,8 +948,8 @@ class TableAjax extends ViewAjax {
 			if (!_headSpecialFilter && priv.options.specialFilterFunctions) {
 				//create the functions column
 				if (priv.options.specialFilterFunctions) {
-					jQuery(_cont).prev('.TableAjax-SpecialFilter').remove();
-					var _headSpecialFilter = $('<div class="btn-toolbar TableAjax-SpecialFilter"></div>').insertBefore(_cont);
+					jQuery(_uiNodeCont).prev('.TableAjax-SpecialFilter').remove();
+					var _headSpecialFilter = $('<div class="btn-toolbar TableAjax-SpecialFilter"></div>').insertBefore(_uiNodeCont);
 					$.map(priv.options.specialFilterFunctions, function(groupObj, groupName) {
 						var btnHtml, btnSelected, groupHtml = $('<div class="btn-group"></div>');
 						// _specialFilters[e.data.group] = e.data.value;
@@ -955,7 +972,7 @@ class TableAjax extends ViewAjax {
 
 			//create the body
 			if (!_body) {
-				_table.find('tbody').remove();
+				_uiNode$Table.find('tbody').remove();
 				_body = $('<tbody></tbody>').insertAfter(_head);
 				_body.on('change', '.unique', priv.rowChecked);
 
@@ -1003,8 +1020,13 @@ class TableAjax extends ViewAjax {
 							if (key !== primaryKeyField) {
 								cell.on('dblclick', {id:cellID, col:key}, priv.rowDblClicked);
 							}
-							var cellCnt = $('<span></span>').appendTo(cell);
-							if (i == 1) cell.addClass('stickyCol2');
+							var cellCnt;
+							if (i == 1) {// primaryKey(ID)
+								cellCnt = $('<div></div>').appendTo(cell);// fix dblclick for copy
+								cell.addClass('stickyCol2');
+							} else {
+								cellCnt = $('<span></span>').appendTo(cell);
+							}
 							cell.data('column', key);
 							if (val === undefined) continue;
 
@@ -1196,32 +1218,33 @@ class TableAjax extends ViewAjax {
 				priv.renderTableTfoot();
 				priv.renderFooter();
 			}
+			_foot = $(_uiNodeCont).next('.foot');
 
 			var stickyCol1Width = (12 + 3) * 4 + 2 * 5 + 1;
 			var stickyCol2Width = 50 + 2 * 5 + 1;
 			if (undefined === _tableWidth) {
 				_tableWidth = true;
-				var contW = jQuery(_cont).width();
-				var th1 = _table.find('.stickyCol1:first');
+				var contW = jQuery(_uiNodeCont).width();
+				var th1 = _uiNode$Table.find('.stickyCol1:first');
 				var th2 = th1.next();
 				var th1W = th1.innerWidth();
 				var th2W = 50 + 2 * 5;//th2.innerWidth();
 				var colsW = stickyCol1Width + stickyCol2Width;
-				jQuery(_cont).css({width:'' + (contW - colsW) + 'px', marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
+				jQuery(_uiNodeCont).css({width:'' + (contW - colsW) + 'px', marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
 			}
-			_table.find('.stickyCol1').css({position:'absolute',
+			_uiNode$Table.find('.stickyCol1').css({position:'absolute',
 				left:'0',
 				top:'auto',
 				width:'' + stickyCol1Width + 'px',
 			});
-			_table.find('.filter').find('.stickyCol1').css({height:'34px'});
-			var sortStickyColHeight = _table.find('.sort').find('th:last').outerHeight();
-			_table.find('.sort').find('.stickyCol1').css({height: sortStickyColHeight + 'px'});
-			_table.find('.sort').find('.stickyCol2').css({height: sortStickyColHeight + 'px'});
-			_table.find('.stickyCol2').css({position:'absolute',
+			_uiNode$Table.find('.filter').find('.stickyCol1').css({height:'34px'});
+			var sortStickyColHeight = _uiNode$Table.find('.sort').find('th:last').outerHeight();
+			_uiNode$Table.find('.sort').find('.stickyCol1').css({height: sortStickyColHeight + 'px'});
+			_uiNode$Table.find('.sort').find('.stickyCol2').css({height: sortStickyColHeight + 'px'});
+			_uiNode$Table.find('.stickyCol2').css({position:'absolute',
 				left:'' + (stickyCol1Width) + 'px',
 				top:'auto',
-				width:'' + stickyCol2Width + 'px', 
+				width:'' + stickyCol2Width + 'px',
 				borderRight: '1px solid silver'
 			});
 
@@ -1230,7 +1253,7 @@ class TableAjax extends ViewAjax {
 			}
 			if (priv.options.debug) console.log('table created L.<?php echo __LINE__; ?>');
 			if (typeof priv.options.tableCreated == 'function') {
-				priv.options.tableCreated.call(_table.get(0), {table: _table.get(0)});
+				priv.options.tableCreated.call(_uiNode$Table.get(0), {table: _uiNode$Table.get(0)});
 			}
 
 			if (!_inlineEditBox) {
@@ -1309,43 +1332,15 @@ class TableAjax extends ViewAjax {
 					return false;
 				});
 			}
-
-			if (!_popoverCell) {
-				$(_foot).next('.popoverCell').remove();
-				_popoverCell = $('<div class="popoverCell" style="display:none"></div>').insertAfter(_foot);
-			}
-
-			if (!_mapEditorWrap) {
-				$(_foot).next('.mapEditor').remove();
-				_mapEditorWrap = $('<div class="mapEditor" style="display:none"></div>').insertAfter(_foot);
-				_mapEditor = $('<div class="mapEditor-map"></div>').appendTo(_mapEditorWrap);
-			}
-
 		};
 
 		priv.renderTableTfoot = function() {
-			_table.find('tfoot').remove();
+			_uiNode$Table.find('tfoot').remove();
 			_foot = $('<tfoot></tfoot>').insertAfter(_body);
-			//$(_cont).next('.foot').replaceWith(_foot);
+			//$(_uiNodeCont).next('.foot').replaceWith(_foot);
 		};
 
 		priv.renderFooter = function() {
-			var currentFooterNode = $(_cont).next('.foot');
-			if (0 === currentFooterNode.length) {// initial create .foot element after _cont
-				currentFooterNode = $('<div class="foot"></div>').insertAfter(_cont);
-			}
-			_foot = $('<div class="foot"></div>');
-			var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar"></div>').appendTo(_foot);
-
-			$('<span class="tblAjax__footer__toolbar__info"></span>').appendTo(footToolbar);
-			$('<span class="tblAjax__footer__toolbar__pagination"></span>').appendTo(footToolbar);
-			$('<span class="tblAjax__footer__toolbar__pagesizes"></span>').appendTo(footToolbar);
-			$('<span class="tblAjax__footer__toolbar__columnPicker"></span>').appendTo(footToolbar);
-			$('<span class="tblAjax__footer__toolbar__functions"></span>').appendTo(footToolbar);
-			$('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
-
-			currentFooterNode.replaceWith(_foot);
-
 			priv.renderFooterInfo();
 			priv.renderFooterPagination();
 			priv.renderFooterPageSizes();
@@ -1356,10 +1351,13 @@ class TableAjax extends ViewAjax {
 
 		priv.renderFooterInfo = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__info',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass);
 			node = $('<div class="foot-info ' + nodeClass + '"></div>');
+			//console.log('renderFooterInfo fromRow', _data.fromRow, 'toRow', _data.toRow, 'total', _data.total, '_currPage', _currPage, 'priv.options.pageSize', priv.options.pageSize);
+			_data.fromRow = (_currPage - 1) * priv.options.pageSize;
+			_data.toRow = _data.fromRow + priv.options.pageSize;
 			if (_data.total > 0) {
 				$('<p>Wiersze od {0} do {1} z {2}</p>'.f(_data.fromRow + 1, Math.min(_data.toRow, _data.total), _data.total)).appendTo(node);
 			} else {
@@ -1369,7 +1367,7 @@ class TableAjax extends ViewAjax {
 		};
 		priv.renderFooterPagination = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass, '_data.total', _data.total, '_currPage', _currPage);
 			if (_data.total > 0) {
@@ -1422,7 +1420,7 @@ class TableAjax extends ViewAjax {
 		};
 		priv.renderFooterPageSizes = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__pagesizes',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass);
 			if (_data.total > 0 && priv.options.pageSizes.length > 0) {
@@ -1447,7 +1445,7 @@ class TableAjax extends ViewAjax {
 		};
 		priv.renderFooterColumnPicker = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass);
 			if (priv.options.columnPicker) {
@@ -1458,8 +1456,10 @@ class TableAjax extends ViewAjax {
 
 				$.each(_data.cols, function (col, props) {
 					if (props.type != "unique" && col != 'ID') {
-						var li = $('<li></li>').appendTo(ul);
-						$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, props.friendly || col)).appendTo(li);
+						var li = $('<li></li>').appendTo(ul),
+								label = props.friendly || col;
+						label = label.replace(/<br\/?>/g, ' ');
+						$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, label)).appendTo(li);
 					}
 				});
 				node.on('click', 'input', priv.columnPickerClicked);
@@ -1470,7 +1470,7 @@ class TableAjax extends ViewAjax {
 		};
 		priv.renderFooterFunctions = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__functions',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass);
 			if (priv.options.tblFunctions) {
@@ -1495,7 +1495,7 @@ class TableAjax extends ViewAjax {
 		};
 		priv.renderFooterExport = function() {
 			var nodeClass = 'tblAjax__' + 'footer__toolbar__export',
-					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
 					node;
 			if (priv.options.debug) console.log('Render: ', nodeClass);
 			if (priv.options.exportFields.length) {
@@ -1723,7 +1723,7 @@ class TableAjax extends ViewAjax {
 
 			if (priv.options.debug) console.log('setState::renderParts: ', renderParts);//TODO:DBG:RMME
 			if (renderParts.length > 0) {
-				jQuery(_cont).trigger('TableAjax:render', renderParts);
+				jQuery(_uiNodeCont).trigger('TableAjax:render', renderParts);
 			}
 		};
 
@@ -2066,7 +2066,7 @@ class TableAjax extends ViewAjax {
 			if ('window' == priv.options.mapEditorContainer) {
 				var mapEditor = _mapEditorWrap.children('.mapEditor-map');
 				if (!mapEditor || !mapEditor.length) {
-					var tblCont = jQuery(_cont).parent('.AjaxTableCont');
+					var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
 					var mapEditor = tblCont.children('.AjaxTableCont-mapEditorContainer').children('.mapEditor-map');
 					if (!mapEditor || !mapEditor.length) {
 						// TODO: create new map
@@ -2126,7 +2126,7 @@ class TableAjax extends ViewAjax {
 				var mapEditor = _mapEditorWrap.children('.mapEditor-map');
 				if (mapEditor && mapEditor.length) {// map is inside _mapEditorWrap (window)
 					var mapDockNode = jQuery('<div class="AjaxTableCont-mapEditorContainer"></div>');
-					var tblCont = jQuery(_cont).parent('.AjaxTableCont');
+					var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
 					tblCont.children('.AjaxTableCont-mapEditorContainer').remove();
 					var breadcrumb = tblCont.children('.breadcrumb');
 					if (!breadcrumb || !breadcrumb.length) {
@@ -2151,7 +2151,7 @@ class TableAjax extends ViewAjax {
 					ui.element.children(":first").children(":first").css({display:'block', height: ui.element.height()});
 				});
 			} else if ('destroy' == task) {
-				var mapDockResizable = jQuery(_cont).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
+				var mapDockResizable = jQuery(_uiNodeCont).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
 				mapDockResizable.resizable('destroy');
 				mapDockResizable.remove();
 			}
@@ -2211,7 +2211,7 @@ class TableAjax extends ViewAjax {
 
 			publ.loadPage(1, priv.options.pageSize);
 
-			jQuery(_cont).trigger('TableAjax:render', ['body', 'foot_pagination']);
+			jQuery(_uiNodeCont).trigger('TableAjax:render', ['body', 'foot_pagination']);
 		};
 
 		/*
@@ -2283,7 +2283,7 @@ class TableAjax extends ViewAjax {
 			priv.saveHiddenCols();
 
 			//_data.cols[column].index = new priv.ext.XDate();
-			jQuery(_cont).trigger('TableAjax:render', ['head', 'body']);
+			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
 		};
 
 		priv.columnHideClicked = function (e) {
@@ -2302,7 +2302,7 @@ class TableAjax extends ViewAjax {
 			priv.saveHiddenCols();
 
 			//_data.cols[column].index = new priv.ext.XDate();
-			jQuery(_cont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 		};
 
 		/*
@@ -2558,7 +2558,7 @@ class TableAjax extends ViewAjax {
 				});
 			}
 
-			_table.parent().parent().addClass('AjaxTable-loading');
+			_uiNode$Table.parent().parent().addClass('AjaxTable-loading');
 
 			$.ajax({
 				url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>',
@@ -2580,7 +2580,7 @@ class TableAjax extends ViewAjax {
 						state.data.total = data.total || 0;
 					}
 					priv.setState(state);
-					_table.parent().parent().removeClass('AjaxTable-loading');
+					_uiNode$Table.parent().parent().removeClass('AjaxTable-loading');
 				},
 				error: function (err) {
 					if (priv.options.debug) console.log('request error: {0}'.f(JSON.stringify(err)));