mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-01 15:09:14 +00:00
sysadmin reconstruct repo page (#3980)
This commit is contained in:
Leo
Daniel Pan
@@ -0,0 +1,106 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import UserSelect from '../../user-select';
|
||||
|
||||
|
||||
const propTypes = {
|
||||
createRepo: PropTypes.func.isRequired,
|
||||
toggleDialog: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class SysAdminCreateRepoDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
repoName: '',
|
||||
ownerEmail: '',
|
||||
errMessage: '',
|
||||
isSubmitBtnActive: false
|
||||
};
|
||||
this.newInput = React.createRef();
|
||||
}
|
||||
|
||||
handleRepoNameChange = (e) => {
|
||||
if (!e.target.value.trim()) {
|
||||
this.setState({isSubmitBtnActive: false});
|
||||
} else {
|
||||
this.setState({isSubmitBtnActive: true});
|
||||
}
|
||||
|
||||
this.setState({repoName: e.target.value});
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
const { repoName, ownerEmail } = this.state;
|
||||
this.props.createRepo(repoName.trim(), ownerEmail);
|
||||
this.toggle();
|
||||
}
|
||||
|
||||
handleSelectChange = (option) => {
|
||||
// option can be null
|
||||
this.setState({
|
||||
ownerEmail: option ? option.email : ''
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleSubmit();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.toggleDialog();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.newInput.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal isOpen={true} toggle={this.toggle}>
|
||||
<ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
|
||||
<ModalBody>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label for="repoName">{gettext('Name')}</Label>
|
||||
<Input
|
||||
id="repoName"
|
||||
onKeyPress={this.handleKeyPress}
|
||||
innerRef={input => {this.newInput = input;}}
|
||||
value={this.state.repoName}
|
||||
onChange={this.handleRepoNameChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="userSelect">
|
||||
{gettext('Owner')}
|
||||
<span className="small text-secondary">{gettext('(If left blank, owner will be admin)')}</span>
|
||||
</Label>
|
||||
<UserSelect
|
||||
id="userSelect"
|
||||
isMulti={false}
|
||||
className="reviewer-select"
|
||||
placeholder={gettext('Select a user')}
|
||||
onSelectChange={this.handleSelectChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
{this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SysAdminCreateRepoDialog.propTypes = propTypes;
|
||||
|
||||
export default SysAdminCreateRepoDialog;
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import { seafileAPI } from '../../../utils/seafile-api.js';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import toaster from '../../toast';
|
||||
|
||||
const propTypes = {
|
||||
itemName: PropTypes.string.isRequired,
|
||||
toggleDialog: PropTypes.func.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
class SysAdminLibHistorySettingDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
keepDays: -1,
|
||||
expireDays: 30,
|
||||
disabled: true,
|
||||
allHistory: true,
|
||||
noHistory: false,
|
||||
autoHistory: false,
|
||||
errorInfo: ''
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
seafileAPI.sysAdminGetRepoHistorySetting(this.props.repoID).then(res => {
|
||||
this.setState({
|
||||
keepDays: res.data.keep_days,
|
||||
allHistory: res.data.keep_days < 0 ? true : false,
|
||||
noHistory: res.data.keep_days === 0 ? true : false,
|
||||
autoHistory: res.data.keep_days > 0 ? true : false,
|
||||
disabled: res.data.keep_days > 0 ? false : true,
|
||||
expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30,
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
submit = () => {
|
||||
let days = this.state.keepDays;
|
||||
if (this.state.autoHistory) {
|
||||
days = this.state.expireDays;
|
||||
}
|
||||
let repoID = this.props.repoID;
|
||||
let reg = /^-?\d+$/;
|
||||
let flag = reg.test(days);
|
||||
if (flag) {
|
||||
let message = gettext('Successfully set library history.');
|
||||
seafileAPI.sysAdminUpdateRepoHistorySetting(repoID, days).then(res => {
|
||||
toaster.success(message);
|
||||
this.setState({keepDays: res.data.keep_days});
|
||||
this.props.toggleDialog();
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
errorInfo: gettext('Please enter a non-negative integer'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.submit();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
onChange = (e) => {
|
||||
let num = e.target.value;
|
||||
this.setState({
|
||||
keepDays: num,
|
||||
expireDays: num,
|
||||
});
|
||||
}
|
||||
|
||||
setLimitDays = (type) => {
|
||||
if (type === 'allHistory') {
|
||||
this.setState({
|
||||
keepDays: -1,
|
||||
});
|
||||
} else if (type === 'noHistory') {
|
||||
this.setState({
|
||||
keepDays: 0,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
allHistory: type === 'allHistory' ? true : false,
|
||||
noHistory: type === 'noHistory' ? true : false,
|
||||
autoHistory: type === 'autoHistory' ? true : false,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const itemName = this.props.itemName;
|
||||
return (
|
||||
<Modal isOpen={true}>
|
||||
<ModalHeader toggle={this.props.toggleDialog}>
|
||||
<span className="op-target" title={itemName}>{itemName}</span>{' '}
|
||||
{gettext('History Setting')}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Form>
|
||||
<FormGroup check>
|
||||
<Input type="radio" name="radio1" checked={this.state.allHistory} onChange={() => {this.setLimitDays('allHistory');}}/>{' '}
|
||||
<Label>{gettext('Keep full history')}</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Input type="radio" name="radio1" checked={this.state.noHistory} onChange={() =>{this.setLimitDays('noHistory');}}/>{' '}
|
||||
<Label>{gettext('Don\'t keep history')}</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
|
||||
<Label>{gettext('Only keep a period of history:')}</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className="expire-input"
|
||||
value={this.state.expireDays}
|
||||
onChange={this.onChange}
|
||||
disabled={this.state.disabled}
|
||||
onKeyDown={this.handleKeyPress}
|
||||
/>{' '}
|
||||
<Label><span>{gettext('days')}</span></Label>
|
||||
</FormGroup>
|
||||
{this.state.errorInfo && <Alert color="danger">{this.state.errorInfo}</Alert>}
|
||||
</Form>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
|
||||
<Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SysAdminLibHistorySettingDialog.propTypes = propTypes;
|
||||
|
||||
export default SysAdminLibHistorySettingDialog;
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import SysAdminShareToUser from './sysadmin-share-to-user';
|
||||
import SysAdminShareToGroup from './sysadmin-share-to-group';
|
||||
import '../../../css/share-link-dialog.css';
|
||||
|
||||
const propTypes = {
|
||||
itemName: PropTypes.string.isRequired,
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
toggleDialog: PropTypes.func.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
isGroupOwnedRepo: PropTypes.bool.isRequired,
|
||||
repoEncrypted: PropTypes.bool,
|
||||
userPerm: PropTypes.string,
|
||||
enableDirPrivateShare: PropTypes.bool
|
||||
};
|
||||
|
||||
class SysAdminShareDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeTab: this.getInitialActiveTab(),
|
||||
isRepoOwner: false
|
||||
};
|
||||
}
|
||||
|
||||
getInitialActiveTab = () => {
|
||||
return 'shareToUser';
|
||||
}
|
||||
|
||||
toggle = (tab) => {
|
||||
if (this.state.activeTab !== tab) {
|
||||
this.setState({activeTab: tab});
|
||||
}
|
||||
}
|
||||
|
||||
renderDirContent = () => {
|
||||
let activeTab = this.state.activeTab;
|
||||
const { enableDirPrivateShare, isGroupOwnedRepo } = this.props;
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="share-dialog-side">
|
||||
<Nav pills vertical>
|
||||
{enableDirPrivateShare &&
|
||||
<Fragment>
|
||||
<NavItem>
|
||||
<NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')}>
|
||||
{gettext('Share to user')}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')}>
|
||||
{gettext('Share to group')}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Fragment>
|
||||
}
|
||||
</Nav>
|
||||
</div>
|
||||
<div className="share-dialog-main">
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
{enableDirPrivateShare &&
|
||||
<Fragment>
|
||||
<TabPane tabId="shareToUser">
|
||||
<SysAdminShareToUser itemType={'library'} isGroupOwnedRepo={isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/>
|
||||
</TabPane>
|
||||
<TabPane tabId="shareToGroup">
|
||||
<SysAdminShareToGroup itemType={'library'} isGroupOwnedRepo={isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner}/>
|
||||
</TabPane>
|
||||
</Fragment>
|
||||
}
|
||||
</TabContent>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}>
|
||||
<ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></ModalHeader>
|
||||
<ModalBody className="share-dialog-content">
|
||||
{this.renderDirContent()}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SysAdminShareDialog.propTypes = propTypes;
|
||||
|
||||
export default SysAdminShareDialog;
|
||||
@@ -0,0 +1,302 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from 'reactstrap';
|
||||
import Select from 'react-select';
|
||||
import makeAnimated from 'react-select/lib/animated';
|
||||
import { isPro, gettext } from '../../../utils/constants';
|
||||
import { seafileAPI } from '../../../utils/seafile-api.js';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import toaster from '../../toast';
|
||||
import SharePermissionEditor from '../../select-editor/share-permission-editor';
|
||||
|
||||
class GroupItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOperationShow: false
|
||||
};
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({isOperationShow: true});
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({isOperationShow: false});
|
||||
}
|
||||
|
||||
deleteShareItem = () => {
|
||||
let item = this.props.item;
|
||||
this.props.deleteShareItem(item.group_id);
|
||||
}
|
||||
|
||||
onChangeUserPermission = (permission) => {
|
||||
let item = this.props.item;
|
||||
this.props.onChangeUserPermission(item, permission);
|
||||
}
|
||||
|
||||
render() {
|
||||
let item = this.props.item;
|
||||
let currentPermission = item.is_admin ? 'admin' : item.permission;
|
||||
return (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td className='name'>{item.group_name}</td>
|
||||
<td>
|
||||
<SharePermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.isOperationShow}
|
||||
currentPermission={currentPermission}
|
||||
permissions={this.props.permissions}
|
||||
onPermissionChanged={this.onChangeUserPermission}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
onClick={this.deleteShareItem}
|
||||
title={gettext('Delete')}
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class GroupList extends React.Component {
|
||||
|
||||
render() {
|
||||
let items = this.props.items;
|
||||
return (
|
||||
<tbody>
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<GroupItem
|
||||
key={index}
|
||||
item={item}
|
||||
permissions={this.props.permissions}
|
||||
deleteShareItem={this.props.deleteShareItem}
|
||||
onChangeUserPermission={this.props.onChangeUserPermission}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
isGroupOwnedRepo: PropTypes.bool,
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
itemType: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
isRepoOwner: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const NoOptionsMessage = (props) => {
|
||||
return (
|
||||
<div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
|
||||
);
|
||||
};
|
||||
|
||||
class SysAdminShareToGroup extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: null,
|
||||
errorMsg: [],
|
||||
permission: 'rw',
|
||||
sharedItems: []
|
||||
};
|
||||
this.options = [];
|
||||
this.permissions = ['rw', 'r'];
|
||||
if (isPro) {
|
||||
this.permissions.push('admin', 'cloud-edit', 'preview');
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectChange = (option) => {
|
||||
this.setState({selectedOption: option});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadOptions();
|
||||
this.listSharedGroups();
|
||||
}
|
||||
|
||||
loadOptions = () => {
|
||||
seafileAPI.shareableGroups().then((res) => {
|
||||
this.options = [];
|
||||
for (let i = 0 ; i < res.data.length; i++) {
|
||||
let obj = {};
|
||||
obj.value = res.data[i].name;
|
||||
obj.id = res.data[i].id;
|
||||
obj.label = res.data[i].name;
|
||||
this.options.push(obj);
|
||||
}
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
listSharedGroups = () => {
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.sysAdminListRepoSharedItems(repoID, 'group').then((res) => {
|
||||
if(res.data.length !== 0) {
|
||||
this.setState({
|
||||
sharedItems: res.data
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
setPermission = (permission) => {
|
||||
this.setState({permission: permission});
|
||||
}
|
||||
|
||||
shareToGroup = () => {
|
||||
let groups = [];
|
||||
let repoID = this.props.repoID;
|
||||
if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
|
||||
for (let i = 0; i < this.state.selectedOption.length; i ++) {
|
||||
groups[i] = this.state.selectedOption[i].id;
|
||||
}
|
||||
}
|
||||
seafileAPI.sysAdminAddRepoSharedItem(repoID, 'group', groups, this.state.permission).then(res => {
|
||||
let errorMsg = [];
|
||||
if (res.data.failed.length > 0) {
|
||||
for (let i = 0 ; i < res.data.failed.length ; i++) {
|
||||
errorMsg[i] = res.data.failed[i];
|
||||
}
|
||||
}
|
||||
let items = res.data.success;
|
||||
this.setState({
|
||||
errorMsg: errorMsg,
|
||||
sharedItems: this.state.sharedItems.concat(items),
|
||||
selectedOption: null,
|
||||
permission: 'rw',
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
deleteShareItem = (groupID) => {
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'group', groupID).then(() => {
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.filter(item => { return item.group_id !== groupID; })
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
onChangeUserPermission = (item, permission) => {
|
||||
let repoID = this.props.repoID;
|
||||
let groupID = item.group_id;
|
||||
seafileAPI.sysAdminUpdateRepoSharedItemPermission(repoID, 'group', groupID, permission).then(() => {
|
||||
this.updateSharedItems(item, permission);
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
updateSharedItems = (item, permission) => {
|
||||
let groupID = item.group_id;
|
||||
let sharedItems = this.state.sharedItems.map(sharedItem => {
|
||||
let sharedItemGroupID = sharedItem.group_id;
|
||||
if (groupID === sharedItemGroupID) {
|
||||
sharedItem.permission = permission;
|
||||
sharedItem.is_admin = permission === 'admin' ? true : false;
|
||||
}
|
||||
return sharedItem;
|
||||
});
|
||||
this.setState({sharedItems: sharedItems});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">{gettext('Group')}</th>
|
||||
<th width="35%">{gettext('Permission')}</th>
|
||||
<th width="15%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<Select
|
||||
isMulti
|
||||
onChange={this.handleSelectChange}
|
||||
options={this.options}
|
||||
placeholder={gettext('Select groups...')}
|
||||
components={makeAnimated()}
|
||||
maxMenuHeight={200}
|
||||
inputId={'react-select-2-input'}
|
||||
value={this.state.selectedOption}
|
||||
components={{ NoOptionsMessage }}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<SharePermissionEditor
|
||||
isTextMode={false}
|
||||
isEditIconShow={false}
|
||||
currentPermission={this.state.permission}
|
||||
permissions={this.permissions}
|
||||
onPermissionChanged={this.setPermission}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
{this.state.errorMsg.length > 0 &&
|
||||
this.state.errorMsg.map((item, index) => {
|
||||
let errMessage = item.group_name + ': ' + item.error_msg;
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td colSpan={3}><p className="error">{errMessage}</p></td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="share-list-container">
|
||||
<table className="table-thead-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">{gettext('Group')}</th>
|
||||
<th width="35%">{gettext('Permission')}</th>
|
||||
<th width="15%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<GroupList
|
||||
items={this.state.sharedItems}
|
||||
permissions={this.permissions}
|
||||
deleteShareItem={this.deleteShareItem}
|
||||
onChangeUserPermission={this.onChangeUserPermission}
|
||||
/>
|
||||
</table>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SysAdminShareToGroup.propTypes = propTypes;
|
||||
|
||||
export default SysAdminShareToGroup;
|
||||
@@ -0,0 +1,282 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isPro, gettext, siteRoot } from '../../../utils/constants';
|
||||
import { Button } from 'reactstrap';
|
||||
import { seafileAPI } from '../../../utils/seafile-api.js';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import toaster from '../../toast';
|
||||
import UserSelect from '../../user-select';
|
||||
import SharePermissionEditor from '../../select-editor/share-permission-editor';
|
||||
|
||||
class UserItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOperationShow: false
|
||||
};
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({isOperationShow: true});
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({isOperationShow: false});
|
||||
}
|
||||
|
||||
deleteShareItem = () => {
|
||||
let item = this.props.item;
|
||||
this.props.deleteShareItem(item.user_email);
|
||||
}
|
||||
|
||||
onChangeUserPermission = (permission) => {
|
||||
let item = this.props.item;
|
||||
this.props.onChangeUserPermission(item, permission);
|
||||
}
|
||||
|
||||
render() {
|
||||
let item = this.props.item;
|
||||
let currentPermission = item.is_admin ? 'admin' : item.permission;
|
||||
return (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td className="name">{item.user_name}</td>
|
||||
<td>
|
||||
<SharePermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.isOperationShow}
|
||||
currentPermission={currentPermission}
|
||||
permissions={this.props.permissions}
|
||||
onPermissionChanged={this.onChangeUserPermission}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
onClick={this.deleteShareItem}
|
||||
title={gettext('Delete')}
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class UserList extends React.Component {
|
||||
|
||||
render() {
|
||||
let items = this.props.items;
|
||||
return (
|
||||
<tbody>
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<UserItem
|
||||
key={index}
|
||||
item={item}
|
||||
permissions={this.props.permissions}
|
||||
deleteShareItem={this.props.deleteShareItem}
|
||||
onChangeUserPermission={this.props.onChangeUserPermission}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
isGroupOwnedRepo: PropTypes.bool,
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
itemType: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class SysAdminShareToUser extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: null,
|
||||
errorMsg: [],
|
||||
permission: 'rw',
|
||||
sharedItems: []
|
||||
};
|
||||
this.options = [];
|
||||
this.permissions = ['rw', 'r'];
|
||||
if (isPro) {
|
||||
this.permissions.push('admin', 'cloud-edit', 'preview');
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectChange = (option) => {
|
||||
this.setState({selectedOption: option});
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => {
|
||||
if(res.data.length !== 0) {
|
||||
this.setState({sharedItems: res.data});
|
||||
}
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
setPermission = (permission) => {
|
||||
this.setState({permission: permission});
|
||||
}
|
||||
|
||||
shareToUser = () => {
|
||||
let users = [];
|
||||
let repoID = this.props.repoID;
|
||||
if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
|
||||
for (let i = 0; i < this.state.selectedOption.length; i ++) {
|
||||
users[i] = this.state.selectedOption[i].email;
|
||||
}
|
||||
}
|
||||
seafileAPI.sysAdminAddRepoSharedItem(repoID, 'user' , users, this.state.permission).then(res => {
|
||||
let errorMsg = [];
|
||||
if (res.data.failed.length > 0) {
|
||||
for (let i = 0 ; i < res.data.failed.length ; i++) {
|
||||
errorMsg[i] = res.data.failed[i];
|
||||
}
|
||||
}
|
||||
let newItems = res.data.success;
|
||||
this.setState({
|
||||
errorMsg: errorMsg,
|
||||
sharedItems: this.state.sharedItems.concat(newItems),
|
||||
selectedOption: null,
|
||||
permission: 'rw',
|
||||
});
|
||||
this.refs.userSelect.clearSelect();
|
||||
}).catch(error => {
|
||||
if (error.response) {
|
||||
let message = gettext('Library can not be shared to owner.');
|
||||
let errMessage = [];
|
||||
errMessage.push(message);
|
||||
this.setState({
|
||||
errorMsg: errMessage,
|
||||
selectedOption: null,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteShareItem = (useremail) => {
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.sysAdminDeleteRepoSharedItem(repoID, 'user', useremail).then(res => {
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.filter( item => { return item.user_email !== useremail; })
|
||||
});
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
onChangeUserPermission = (item, permission) => {
|
||||
let repoID = this.props.repoID;
|
||||
let userEmail = item.user_email;
|
||||
seafileAPI.sysAdminUpdateRepoSharedItemPermission(repoID, 'user', userEmail, permission).then(() => {
|
||||
this.updateSharedItems(item, permission);
|
||||
}).catch(error => {
|
||||
let errMessage = Utils.getErrorMsg(error);
|
||||
toaster.danger(errMessage);
|
||||
});
|
||||
}
|
||||
|
||||
updateSharedItems = (item, permission) => {
|
||||
let username = item.user_name;
|
||||
let sharedItems = this.state.sharedItems.map(sharedItem => {
|
||||
let sharedItemUsername = sharedItem.user_name;
|
||||
if (username === sharedItemUsername) {
|
||||
sharedItem.permission = permission;
|
||||
sharedItem.is_admin = permission === 'admin' ? true : false;
|
||||
}
|
||||
return sharedItem;
|
||||
});
|
||||
this.setState({sharedItems: sharedItems});
|
||||
}
|
||||
|
||||
render() {
|
||||
let { sharedItems } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">{gettext('User')}</th>
|
||||
<th width="35%">{gettext('Permission')}</th>
|
||||
<th width="15%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<UserSelect
|
||||
ref="userSelect"
|
||||
isMulti={true}
|
||||
className="reviewer-select"
|
||||
placeholder={gettext('Select users...')}
|
||||
onSelectChange={this.handleSelectChange}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<SharePermissionEditor
|
||||
isTextMode={false}
|
||||
isEditIconShow={false}
|
||||
currentPermission={this.state.permission}
|
||||
permissions={this.permissions}
|
||||
onPermissionChanged={this.setPermission}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
{this.state.errorMsg.length > 0 &&
|
||||
this.state.errorMsg.map((item, index) => {
|
||||
let errMessage = '';
|
||||
if (item.email) {
|
||||
errMessage = item.email + ': ' + item.error_msg;
|
||||
} else {
|
||||
errMessage = item;
|
||||
}
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td colSpan={3}><p className="error">{errMessage}</p></td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="share-list-container">
|
||||
<table className="table-thead-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">{gettext('User')}</th>
|
||||
<th width="35%">{gettext('Permission')}</th>
|
||||
<th width="15%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<UserList
|
||||
items={sharedItems}
|
||||
permissions={this.permissions}
|
||||
deleteShareItem={this.deleteShareItem}
|
||||
onChangeUserPermission={this.onChangeUserPermission}
|
||||
/>
|
||||
</table>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SysAdminShareToUser.propTypes = propTypes;
|
||||
|
||||
export default SysAdminShareToUser;
|
||||
Reference in New Issue
Block a user