exported table filter state object from TableAjax

SE/se-lib/TableAjax.php

@@ -419,6 +419,9 @@ class TableAjax extends ViewAjax {
 		UI::inlineJS(APP_PATH_WWW . '/static/p5UI/FieldCheckboxSearch.js', []); // p5UI__FieldCheckboxSearch
 		UI::inlineCSS(APP_PATH_WWW . '/static/p5UI/FieldCheckboxLoading.css');
 		UI::inlineJS(APP_PATH_WWW . '/static/p5UI/FieldCheckboxLoading.js', []); // p5UI__FieldCheckboxLoading
+		UI::inlineJS(__FILE__ . '.createTableFiltersStateObject.js', [
+			'DBG' => ('1' === V::get('DBG_JS', '', $_GET)),
+		]);
 		UI::inlineJS(__FILE__ . '.TableAjax.js', [
 			'URI_BASE' => Request::getPathUri(),
 			'URI_WPS' => Request::getPathUri() . 'wps.php',

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

@@ -5,6 +5,10 @@ var $ = global.jQuery
 var DBG = DBG || false;
 var DBG1 = true;
 
+if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
+if (!global.p5VendorJs.Redux) throw "Missing p5 Vendor js lib: Redux";
+if (!global.createTableFiltersStateObject) throw "Missing createTableFiltersStateObject";
+
 var createReactClass = global.p5VendorJs.createReactClass;
 var h = global.p5VendorJs.React.createElement;
 var ReactDOM = global.p5VendorJs.ReactDOM;
@@ -339,139 +343,6 @@ function selectedActions(idContext) {
 	}
 }
 
-function createFilterStoreWithInitialData(initialFilter) {
-	var initialState = {
-		isLoading: false,
-		isEmpty: true,
-		filter: new Map(),
-		specialFilter: new Map(),
-		currSortCol: '',
-		currSortFlip: false
-	}
-	Object.keys(initialFilter).forEach(function (key) {
-		if ('currSortCol' === key) {
-			initialState.currSortCol = initialFilter[key]
-		} else if ('currSortFlip' === key) {
-			initialState.currSortFlip = initialFilter[key]
-		} else if ('f_' === key.substr(0, 2)) {
-			initialState.filter.set(key.substr(2), initialFilter[key])
-		} else if ('sf_' === key.substr(0, 3)) {
-			initialState.specialFilter.set(key.substr(3), initialFilter[key])
-		}
-	})
-
-	return function filterStore(state, action) {
-		var prevState = state || initialState;
-		DBG && console.warn('DBG:filterStore:' + action.type, action);
-		switch (action.type) {
-			// case 'SET_FILTER': return fixFilterState(Object.assign({}, prevState, {
-			// 	filter: Object.assign(prevState.filter, {
-			// 		[action.fieldName]: action.value
-			// 	})
-			// }));
-			case 'TOGGLE_SORT': {
-				return Object.assign(prevState, {
-					currSortCol: action.fieldName,
-					currSortFlip: !prevState.currSortFlip
-				})
-			}
-			case 'SET_FILTER': {
-				if (action.value) {
-					prevState.filter.set(action.fieldName, action.value);
-				} else {
-					prevState.filter.delete(action.fieldName);
-				}
-				return Object.assign(prevState, {
-					isEmpty: (0 === prevState.specialFilter.size && 0 === prevState.filter.size)
-				})
-			}
-			case 'SET_SPECIAL_FILTER': {
-				if (action.value) {
-					prevState.specialFilter.set(action.fieldName, action.value);
-				} else {
-					prevState.specialFilter.delete(action.fieldName);
-				}
-				return Object.assign(prevState, {
-					isEmpty: (0 === prevState.specialFilter.size && 0 === prevState.filter.size)
-				})
-			}
-			case 'CLEAR_ALL_FILTERS': {
-				prevState.filter.clear();
-				prevState.specialFilter.clear();
-				return Object.assign(prevState, {
-					isLoading: false, isEmpty: true
-				});
-			}
-			case 'SET_LOADING': return Object.assign(prevState, { // TODO: is loading for filter store or another store for rows?
-				isLoading: true
-			});
-			case 'UNSET_LOADING': return Object.assign(prevState, {
-				isLoading: false
-			});
-			default: return prevState;
-		}
-	}
-}
-function filterActions() {
-	var delay = 450;
-	var _filterTimeout = {};
-	var _clearTimer = function (fieldName) {
-		if (_filterTimeout[fieldName]) {
-			clearTimeout(_filterTimeout[fieldName]);
-		}
-	}
-	var _clearAllTimers = function () {
-		Object.keys(_filterTimeout).forEach(_clearTimer);
-	}
-
-	function clearAllFilters() {
-		DBG && console.log('DBG:filterStore:clearAllFilters');
-		_clearAllTimers();
-		return { type: 'CLEAR_ALL_FILTERS' };
-	}
-	function toggleSort(fieldName) {
-		DBG && console.log('DBG:filterStore:toggleSort', { fieldName });
-		return { type: 'TOGGLE_SORT', fieldName: fieldName };
-	}
-	function setFilter(fieldName, value) {
-		DBG && console.log('DBG:filterStore:setFilter', { fieldName, value });
-		return { type: 'SET_FILTER', fieldName: fieldName, value: value };
-	}
-	function setSpecialFilter(fieldName, value) {
-		DBG && console.log('DBG:filterStore:setSpecialFilter', { fieldName, value });
-		return { type: 'SET_SPECIAL_FILTER', fieldName: fieldName, value: value };
-	}
-	function delayFilter(fieldName, value) {
-		DBG && console.log('DBG:filterStore:delayFilter', { fieldName, value });
-
-		return function(dispatch, getState) {
-			// var state = getState();
-			// dispatch(setLoading(primaryKey));
-			return new Promise(function (resolve, reject) {
-				DBG && console.log('DBG:filterStore:delayFilter::#1', { fieldName, value });
-				_clearTimer(fieldName);
-
-				_filterTimeout[fieldName] = setTimeout(function () {
-					// reject("Error");
-					resolve(value);
-				}, delay);
-			}).then(function (value) {
-				DBG && console.log('DBG:filterStore:delayFilter::#3 resolve ', { fieldName, value });
-				dispatch( { type: 'SET_FILTER', fieldName: fieldName, value: value } );
-			}).catch(function (e) {
-				p5UI__notifyAjaxCallback({type: 'error', msg: 'Wystąpił błąd #TA6: ' + e});
-			})
-		}
-	}
-	return {
-		setFilter: setFilter,
-		setSpecialFilter: setSpecialFilter,
-		delayFilter: delayFilter,
-		clearAllFilters: clearAllFilters,
-		toggleSort: toggleSort,
-	}
-}
-
 global['P5UI__TableAjaxRowCheckbox'] = createReactClass({
 	// props.namespace: PropTypes.string.isRequired
 	// props.primaryKey: PropTypes.string.isRequired
@@ -1334,9 +1205,9 @@ var TableAjax = function() {
 
 		_state._forceFilterQuery = p5Utils__objectToQueryWithKeyPrefix(priv.options.forceFilterInit, 'f_')
 
-		var filterStore = createFilterStoreWithInitialData(priv.options.filterInit || {});
-		priv.options.filterStore = createStoreWithThunkMiddleware(filterStore)
-		priv.options.filterActions = filterActions()
+		var stateObjectFilter = createTableFiltersStateObject(priv.options.filterInit || {});
+		priv.options.filterStore = stateObjectFilter.store;
+		priv.options.filterActions = stateObjectFilter.actions;
 		// priv.options._filterState = Object.assign({}, priv.options.filterStore.getState())
 		var curFilterState = priv.options.filterStore.getState()
 		_state._filterQuery = p5Utils__mapToQueryWithKeyPrefix(curFilterState.filter, 'f_')

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

@@ -0,0 +1,150 @@
+var DBG = DBG || false;
+var DBG1 = true;
+if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
+if (!global.p5VendorJs.Redux) throw "Missing p5 Vendor js lib: Redux";
+var Redux = global.p5VendorJs.Redux;
+var ReduxThunk = global.p5VendorJs.ReduxThunk;
+var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js
+
+function createFilterStoreWithInitialData(initialFilter) {
+	var initialState = {
+		isLoading: false,
+		isEmpty: true,
+		filter: new Map(),
+		specialFilter: new Map(),
+		currSortCol: '',
+		currSortFlip: false
+	}
+	Object.keys(initialFilter).forEach(function (key) {
+		if ('currSortCol' === key) {
+			initialState.currSortCol = initialFilter[key]
+		} else if ('currSortFlip' === key) {
+			initialState.currSortFlip = initialFilter[key]
+		} else if ('f_' === key.substr(0, 2)) {
+			initialState.filter.set(key.substr(2), initialFilter[key])
+		} else if ('sf_' === key.substr(0, 3)) {
+			initialState.specialFilter.set(key.substr(3), initialFilter[key])
+		}
+	})
+
+	return function filterStore(state, action) {
+		var prevState = state || initialState;
+		DBG && console.warn('DBG:filterStore:' + action.type, action);
+		switch (action.type) {
+			// case 'SET_FILTER': return fixFilterState(Object.assign({}, prevState, {
+			// 	filter: Object.assign(prevState.filter, {
+			// 		[action.fieldName]: action.value
+			// 	})
+			// }));
+			case 'TOGGLE_SORT': {
+				return Object.assign(prevState, {
+					currSortCol: action.fieldName,
+					currSortFlip: !prevState.currSortFlip
+				})
+			}
+			case 'SET_FILTER': {
+				if (action.value) {
+					prevState.filter.set(action.fieldName, action.value);
+				} else {
+					prevState.filter.delete(action.fieldName);
+				}
+				return Object.assign(prevState, {
+					isEmpty: (0 === prevState.specialFilter.size && 0 === prevState.filter.size)
+				})
+			}
+			case 'SET_SPECIAL_FILTER': {
+				if (action.value) {
+					prevState.specialFilter.set(action.fieldName, action.value);
+				} else {
+					prevState.specialFilter.delete(action.fieldName);
+				}
+				return Object.assign(prevState, {
+					isEmpty: (0 === prevState.specialFilter.size && 0 === prevState.filter.size)
+				})
+			}
+			case 'CLEAR_ALL_FILTERS': {
+				prevState.filter.clear();
+				prevState.specialFilter.clear();
+				return Object.assign(prevState, {
+					isLoading: false, isEmpty: true
+				});
+			}
+			case 'SET_LOADING': return Object.assign(prevState, { // TODO: is loading for filter store or another store for rows?
+				isLoading: true
+			});
+			case 'UNSET_LOADING': return Object.assign(prevState, {
+				isLoading: false
+			});
+			default: return prevState;
+		}
+	}
+}
+function filterActions() {
+	var delay = 450;
+	var _filterTimeout = {};
+	var _clearTimer = function (fieldName) {
+		if (_filterTimeout[fieldName]) {
+			clearTimeout(_filterTimeout[fieldName]);
+		}
+	}
+	var _clearAllTimers = function () {
+		Object.keys(_filterTimeout).forEach(_clearTimer);
+	}
+
+	function clearAllFilters() {
+		DBG && console.log('DBG:filterStore:clearAllFilters');
+		_clearAllTimers();
+		return { type: 'CLEAR_ALL_FILTERS' };
+	}
+	function toggleSort(fieldName) {
+		DBG && console.log('DBG:filterStore:toggleSort', { fieldName });
+		return { type: 'TOGGLE_SORT', fieldName: fieldName };
+	}
+	function setFilter(fieldName, value) {
+		DBG && console.log('DBG:filterStore:setFilter', { fieldName, value });
+		return { type: 'SET_FILTER', fieldName: fieldName, value: value };
+	}
+	function setSpecialFilter(fieldName, value) {
+		DBG && console.log('DBG:filterStore:setSpecialFilter', { fieldName, value });
+		return { type: 'SET_SPECIAL_FILTER', fieldName: fieldName, value: value };
+	}
+	function delayFilter(fieldName, value) {
+		DBG && console.log('DBG:filterStore:delayFilter', { fieldName, value });
+
+		return function(dispatch, getState) {
+			// var state = getState();
+			// dispatch(setLoading(primaryKey));
+			return new Promise(function (resolve, reject) {
+				DBG && console.log('DBG:filterStore:delayFilter::#1', { fieldName, value });
+				_clearTimer(fieldName);
+
+				_filterTimeout[fieldName] = setTimeout(function () {
+					// reject("Error");
+					resolve(value);
+				}, delay);
+			}).then(function (value) {
+				DBG && console.log('DBG:filterStore:delayFilter::#3 resolve ', { fieldName, value });
+				dispatch( { type: 'SET_FILTER', fieldName: fieldName, value: value } );
+			}).catch(function (e) {
+				p5UI__notifyAjaxCallback({type: 'error', msg: 'Wystąpił błąd #TA6: ' + e});
+			})
+		}
+	}
+	return {
+		setFilter: setFilter,
+		setSpecialFilter: setSpecialFilter,
+		delayFilter: delayFilter,
+		clearAllFilters: clearAllFilters,
+		toggleSort: toggleSort,
+	}
+}
+
+function createTableFiltersStateObject(initialData) {
+	var _initialData = initialData || {};
+	return {
+		store: createStoreWithThunkMiddleware( createFilterStoreWithInitialData( _initialData ) ),
+		actions: filterActions()
+	}
+}
+
+global.createTableFiltersStateObject = createTableFiltersStateObject;