import React from 'react'; import AsyncSelect from 'react-select/lib/Async'; import PropTypes from 'prop-types'; import { gettext } from '../../utils/constants'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api.js'; import PermissionEditor from '../permission-editor'; import '../../css/manage-members-dialog.css'; const propTypes = { groupID: PropTypes.string.isRequired, toggleManageMembersDialog: PropTypes.func.isRequired, onGroupChanged: PropTypes.func.isRequired, isOwner: PropTypes.bool.isRequired, }; class ManageMembersDialog extends React.Component { constructor(props) { super(props); this.state = { groupMembers: [], selectedOption: null, errMessage: '', }; this.options = []; } handleSelectChange = (option) => { this.setState({ selectedOption: option, errMessage: '', }); this.options = []; } loadOptions = (value, callback) => { if (value.trim().length > 0) { seafileAPI.searchUsers(value.trim()).then((res) => { this.options = []; for (let i = 0 ; i < res.data.users.length; i++) { let obj = {}; obj.value = res.data.users[i].name; obj.email = res.data.users[i].email; obj.label = {res.data.users[i].name} ; this.options.push(obj); } callback(this.options); }); } } addGroupMember = () => { if (this.state.selectedOption && this.state.selectedOption.email) { this.refs.memberSelect.select.onChange([], { action: 'clear' }); seafileAPI.addGroupMember(this.props.groupID, this.state.selectedOption.email).then((res) => { this.onGroupMembersChange(); this.options = []; this.setState({ selectedOption: null, }); }).catch((error) => { if (error.response) { this.setState({ errMessage: error.response.data.error_msg }); } }); } } listGroupMembers = () => { seafileAPI.listGroupMembers(this.props.groupID).then((res) => { this.setState({ groupMembers: res.data }); }); } onGroupMembersChange = () => { this.listGroupMembers(); } toggle = () => { this.props.toggleManageMembersDialog(); } componentDidMount() { this.listGroupMembers(); } render() { return ( {gettext('Manage group members')}

{gettext('Add group member')}

{this.state.errMessage}
{ this.state.groupMembers.length > 0 && this.state.groupMembers.map((item, index = 0) => { return ( ); }) }
{gettext('Name')} {gettext('Role')}
); } } ManageMembersDialog.propTypes = propTypes; const MemberPropTypes = { item: PropTypes.object.isRequired, onGroupMembersChange: PropTypes.func.isRequired, groupID: PropTypes.string.isRequired, isOwner: PropTypes.bool.isRequired, }; class Member extends React.PureComponent { constructor(props) { super(props); } onChangeUserPermission = (permission) => { let isAdmin = permission === 'Admin' ? 'True' : 'False'; seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => { this.props.onGroupMembersChange(); }); } deleteMember = (name) => { seafileAPI.deleteGroupMember(this.props.groupID, name).then((res) => { this.props.onGroupMembersChange(); }); } render() { const { item, isOwner } = this.props; const permissions = ['Admin', 'Member']; return( {item.name} {((isOwner === false) || (isOwner === true && item.role === 'Owner')) && {item.role} } {(isOwner === true && item.role !== 'Owner') && } {((item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false)) && } ); } } Member.propTypes = MemberPropTypes; export default ManageMembersDialog;