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

var DBG = DBG || false;
var DBG1 = true;
if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
var createReactClass = global.p5VendorJs.createReactClass;
var h = global.p5VendorJs.React.createElement;
var p5UI__FieldCheckboxLoading = global.p5VendorJs['p5UI__FieldCheckboxLoading'];

var P5UI__TableAjaxRowCheckbox = createReactClass({
	// props.store: Redux store { getState(), subscribe(f), dispatch(f) }
	// props.store - state used: { isLoading bool, selected array of strings }
	// props.actions: store actions { toggle(ns, pk, checked) }
	// props.namespace: PropTypes.string.isRequired
	// props.primaryKey: PropTypes.string.isRequired
	getStateFromStore: function () {
		var state = this.props.store.getState();
		return {
			disabled: this.props.disabled ? true : false,
			isLoading: (-1 !== state.loading.indexOf(this.props.primaryKey)),
			checked: (-1 !== state.selected.indexOf(this.props.primaryKey))
		};
	},
	getInitialState: function () {
		return this.getStateFromStore();
	},
	componentDidMount: function () {
		DBG && console.log('DBG::P5UI__TableAjaxRowCheckbox::componentDidMount (pk:'+this.props.primaryKey+')');
		this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
	},
	componentWillUnmount: function () {
		this.unsubscribe()
	},
	storeUpdated: function () {
		DBG && console.log('DBG::P5UI__TableAjaxRowCheckbox::storeUpdated (pk:'+this.props.primaryKey+')');
		this.setState(this.getStateFromStore())
	},
	shouldComponentUpdate: function (nextProps, nextState) {
		DBG && console.log('DBG::P5UI__TableAjaxRowCheckbox::shouldComponentUpdate (pk:'+this.props.primaryKey+')', { state: this.state, nextState});
		return (
			this.state.isLoading !== nextState.isLoading
			|| this.state.checked !== nextState.checked
		);
	},
	handleChange: function (checked) { // handleChange: function (event) {
		DBG && console.log('DBG::P5UI__TableAjaxRowCheckbox::handleChange (pk:'+this.props.primaryKey+')', { checked: checked });
		this.props.store.dispatch( this.props.actions.toggle( this.props.namespace, this.props.primaryKey, checked ) )
	},
	render: function () {
		DBG && console.log('DBG::P5UI__TableAjaxRowCheckbox::render (pk:'+this.props.primaryKey+')', { props: this.props, state: this.state });
		return h(p5UI__FieldCheckboxLoading, {
			size: 20,
			color: '#999',
			checked: this.state.checked,
			disabled: this.state.disabled,
			isLoading: this.state.isLoading,
			onChange: this.handleChange
		});
	}
});

var P5UI__TableAjaxSelectedInfo = createReactClass({
	// props.namespace: PropTypes.string.isRequired
	// props.store: Redux store { getState(), subscribe(f), dispatch(f) }
	// props.store - state used: { isUpdatedAllSelected, selected, totalSelected }
	// props.actions: store actions {}
	// onSelectAllMatching: PropTypes.fun.isRequired (execute store.dispatch)
	getStateFromStore: function () {
		var state = this.props.store.getState();
		var wasAllSelected = (this.state) && this.state.isUpdatedAllSelected;
		var isAllSelected = ( -1 !== state.selected.indexOf('select-all') );
		DBG && console.log('DBG: getStateFromStore (ns:'+this.props.namespace+')', { isAllSelected, state });
		return {
			// isLoading: state.isLoading || 0, // add ?
			isUpdatedAllSelected: ( !wasAllSelected && isAllSelected ),
			totalSelected: state.totalSelected || 0,
		};
	},
	getInitialState: function () {
		return this.getStateFromStore();
	},
	componentDidMount: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::componentDidMount (ns:'+this.props.namespace+')');
		this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
	},
	componentWillUnmount: function () {
		this.unsubscribe()
	},
	storeUpdated: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::storeUpdated (ns:'+this.props.namespace+')');
		this.setState(this.getStateFromStore())
	},
	shouldComponentUpdate: function (nextProps, nextState) {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::shouldComponentUpdate (ns:'+this.props.namespace+')', { state: this.state, nextState});
		return (
			this.state.totalSelected !== nextState.totalSelected
			|| this.state.isUpdatedAllSelected !== nextState.isUpdatedAllSelected
		);
	},
	handleUnselectAll: function (event) {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::handleUnselectAll (ns:'+this.props.namespace+')');
		this.props.store.dispatch( this.props.actions.unselectAll( this.props.namespace ) )
	},
	handleSelectAllByFilter: function (event) {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::handleSelectAllByFilter (ns:'+this.props.namespace+')');
		// this.props.store.dispatch( this.props.actions.unselectAll( this.props.namespace ) )
		this.props.onSelectAllMatching()
	},
	render: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::render (ns:'+this.props.namespace+')', { props: this.props, state: this.state });
		return h('div', {
			className: "p5UI__TableAjaxSelectedInfo",
			style: {
				padding: '0 0 0 12px'
			}
		}, [
			h('span', {}, "Wybrano " + this.state.totalSelected),
			(this.state.totalSelected > 0) ? h('i', {
				onClick: this.handleUnselectAll,
				className: "glyphicon glyphicon-remove",
				style: {
					marginLeft: '4px',
					cursor: 'pointer',
					color: 'red',
					opacity: '0.5'
				},
				title: this.props.title || 'Usuń wszystkie zaznaczenia'
			}) : null,
			(this.state.isUpdatedAllSelected) && h('br'),
			(this.state.isUpdatedAllSelected) && h('a', {
				onClick: this.handleSelectAllByFilter,
				className: "btn btn-xs btn-link",
				style: {
					marginLeft: '4px',
				},
				title: this.props.title || 'Zaznacz wszystkie pasujące do wyszukiwania'
			}, "+ wszystkie"),
		])
	}
});


global.p5VendorJs['P5UI__TableAjaxRowCheckbox'] = P5UI__TableAjaxRowCheckbox;
global.p5VendorJs['P5UI__TableAjaxSelectedInfo'] = P5UI__TableAjaxSelectedInfo;