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'];
if (!global.p5UI__clickedOutsideElement) throw "Missing p5UI__clickedOutsideElement";
var clickedOutsideElement = global.p5UI__clickedOutsideElement

function p5UI__renderSelectedActionButton(props) { // props: { baseLink: URL, ico: BS_ICO_NAME, label: LABEL }
	return h('a', {
		href: props.baseLink,
		target: "_blank",
		// onClick: this.makeHandleClickTool(idTool) // TODO: move to POST with output in right sidebar
	}, [
		(props.ico) && h('i', { className: "glyphicon glyphicon-" + props.ico, style: { marginRight: "6px" } }),
		props.label
	]);
}

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 Object.assign({}, {
			open: false
		}, 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
			|| this.state.open !== nextState.open
		);
	},
	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()
	},
	handleToggle: function () {
		DBG1 && console.log('DBG::P5UI__TableAjaxSelectedInfo::handleToggle (ns:' + this.props.namespace + ')', { open: this.state.open });
		this.setState({ open: !this.state.open }, this.state.open ? this._unbindCloseDropdownActions : this._bindCloseDropdownActions)
	},
	_closeDropdownWhenClickedOutside: function (event) {
		if (!this.state.open) return;

		if (clickedOutsideElement(this._dropdownNode, event)) {
			this.setState({
				open: false
			}, this._unbindCloseDropdownActions);
		}
	},
	_closeDropdownWhenHitEscape: function (event) {
		if (!this.state.open) return;

		if (27 === event.keyCode) {
			this.setState({
				open: false
			}, this._unbindCloseDropdownActions);
		}
	},
	_unbindCloseDropdownActions: function () {
		if (!document.removeEventListener && document.detachEvent) {
			document.detachEvent('onclick', this._closeDropdownWhenClickedOutside);
			document.detachEvent('keydown', this._closeDropdownWhenHitEscape);
		} else {
			document.removeEventListener('click', this._closeDropdownWhenClickedOutside);
			document.removeEventListener('keydown', this._closeDropdownWhenHitEscape);
		}
	},
	_bindCloseDropdownActions: function () {
		if (!document.addEventListener && document.attachEvent) {
			document.attachEvent('onclick', this._closeDropdownWhenClickedOutside);
			document.attachEvent('keydown', this._closeDropdownWhenHitEscape);
		} else {
			document.addEventListener('click', this._closeDropdownWhenClickedOutside);
			document.addEventListener('keydown', this._closeDropdownWhenHitEscape);
		}
	},

	renderClearBtn: function () {
		if (!this.state.totalSelected) return null;

		return h('a', {
			className: "btn btn-xs btn-default",
			style: {
				borderLeft: 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'
			})
		]);
	},
	renderToolsBtn: function () {
		if (!this.state.totalSelected) return null;
		if (!this.props.tools || !Object.keys(this.props.tools).length) return null;
		DBG && console.log('DBG::P5UI__TableAjaxSelectedInfo::renderTools (ns:' + this.props.namespace + ')', { props: this.props, state: this.state });
		return h('a', {
			className: "btn btn-xs btn-default dropdown-toggle",
			onClick: this.handleToggle,
			// onClick: function (event) {
			// 	console.log('DBG:handleToggle', { event });
			// },
		}, [
			h('i', { className: "glyphicon glyphicon-menu-hamburger" }),
		]);
	},
	makeHandleClickTool: function () {
		// TODO: view result in right slide or in background & unselect all?
	},
	makeDropdownRef: function (reactComponent) {
		this._dropdownNode = reactComponent
	},
	renderToolsMenu: function () {
		if (!this.state.totalSelected) return null;
		if (!this.props.tools || !Object.keys(this.props.tools).length) return null;
		var tools = this.props.tools;

		return h('ul', { ref: this.makeDropdownRef, className: "dropdown-menu" }, Object.keys(tools).map(function (idTool) {
			var func = tools[idTool];
			DBG && console.log('DBG: render tool', { func });
			// baseLink: "index.php?_route=UrlAction_BiallProduktyPlikiSyncSelected"
			// cell_id_params: []
			// ico: "glyphicon glyphicon-share"
			// label: "Synchronizuj pliki wybranych produktów"
			// link_target: "_blank"
			// name: "BiallProduktyPlikiSyncSelected"
			// type: "@selected"

			return h('li', {}, [
				// p5UI__renderSelectedActionButton({ baseLink: func.baseLink, ico: func.ico, label: func.label }),
				h(p5UI__renderSelectedActionButton, { baseLink: func.baseLink, ico: func.ico, label: func.label }),
			]);
		}))
	},

		// <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		// 	<span class="caret"></span>
		// 	<span class="sr-only">Toggle Dropdown</span>
		// </button>
		// 	<ul class="dropdown-menu">
		// 		<li><a href="#">Action</a></li>
		// 		<li><a href="#">Another action</a></li>
		// 		<li><a href="#">Something else here</a></li>
		// 		<li role="separator" class="divider"></li>
		// 		<li><a href="#">Separated link</a></li>
		// 	</ul>


		// 		<div class="btn-group">
		// 			<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		// 				Extra small button <span class="caret"></span>
		// 			</button>
		// 			<ul class="dropdown-menu">
		// 				...
		//   </ul>
		// 		</div>

	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('div', { className: "btn-group" + (this.state.open ? " open" : "") }, [
				// h('a', { className: "btn btn-xs btn-default" }, "Wybrano " + this.state.totalSelected),
				h('button', { className: "btn btn-xs btn-default" }, "Wybrano " + this.state.totalSelected),
				this.renderClearBtn(),
				this.renderToolsBtn(),
				this.renderToolsMenu(),
			]),

			(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;