@bigfishtv/cockpit/es5/components/template/RoleEdit.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _dec, _class, _class3, _class4;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactForms = require('@bigfishtv/react-forms');

var _reactRedux = require('react-redux');

var _newId = require('../../utils/newId');

var _newId2 = _interopRequireDefault(_newId);

var _MainContent = require('../container/MainContent');

var _MainContent2 = _interopRequireDefault(_MainContent);

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _Panel = require('../container/panel/Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _Breadcrumb = require('../breadcrumb/Breadcrumb');

var _Breadcrumb2 = _interopRequireDefault(_Breadcrumb);

var _SwitchInput = require('../input/SwitchInput');

var _SwitchInput2 = _interopRequireDefault(_SwitchInput);

var _RadioGroupInput = require('../input/RadioGroupInput');

var _RadioGroupInput2 = _interopRequireDefault(_RadioGroupInput);

var _EditForm = require('../form/EditForm');

var _EditForm2 = _interopRequireDefault(_EditForm);

var _AutosuggestInput = require('../input/AutosuggestInput');

var _AutosuggestInput2 = _interopRequireDefault(_AutosuggestInput);

var _RepeatableFieldset = require('../form/RepeatableFieldset');

var _RepeatableFieldset2 = _interopRequireDefault(_RepeatableFieldset);

var _Cell = require('../cell/Cell');

var _Cell2 = _interopRequireDefault(_Cell);

var _TreeModal = require('../modal/TreeModal');

var _TreeModal2 = _interopRequireDefault(_TreeModal);

var _ModalHost = require('../modal/ModalHost');

var _notifications = require('../../actions/notifications');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Role edit page template
 */
var RoleEdit = (_dec = (0, _reactRedux.connect)(), _dec(_class = function (_Component) {
	_inherits(RoleEdit, _Component);

	function RoleEdit() {
		var _temp, _this, _ret;

		_classCallCheck(this, RoleEdit);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleSubmitSuccess = function (data) {
			_this.props.dispatch((0, _notifications.notifySuccess)('The role has been saved.'));
			history.replaceState(null, null, '/tank/roles/edit/' + data.id);
		}, _this.handleSubmitError = function () {
			_this.props.dispatch((0, _notifications.notifyFailure)('The role could not be saved.'));
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	RoleEdit.prototype.getSubmitUrl = function getSubmitUrl(data) {
		if (data.id) {
			return '/tank/roles/edit/' + data.id + '.json';
		} else {
			return '/tank/roles/add.json';
		}
	};

	RoleEdit.prototype.render = function render() {
		return _react2.default.createElement(
			_MainContent2.default,
			null,
			_react2.default.createElement(
				_EditForm2.default,
				_extends({}, this.props, {
					submitUrl: this.getSubmitUrl,
					onSubmitSuccess: this.handleSubmitSuccess,
					onSubmitError: this.handleSubmitError }),
				_react2.default.createElement(
					_Breadcrumb2.default,
					{ title: 'Roles', url: '/tank/roles' },
					_react2.default.createElement(RoleDetailsPanel, null),
					_react2.default.createElement(UsersPanel, null)
				)
			)
		);
	};

	return RoleEdit;
}(_react.Component)) || _class);

// @withFormValue
// class PermissionCell extends Component {
// 	render() {
// 		const { alias, model, foreign_key } = this.props.formValue.value
// 		const title = alias
// 		return <Cell title={title} {...this.props} Icon={<Icon name="document" />} editable={false} />
// 	}
// }

exports.default = RoleEdit;
var PermissionSwitch = function PermissionSwitch(props) {
	return _react2.default.createElement(_SwitchInput2.default, { value: props.switchValue, onChange: props.onSwitchChange });
};

var RoleDetailsPanel = (0, _reactForms.withFormValue)(_class3 = function (_Component2) {
	_inherits(RoleDetailsPanel, _Component2);

	function RoleDetailsPanel() {
		_classCallCheck(this, RoleDetailsPanel);

		return _possibleConstructorReturn(this, _Component2.apply(this, arguments));
	}

	RoleDetailsPanel.prototype.handleSwitchChanged = function handleSwitchChanged(section, value) {
		var formValue = this.props.formValue.select('permissions');
		if (value) {
			var perms = formValue.value || [];
			perms.push({ id: (0, _newId2.default)(), model: section });
			formValue.update(perms);
		} else {
			var val = formValue.value.filter(function (perm) {
				return perm.model != section;
			});
			formValue.update(val);
		}
	};

	RoleDetailsPanel.prototype.handleSectionChange = function handleSectionChange(model, value) {
		var formValue = this.props.formValue.select('permissions');
		if (value == 'specific') {
			switch (model) {
				case 'Tank.AssetFolders':
					this.showSelectAssetFolderModal();
					return;
			}
		} else if (value == 'all') {
			var val = formValue.value.filter(function (perm) {
				return !(perm.model == model && perm.foreign_key);
			});
			val.push({ id: (0, _newId2.default)(), model: model });
			formValue.update(val);
		}
	};

	RoleDetailsPanel.prototype.handleAssetFolderSelected = function handleAssetFolderSelected(assetFolder) {
		var resource = { id: (0, _newId2.default)(), alias: assetFolder.title, model: 'Tank.AssetFolders', foreign_key: assetFolder.id };
		var formValue = this.props.formValue.select('permissions');
		var perms = (formValue.value || []).filter(function (perm) {
			return !(perm.model == 'Tank.AssetFolders' && !perm.foreign_key);
		});
		perms.push(resource);
		formValue.update(perms);
	};

	RoleDetailsPanel.prototype.showSelectAssetFolderModal = function showSelectAssetFolderModal() {
		var _this3 = this;

		// debugger;
		_ModalHost.modalHandler.add({
			Component: _TreeModal2.default,
			props: {
				title: 'Select a folder',
				url: '/tank/asset_folders.json',
				startCollapsed: false,
				primaryActionText: 'Select Folder',
				filterData: false,
				onSave: function onSave(assetFolder) {
					return _this3.handleAssetFolderSelected(assetFolder);
				},
				onClose: function onClose() {}
			}
		});
	};

	RoleDetailsPanel.prototype.removePermission = function removePermission(section, permId) {
		var formValue = this.props.formValue.select('permissions');
		var perms = formValue.value.filter(function (perm) {
			return perm.id != permId;
		});
		if (perms.filter(function (perm) {
			return perm.model == section;
		}).length == 0) {
			perms.push({ id: (0, _newId2.default)(), model: section });
		}
		formValue.update(perms);
	};

	RoleDetailsPanel.prototype.render = function render() {
		var _this4 = this;

		var perms = this.props.formValue.select('permissions').value || [];

		var permsMedia = perms.filter(function (perm) {
			return perm.model == 'Tank.AssetFolders';
		}).length > 0;
		var permsUsers = perms.filter(function (perm) {
			return perm.model == 'Tank.Users';
		}).length > 0;
		var permsSettings = perms.filter(function (perm) {
			return perm.model == 'Tank.Settings';
		}).length > 0;

		var specificAssetFolders = perms.filter(function (perm) {
			return perm.model == 'Tank.AssetFolders' && perm.foreign_key;
		});
		var specificAssetFoldersVal = specificAssetFolders.length > 0 ? 'specific' : 'all';

		return _react2.default.createElement(
			'div',
			null,
			_react2.default.createElement(
				_Panel2.default,
				{
					title: 'Assets',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsMedia,
					switchValue: permsMedia,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.AssetFolders', value);
					} },
				_react2.default.createElement(_RadioGroupInput2.default, {
					value: specificAssetFoldersVal,
					options: [{ value: 'all', text: 'All folders' }, { value: 'specific', text: 'Limit to folders' }],
					onChange: function onChange(value) {
						return _this4.handleSectionChange('Tank.AssetFolders', value);
					}
				}),
				specificAssetFolders.map(function (perm) {
					return _react2.default.createElement(_Cell2.default, {
						key: perm.id,
						title: perm.alias,
						editable: false,
						onRemove: function onRemove() {
							return _this4.removePermission('Tank.AssetFolders', perm.id);
						}
					});
				}),
				specificAssetFolders.length > 0 && _react2.default.createElement(_Button2.default, { size: 'small', text: 'Add', onClick: function onClick() {
						return _this4.showSelectAssetFolderModal();
					} })
			),
			_react2.default.createElement(
				_Panel2.default,
				{
					title: 'Users & Roles',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsUsers,
					switchValue: permsUsers,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.Users', value);
					} },
				_react2.default.createElement(
					'p',
					{ className: 'form-message' },
					'Full access to all users and roles'
				)
			),
			_react2.default.createElement(
				_Panel2.default,
				{
					title: 'Settings',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsSettings,
					switchValue: permsSettings,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.Settings', value);
					} },
				_react2.default.createElement(
					'p',
					{ className: 'form-message' },
					'Full access to redirects and global settings.'
				)
			)
		);
	};

	return RoleDetailsPanel;
}(_react.Component)) || _class3;

var UserCell = (0, _reactForms.withFormValue)(_class4 = function (_Component3) {
	_inherits(UserCell, _Component3);

	function UserCell() {
		_classCallCheck(this, UserCell);

		return _possibleConstructorReturn(this, _Component3.apply(this, arguments));
	}

	UserCell.prototype.render = function render() {
		var _props$formValue$valu = this.props.formValue.value,
		    first_name = _props$formValue$valu.first_name,
		    last_name = _props$formValue$valu.last_name,
		    email = _props$formValue$valu.email;

		var title = first_name + ' ' + last_name + ' (' + email + ')';
		return _react2.default.createElement(_Cell2.default, _extends({ title: title }, this.props, { Icon: _react2.default.createElement(_Icon2.default, { name: 'profile' }), editable: false }));
	};

	return UserCell;
}(_react.Component)) || _class4;

function addUser(rootFormValue, user) {
	var formValue = rootFormValue.select('users');
	var users = formValue.value || [];
	users.push(user);
	formValue.update(users);
}

function collectUserIds(rootFormValue) {
	return (rootFormValue.select('users').value || []).map(function (user) {
		return user.id;
	});
}

var UsersPanel = (0, _reactForms.withFormValue)(function (props) {
	return _react2.default.createElement(
		_Panel2.default,
		{ title: 'Users with this Role', uncontrolled: true },
		_react2.default.createElement(_AutosuggestInput2.default, {
			placeholder: 'Search for users...',
			queryUrl: '/tank/users/search.json',
			params: { exclude: collectUserIds(props.formValue) },
			autoCache: false,
			renderSuggestion: function renderSuggestion(suggestion) {
				return _react2.default.createElement(
					'div',
					null,
					suggestion.first_name + ' ' + suggestion.last_name,
					_react2.default.createElement(
						'small',
						{ className: 'truncate' },
						suggestion.email
					)
				);
			},
			onChange: function onChange(user) {
				return addUser(props.formValue, user);
			}
		}),
		_react2.default.createElement(_RepeatableFieldset2.default, { select: 'users', Item: UserCell })
	);
});