U TableAjax sort row

SE/se-lib/TableAjax.php.TableAjax.js

@@ -490,6 +490,122 @@ global['P5UI__TableAjaxSpecialFilters'] = createReactClass({
 	}
 });
 
+global['p5UI__TableAjaxTheadSortRow'] = function (props) {
+	DBG && console.log("DBG::TableAjaxTheadFiltersRow ...", { props: props });
+	// props: {
+	// 	tblFunctions: priv.options.tblFunctions,
+	// 	filtersClean: priv.options.filtersClean,
+	// 	priv: priv,
+	// 	primaryKey: _state.primaryKey,
+	// 	checkboxes: priv.options.checkboxes,
+	// 	namespace: priv.options.namespace,
+	// 	selectedStore: priv.options.selectedStore,
+	// 	selectedActions: priv.options.selectedActions,
+	// 	filterStore: priv.options.filterStore,
+	// 	filterActions: priv.options.filterActions,
+	// 	colsSorted: _state.colsSorted,
+	// 	_data_cols: _data.cols,
+	// }
+	var maxHeadLines = props.colsSorted.reduce(function (ret, fieldName) {
+		var fieldProps = props._data_cols[fieldName];
+		if (!fieldProps.friendly) return ret;
+		var numLines = fieldProps.friendly.split('<br>').length; // @see SE/se-lib/TableAjax.php.p5UI__TableAjaxSortableLabel.js:convertLabelHtmlLinesToRect
+		return (numLines > ret) ? numLines : ret;
+	}, 1);
+	var stickyCellHeight = (maxHeadLines > 2) ? 63 : (2 === maxHeadLines ? 46 : 29);
+	// var stickyCellHeight = 29; // 1 line
+	// var stickyCellHeight = 46; // 2 lines
+	// var stickyCellHeight = 63; // 3 lines
+	var outStickyCellHeight = '' + stickyCellHeight + "px";
+	var addNewLines = (maxHeadLines > 1)
+	?	'.'.repeat(maxHeadLines - 1).split('').map(function () { return h('br'); })
+	:	[]
+	;
+
+	return h(React.Fragment, {}, [
+		(props.tblFunctions || props.filtersClean)
+		?	h('th', { className: "text-right head-info stickyCol stickyCol1", style: { height: outStickyCellHeight } }, 
+			addNewLines.concat(
+				Object.keys(props.tblFunctions).map(function (funName) {
+					var funObj = props.tblFunctions[funName];
+					DBG && console.log("DBG::TableAjaxTheadFiltersRow:loop tblFunctions ...", { funName, funObj });
+					var onClickName = (funObj.method && props.priv[funObj.method] && typeof props.priv[funObj.method] == 'function') ? funObj.method : null;
+
+					return h('a', Object.assign(
+						{
+							href: funObj.href || '#',
+							title: funObj.title,
+						},
+						(onClickName)
+						?	{ onClick: props.priv[onClickName].bind(props.priv) }
+						:	{}
+					), [
+						(funObj.icon)
+						?	h('span', { className: "glyphicon glyphicon-" + funObj.icon })
+						:	null
+						,
+						" ",
+					]);
+					// if (funObj.method && priv[funObj.method] && typeof priv[funObj.method] == 'function') {
+					// 	funHtml.on('click', priv[funObj.method])
+					// }
+				})
+			))
+		:	null
+		,
+
+		(props.primaryKey && props.checkboxes)
+		?	h('th', { className: "stickyCol stickyCol2", style: { padding: "3px 5px", height: outStickyCellHeight } }, 
+			addNewLines.concat([
+				h(P5UI__TableAjaxRowCheckbox, {
+					namespace: props.namespace,
+					primaryKey: 'select-all',
+					store: props.selectedStore,
+					actions: props.selectedActions,
+				}),
+			]))
+		:	null
+		,
+
+	].concat(
+		props.colsSorted.map(function (fieldName, idx) {
+			var fieldProps = props._data_cols[fieldName];
+			DBG && console.log("DBG::TableAjaxTheadSortRow:loop fields", { fieldName, idx, fieldProps });
+			if (fieldProps.hidden) return null;
+
+			// if (_state.primaryKey === column) headCell.addClass('stickyCol stickyCol3')
+			return h('th', {
+				className: [
+					"ta-ordering",
+					(fieldName === props.primaryKey) ? "stickyCol stickyCol3" : "",
+				].join(" "),
+				style: (fieldName === props.primaryKey) ? { height: outStickyCellHeight } : {},
+			}, [
+				h(P5UI__TableAjaxSortableLabel, {
+					namespace: props.namespace,
+					isSortable: (fieldProps.sortable !== false && fieldProps.type != 'special' && fieldProps.type != 'geom' && fieldProps.type != "simpleLink" && fieldProps.type != "ref"), // TODO: fieldProps.sortable
+					fieldName: fieldName,
+					fieldProps: fieldProps,
+					store: props.filterStore,
+					actions: props.filterActions,
+					maxLabelLines: maxHeadLines,
+				})
+			].concat(
+				// hideColBtn.on('click', { column: column }, priv.columnHideClicked)
+				(fieldName !== props.primaryKey)
+				?	h('i', {
+						className: "glyphicon glyphicon-remove remove-cell",
+						// p5_data_fieldName: fieldName,
+						onClick: function () {
+							props.priv.hideColumn(fieldName).bind(props.priv)
+						},
+					})
+				:	null
+				,
+			));
+		})
+	));
+};
 global['p5UI__TableAjaxTheadFiltersRow'] = function (props) {
 	DBG && console.log("DBG::TableAjaxTheadFiltersRow ...", { props: props });
 	// props: {
@@ -506,18 +622,19 @@ global['p5UI__TableAjaxTheadFiltersRow'] = function (props) {
 	// 	checkboxIdContext: priv.options.checkboxIdContext,
 	// }
 	var cellHeight = 24;
+	var stickyCellHeight = '' + (cellHeight + 1) + "px";
 
 	return h(React.Fragment, {}, [
 		(props.filtersClean)
 		?	h(p5UI__TableAjaxClearAllFilters, {
-				style: { padding: '0', height: '' + (cellHeight + 1) + "px" },
+				style: { padding: '0', height: stickyCellHeight },
 				className: "text-right stickyCol stickyCol1",
 				store: props.filterStore,
 				actions: props.filterActions,
 			})
 		:	(
 				(props.rowFunctions)
-				?	h('th', { className: "text-right stickyCol stickyCol1", style: { padding: '0', height: '' + (cellHeight + 1) + "px" } })
+				?	h('th', { className: "text-right stickyCol stickyCol1", style: { padding: '0', height: stickyCellHeight } })
 				:	null
 			)
 		,
@@ -849,10 +966,11 @@ var TableAjax = function() {
 	var _uiNodeSpecialFilters;
 	var _uiNodeFooterInfo;
 	var _uiNode$Table; // the table jQuery node
-	var _uiNodeTheadFiltersRow; // table header columns filter row
+	var _uiNodeTheadFiltersRow;
+	var _uiNodeTheadSortRow;
 	var _head; // table header
-	var _headSort; // table header sorting row
-	var _headFilter; // table header columns filter row, @used only by priv.renderTable
+	var _headSort; // bool - to render table sort row in `priv.renderTable` function
+	var _headFilter; // bool - to render table filter row in `priv.renderTable` function
 	var _headSpecialFilter; // table header special filter row
 	var _bodyNode; // table body
 	var _body; // TODO: table body need render?
@@ -1144,11 +1262,14 @@ var TableAjax = function() {
 			top: 'auto',
 			width: '' + (stickyCol1Width) + 'px',
 		});
-		//_uiNode$Table.find('.filter').find('.stickyCol1').css({height:'34px'});
-		var sortStickyColHeight = _uiNode$Table.find('.sort').find('th:last').outerHeight();
-		_uiNode$Table.find('.sort').find('.stickyCol').css({height: sortStickyColHeight + 'px'});
-		// var filterStickyColHeight = _uiNode$Table.find('.filter').find('th:last').outerHeight() + 1;
-		// _uiNode$Table.find('.filter').find('.stickyCol').css({height: filterStickyColHeight + 'px'});
+		{ // fix thead sort cols height
+			// var sortStickyColHeight = _uiNode$Table.find('.sort').find('th:last').outerHeight();
+			// _uiNode$Table.find('.sort').find('.stickyCol').css({height: sortStickyColHeight + 'px'});
+		}
+		{ // fix thead filter cols height
+			// var filterStickyColHeight = _uiNode$Table.find('.filter').find('th:last').outerHeight() + 1;
+			// _uiNode$Table.find('.filter').find('.stickyCol').css({height: filterStickyColHeight + 'px'});
+		}
 		if (priv.options.checkboxes) _uiNode$Table.find('.stickyCol2').css({
 			position: 'absolute',
 			left: '' + (stickyCol1Width) + 'px',
@@ -1201,7 +1322,7 @@ var TableAjax = function() {
 			 <_uiMainContainerNode>
 				<_uiNode$Table>
 					<_head>
-						<_headSort />
+						<_uiNodeTheadSortRow />
 						<_uiNodeTheadFiltersRow />
 					</_head>
 					<_bodyNode />
@@ -1215,7 +1336,7 @@ var TableAjax = function() {
 		 */
 		_uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiMainContainerNode);
 			_head = $('<thead></thead>').prependTo(_uiNode$Table);
-				_headSort = $('<tr class="sort tblAjax__head__sort"></tr>').prependTo(_head);
+				_uiNodeTheadSortRow = $('<tr class="sort tblAjax__head__sort"></tr>').prependTo(_head).get(0);
 				_uiNodeTheadFiltersRow = $('<tr class="filter tblAjax__head__filter" p5_node_id="tblAjax_filters"></tr>').appendTo(_head).get(0);
 			_bodyNode = $('<tbody></tbody>').insertAfter(_head);
 		$('<tfoot></tfoot>').insertAfter(_bodyNode);
@@ -1271,7 +1392,6 @@ var TableAjax = function() {
 		_foot = undefined;
 		_head = undefined;
 		_body = undefined;
-		_headSort = undefined;
 	};
 
 	priv.renderTable = function() {
@@ -2099,66 +2219,26 @@ var TableAjax = function() {
 		return rowNode;
 	};
 
-	priv.renderTableTheadSort = function() {
+	priv.renderTableTheadSort = function () { // _uiNodeTheadSortRow
 		DBG && console.log('DBG:renderTableTheadSort', { '_state._currSortCol': _state._currSortCol, '_state._currSortFlip': _state._currSortFlip });
-		var nodeClass = 'tblAjax__' + 'head__sort'
-		var currentNode = _uiNode$Table.find('thead').find('.' + nodeClass)
-		var node = $('<tr class="sort ' + nodeClass + '"></tr>')
-		if (priv.options.tblFunctions || priv.options.filtersClean) {
-			var headCell = $('<th class="text-right head-info stickyCol stickyCol1"></th>').appendTo(node)
-			$.map(priv.options.tblFunctions, function (funObj, funName) {
-				var funHtml = $('<a></a>')
-				funHtml.attr('href', funObj.href || '#')
-				if (funObj.title) funHtml.attr('title', funObj.title)
-				if (funObj.icon) funHtml.html('<span class="glyphicon glyphicon-' + funObj.icon + '"></span> ')
-				if (funObj.method && priv[funObj.method] && typeof priv[funObj.method] == 'function') {
-					funHtml.on('click', priv[funObj.method])
-				}
-				funHtml.appendTo(headCell)
-			})
-		}
-
-		if (_state.primaryKey && priv.options.checkboxes) {
-			var headCell = $('<th class="stickyCol stickyCol2" style="padding:3px 5px"></th>').appendTo(node);
-			ReactDOM.render(
-				h(P5UI__TableAjaxRowCheckbox, {
-					namespace: priv.options.namespace,
-					primaryKey: 'select-all',
-					store: priv.options.selectedStore,
-					actions: priv.options.selectedActions
-				}),
-				headCell.get(0)
-			);
-		}
-
-		for (var i = 0; i < _state.colsSorted.length; i++) {
-			var column = _state.colsSorted[i]
-			var props = _data.cols[column]
-			DBG && console.log('DBG:renderTableTheadSort loop', { column, props });
-			if (props.hidden) continue;
-
-			var headCell = $('<th class="ta-ordering"></th>').appendTo(node)
-			if (_state.primaryKey === column) headCell.addClass('stickyCol stickyCol3')
-			ReactDOM.render(
-				h(P5UI__TableAjaxSortableLabel, {
-					namespace: priv.options.namespace,
-					isSortable: (props.sortable !== false && props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref"), // TODO: props.sortable
-					fieldName: column,
-					fieldProps: props,
-					store: priv.options.filterStore,
-					actions: priv.options.filterActions
-				}),
-				headCell.get(0)
-			);
-
-			if (column !== _state.primaryKey) {
-				var hideColBtn = $('<i class="glyphicon glyphicon-remove remove-cell"></i>')
-				hideColBtn.on('click', {column: column},  priv.columnHideClicked)
-				hideColBtn.appendTo(headCell)
-			}
-		}
-
-		currentNode.replaceWith(node)
+		ReactDOM.render(
+			h(p5UI__TableAjaxTheadSortRow, {
+				namespace: priv.options.namespace,
+				tblFunctions: priv.options.tblFunctions,
+				filtersClean: priv.options.filtersClean,
+				priv: priv,
+				primaryKey: _state.primaryKey,
+				checkboxes: priv.options.checkboxes,
+				selectedStore: priv.options.selectedStore,
+				selectedActions: priv.options.selectedActions,
+				colsSorted: _state.colsSorted,
+				_data_cols: _data.cols,
+				filterStore: priv.options.filterStore,
+				filterActions: priv.options.filterActions,
+				// checkboxIdContext: priv.options.checkboxIdContext,
+			}),
+			_uiNodeTheadSortRow
+		);
 	};
 
 	priv.renderHeadSpecialFilters = function() {
@@ -3438,6 +3518,11 @@ var TableAjax = function() {
 		//_data.cols[column].index = new priv.ext.XDate();
 		jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 	};
+	priv.hideColumn = function(fieldName) {
+		priv.modelColFilter_toggleColumn(fieldName);
+		priv.saveHiddenCols();
+		jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+	};
 
 	/*
 	 when: clicking anywhere on a row