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

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;

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

import React, { Component } from 'react';
import { withFormValue } from '@bigfishtv/react-forms';
import { connect } from 'react-redux';

import newId from '../../utils/newId';
import MainContent from '../container/MainContent';
import Button from '../button/Button';
import Icon from '../Icon';
import Panel from '../container/panel/Panel';
import Breadcrumb from '../breadcrumb/Breadcrumb';
import Switch from '../input/SwitchInput';
import RadioGroup from '../input/RadioGroupInput';
import EditForm from '../form/EditForm';
import AutosuggestInput from '../input/AutosuggestInput';
import RepeatableFieldset from '../form/RepeatableFieldset';
import Cell from '../cell/Cell';
import PageModal from '../modal/TreeModal';
import { modalHandler } from '../modal/ModalHost';

import { notifySuccess, notifyFailure } from '../../actions/notifications';

/**
 * Role edit page template
 */
var RoleEdit = (_dec = 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(notifySuccess('The role has been saved.'));
			history.replaceState(null, null, '/tank/roles/edit/' + data.id);
		}, _this.handleSubmitError = function () {
			_this.props.dispatch(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 React.createElement(
			MainContent,
			null,
			React.createElement(
				EditForm,
				_extends({}, this.props, {
					submitUrl: this.getSubmitUrl,
					onSubmitSuccess: this.handleSubmitSuccess,
					onSubmitError: this.handleSubmitError }),
				React.createElement(
					Breadcrumb,
					{ title: 'Roles', url: '/tank/roles' },
					React.createElement(RoleDetailsPanel, null),
					React.createElement(UsersPanel, null)
				)
			)
		);
	};

	return RoleEdit;
}(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} />
// 	}
// }

export { RoleEdit as default };
var PermissionSwitch = function PermissionSwitch(props) {
	return React.createElement(Switch, { value: props.switchValue, onChange: props.onSwitchChange });
};

var RoleDetailsPanel = 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: newId(), 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: newId(), model: model });
			formValue.update(val);
		}
	};

	RoleDetailsPanel.prototype.handleAssetFolderSelected = function handleAssetFolderSelected(assetFolder) {
		var resource = { id: newId(), 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;
		modalHandler.add({
			Component: PageModal,
			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: newId(), 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 React.createElement(
			'div',
			null,
			React.createElement(
				Panel,
				{
					title: 'Assets',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsMedia,
					switchValue: permsMedia,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.AssetFolders', value);
					} },
				React.createElement(RadioGroup, {
					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 React.createElement(Cell, {
						key: perm.id,
						title: perm.alias,
						editable: false,
						onRemove: function onRemove() {
							return _this4.removePermission('Tank.AssetFolders', perm.id);
						}
					});
				}),
				specificAssetFolders.length > 0 && React.createElement(Button, { size: 'small', text: 'Add', onClick: function onClick() {
						return _this4.showSelectAssetFolderModal();
					} })
			),
			React.createElement(
				Panel,
				{
					title: 'Users & Roles',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsUsers,
					switchValue: permsUsers,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.Users', value);
					} },
				React.createElement(
					'p',
					{ className: 'form-message' },
					'Full access to all users and roles'
				)
			),
			React.createElement(
				Panel,
				{
					title: 'Settings',
					PanelToolbar: PermissionSwitch,
					collapsed: !permsSettings,
					switchValue: permsSettings,
					onSwitchChange: function onSwitchChange(value) {
						return _this4.handleSwitchChanged('Tank.Settings', value);
					} },
				React.createElement(
					'p',
					{ className: 'form-message' },
					'Full access to redirects and global settings.'
				)
			)
		);
	};

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

var UserCell = 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 React.createElement(Cell, _extends({ title: title }, this.props, { Icon: React.createElement(Icon, { name: 'profile' }), editable: false }));
	};

	return UserCell;
}(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 = withFormValue(function (props) {
	return React.createElement(
		Panel,
		{ title: 'Users with this Role', uncontrolled: true },
		React.createElement(AutosuggestInput, {
			placeholder: 'Search for users...',
			queryUrl: '/tank/users/search.json',
			params: { exclude: collectUserIds(props.formValue) },
			autoCache: false,
			renderSuggestion: function renderSuggestion(suggestion) {
				return React.createElement(
					'div',
					null,
					suggestion.first_name + ' ' + suggestion.last_name,
					React.createElement(
						'small',
						{ className: 'truncate' },
						suggestion.email
					)
				);
			},
			onChange: function onChange(user) {
				return addUser(props.formValue, user);
			}
		}),
		React.createElement(RepeatableFieldset, { select: 'users', Item: UserCell })
	);
});