import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Alert, FormGroup, Input, Label, Tooltip } from 'reactstrap'; import { gettext } from '../../../utils/constants'; import Loading from '../../loading'; import OpIcon from '../../op-icon'; const propTypes = { mode: PropTypes.string, permission: PropTypes.object, onChangeMode: PropTypes.func.isRequired, onUpdateCustomPermission: PropTypes.func.isRequired, }; class CustomPermissionEditor extends React.Component { static defaultProps = { mode: 'add' }; constructor(props) { super(props); this.state = { isLoading: true, permission_name: '', permission_desc: '', permission: { upload: false, download: false, modify: false, copy: false, delete: false, preview: false, download_external_link: false, }, errMessage: '', tooltipOpen: false, }; } componentDidMount() { const { permission } = this.props; if (permission) { this.setState({ permission_name: permission.name, permission_desc: permission.description, permission: permission.permission, isLoading: false }); } else { this.setState({ isLoading: false }); } } onChangePermissionName = (evt) => { const { permission_name } = this.state; const newName = evt.target.value; if (newName === permission_name) return; this.setState({ permission_name: newName }); }; onChangePermissionDescription = (evt) => { const { permission_desc } = this.state; const newDescription = evt.target.value; if (newDescription === permission_desc) return; this.setState({ permission_desc: newDescription }); }; onChangePermission = (type) => { return () => { const { permission } = this.state; const value = !permission[type]; const newPermission = Object.assign({}, permission, { [type]: value }); this.setState({ permission: newPermission }); }; }; validParams = () => { const { permission_name, permission_desc } = this.state; let isValid = false; let errMessage = ''; if (!permission_name || !permission_name.trim()) { errMessage = gettext('Name is required'); return { isValid, errMessage }; } if (!permission_desc || !permission_desc.trim()) { errMessage = gettext('Description is required'); return { isValid, errMessage }; } isValid = true; return { isValid }; }; onUpdateCustomPermission = () => { const { permission_name, permission_desc, permission } = this.state; const { isValid, errMessage } = this.validParams(); if (!isValid) { this.setState({ errMessage }); return; } this.props.onUpdateCustomPermission(permission_name, permission_desc, permission); }; toggle = () => { this.setState({ tooltipOpen: !this.state.tooltipOpen }); }; render() { const { mode } = this.props; const title = mode === 'add' ? gettext('Add permission') : gettext('Edit permission'); const { isLoading, permission_name, permission_desc, permission, errMessage } = this.state; return (
{title}
{isLoading && } {!isLoading && (
{errMessage && {errMessage}}
)}
); } } CustomPermissionEditor.propTypes = propTypes; export default CustomPermissionEditor;