fixed TableAjax header ordering icon

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

@@ -62,6 +62,91 @@ function p5Utils__objectToQueryWithKeyPrefix(obj, prefix, callback) {
 }
 
 
+global['P5UI__TableAjaxSortableLabel'] = createReactClass({
+	getStateFromStore: function () {
+		var state = this.props.store.getState();
+		return {
+			currSortCol: state.currSortCol,
+			currSortFlip: state.currSortFlip
+		};
+	},
+	getInitialState: function () {
+		return this.getStateFromStore();
+	},
+	componentDidMount: function () {
+		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::componentDidMount (field:'+this.props.fieldName+')');
+		this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
+	},
+	componentWillUnmount: function () {
+		this.unsubscribe()
+	},
+	storeUpdated: function () {
+		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::storeUpdated (field:'+this.props.fieldName+')');
+		this.setState(this.getStateFromStore())
+	},
+	shouldComponentUpdate: function (nextProps, nextState) {
+		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::shouldComponentUpdate (field:'+this.props.fieldName+')', { state: this.state, nextState });
+		if (this.props.fieldName !== this.state.currSortCol && this.props.fieldName !== nextState.currSortCol) return false;
+		return (
+			this.state.currSortCol !== nextState.currSortCol
+			|| this.state.currSortFlip !== nextState.currSortFlip
+		);
+	},
+	handleChange: function (checked) { // handleChange: function (event) {
+		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::handleChange (field:'+this.props.fieldName+')');
+		if (!this.props.isSortable) return;
+		this.props.store.dispatch( this.props.actions.toggleSort( this.props.fieldName ) )
+	},
+	render: function () {
+		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::render (field:'+this.props.fieldName+')', { props: this.props, state: this.state });
+		var isSorted = ( this.props.isSortable && this.props.fieldName === this.state.currSortCol );
+		var sortFlip = this.state.currSortFlip;
+		var sortClass = "glyphicon glyphicon-triangle-" + ( sortFlip ? "bottom" : "top" );
+		var fieldProps = this.props.fieldProps;
+
+		var label = this.props.fieldName;
+		if (fieldProps.firendly) label = fieldProps.firendly;
+		var labelElements = ('ref' === fieldProps.type && fieldProps.xsdRefType)
+			?	[
+				h('i', {  style: { 'padding-right': "2px" }, className: "glyphicon glyphicon-export" }),
+				fieldProps.xsdRefType
+			]
+			: [ label ]
+		;
+
+		var title = this.props.fieldName;
+		if (fieldProps.description && fieldProps.description.length > 0) {
+			title = p5Utils__format("{0} ({1})", [ fieldProps.description, this.props.fieldName ])
+		}
+		else if (fieldProps._tsRetId > 0) {
+			title = p5Utils__format("Kliknij na pole i przejdź do powiązanych rekordów ({0})", [ title ])
+		}
+		if ('ref' === fieldProps.type && fieldProps.xsdRefType) {
+			if (fieldProps.description && fieldProps.description.length > 0 && fieldProps.description !== this.props.fieldName) {
+				title = p5Utils__format("{0} (ref {1})", [ fieldProps.description, this.props.fieldName ])
+			} else {
+				title = p5Utils__format("(ref {0})", [ this.props.fieldName ])
+			}
+		}
+
+		return h('span', {
+			onClick: this.handleChange,
+			title: title,
+			className: "pull-left",
+			style: Object.assign({
+			}, this.props.isSortable ? { cursor: "pointer" } : {})
+		}, labelElements.concat([
+			(isSorted) ? h('span', {
+				className: sortClass,
+				style: {
+					margin: "0 0 0 3px",
+					color: "#bbb"
+				}
+			}) : null
+		]));
+	}
+});
+
 global['P5UI__TableAjaxRowCheckbox'] = createReactClass({
 	// props.namespace: PropTypes.string.isRequired
 	// props.primaryKey: PropTypes.string.isRequired
@@ -1903,6 +1988,7 @@ var TableAjax = function() {
 	};
 
 	priv.renderTableTheadSort = function() {
+		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>')
@@ -1936,39 +2022,54 @@ var TableAjax = function() {
 		for (var i = 0; i < _state.colsSorted.length; i++) {
 			var column = _state.colsSorted[i]
 			var props = _data.cols[column]
-			if (props.hidden) continue
+			DBG && console.log('DBG:renderTableTheadSort loop', { column, props });
+			if (props.hidden) continue;
 
 			var headCell = $('<th class="ta-ordering"></th>').appendTo(node)
-			if (i == 1) headCell.addClass('stickyCol stickyCol3')
-
-			// DBG && console.log('DBG: render header cell action order by', { column, props }); // TODO: DBG isSrotable
-			if (props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref") { // TODO: props.isSortable
-				headCell.on('click', {column: column}, priv.columnClicked)
-			}
-
-			var nodeLabel = (props.friendly) ? props.friendly : column
-			var nodeTitle = column
-			if (props.description && props.description.length > 0) {
-				nodeTitle = p5Utils__format("{0} ({1})", [props.description, column])
-			}
-			else if (props._tsRetId > 0) {
-				nodeTitle = p5Utils__format("Kliknij na pole i przejdź do powiązanych rekordów ({0})", [nodeTitle])
-			}
-			if ('ref' === props.type && props.xsdRefType) {
-				nodeLabel = '<i class="glyphicon glyphicon-export"></i> ' + props.xsdRefType
-				if (props.description && props.description.length > 0 && props.description !== column) {
-					nodeTitle = p5Utils__format("{0} (ref {1})", [props.description, column])
-				} else {
-					nodeTitle = p5Utils__format("(ref {0})", [column])
-				}
-			}
-			var headCnt = $(p5Utils__format('<span class="pull-left" title="{1}">{0}</span>', [nodeLabel, nodeTitle]))
-			headCnt.appendTo(headCell)
+			if (_state.primaryKey === column) headCell.addClass('stickyCol stickyCol3')
+			ReactDOM.render(
+				h(P5UI__TableAjaxSortableLabel, {
+					namespace: priv.options.namespace,
+					cssClassName: (_state.primaryKey === column) ? 'stickyCol stickyCol3' : '',
+					isSortable: (props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref"), // TODO: props.isSortable
+					fieldName: column,
+					fieldProps: props,
+					store: priv.options.filterStore,
+					actions: priv.options.filterActions
+				}),
+				headCell.get(0)
+			);
 
-			if (column == _state._currSortCol) {
-				headCell.addClass((_state._currSortFlip) ? 'ta-ordering-down' : 'ta-ordering-up')
-			}
+			// if (i == 1) headCell.addClass('stickyCol stickyCol3')
 
+			// DBG && console.log('DBG: render header cell action order by', { column, props }); // TODO: DBG isSrotable
+			// if (props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref") { // TODO: props.isSortable
+			// 	headCell.on('click', {column: column}, priv.columnClicked) // priv.options.filterStore.dispatch( priv.options.filterActions.toggleSort(e.data.column) )
+			// }
+			//
+			// var nodeLabel = (props.friendly) ? props.friendly : column
+			// var nodeTitle = column
+			// if (props.description && props.description.length > 0) {
+			// 	nodeTitle = p5Utils__format("{0} ({1})", [props.description, column])
+			// }
+			// else if (props._tsRetId > 0) {
+			// 	nodeTitle = p5Utils__format("Kliknij na pole i przejdź do powiązanych rekordów ({0})", [nodeTitle])
+			// }
+			// if ('ref' === props.type && props.xsdRefType) {
+			// 	nodeLabel = '<i class="glyphicon glyphicon-export"></i> ' + props.xsdRefType
+			// 	if (props.description && props.description.length > 0 && props.description !== column) {
+			// 		nodeTitle = p5Utils__format("{0} (ref {1})", [props.description, column])
+			// 	} else {
+			// 		nodeTitle = p5Utils__format("(ref {0})", [column])
+			// 	}
+			// }
+			// var headCnt = $(p5Utils__format('<span class="pull-left" title="{1}">{0}</span>', [nodeLabel, nodeTitle]))
+			// headCnt.appendTo(headCell)
+			//
+			// if (column == _state._currSortCol) {
+			// 	// headCell.addClass((_state._currSortFlip) ? 'ta-ordering-down' : 'ta-ordering-up')
+			// }
+			//
 			if (column !== _state.primaryKey) {
 				var hideColBtn = $('<i class="glyphicon glyphicon-remove remove-cell"></i>')
 				hideColBtn.on('click', {column: column},  priv.columnHideClicked)

SE/se-lib/TableAjax.php.style.css

@@ -35,7 +35,8 @@
 .AjaxTable .tbl-short-txt{max-width:140px; overflow:hidden;}
 .AjaxTable .tbl-short-txt span{display:block; height:18px;}
 .AjaxTable .tooltip-inner{white-space:normal;}
-.AjaxTable thead .sort .ta-ordering {cursor:pointer;}
+.AjaxTable thead .sort .ta-ordering {}
+.AjaxTable thead .sort .ta-ordering .remove-cell { cursor:pointer }
 .AjaxTable thead .sort .ta-ordering span {margin:0 10px 0 0; padding:0; background-repeat:no-repeat; background-position:right top;}
 .AjaxTable thead .sort .ta-ordering-down span:after{content:"\e252";font-family:"Glyphicons Halflings";line-height:1;margin:0 0 0 3px;display:inline-block;color:#bbb;}
 .AjaxTable thead .sort .ta-ordering-up   span:after{content:"\e253";font-family:"Glyphicons Halflings";line-height:1;margin:0 0 0 3px;display:inline-block;color:#bbb;}