mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-22 11:57:34 +00:00
Add sharing dialog and optimize nav-link style (#2580)
This commit is contained in:
C_Q
Daniel Pan
254
frontend/src/components/dialog/generate-share-link.js
Normal file
254
frontend/src/components/dialog/generate-share-link.js
Normal file
@@ -0,0 +1,254 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
|
||||
|
||||
const propTypes = {
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class GenerateShareLink extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
passwordVisible: false,
|
||||
showPasswordInput: false,
|
||||
isValidate: false,
|
||||
password: '',
|
||||
passwdnew: '',
|
||||
expireDays: '',
|
||||
token: '',
|
||||
link: '',
|
||||
errorInfo: ''
|
||||
};
|
||||
this.permissions = {
|
||||
'can_edit': false,
|
||||
'can_download': true
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getShareLink();
|
||||
}
|
||||
|
||||
getShareLink = () => {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.getShareLink(repoID, path).then((res) => {
|
||||
if (res.data.length !== 0) {
|
||||
this.setState({
|
||||
link: res.data[0].link,
|
||||
token: res.data[0].token,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addPassword = () => {
|
||||
this.setState({
|
||||
showPasswordInput: !this.state.showPasswordInput,
|
||||
password: '',
|
||||
passwdnew: '',
|
||||
errorInfo: ''
|
||||
});
|
||||
}
|
||||
|
||||
togglePasswordVisible = () => {
|
||||
this.setState({
|
||||
passwordVisible: !this.state.passwordVisible
|
||||
});
|
||||
}
|
||||
|
||||
generatePassword = () => {
|
||||
let val = Math.random().toString(36).substr(2);
|
||||
this.setState({
|
||||
password: val,
|
||||
passwordnew: val
|
||||
});
|
||||
}
|
||||
|
||||
inputPassword = (e) => {
|
||||
this.setState({
|
||||
password: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
inputPasswordNew = (e) => {
|
||||
this.setState({
|
||||
passwordnew: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
setPermission = (permission) => {
|
||||
if (permission == 'previewAndDownload') {
|
||||
this.permissions = {
|
||||
'can_edit': false,
|
||||
'can_download': true
|
||||
};
|
||||
} else {
|
||||
this.permissions = {
|
||||
'can_edit': false,
|
||||
'can_download': false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
generateShareLink = () => {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
if (this.state.showPasswordInput && (this.state.password == '')) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Please enter password')
|
||||
});
|
||||
}
|
||||
else if (this.state.showPasswordInput && (this.state.showPasswordInput && this.state.password.length < 8)) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Password is too short')
|
||||
});
|
||||
}
|
||||
else if (this.state.showPasswordInput && (this.state.password !== this.state.passwordnew)) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Passwords don\'t match')
|
||||
});
|
||||
}
|
||||
else if (this.state.expireDays === '') {
|
||||
this.setState({
|
||||
errorInfo: gettext('Please enter days')
|
||||
});
|
||||
} else if (!this.state.isValidate) {
|
||||
// errMessage had been setted
|
||||
return;
|
||||
} else {
|
||||
let { password, expireDays } = this.state;
|
||||
let permissions = this.permissions;
|
||||
permissions = JSON.stringify(permissions);
|
||||
seafileAPI.createShareLink(repoID, path, password, expireDays, permissions).then((res) => {
|
||||
this.setState({
|
||||
link: res.data.link,
|
||||
token: res.data.token
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deleteShareLink = () => {
|
||||
seafileAPI.deleteShareLink(this.state.token).then(() => {
|
||||
this.setState({
|
||||
link: '',
|
||||
token: '',
|
||||
showPasswordInput: false,
|
||||
password: '',
|
||||
passwordnew: '',
|
||||
});
|
||||
this.permissions = {
|
||||
'can_edit': false,
|
||||
'can_download': true
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
onExpireHandler = (e) => {
|
||||
let day = e.target.value;
|
||||
let reg = /^\d+$/;
|
||||
let flag = reg.test(day);
|
||||
if (!flag) {
|
||||
this.setState({
|
||||
isValidate: false,
|
||||
errorInfo: gettext('Please enter a non-negative integer'),
|
||||
expireDays: day,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
day = parseInt(day);
|
||||
|
||||
if (day < shareLinkExpireDaysMin || day > shareLinkExpireDaysMax) {
|
||||
let errorMessage = gettext('Please enter a value between day1 and day2');
|
||||
errorMessage = errorMessage.replace('day1', shareLinkExpireDaysMin);
|
||||
errorMessage = errorMessage.replace('day2', shareLinkExpireDaysMax);
|
||||
this.setState({
|
||||
isValidate: false,
|
||||
errorInfo: errorMessage,
|
||||
expireDays: day
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isValidate: true,
|
||||
errorInfo: '',
|
||||
expireDays: day
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.link) {
|
||||
return (
|
||||
<Form>
|
||||
<p>{this.state.link}</p>
|
||||
<Button onClick={this.deleteShareLink}>{gettext('Delete')}</Button>
|
||||
</Form>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Form className="generate-share-link">
|
||||
<FormGroup check>
|
||||
<Label check>
|
||||
<Input type="checkbox" onChange={this.addPassword}/>{' '}{gettext('Add password protection')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
{this.state.showPasswordInput &&
|
||||
<FormGroup className="link-operation-content">
|
||||
<Label>{gettext('Password')}</Label><span className="tip"> ({gettext('at least 8 characters')}) </span>
|
||||
<InputGroup className="passwd">
|
||||
<Input type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.passwordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
|
||||
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
<Label>{gettext('Password again')}</Label>
|
||||
<Input className="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
|
||||
</FormGroup>
|
||||
}
|
||||
<FormGroup check>
|
||||
<Label check>
|
||||
<Input className="expire-checkbox" type="checkbox" checked readOnly/>{' '}{gettext('Add auto expiration')}
|
||||
<Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireHandler}/> <span>{gettext('days')}</span>
|
||||
{parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) === 0 && (
|
||||
<span> ({gettext('no limit')})</span>
|
||||
)}
|
||||
{parseInt(shareLinkExpireDaysMax) !== 0 && (
|
||||
<span> ({shareLinkExpireDaysMin} - {shareLinkExpireDaysMax}{gettext('days')})</span>
|
||||
)}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Label check>
|
||||
<Input type="checkbox" checked readOnly/>{' '}{gettext('Set permission')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check className="permission">
|
||||
<Label check>
|
||||
<Input type="radio" name="radio1" defaultChecked={true} onChange={this.setPermission('previewAndDownload')}/>{' '}{gettext('Preview and download')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check className="permission">
|
||||
<Label check>
|
||||
<Input type="radio" name="radio1" onChange={this.setPermission('preview')} />{' '}{gettext('Preview only')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<Label className="err-message">{this.state.errorInfo}</Label><br />
|
||||
<Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GenerateShareLink.propTypes = propTypes;
|
||||
|
||||
export default GenerateShareLink;
|
||||
159
frontend/src/components/dialog/generate-upload-link.js
Normal file
159
frontend/src/components/dialog/generate-upload-link.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from 'react';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import PropTypes from 'prop-types';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Button, Form, FormGroup, FormText, Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
|
||||
|
||||
const propTypes = {
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class GenerateUploadLink extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showPasswordInput: false,
|
||||
passwordVisible: false,
|
||||
password: '',
|
||||
passwdnew: '',
|
||||
link: '',
|
||||
token:''
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getUploadLink();
|
||||
}
|
||||
|
||||
getUploadLink = () => {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.getUploadLinks(repoID, path).then((res) => {
|
||||
if (res.data.length !== 0) {
|
||||
this.setState({
|
||||
link: res.data[0].link,
|
||||
token: res.data[0].token,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addPassword = () => {
|
||||
this.setState({
|
||||
showPasswordInput: !this.state.showPasswordInput,
|
||||
password: '',
|
||||
passwdnew: '',
|
||||
errorInfo: ''
|
||||
});
|
||||
}
|
||||
|
||||
togglePasswordVisible = () => {
|
||||
this.setState({
|
||||
passwordVisible: !this.state.passwordVisible
|
||||
});
|
||||
}
|
||||
|
||||
generatePassword = () => {
|
||||
let val = Math.random().toString(36).substr(2);
|
||||
this.setState({
|
||||
password: val,
|
||||
passwordnew: val
|
||||
});
|
||||
}
|
||||
|
||||
inputPassword = (e) => {
|
||||
this.setState({
|
||||
password: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
inputPasswordNew = (e) => {
|
||||
this.setState({
|
||||
passwordnew: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
generateUploadLink = () => {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
|
||||
if (this.state.showPasswordInput && (this.state.password == '')) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Please enter password')
|
||||
});
|
||||
}
|
||||
else if (this.state.showPasswordInput && (this.state.showPasswordInput && this.state.password.length < 8)) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Password is too short')
|
||||
});
|
||||
}
|
||||
else if (this.state.showPasswordInput && (this.state.password !== this.state.passwordnew)) {
|
||||
this.setState({
|
||||
errorInfo: gettext('Passwords don\'t match')
|
||||
});
|
||||
} else {
|
||||
seafileAPI.createUploadLink(repoID, path, this.state.password).then((res) => {
|
||||
this.setState({
|
||||
link: res.data.link,
|
||||
token: res.data.token
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deleteUploadLink = () => {
|
||||
seafileAPI.deleteUploadLink(this.state.token).then(() => {
|
||||
this.setState({
|
||||
link: '',
|
||||
token: '',
|
||||
showPasswordInput: false,
|
||||
password: '',
|
||||
passwordnew: '',
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.link) {
|
||||
return (
|
||||
<Form>
|
||||
<p>{this.state.link}</p>
|
||||
<Button onClick={this.deleteUploadLink}>{gettext('Delete')}</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Form className="generate-upload-link">
|
||||
<FormGroup>
|
||||
<FormText className="tip">{gettext('You can share the generated link to others and then they can upload files to this directory via the link.')}</FormText>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Label check>
|
||||
<Input type="checkbox" onChange={this.addPassword}/>{' '}{gettext('Add password protection')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
{this.state.showPasswordInput &&
|
||||
<FormGroup className="link-operation-content">
|
||||
<Label>{gettext('Password')}</Label><span className="tip"> ({gettext('at least 8 characters')}) </span>
|
||||
<InputGroup className="passwd">
|
||||
<Input type={this.state.passwordVisible ? 'text':'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.passwordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
|
||||
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
<Label>{gettext('Password again')}</Label>
|
||||
<Input className="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
|
||||
</FormGroup>
|
||||
}
|
||||
<Label className="err-message">{this.state.errorInfo}</Label><br/>
|
||||
<Button className="generate-link-btn" onClick={this.generateUploadLink}>{gettext('Generate')}</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
GenerateUploadLink.propTypes = propTypes;
|
||||
|
||||
export default GenerateUploadLink;
|
||||
125
frontend/src/components/dialog/share-dialog.js
Normal file
125
frontend/src/components/dialog/share-dialog.js
Normal file
@@ -0,0 +1,125 @@
|
||||
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 ShareToUser from './share-to-user';
|
||||
import ShareToGroup from './share-to-group';
|
||||
import GenerateShareLink from './generate-share-link';
|
||||
import GenerateUploadLink from './generate-upload-link';
|
||||
import '../../css/share-link-dialog.css';
|
||||
|
||||
const propTypes = {
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
itemName: PropTypes.string.isRequired,
|
||||
toggleDialog: PropTypes.func.isRequired,
|
||||
isDir: PropTypes.bool.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class ShareDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeTab: 'shareLink'
|
||||
};
|
||||
}
|
||||
|
||||
toggle = (tab) => {
|
||||
if (this.state.activeTab !== tab) {
|
||||
this.setState({activeTab: tab});
|
||||
}
|
||||
}
|
||||
|
||||
renderDirContent = () => {
|
||||
let activeTab = this.state.activeTab;
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="share-dialog-side">
|
||||
<Nav pills>
|
||||
<NavItem>
|
||||
<NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}>
|
||||
{gettext('Share Link')}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink className={activeTab === 'uploadLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLink')}>
|
||||
{gettext('Upload Link')}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<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>
|
||||
</Nav>
|
||||
</div>
|
||||
<div className="share-dialog-main">
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
<TabPane tabId="shareLink">
|
||||
<GenerateShareLink itemPath={this.props.itemPath} repoID={this.props.repoID} />
|
||||
</TabPane>
|
||||
<TabPane tabId="uploadLink">
|
||||
<GenerateUploadLink itemPath={this.props.itemPath} repoID={this.props.repoID} />
|
||||
</TabPane>
|
||||
<TabPane tabId="shareToUser">
|
||||
<ShareToUser itemPath={this.props.itemPath} repoID={this.props.repoID} />
|
||||
</TabPane>
|
||||
<TabPane tabId="shareToGroup">
|
||||
<ShareToGroup itemPath={this.props.itemPath} repoID={this.props.repoID} />
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
renderFileContent = () => {
|
||||
let activeTab = this.state.activeTab;
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="share-dialog-side">
|
||||
<Nav pills>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={activeTab === 'shareLink' ? 'active' : ''} onClick={() => {this.toggle.bind(this, 'shareLink');}}>
|
||||
{gettext('Share Link')}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</div>
|
||||
<div className="share-dialog-main">
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
<TabPane tabId="shareLink">
|
||||
<GenerateShareLink itemPath={this.props.itemPath} repoID={this.props.repoID} />
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let itemName = this.props.itemName;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
|
||||
<ModalHeader toggle={this.props.toggleDialog}>Share <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
|
||||
<ModalBody className="share-dialog-content">
|
||||
{this.props.isDir && this.renderDirContent()}
|
||||
{!this.props.isDir && this.renderFileContent()}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ShareDialog.propTypes = propTypes;
|
||||
|
||||
export default ShareDialog;
|
||||
185
frontend/src/components/dialog/share-to-group.js
Normal file
185
frontend/src/components/dialog/share-to-group.js
Normal file
@@ -0,0 +1,185 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Input } from 'reactstrap';
|
||||
import Select from 'react-select';
|
||||
import makeAnimated from 'react-select/lib/animated';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { seafileAPI } from '../../utils/seafile-api.js';
|
||||
|
||||
const propTypes = {
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class ShareToGroup extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: null,
|
||||
errorMsg: [],
|
||||
permission: 'rw',
|
||||
sharedItems: []
|
||||
};
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listSharedGroups = () => {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.listSharedItems(repoID, path, 'group').then((res) => {
|
||||
if(res.data.length !== 0) {
|
||||
this.setState({
|
||||
sharedItems: res.data
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setPermission = (e) => {
|
||||
if (e.target.value == 'Read-Write') {
|
||||
this.setState({
|
||||
permission: 'rw',
|
||||
});
|
||||
} else if (e.target.value == 'Read-Only') {
|
||||
this.setState({
|
||||
permission: 'r',
|
||||
});
|
||||
} else if (e.target.value == 'Preview-Edit-on-Cloud') {
|
||||
this.setState({
|
||||
permission: 'clod-edit',
|
||||
});
|
||||
} else if (e.target.value == 'Preview-on-Cloud') {
|
||||
this.setState({
|
||||
permission: 'preview',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
shareToGroup = () => {
|
||||
let groups = [];
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
if (this.state.selectedOption.length > 0 ) {
|
||||
for (let i = 0; i < this.state.selectedOption.length; i ++) {
|
||||
groups[i] = this.state.selectedOption[i].id;
|
||||
}
|
||||
}
|
||||
seafileAPI.shareFolder(repoID, path, 'group', this.state.permission, groups).then(res => {
|
||||
if (res.data.failed.length > 0) {
|
||||
let errorMsg = [];
|
||||
for (let i = 0 ; i < res.data.failed.length ; i++) {
|
||||
errorMsg[i] = res.data.failed[i];
|
||||
}
|
||||
this.setState({
|
||||
errorMsg: errorMsg
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.concat(res.data.success)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
deleteShareItem = (e, groupID) => {
|
||||
e.preventDefault();
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.deleteShareToGroupItem(repoID, path, 'group', groupID).then(() => {
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; })
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{'width': '50%'}}>{gettext('Group')}</th>
|
||||
<th style={{'width': '30%'}}>{gettext('Permission')}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Select
|
||||
isMulti
|
||||
onChange={this.handleSelectChange}
|
||||
options={this.options}
|
||||
components={makeAnimated()}
|
||||
inputId={'react-select-2-input'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Input type="select" name="select" onChange={this.setPermission}>
|
||||
<option>{gettext('Read-Write')}</option>
|
||||
<option>{gettext('Read-Only')}</option>
|
||||
<option>{gettext('Preview-Edit-on-Cloud')}</option>
|
||||
<option>{gettext('Preview-on-Cloud')}</option>
|
||||
</Input>
|
||||
</td>
|
||||
<td>
|
||||
<Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{this.state.errorMsg.length > 0 &&
|
||||
this.state.errorMsg.map((item, index = 0, arr) => {
|
||||
return (
|
||||
<p className="error" key={index}>{this.state.errorMsg[index].group_name}
|
||||
{': '}{this.state.errorMsg[index].error_msg}</p>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<GroupList items={this.state.sharedItems} deleteShareItem={this.deleteShareItem} />
|
||||
</table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function GroupList(props) {
|
||||
return (
|
||||
<tbody>
|
||||
{props.items.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.group_info.name}</td>
|
||||
<td>{Utils.sharePerms[item.permission]}</td>
|
||||
<td><i onClick={(e) => {props.deleteShareItem(e, item.group_info.id);}} className="sf2-icon-delete" title="Delete"></i></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
|
||||
ShareToGroup.propTypes = propTypes;
|
||||
|
||||
export default ShareToGroup;
|
||||
187
frontend/src/components/dialog/share-to-user.js
Normal file
187
frontend/src/components/dialog/share-to-user.js
Normal file
@@ -0,0 +1,187 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import AsyncSelect from 'react-select/lib/Async';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Input } from 'reactstrap';
|
||||
import { seafileAPI } from '../../utils/seafile-api.js';
|
||||
|
||||
const propTypes = {
|
||||
itemPath: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class ShareToUser extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: null,
|
||||
errorMsg: [],
|
||||
permission: 'rw',
|
||||
sharedItems: []
|
||||
};
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
handleSelectChange = (option) => {
|
||||
this.setState({selectedOption: option});
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.listSharedItems(repoID, path, 'user').then((res) => {
|
||||
if(res.data.length !== 0) {
|
||||
this.setState({sharedItems: res.data});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setPermission = (e) => {
|
||||
if (e.target.value == 'Read-Write') {
|
||||
this.setState({
|
||||
permission: 'rw',
|
||||
});
|
||||
} else if (e.target.value == 'Read-Only') {
|
||||
this.setState({
|
||||
permission: 'r',
|
||||
});
|
||||
} else if (e.target.value == 'Admin') {
|
||||
this.setState({
|
||||
permission: 'admin',
|
||||
});
|
||||
} else if (e.target.value == 'Preview-Edit-on-Cloud') {
|
||||
this.setState({
|
||||
permission: 'clod-edit',
|
||||
});
|
||||
} else if (e.target.value == 'Preview-on-Cloud') {
|
||||
this.setState({
|
||||
permission: 'preview',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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 =
|
||||
<Fragment>
|
||||
<img src={res.data.users[i].avatar_url} className="avatar reviewer-select-avatar" alt=""/>
|
||||
<span className='reviewer-select-name'>{res.data.users[i].name}</span>
|
||||
</Fragment>;
|
||||
this.options.push(obj);
|
||||
}
|
||||
callback(this.options);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
shareToUser = () => {
|
||||
let users = [];
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
if (this.state.selectedOption.length > 0 ) {
|
||||
for (let i = 0; i < this.state.selectedOption.length; i ++) {
|
||||
users[i] = this.state.selectedOption[i].email;
|
||||
}
|
||||
}
|
||||
seafileAPI.shareFolder(repoID, path, 'user', this.state.permission, users).then(res => {
|
||||
if (res.data.failed.length > 0) {
|
||||
let errorMsg = [];
|
||||
for (let i = 0 ; i < res.data.failed.length ; i++) {
|
||||
errorMsg[i] = res.data.failed[i];
|
||||
}
|
||||
this.setState({errorMsg: errorMsg});
|
||||
}
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.concat(res.data.success)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
deleteShareItem = (e, username) => {
|
||||
e.preventDefault();
|
||||
let path = this.props.itemPath;
|
||||
let repoID = this.props.repoID;
|
||||
seafileAPI.deleteShareToUserItem(repoID, path, 'user', username).then(res => {
|
||||
this.setState({
|
||||
sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; })
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let { sharedItems } = this.state;
|
||||
return (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{'width': '50%'}}>{gettext('User')}</th>
|
||||
<th style={{'width': '30%'}}>{gettext('Permission')}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<AsyncSelect
|
||||
className='reviewer-select' isMulti isFocused
|
||||
loadOptions={this.loadOptions}
|
||||
placeholder={gettext('Please enter 1 or more character')}
|
||||
onChange={this.handleSelectChange}
|
||||
isClearable classNamePrefix
|
||||
inputId={'react-select-1-input'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Input type="select" name="select" onChange={this.setPermission}>
|
||||
<option>{gettext('Read-Write')}</option>
|
||||
<option>{gettext('Read-Only')}</option>
|
||||
<option>{gettext('Admin')}</option>
|
||||
<option>{gettext('Preview-Edit-on-Cloud')}</option>
|
||||
<option>{gettext('Preview-on-Cloud')}</option>
|
||||
</Input>
|
||||
</td>
|
||||
<td>
|
||||
<Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{this.state.errorMsg.length > 0 &&
|
||||
this.state.errorMsg.map((item, index = 0, arr) => {
|
||||
return (
|
||||
<p className="error" key={index}>{this.state.errorMsg[index].email}
|
||||
{': '}{this.state.errorMsg[index].error_msg}</p>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<UserList items={sharedItems} deleteShareItem={this.deleteShareItem} />
|
||||
</table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function UserList(props) {
|
||||
return (
|
||||
<tbody>
|
||||
{props.items.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.user_info.nickname}</td>
|
||||
<td>{Utils.sharePerms[item.permission]}</td>
|
||||
<td><i onClick={(e) => {props.deleteShareItem(e, item.user_info.name);}} className="sf2-icon-delete" title="Delete"></i></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
|
||||
ShareToUser.propTypes = propTypes;
|
||||
|
||||
export default ShareToUser;
|
||||
Reference in New Issue
Block a user