U TableAjax and react render view

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

@@ -20,7 +20,7 @@ var ReduxThunk = global.p5VendorJs.ReduxThunk;
 var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js
 var p5UI__FieldCheckboxSearch = global.p5VendorJs['p5UI__FieldCheckboxSearch'];
 var p5UI__FieldCheckboxLoading = global.p5VendorJs['p5UI__FieldCheckboxLoading'];
-var p5UI__TableAjax = global.p5VendorJs['p5UI__TableAjax'];
+var p5UI__TableAjaxWidget = global.p5VendorJs['p5UI__TableAjax'];
 var P5UI__TableAjaxSortableLabel = global.p5VendorJs['P5UI__TableAjaxSortableLabel'];
 var P5UI__TableAjaxRowCheckbox = global.p5VendorJs['P5UI__TableAjaxRowCheckbox'];
 var P5UI__TableAjaxSelectedInfo = global.p5VendorJs['P5UI__TableAjaxSelectedInfo'];
@@ -603,7 +603,7 @@ global['p5UI__FieldInputFilterSearch'] = createReactClass({
 		// this.props.store.dispatch( this.props.actions.toggle( this.props.namespace, this.props.primaryKey, checked ) )
 	},
 	render: function () {
-		DBG && console.log('DBG::p5UI__FieldInputFilterSearch::render (f:'+this.props.fieldName+',v:'+this.state.value+')', { props: this.props, state: this.state });
+		DBG1 && console.log('DBG::p5UI__FieldInputFilterSearch::render (f:'+this.props.fieldName+',v:'+this.state.value+')', { props: this.props, state: this.state });
 		switch (this.props.type) {
 			case "number":
 			case "date":
@@ -935,6 +935,8 @@ var TableAjax = function() {
 
 		priv.initialReactRender(RENDER_AS_REACT); // set up _reactUITableNode, require stores created
 
+		// TODO: priv.options.router.init();
+		// priv.options.router.getLinkOnclickFunction(task, args);
 		if (location.hash) {
 			priv.options.router()
 		} else {
@@ -943,13 +945,9 @@ var TableAjax = function() {
 
 		if (typeof priv.options.router == "function") {
 			$(window).bind('hashchange', function() {
-				priv.options.router.apply(this);
+				priv.options.router();
 			});
 		}
-
-		if (_reactUITableNode) {
-
-		}
 	};
 
 	priv.onRender = function(e) {
@@ -1077,7 +1075,7 @@ var TableAjax = function() {
 		_reactUITableNode.setAttribute('class', "TableAjax-reactUITableNode");
 		_uiNodeCont.parentNode.appendChild(_reactUITableNode);
 		ReactDOM.render(
-			h(p5UI__TableAjax, {
+			h(p5UI__TableAjaxWidget, {
 				namespace: priv.options.namespace,
 				dataStore: priv.options.tableDataStore,
 				dataActions: priv.options.tableDataActions,

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

@@ -9,21 +9,28 @@ var ReactDOM = global.p5VendorJs.ReactDOM;
 // var ReduxThunk = global.p5VendorJs.ReduxThunk;
 // var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js
 
-var baseCellStyle = {
+var Defaults = {}
+var Defaults__baseCellStyle = {
 	height: 26,
 	padding: 4
 };
-var baseStickyCellStyle = Object.assign({}, baseCellStyle, {
+Defaults.cellFontSize = 12;
+Defaults.rowsPerPage = 10;
+Defaults.cellLineHeight = 18;
+Defaults.baseCellStyle = Defaults__baseCellStyle;
+Defaults.baseStickyCellStyle = Object.assign({}, Defaults__baseCellStyle, {
 	position: "absolute", top: "auto", left: "0",
 	'background-color': "#fff"
 });
-var Defaults = {
-	cellFontSize: 12,
-	rowsPerPage: 10,
-	cellLineHeight: 18,
-	baseCellStyle: baseCellStyle,
-	baseStickyCellStyle: baseStickyCellStyle,
-}
+Defaults.baseHeaderCellStyle = {
+	'padding': "2px 5px",
+	'white-space': 'nowrap',
+	'line-height': Defaults.cellLineHeight+"px",
+	'font-size': Defaults.cellFontSize+"px",
+	'border-bottom-width': "1px",
+	'vertical-align': "bottom",
+};
+Defaults.primaryKeyLabel = "Nr";
 
 function p5Utils__mapToQuery(map, callback) {
 	var mapCallback = ('function' === typeof callback) ? callback : function (key) {
@@ -125,8 +132,12 @@ var TableAjax_Label_SelectedCell = function (props) {
 };
 var TableAjax_Label_PrimaryKeyCell = function (props) {
 	return h('div', {
-		style: props.style
-	}, props.label);
+		style: Object.assign({}, {
+			display: "table",
+		}, props.style)
+	}, [
+		h('th', { style: Defaults.baseHeaderCellStyle }, props.label),
+	]);
 };
 
 var TableAjax_Tbody = createReactClass({
@@ -214,14 +225,15 @@ var p5UI__TableAjax = createReactClass({
 
 	_getStateFromDataStore: function () {
 		var state = this.props.dataStore.getState();
-		DBG && console.log('DBG::P5UI__TableAjax::_getStateFromDataStore', { state: state });
+		DBG && console.log('DBG::p5UI__TableAjax::_getStateFromDataStore', { state: state });
 		return {
 			width: state.width,
 			rowsPerPage: state.rowsPerPage || Defaults.rowsPerPage,
 			isLoading: state.isLoading,
 			sentRequestId: state.sentRequestId,
 			receivedRequestId: state.receivedRequestId,
-			rows: state.rows
+			rows: state.rows,
+			primaryKeyLabel: this.props.primaryKeyLabel || Defaults.primaryKeyLabel,
 		};
 	},
 	getItem: function (rowIdx) {
@@ -234,11 +246,11 @@ var p5UI__TableAjax = createReactClass({
 		});
 		var baseCellStyle = {
 			height: 26,
-			padding: 4
+			padding: 4,
 		};
 		var baseStickyCellStyle = Object.assign({}, baseCellStyle, {
 			position: "absolute", top: "auto", left: "0",
-			'background-color': "#fff"
+			'background-color': "#fff",
 		});
 		return Object.assign({
 			isLoading: false,
@@ -251,12 +263,12 @@ var p5UI__TableAjax = createReactClass({
 			stickyColWidths: [
 				50,
 				25,
-				75 // 63
+				75 // 63 // TODO: depend on primaryKeyLabel width
 			]
 		}, this._getStateFromDataStore());
 	},
 	componentDidMount: function () {
-		DBG && console.log('DBG::P5UI__TableAjax::componentDidMount');
+		DBG && console.log('DBG::p5UI__TableAjax::componentDidMount');
 		this._unsubscribeDataStore = this.props.dataStore.subscribe(this._dataStoreUpdated)
 		this._unsubscribeFilterStore = this.props.filterStore.subscribe(this._filterStoreUpdated)
 	},
@@ -265,11 +277,11 @@ var p5UI__TableAjax = createReactClass({
 		this._unsubscribeFilterStore()
 	},
 	_dataStoreUpdated: function () {
-		DBG && console.log('DBG::P5UI__TableAjax::_dataStoreUpdated');
+		DBG && console.log('DBG::p5UI__TableAjax::_dataStoreUpdated');
 		this.setState(this._getStateFromDataStore())
 	},
 	_filterStoreUpdated: function () {
-		DBG && console.log('DBG::P5UI__TableAjax::_filterStoreUpdated');
+		DBG && console.log('DBG::p5UI__TableAjax::_filterStoreUpdated');
 		var curFilterState = this._getStateFromFilterStore();
 		var needFetchData = (
 			!this.state.filter
@@ -293,7 +305,7 @@ var p5UI__TableAjax = createReactClass({
 		};
 	},
 	shouldComponentUpdate: function (nextProps, nextState) {
-		DBG && console.log('DBG::P5UI__TableAjax::shouldComponentUpdate - TODO only when data changed?', { props: this.props, nextProps, state: this.state, nextState });
+		DBG && console.log('DBG::p5UI__TableAjax::shouldComponentUpdate - TODO only when data changed?', { props: this.props, nextProps, state: this.state, nextState });
 		return true;
 		// var dataChanged = true; // TODO compare this.state.rows with nextState.rows array
 		// var getPk = function (item) {
@@ -301,7 +313,7 @@ var p5UI__TableAjax = createReactClass({
 		// }
 		// var listPks = this.state.rows.map(getPk).join(',');
 		// var prevPks = nextState.rows.map(getPk).join(',');
-		// DBG && console.log('DBG::P5UI__TableAjax::shouldComponentUpdate', { state: this.state, nextState, listPks, prevPks });
+		// DBG && console.log('DBG::p5UI__TableAjax::shouldComponentUpdate', { state: this.state, nextState, listPks, prevPks });
 		// return (
 		// 	this.state.isLoading !== nextState.isLoading
 		// 	|| this.state.width !== nextState.width
@@ -320,13 +332,7 @@ var p5UI__TableAjax = createReactClass({
 	renderTheadColNameRowCell: function (value, cellIdx) {
 		var label = this.state.cols[cellIdx];
 		return h('th', {
-			style: {
-				padding: "2px 120px",
-				'white-space': 'nowrap',
-				'line-height': Defaults.cellLineHeight+"px",
-				'font-size': Defaults.cellFontSize+"px",
-				'border-bottom-width': "1px"
-			}
+			style: Defaults.baseHeaderCellStyle,
 		}, label.replace('<br>', '###<br>###').replace('<br/>', '###<br>###').split("###").map(function (txtOrBr) {
 			return ('<br>' === txtOrBr) ? h('br') : txtOrBr;
 		}));
@@ -345,8 +351,8 @@ var p5UI__TableAjax = createReactClass({
 					'font-size': "12px",
 					'border': 0,
 					'border-bottom': "2px solid transparent",
-					'background-color': "#eee"
-				}
+					'background-color': "#eee",
+				},
 			})
 		]);
 	},
@@ -355,17 +361,20 @@ var p5UI__TableAjax = createReactClass({
 		var cell1Width = this.state.stickyColWidths[0];
 		var cell2Width = this.state.stickyColWidths[1];
 		var cell3Width = this.state.stickyColWidths[2];
-		var cell1Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", left: "0", width: (cell1Width - 1), height: headerCellHeight });
-		var cell2Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", left: cell1Width, width: (cell2Width - 1), height: headerCellHeight });
-		var cell3Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", left: cell1Width + cell2Width, width: (cell3Width - 1), height: headerCellHeight });
-		var label = 'Nr'; // TODO: get primaryKey cell label
+		var cell1Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", width: (cell1Width - 1), height: headerCellHeight });
+		var cell2Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", width: (cell2Width - 1), height: headerCellHeight });
+		var cell3Style = Object.assign({}, this.state.baseStickyCellStyle, { position: "absolute", top: "auto", width: (cell3Width - 1), height: headerCellHeight });
+		cell1Style.left = "0";
+		cell2Style.left = cell1Width;
+		cell3Style.left = cell1Width + cell2Width;
+		var label = this.state.primaryKeyLabel;
 		return h('td', {
 			style: Object.assign({}, this.state.baseCellStyle, {
 				display: "block", position: "absolute", left: 0, top: "auto",
 				width: (cell1Width + cell2Width + cell3Width),
 				height: headerCellHeight,
 				padding: 0,
-				'background-color': "#ddd"
+				'background-color': "#ddd",
 			})
 		}, [
 			h(TableAjax_Label_FunctionsCell,  { style: cell1Style }),
@@ -386,7 +395,7 @@ var p5UI__TableAjax = createReactClass({
 				width: (cell1Width + cell2Width + cell3Width),
 				height: this.state.baseCellStyle.height + 2,
 				padding: 0,
-				'background-color': "#ddd"
+				'background-color': "#ddd",
 			})
 		}, [
 			h(TableAjax_Filter_FunctionsCell,  { style: cell1Style }),
@@ -395,7 +404,7 @@ var p5UI__TableAjax = createReactClass({
 		]);
 	},
 	render: function () {
-		DBG && console.log('DBG::P5UI__TableAjax::render', { state: this.state });
+		DBG && console.log('DBG::p5UI__TableAjax::render', { state: this.state });
 		var baseStyle = { 'border-top': "1px solid red", 'border-bottom': "1px solid red", 'min-height': "100px" } // TODO: DBG
 		var allColsCount = 13; // TODO: (this.state.cols.length || 0) + 3;
 		var widthTotal = this.state.width || 1200;