haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-16 16:21:48 +00:00
Code Issues Releases Wiki Activity

Merge pull request #2648 from haiwen/repo-share

Browse Source 
Repo share
This commit is contained in:
Daniel Pan 2018-12-17 15:22:44 +08:00 committed by GitHub
commit bd13a10a50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 490 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/package-lock.json generated
View File

@ -10793,9 +10793,9 @@
}
},
"seafile-js": {
"version": "0.2.45",
"resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.45.tgz",
"integrity": "sha512-qkKuqUMRKJxyXYYFI2Q4PPCbbxuA7wc6RWs4WTF67cHvh1VwAMNlE4xsRZhKQP0ZdUS+cHf2W8enZvb+dvucJQ==",
"version": "0.2.46",
"resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.46.tgz",
"integrity": "sha512-dD2Vd4o6z40bjLy6RsUKZMiWPzlruc4pApVsGzMGorKxrRVbNt+YSTqOE+7Q4wb6WaiiHj8PdY7hTMcP5UdmQA==",
"requires": {
"axios": "^0.18.0",
"form-data": "^2.3.2",

2
frontend/package.json
View File

@ -30,7 +30,7 @@
"react-moment": "^0.7.9",
"react-select": "^2.1.1",
"reactstrap": "^6.4.0",
"seafile-js": "^0.2.45",
"seafile-js": "^0.2.46",
"seafile-ui": "^0.1.10",
"sw-precache-webpack-plugin": "0.11.4",
"unified": "^7.0.0",

2
frontend/src/app.js
View File

@ -107,7 +107,7 @@ class App extends Component {
let newWindow = window.open('markdown-editor');
newWindow.location.href = url;
} else {
let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + selectedItem.path;
let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
let newWindow = window.open('about:blank');
newWindow.location.href = url;
}

3
frontend/src/components/dialog/create-department-repo-dialog.js
View File

@ -28,9 +28,8 @@ class CreateDepartmentRepoDialog extends React.Component {
let isValid = this.validateRepoName();
if (isValid) {
let repo = this.createRepo(this.state.repoName);
this.props.onCreateRepo(repo);
this.props.onCreateRepo(repo, 'department');
}
}
handleKeyPress = (e) => {

217
frontend/src/components/dialog/generate-share-link.js
View File

@ -14,9 +14,10 @@ class GenerateShareLink extends React.Component {
constructor(props) {
super(props);
this.state = {
passwordVisible: false,
showPasswordInput: false,
isValidate: false,
isShowPasswordInput: false,
isPasswordVisible: false,
isExpireChecked: false,
password: '',
passwdnew: '',
expireDays: '',
@ -28,6 +29,7 @@ class GenerateShareLink extends React.Component {
'can_edit': false,
'can_download': true
};
this.isExpireDaysNoLimit = (parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) === 0);
}
componentDidMount() {
@ -47,9 +49,9 @@ class GenerateShareLink extends React.Component {
});
}
addPassword = () => {
onPasswordInputChecked = () => {
this.setState({
showPasswordInput: !this.state.showPasswordInput,
isShowPasswordInput: !this.state.isShowPasswordInput,
password: '',
passwdnew: '',
errorInfo: ''
@ -58,7 +60,7 @@ class GenerateShareLink extends React.Component {
togglePasswordVisible = () => {
this.setState({
passwordVisible: !this.state.passwordVisible
isPasswordVisible: !this.state.isPasswordVisible
});
}
@ -66,20 +68,18 @@ class GenerateShareLink extends React.Component {
let val = Math.random().toString(36).substr(5);
this.setState({
password: val,
passwordnew: val
passwdnew: val
});
}
inputPassword = (e) => {
this.setState({
password: e.target.value
});
let passwd = e.target.value.trim();
this.setState({password: passwd});
}
inputPasswordNew = (e) => {
this.setState({
passwordnew: e.target.value
});
let passwd = e.target.value.trim();
this.setState({passwdnew: passwd});
}
setPermission = (permission) => {
@ -97,35 +97,14 @@ class GenerateShareLink extends React.Component {
}
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 isValid = this.validateParamsInput();
if (isValid) {
this.setState({errorInfo: ''});
let { itemPath, repoID } = this.props;
let { password, expireDays } = this.state;
let permissions = this.permissions;
permissions = JSON.stringify(permissions);
seafileAPI.createShareLink(repoID, path, password, expireDays, permissions).then((res) => {
seafileAPI.createShareLink(repoID, itemPath, password, expireDays, permissions).then((res) => {
this.setState({
link: res.data.link,
token: res.data.token
@ -139,9 +118,12 @@ class GenerateShareLink extends React.Component {
this.setState({
link: '',
token: '',
showPasswordInput: false,
password: '',
passwordnew: '',
isShowPasswordInput: false,
expireDays: '',
isExpireChecked: false,
errorInfo: '',
});
this.permissions = {
'can_edit': false,
@ -150,38 +132,88 @@ class GenerateShareLink extends React.Component {
});
}
onExpireHandler = (e) => {
let day = e.target.value;
onExpireChecked = (e) => {
this.setState({isExpireChecked: e.target.checked});
}
onExpireDaysChanged = (e) => {
let day = e.target.value.trim();
this.setState({expireDays: day});
}
validateParamsInput = () => {
let { isShowPasswordInput , password, passwdnew, isExpireChecked, expireDays } = this.state;
// validate password
if (isShowPasswordInput) {
if (password.length === 0) {
this.setState({errorInfo: 'Please enter password'});
return false;
}
if (password.length < 8) {
this.setState({errorInfo: 'Password is too short'});
return false;
}
if (password !== passwdnew) {
this.setState({errorInfo: 'Passwords don\'t match'});
return false;
}
}
// validate days
// no limit
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;
if (this.isExpireDaysNoLimit) {
if (isExpireChecked) {
if (!expireDays) {
this.setState({errorInfo: 'Please enter days'});
return false;
}
let flag = reg.test(expireDays);
if (!flag) {
this.setState({errorInfo: 'Please enter a non-negative integer'});
return false;
}
this.setState({expireDays: parseInt(expireDays)});
}
} else {
if (!expireDays) {
this.setState({errorInfo: 'Please enter days'});
return false;
}
let flag = reg.test(expireDays);
if (!flag) {
this.setState({errorInfo: 'Please enter a non-negative integer'});
return false;
}
expireDays = parseInt(expireDays);
let minDays = parseInt(shareLinkExpireDaysMin);
let maxDays = parseInt(shareLinkExpireDaysMax);
if (minDays !== 0 && maxDays !== maxDays) {
if (expireDays < minDays) {
this.setState({errorInfo: 'Please enter valid days'});
return false;
}
}
if (minDays === 0 && maxDays !== 0 ) {
if (expireDays > maxDays) {
this.setState({errorInfo: 'Please enter valid days'});
return false;
}
}
if (minDays !== 0 && maxDays !== 0) {
if (expireDays < minDays || expireDays < maxDays) {
this.setState({errorInfo: 'Please enter valid days'});
return false;
}
}
this.setState({expireDays: expireDays});
}
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
});
return true;
}
render() {
@ -197,35 +229,48 @@ class GenerateShareLink extends React.Component {
<Form className="generate-share-link">
<FormGroup check>
<Label check>
<Input type="checkbox" onChange={this.addPassword}/>{' '}{gettext('Add password protection')}
<Input type="checkbox" onChange={this.onPasswordInputChecked}/>{' '}{gettext('Add password protection')}
</Label>
</FormGroup>
{this.state.showPasswordInput &&
{this.state.isShowPasswordInput &&
<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}/>
<Input type={this.state.isPasswordVisible ? '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.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? '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} />
<Input className="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} 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>
{this.isExpireDaysNoLimit && (
<FormGroup check>
<Label check>
<Input className="expire-checkbox" type="checkbox" onChange={this.onExpireChecked}/>{' '}{gettext('Add auto expiration')}
<Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} readOnly={!this.state.isExpireChecked}/><span>{gettext('days')}</span>
</Label>
</FormGroup>
)}
{!this.isExpireDaysNoLimit && (
<FormGroup check>
<Label check>
<Input className="expire-checkbox" type="checkbox" onChange={this.onExpireChecked} checked readOnly/>{' '}{gettext('Add auto expiration')}
<Input className="expire-input" type="text" value={this.state.expireDays} onChange={this.onExpireDaysChanged} /> <span>{gettext('days')}</span>
{(parseInt(shareLinkExpireDaysMin) !== 0 && parseInt(shareLinkExpireDaysMax) !== 0) && (
<span> ({shareLinkExpireDaysMin} - {shareLinkExpireDaysMax}{' '}{gettext('days')})</span>
)}
{(parseInt(shareLinkExpireDaysMin) !== 0 && parseInt(shareLinkExpireDaysMax) === 0) && (
<span> ({gettext('Greater than or equal to')} {shareLinkExpireDaysMin}{' '}{gettext('days')})</span>
)}
{(parseInt(shareLinkExpireDaysMin) === 0 && parseInt(shareLinkExpireDaysMax) !== 0) && (
<span> ({gettext('Less than or equal to')} {shareLinkExpireDaysMax}{' '}{gettext('days')})</span>
)}
</Label>
</FormGroup>
)}
<FormGroup check>
<Label check>
<Input type="checkbox" checked readOnly/>{' '}{gettext('Set permission')}
@ -241,7 +286,7 @@ class GenerateShareLink extends React.Component {
<Input type="radio" name="radio1" onChange={this.setPermission('preview')} />{' '}{gettext('Preview only')}
</Label>
</FormGroup>
<Label className="err-message">{this.state.errorInfo}</Label><br />
<Label className="err-message">{gettext(this.state.errorInfo)}</Label><br />
<Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
</Form>
);

21
frontend/src/components/dialog/share-dialog.js
View File

@ -9,10 +9,11 @@ import GenerateUploadLink from './generate-upload-link';
import '../../css/share-link-dialog.css';
const propTypes = {
itemPath: PropTypes.string.isRequired,
isGroupOwnedRepo: PropTypes.bool,
itemType: PropTypes.string.isRequired, // there will be three choose: ['library', 'dir', 'file']
itemName: PropTypes.string.isRequired,
itemPath: PropTypes.string.isRequired,
toggleDialog: PropTypes.func.isRequired,
isDir: PropTypes.bool.isRequired,
repoID: PropTypes.string.isRequired
};
@ -67,10 +68,10 @@ class ShareDialog extends React.Component {
<GenerateUploadLink itemPath={this.props.itemPath} repoID={this.props.repoID} />
</TabPane>
<TabPane tabId="shareToUser">
<ShareToUser itemPath={this.props.itemPath} repoID={this.props.repoID} />
<ShareToUser isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
</TabPane>
<TabPane tabId="shareToGroup">
<ShareToGroup itemPath={this.props.itemPath} repoID={this.props.repoID} />
<ShareToGroup isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
</TabPane>
</TabContent>
</div>
@ -79,14 +80,13 @@ class ShareDialog extends React.Component {
}
renderFileContent = () => {
let activeTab = this.state.activeTab;
return (
<Fragment>
<div className="share-dialog-side">
<Nav pills vertical>
<NavItem>
<NavLink
className={activeTab === 'shareLink' ? 'active' : ''} onClick={() => {this.toggle.bind(this, 'shareLink');}}>
className="active" onClick={() => {this.toggle.bind(this, 'shareLink');}}>
{gettext('Share Link')}
</NavLink>
</NavItem>
@ -104,15 +104,14 @@ class ShareDialog extends React.Component {
}
render() {
let itemName = this.props.itemName;
let { itemType, itemName } = this.props;
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>
<ModalHeader toggle={this.props.toggleDialog}>{gettext('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()}
{(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
{itemType === 'file' && this.renderFileContent()}
</ModalBody>
</Modal>
</div>

97
frontend/src/components/dialog/share-to-group.js
View File

@ -8,6 +8,7 @@ import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api.js';
const propTypes = {
isGroupOwnedRepo: PropTypes.bool,
itemPath: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired
};
@ -26,9 +27,7 @@ class ShareToGroup extends React.Component {
}
handleSelectChange = (option) => {
this.setState({
selectedOption: option,
});
this.setState({selectedOption: option});
}
componentDidMount() {
@ -85,37 +84,76 @@ class ShareToGroup extends React.Component {
let groups = [];
let path = this.props.itemPath;
let repoID = this.props.repoID;
let isGroupOwnedRepo = this.props.isGroupOwnedRepo;
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];
if (isGroupOwnedRepo) {
seafileAPI.shareGroupOwnedRepoToGroup(repoID, 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({
errorMsg: errorMsg
});
}
this.setState({
sharedItems: this.state.sharedItems.concat(res.data.success)
// todo modify api
let items = res.data.success.map(item => {
let sharedItem = {
'group_info': { 'id': item.group_id, 'name': item.group_name},
'permission': item.permission,
'share_type': 'group',
};
return sharedItem;
});
this.setState({
sharedItems: this.state.sharedItems.concat(items),
selectedOption: null,
});
});
});
} else {
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),
selectedOption: null,
});
});
}
}
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; })
if (this.props.isGroupOwnedRepo) {
seafileAPI.deleteGroupOwnedRepoSharedGroupItem(repoID, groupID).then(() => {
this.setState({
sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; })
});
});
});
} else {
seafileAPI.deleteShareToGroupItem(repoID, path, 'group', groupID).then(() => {
this.setState({
sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; })
});
});
}
}
render() {
@ -135,6 +173,7 @@ class ShareToGroup extends React.Component {
options={this.options}
components={makeAnimated()}
inputId={'react-select-2-input'}
value={this.state.selectedOption}
/>
</td>
<td>
@ -150,14 +189,16 @@ class ShareToGroup extends React.Component {
</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>
);
})
}
<td colSpan={3}>
{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>
);
})
}
</td>
</tr>
</thead>
<GroupList items={this.state.sharedItems} deleteShareItem={this.deleteShareItem} />
@ -173,7 +214,7 @@ function GroupList(props) {
<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>
<td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.group_info.id);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
</tr>
))}
</tbody>

98
frontend/src/components/dialog/share-to-user.js
View File

@ -7,6 +7,7 @@ import { Button, Input } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api.js';
const propTypes = {
isGroupOwnedRepo: PropTypes.bool,
itemPath: PropTypes.string.isRequired,
repoID: PropTypes.string.isRequired
};
@ -92,29 +93,64 @@ class ShareToUser extends React.Component {
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];
if (this.props.isGroupOwnedRepo) {
seafileAPI.shareGroupOwnedRepoToUser(repoID, 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({errorMsg: errorMsg});
}
this.setState({
sharedItems: this.state.sharedItems.concat(res.data.success)
// todo modify api
let items = res.data.success.map(item => {
let sharedItem = {
'user_info': { 'nickname': item.user_name, 'name': item.user_email},
'permission': item.permission,
'share_type': 'user',
};
return sharedItem;
});
this.setState({
sharedItems: this.state.sharedItems.concat(items),
selectedOption: null,
});
});
});
} else {
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),
selectedOption: null,
});
});
}
}
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; })
if (this.props.isGroupOwnedRepo) {
seafileAPI.deleteGroupOwnedRepoSharedUserItem(repoID, username).then(res => {
this.setState({
sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; })
});
});
});
} else {
seafileAPI.deleteShareToUserItem(repoID, path, 'user', username).then(res => {
this.setState({
sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; })
});
});
}
}
render() {
@ -130,12 +166,16 @@ class ShareToUser extends React.Component {
<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'}
className='reviewer-select'
placeholder={gettext('Please enter 1 or more character')}
loadOptions={this.loadOptions}
onChange={this.handleSelectChange}
value={this.state.selectedOption}
isMulti
isFocused
isClearable
classNamePrefix
/>
</td>
<td>
@ -152,14 +192,16 @@ class ShareToUser extends React.Component {
</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>
);
})
}
<td colSpan={3}>
{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>
);
})
}
</td>
</tr>
</thead>
<UserList items={sharedItems} deleteShareItem={this.deleteShareItem} />
@ -175,7 +217,7 @@ function UserList(props) {
<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>
<td><a href="#" onClick={(e) => {props.deleteShareItem(e, item.user_info.name);}} className="sf2-icon-x3 sf2-x op-icon" title={gettext('Delete')}></a></td>
</tr>
))}
</tbody>

2
frontend/src/components/dir-view/dir-view.js
View File

@ -96,7 +96,7 @@ class DirView extends React.Component {
window.history.pushState({url: fileUrl, path: direntPath}, direntPath, fileUrl);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + this.state.repoID + '/file' + direntPath;
const url = siteRoot + 'lib/' + this.state.repoID + '/file' + Utils.encodePath(direntPath);
w.location.href = url;
}
}

4
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@ -477,9 +477,9 @@ class DirentListItem extends React.Component {
{this.state.isShareDialogShow &&
<ModalPortal>
<ShareDialog
isDir={dirent.isDir()}
itemPath={direntPath}
itemType={dirent.type}
itemName={dirent.name}
itemPath={direntPath}
repoID={this.props.repoID}
toggleDialog={this.onItemShare}
/>

83
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@ -5,6 +5,8 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
import { Link } from '@reach/router';
import { Utils } from '../../utils/utils';
import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
import ModalPotal from '../../components/modal-portal';
import ShareDialog from '../../components/dialog/share-dialog';
const propTypes = {
currentGroup: PropTypes.object,
@ -22,6 +24,7 @@ class SharedRepoListItem extends React.Component {
highlight: false,
isOperationShow: false,
isItemMenuShow: false,
isShowSharedDialog: false,
};
this.isDeparementOnwerGroupMember = false;
}
@ -90,7 +93,6 @@ class SharedRepoListItem extends React.Component {
'permission': repo.permission
});
//todo change to library; div-view is not compatibility
let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
return { iconUrl, iconTitle, libPath };
@ -109,7 +111,7 @@ class SharedRepoListItem extends React.Component {
this.onItemDetails();
break;
case 'Share':
this.onItemShared();
this.onItemShare();
break;
case 'Unshare':
this.onItemUnshare();
@ -132,16 +134,19 @@ class SharedRepoListItem extends React.Component {
}
onItemShare = () => {
// todo
this.setState({isShowSharedDialog: true});
}
onItemUnshare = () => {
// todo
this.props.onItemUnshare(this.props.repo);
}
onItemDelete = () => {
// todo
this.props.onItemDelete(this.props.repo);
}
toggleShareDialog = () => {
this.setState({isShowSharedDialog: false});
}
generatorOperations = () => {
@ -217,7 +222,7 @@ class SharedRepoListItem extends React.Component {
// scene one: (share, delete, itemToggle and other operations);
// scene two: (share, unshare), (share), (unshare)
let operations = this.generatorOperations();
const shareOperation = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShared}></a>;
const shareOperation = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShare}></a>;
const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemUnshare}></a>
const deleteOperation = <a href="#" className="sf2-icon-delete sf2-x op-icon" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
@ -266,32 +271,62 @@ class SharedRepoListItem extends React.Component {
renderPCUI = () => {
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
let { repo } = this.props;
let isGroupOwnedRepo = repo.owner_email.indexOf('@seafile_group') > -1;
return (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
<td><Link to={libPath}>{repo.repo_name}</Link></td>
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
<td>{repo.size}</td>
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
<td title={repo.owner_contact_email}>{repo.owner_name}</td>
</tr>
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
<td><Link to={libPath}>{repo.repo_name}</Link></td>
<td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
<td>{repo.size}</td>
<td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
<td title={repo.owner_contact_email}>{repo.owner_name}</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={repo.repo_name}
itemPath={'/'}
repoID={repo.repo_id}
isGroupOwnedRepo={isGroupOwnedRepo}
toggleDialog={this.toggleShareDialog}
/>
</ModalPotal>
)}
</Fragment>
);
}
renderMobileUI = () => {
let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
let { repo } = this.props;
let isGroupOwnedRepo = repo.owner_email.indexOf('@seafile_group') > -1;
return (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
<td>
<Link to={libPath}>{repo.repo_name}</Link><br />
<span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
<span className="item-meta-info">{repo.size}</span>
<span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
</td>
<td>{this.generatorMobileMenu()}</td>
</tr>
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
<td>
<Link to={libPath}>{repo.repo_name}</Link><br />
<span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
<span className="item-meta-info">{repo.size}</span>
<span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
</td>
<td>{this.generatorMobileMenu()}</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={repo.repo_name}
itemPath={'/'}
repoID={repo.repo_id}
isGroupOwnedRepo={isGroupOwnedRepo}
toggleDialog={this.toggleShareDialog}
/>
</ModalPotal>
)}
</Fragment>
);
}

2
frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
View File

@ -8,6 +8,7 @@ const propTypes = {
repoList: PropTypes.array.isRequired,
isShowTableThread: PropTypes.bool,
onItemUnshare: PropTypes.func.isRequired,
onItemDelete: PropTypes.func.isRequired,
};
class SharedRepoListView extends React.Component {
@ -37,6 +38,7 @@ class SharedRepoListView extends React.Component {
isItemFreezed={this.state.isItemFreezed}
onFreezedItem={this.onFreezedItem}
onItemUnshare={this.props.onItemUnshare}
onItemDelete={this.props.onItemDelete}
/>
);
})}

2
frontend/src/css/groups.css
View File

@ -1,4 +1,4 @@
.department-group-icon { /* for cur-view-path*/
.department-group-icon {
margin-left: 0.25rem;
color:#888;
}

2
frontend/src/css/share-link-dialog.css
View File

@ -22,12 +22,10 @@
}
.share-dialog-content label {
font-weight: bold;
padding: 0.5rem 0 0.25rem;
}
.share-dialog-content label.form-check-label {
font-weight: normal;
padding: 0.25rem 0;
}

46
frontend/src/pages/groups/group-view.js
View File

@ -152,16 +152,49 @@ class GroupView extends React.Component {
this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
}
onCreateRepo = (repo) => {
onCreateRepo = (repo, groupOwnerType) => {
let groupId = this.props.groupID;
seafileAPI.createGroupRepo(groupId, repo).then(res => {
let repo = new RepoInfo(res.data);
let repoList = this.addRepoItem(repo);
if (groupOwnerType && groupOwnerType === 'department') {
seafileAPI.createGroupOwnedLibrary(groupId, repo).then(res => { //need modify endpoint api
let object = {
repo_id: res.data.id,
repo_name: res.data.name,
owner_name: res.data.group_name,
owner_email: res.data.owner,
permission: res.data.permission,
mtime: res.data.mtime,
size: res.data.size,
encrypted: res.data.encrypted,
};
let repo = new RepoInfo(object);
let repoList = this.addRepoItem(repo);
this.setState({repoList: repoList});
}).then(() => {
//todo
});
} else {
seafileAPI.createGroupRepo(groupId, repo).then(res => {
let repo = new RepoInfo(res.data);
let repoList = this.addRepoItem(repo);
this.setState({repoList: repoList});
}).catch(() => {
//todo
});
}
this.onCreateRepoToggle();
}
onItemDelete = (repo) => {
let groupID = this.props.groupID;
seafileAPI.deleteGroupOwnedLibrary(groupID, repo.repo_id).then(() => {
let repoList = this.state.repoList.filter(item => {
return item.repo_id !== repo.repo_id;
});
this.setState({repoList: repoList});
}).catch(() => {
//todo
// todo;
});
this.onCreateRepoToggle();
}
addRepoItem = (repo) => {
@ -232,6 +265,7 @@ class GroupView extends React.Component {
repoList={this.state.repoList}
currentGroup={this.state.currentGroup}
onItemUnshare={this.onItemUnshare}
onItemDelete={this.onItemDelete}
/>
}
</div>

14
frontend/src/pages/groups/groups-view.js
View File

@ -44,6 +44,18 @@ class RepoListViewPanel extends React.Component {
});
}
onItemDelete = (repo) => {
let group = this.props.group;
seafileAPI.deleteGroupOwnedLibrary(group.id, repo.repo_id).then(() => {
let repoList = this.state.repoList.filter(item => {
return item.repo_id !== repo.repo_id;
});
this.setState({repoList: repoList});
}).catch(() => {
// todo;
});
}
render() {
let group = this.props.group;
const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
@ -60,6 +72,7 @@ class RepoListViewPanel extends React.Component {
currentGroup={this.props.group}
repoList={this.state.repoList}
onItemUnshare={this.onItemUnshare}
onItemDelete={this.onItemDelete}
/>
}
</div>
@ -178,6 +191,5 @@ const GroupsViewPropTypes = {
};
GroupsView.propTypes = GroupsViewPropTypes;
// Groups.propTypes = propTypes;
export default GroupsView;

103
frontend/src/pages/my-libs/item.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Link } from '@reach/router';
@ -8,6 +8,8 @@ import { gettext, siteRoot, storages, canGenerateShareLink, canGenerateUploadLin
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import RenameInput from '../../components/rename-input';
import ModalPotal from '../../components/modal-portal';
import ShareDialog from '../../components/dialog/share-dialog';
const propTypes = {
data: PropTypes.object.isRequired,
@ -29,6 +31,7 @@ class Item extends Component {
showOpIcon: false,
operationMenuOpen: false,
showChangeLibName: false,
isShowSharedDialog: false,
highlight: false,
};
}
@ -73,7 +76,11 @@ class Item extends Component {
share = (e) => {
e.preventDefault();
// TODO
this.setState({isShowSharedDialog: true});
}
toggleShareDialog = () => {
this.setState({isShowSharedDialog: false});
}
showDeleteItemPopup = (e) => {
@ -232,43 +239,69 @@ class Item extends Component {
);
const desktopItem = (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{this.state.showChangeLibName && (
<RenameInput
name={data.repo_name}
onRenameConfirm={this.onRenameConfirm}
onRenameCancel={this.onRenameCancel}
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{this.state.showChangeLibName && (
<RenameInput
name={data.repo_name}
onRenameConfirm={this.onRenameConfirm}
onRenameCancel={this.onRenameCancel}
/>
)}
{!this.state.showChangeLibName && data.repo_name && (
<Link to={data.url}>{data.repo_name}</Link>
)}
{!this.state.showChangeLibName && !data.repo_name &&
(gettext('Broken (please contact your administrator to fix this library)'))
}
</td>
<td>{data.repo_name ? desktopOperations : ''}</td>
<td>{Utils.formatSize({bytes: data.size})}</td>
{storages.length ? <td>{data.storage_name}</td> : null}
<td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={data.repo_name}
itemPath={'/'}
repoID={data.repo_id}
toggleDialog={this.toggleShareDialog}
/>
)}
{!this.state.showChangeLibName && data.repo_name && (
<Link to={data.url}>{data.repo_name}</Link>
)}
{!this.state.showChangeLibName && !data.repo_name &&
(gettext('Broken (please contact your administrator to fix this library)'))
}
</td>
<td>{data.repo_name ? desktopOperations : ''}</td>
<td>{Utils.formatSize({bytes: data.size})}</td>
{storages.length ? <td>{data.storage_name}</td> : null}
<td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
</tr>
</ModalPotal>
)}
</Fragment>
);
const mobileItem = (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{data.repo_name ?
<Link to={data.url}>{data.repo_name}</Link> :
gettext('Broken (please contact your administrator to fix this library)')}
<br />
<span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
<span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
</td>
<td>{data.repo_name ? mobileOperations : ''}</td>
</tr>
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{data.repo_name ?
<Link to={data.url}>{data.repo_name}</Link> :
gettext('Broken (please contact your administrator to fix this library)')}
<br />
<span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
<span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
</td>
<td>{data.repo_name ? mobileOperations : ''}</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={data.repo_name}
itemPath={'/'}
repoID={data.repo_id}
toggleDialog={this.toggleShareDialog}
/>
</ModalPotal>
)}
</Fragment>
);
return window.innerWidth >= 768 ? desktopItem : mobileItem;

11
frontend/src/pages/my-libs/my-libs.js
View File

@ -48,8 +48,17 @@ class MyLibraries extends Component {
}
onCreateRepo = (repo) => {
let permission = repo.permission;
seafileAPI.createMineRepo(repo).then((res) => {
let repo = res.data;
let repo = {
repo_id: res.data.repo_id,
repo_name: res.data.repo_name,
size: res.data.repo_size,
mtime: res.data.mtime,
owner_email: res.data.email,
encrypted: res.data.encrypted,
permission: permission,
};
this.state.items.push(repo);
this.setState({items: this.state.items});
});

4
frontend/src/repo-wiki-mode.js
View File

@ -334,7 +334,7 @@ class Wiki extends Component {
this.showFile(node.path);
}
} else {
let url = siteRoot + 'lib/' + item.repo_id + '/file' + item.path;
let url = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.path);
let newWindow = window.open('about:blank');
newWindow.location.href = url;
}
@ -367,7 +367,7 @@ class Wiki extends Component {
this.showDir(node.path);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + node.path;
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(node.path);
w.location.href = url;
}
}

4
frontend/src/utils/utils.js
View File

@ -147,7 +147,9 @@ export const Utils = {
return encodeURIComponent(e);
}).join('/');
*/
if (!path) {
return '';
}
var path_arr = path.split('/');
var path_arr_ = [];
for (var i = 0, len = path_arr.length; i < len; i++) {

4
frontend/src/wiki.js
View File

@ -133,7 +133,7 @@ class Wiki extends Component {
this.enterViewFileState(tree, node, node.path);
}
} else {
let url = siteRoot + 'lib/' + item.repo_id + '/file' + item.path;
let url = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.path);
let newWindow = window.open('about:blank');
newWindow.location.href = url;
}
@ -161,7 +161,7 @@ class Wiki extends Component {
this.exitViewFileState(tree, node);
} else {
const w=window.open('about:blank');
const url = siteRoot + 'lib/' + repoID + '/file' + node.path;
const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(node.path);
w.location.href = url;
}
}

2
seahub/urls.py
View File

@ -204,7 +204,7 @@ urlpatterns = [
url(r'^shared-libs/$', react_fake_view, name="shared_libs"),
url(r'^my-libs/$', react_fake_view, name="my_libs"),
url(r'^groups/$', react_fake_view, name="groups"),
url(r'^group/(?P<group_id>\d+)/$', react_group, name="group"),
url(r'^group/.*$', react_fake_view, name="group"),
url(r'^library/.*$', react_fake_view, name="lib_view"),
url(r'^my-libs/deleted/$', react_fake_view, name="my_libs_deleted"),