haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 17:33:18 +00:00
Code Issues Releases Wiki Activity

Wiki mutiple chioce (#2559)

Browse Source
This commit is contained in:
杨顺强
2018-11-23 20:19:42 +08:00
committed by Daniel Pan
parent e163217419
commit 9a34b1d1cd
10 changed files with 610 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/package-lock.json generated
View File

@@ -180,7 +180,7 @@
"dependencies": {
"reactstrap": {
"version": "5.0.0",
"resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
"integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==",
"requires": {
"classnames": "^2.2.3",
@@ -3506,7 +3506,7 @@
},
"engine.io-client": {
"version": "3.2.1",
"resolved": "http://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz",
"integrity": "sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==",
"requires": {
"component-emitter": "1.2.1",
@@ -4478,9 +4478,9 @@
"integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
},
"follow-redirects": {
"version": "1.5.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
"integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
},
@@ -9917,7 +9917,7 @@
},
"react-popper": {
"version": "0.8.3",
"resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
"integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
"requires": {
"popper.js": "^1.12.9",
@@ -10753,9 +10753,9 @@
}
},
"seafile-js": {
"version": "0.2.38",
"resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.38.tgz",
"integrity": "sha512-MBRa/Pw5UYX8W4Mf3y7xTJ0FLDmDSSIb/rr37FeMO8h+iXk1ZNBUPq+zkV8azL40mNeMYSrU0L9Sp5ETQ+owIw==",
"version": "0.2.39",
"resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.39.tgz",
"integrity": "sha512-qb6mNzcGCgv+iCuR3eya0aW/JWN17xrTBRc1xyutQwFFptasJzOfbsmVJXtqHfFVe/EbLHSw85nQzmaJqsCVJA==",
"requires": {
"axios": "^0.18.0",
"form-data": "^2.3.2",
@@ -11070,7 +11070,7 @@
},
"socket.io-parser": {
"version": "3.2.0",
"resolved": "http://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz",
"integrity": "sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==",
"requires": {
"component-emitter": "1.2.1",

2
frontend/package.json
View File

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

97
frontend/src/components/dialog/copy-dirent-dialog.js
View File

@@ -6,9 +6,13 @@ import { Utils } from '../../utils/utils';
import FileChooser from '../file-chooser/file-chooser';
const propTypes = {
path: PropTypes.string.isRequired,
direntPath: PropTypes.string,
dirent: PropTypes.object.isRequired,
dirent: PropTypes.object,
isMutipleOperation: PropTypes.bool.isRequired,
selectedDirentList: PropTypes.array.isRequired,
onItemCopy: PropTypes.func.isRequired,
onItemsCopy: PropTypes.func.isRequired,
onCancelCopy: PropTypes.func.isRequired,
};
@@ -19,7 +23,7 @@ class CopyDirent extends React.Component {
super(props);
this.state = {
repo: null,
filePath: '',
selectedPath: '',
errMessage: '',
};
}
@@ -32,38 +36,95 @@ class CopyDirent extends React.Component {
}
handleSubmit = () => {
if (this.props.isMutipleOperation) {
this.copyItems();
} else {
this.copyItem();
}
}
copyItems = () => {
let { repo, selectedPath } = this.state;
let message = gettext('Invalid destination path');
if (!repo || (repo.repo_id === repoID) && selectedPath === '') {
this.setState({errMessage: message});
return;
}
let selectedDirentList = this.props.selectedDirentList;
let direntPaths = [];
selectedDirentList.forEach(dirent => {
let path = Utils.joinPath(this.props.path, dirent.name);
direntPaths.push(path);
});
// copy dirents to one of them. eg: A/B, A/C -> A/B
if (direntPaths.some(direntPath => { return direntPath === selectedPath})) {
this.setState({errMessage: message});
return;
}
// copy dirents to current path
if (selectedPath && selectedPath === this.props.path) {
this.setState({errMessage: message});
return;
}
// copy dirents to one of their child. eg: A/B, A/D -> A/B/C
let copyDirentPath = '';
let isChildPath = direntPaths.some(direntPath => {
let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
if (flag) {
copyDirentPath = direntPath;
}
return flag;
})
if (isChildPath) {
message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
message = message.replace('%(src)s', copyDirentPath);
message = message.replace('%(des)s', selectedPath);
this.setState({errMessage: message});
return;
}
this.props.onItemsCopy(repo, selectedPath);
this.toggle();
}
copyItem = () => {
let { direntPath } = this.props;
let { repo, filePath } = this.state;
let { repo, selectedPath } = this.state;
let message = 'Invalid destination path';
if (!repo || (repo.repo_id === repoID && filePath === '')) {
if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
this.setState({errMessage: message});
return;
}
if (filePath && direntPath === filePath) {
// copy the dirent to itself. eg: A/B -> A/B
if (selectedPath && direntPath === selectedPath) {
this.setState({errMessage: message});
return;
}
if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
// copy the dirent to current path
if (selectedPath && this.props.path === selectedPath) {
this.setState({errMessage: message});
return;
}
if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
// copy the dirent to it's child. eg: A/B -> A/B/C
if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
message = gettext('Can not copy directory %(src)s to its subdirectory %(des)s');
message = message.replace('%(src)s', direntPath);
message = message.replace('%(des)s', filePath);
message = message.replace('%(des)s', selectedPath);
this.setState({errMessage: message});
return;
}
if (filePath === '') {
filePath = '/';
}
this.props.onItemCopy(repo, direntPath, filePath);
this.props.onItemCopy(repo, direntPath, selectedPath);
this.toggle();
}
@@ -71,10 +132,10 @@ class CopyDirent extends React.Component {
this.props.onCancelCopy();
}
onDirentItemClick = (repo, filePath) => {
onDirentItemClick = (repo, selectedPath) => {
this.setState({
repo: repo,
filePath: filePath,
selectedPath: selectedPath,
errMessage: '',
});
}
@@ -82,14 +143,18 @@ class CopyDirent extends React.Component {
onRepoItemClick = (repo) => {
this.setState({
repo: repo,
filePath: '',
selectedPath: '/',
errMessage: ''
});
}
render() {
let title = gettext('Copy {placeholder} to:');
if (!this.props.isMutipleOperation) {
title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
} else {
title = gettext("Copy selected item(s) to:");
}
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>

100
frontend/src/components/dialog/move-dirent-dialog.js
View File

@@ -6,9 +6,13 @@ import { Utils } from '../../utils/utils';
import FileChooser from '../file-chooser/file-chooser';
const propTypes = {
path: PropTypes.string.isRequired,
direntPath: PropTypes.string,
dirent: PropTypes.object.isRequired,
dirent: PropTypes.object,
isMutipleOperation: PropTypes.bool.isRequired,
selectedDirentList: PropTypes.array.isRequired,
onItemMove: PropTypes.func.isRequired,
onItemsMove: PropTypes.func.isRequired,
onCancelMove: PropTypes.func.isRequired,
};
@@ -19,7 +23,7 @@ class MoveDirent extends React.Component {
super(props);
this.state = {
repo: null,
filePath: '',
selectedPath: '',
errMessage: '',
};
}
@@ -32,37 +36,95 @@ class MoveDirent extends React.Component {
}
handleSubmit = () => {
let { direntPath } = this.props;
let { repo, filePath } = this.state;
if (this.props.isMutipleOperation) {
this.moveItems();
} else {
this.moveItem();
}
}
moveItems = () => {
let { repo, selectedPath } = this.state;
let message = gettext('Invalid destination path');
if (!repo || (repo.repo_id === repoID && filePath === '')) {
if (!repo || (repo.repo_id === repoID) && selectedPath === '') {
this.setState({errMessage: message});
return;
}
if (filePath && direntPath === filePath) {
let selectedDirentList = this.props.selectedDirentList;
let direntPaths = [];
selectedDirentList.forEach(dirent => {
let path = Utils.joinPath(this.props.path, dirent.name);
direntPaths.push(path);
});
// copy dirents to one of them. eg: A/B, A/C -> A/B
if (direntPaths.some(direntPath => { return direntPath === selectedPath})) {
this.setState({errMessage: message});
return;
}
if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
// copy dirents to current path
if (selectedPath && selectedPath === this.props.path) {
this.setState({errMessage: message});
return;
}
if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
// copy dirents to one of their child. eg: A/B, A/D -> A/B/C
let moveDirentPath = '';
let isChildPath = direntPaths.some(direntPath => {
let flag = selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1;
if (flag) {
moveDirentPath = direntPath;
}
return flag;
})
if (isChildPath) {
message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
message = message.replace('%(src)s', moveDirentPath);
message = message.replace('%(des)s', selectedPath);
this.setState({errMessage: message});
return;
}
this.props.onItemsMove(repo, selectedPath);
this.toggle();
}
moveItem = () => {
let { direntPath } = this.props;
let { repo, selectedPath } = this.state;
let message = gettext('Invalid destination path');
if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
this.setState({errMessage: message});
return;
}
// copy the dirent to itself. eg: A/B -> A/B
if (selectedPath && direntPath === selectedPath) {
this.setState({errMessage: message});
return;
}
// copy the dirent to current path
if (selectedPath && Utils.getDirName(direntPath) === selectedPath) {
this.setState({errMessage: message});
return;
}
// copy the dirent to it's child. eg: A/B -> A/B/C
if ( selectedPath && selectedPath.length > direntPath.length && selectedPath.indexOf(direntPath) > -1) {
message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
message = message.replace('%(src)s', direntPath);
message = message.replace('%(des)s', filePath);
message = message.replace('%(des)s', selectedPath);
this.setState({errMessage: message});
return;
}
if (filePath === '') {
filePath = '/';
}
this.props.onItemMove(repo, direntPath, filePath);
this.props.onItemMove(repo, direntPath, selectedPath);
this.toggle();
}
@@ -70,10 +132,10 @@ class MoveDirent extends React.Component {
this.props.onCancelMove();
}
onDirentItemClick = (repo, filePath) => {
onDirentItemClick = (repo, selectedPath) => {
this.setState({
repo: repo,
filePath: filePath,
selectedPath: selectedPath,
errMessage: '',
});
}
@@ -81,14 +143,18 @@ class MoveDirent extends React.Component {
onRepoItemClick = (repo) => {
this.setState({
repo: repo,
filePath: '',
selectedPath: '/',
errMessage: ''
});
}
render() {
let title = gettext('Move {placeholder} to:');
if (!this.props.isMutipleOperation) {
title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
} else {
title = gettext("Move selected item(s) to:");
}
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>

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

@@ -14,12 +14,13 @@ const propTypes = {
onItemClick: PropTypes.func.isRequired,
onFreezedItem: PropTypes.func.isRequired,
onUnfreezedItem: PropTypes.func.isRequired,
onRenameMenuItemClick: PropTypes.func.isRequired,
onItemRenameToggle: PropTypes.func.isRequired,
onItemSelected: PropTypes.func.isRequired,
onItemDelete: PropTypes.func.isRequired,
onItemRename: PropTypes.func.isRequired,
onItemDownload: PropTypes.func.isRequired,
onDirentItemMove: PropTypes.func.isRequired,
onDirentItemCopy: PropTypes.func.isRequired,
onItemMoveToggle: PropTypes.func.isRequired,
onItemCopyToggle: PropTypes.func.isRequired,
onItemDetails: PropTypes.func.isRequired,
updateDirent: PropTypes.func.isRequired,
currentRepo: PropTypes.object,
@@ -108,7 +109,7 @@ class DirentListItem extends React.Component {
//buiness handler
onItemSelected = () => {
//todos;
this.props.onItemSelected(this.props.dirent);
}
onItemStarred = () => {
@@ -141,16 +142,16 @@ class DirentListItem extends React.Component {
this.props.onItemDelete(this.props.dirent);
}
onItemMenuItemClick = (operation) => {
onMenuItemClick = (operation) => {
switch(operation) {
case 'Rename':
this.onRenameMenuItemClick();
this.onItemRenameToggle();
break;
case 'Move':
this.onDirentItemMove();
this.onItemMoveToggle();
break;
case 'Copy':
this.onDirentItemCopy();
this.onItemCopyToggle();
break;
case 'Permission':
this.onPermissionItem();
@@ -184,8 +185,8 @@ class DirentListItem extends React.Component {
}
}
onRenameMenuItemClick = () => {
this.props.onRenameMenuItemClick(this.props.dirent);
onItemRenameToggle = () => {
this.props.onItemRenameToggle(this.props.dirent);
this.setState({
isOperationShow: false,
isItemMenuShow: false,
@@ -222,15 +223,15 @@ class DirentListItem extends React.Component {
this.props.onUnfreezedItem();
}
onDirentItemMove = () => {
onItemMoveToggle = () => {
let direntPath = this.getDirentPath(this.props.dirent);
this.props.onDirentItemMove(this.props.dirent, direntPath);
this.props.onItemMoveToggle(this.props.dirent, direntPath);
this.onItemMenuHide();
}
onDirentItemCopy = () => {
onItemCopyToggle = () => {
let direntPath = this.getDirentPath(this.props.dirent);
this.props.onDirentItemCopy(this.props.dirent, direntPath);
this.props.onItemCopyToggle(this.props.dirent, direntPath);
this.onItemMenuHide();
}
@@ -309,7 +310,7 @@ class DirentListItem extends React.Component {
return (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<td className="select">
<input type="checkbox" className="vam" />
<input type="checkbox" className="vam" onChange={this.onItemSelected} checked={dirent.isSelected}/>
</td>
<td className="star" onClick={this.onItemStarred}>
{dirent.starred !== undefined && !dirent.starred && <i className="far fa-star empty"></i>}
@@ -359,7 +360,7 @@ class DirentListItem extends React.Component {
<DirentMenu
dirent={this.props.dirent}
menuPosition={this.state.menuPosition}
onMenuItemClick={this.onItemMenuItemClick}
onMenuItemClick={this.onMenuItemClick}
currentRepo={this.props.currentRepo}
isRepoOwner={this.props.isRepoOwner}
/>

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

@@ -1,27 +1,25 @@
import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { gettext, repoID } from '../../utils/constants';
import URLDecorator from '../../utils/url-decorator';
import editorUtilities from '../../utils/editor-utilties';
import { gettext } from '../../utils/constants';
import Loading from '../loading';
import DirentListItem from './dirent-list-item';
import ZipDownloadDialog from '../dialog/zip-download-dialog';
import MoveDirentDialog from '../dialog/move-dirent-dialog';
import CopyDirentDialog from '../dialog/copy-dirent-dialog';
const propTypes = {
path: PropTypes.string.isRequired,
direntList: PropTypes.array.isRequired,
onItemDelete: PropTypes.func.isRequired,
onAllItemSelected: PropTypes.func.isRequired,
onItemSelected: PropTypes.func.isRequired,
onItemRename: PropTypes.func.isRequired,
onItemClick: PropTypes.func.isRequired,
onItemMove: PropTypes.func.isRequired,
onItemCopy: PropTypes.func.isRequired,
onItemMoveToggle: PropTypes.func.isRequired,
onItemCopyToggle: PropTypes.func.isRequired,
onItemDetails: PropTypes.func.isRequired,
updateDirent: PropTypes.func.isRequired,
isDirentListLoading: PropTypes.bool.isRequired,
isRepoOwner: PropTypes.bool,
currentRepo: PropTypes.object,
isAllItemSelected: PropTypes.bool.isRequired,
};
class DirentListView extends React.Component {
@@ -29,13 +27,7 @@ class DirentListView extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: 0,
isItemFreezed: false,
isProgressDialogShow: false,
isMoveDialogShow: false,
isCopyDialogShow: false,
currentDirent: false,
direntPath: '',
};
}
@@ -47,91 +39,14 @@ class DirentListView extends React.Component {
this.setState({isItemFreezed: false});
}
onRenameMenuItemClick = () => {
onItemRenameToggle = () => {
this.onFreezedItem();
}
onDirentItemMove = (dirent, direntPath) => {
this.setState({
isMoveDialogShow: true,
currentDirent: dirent,
direntPath: direntPath
});
}
onDirentItemCopy = (dirent, direntPath) => {
this.setState({
isCopyDialogShow: true,
currentDirent: dirent,
direntPath: direntPath
});
}
onItemMove = (repo, direntPath, moveToDirentPath) => {
this.props.onItemMove(repo, direntPath, moveToDirentPath);
}
onCancelMove = () => {
this.setState({isMoveDialogShow: false});
}
onItemCopy = (repo, direntPath, copyToDirentPath) => {
this.props.onItemCopy(repo, direntPath, copyToDirentPath);
}
onCancelCopy = () => {
this.setState({isCopyDialogShow: false});
}
onItemDetails = (dirent, direntPath) => {
this.props.onItemDetails(dirent, direntPath);
}
onItemDownload = (dirent, direntPath) => {
if (dirent.type === 'dir') {
this.setState({isProgressDialogShow: true, progress: 0});
editorUtilities.zipDownload(this.props.path, dirent.name).then(res => {
this.zip_token = res.data['zip_token'];
this.addDownloadAnimation();
this.interval = setInterval(this.addDownloadAnimation, 1000);
});
} else {
let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
location.href = url;
}
}
addDownloadAnimation = () => {
let _this = this;
let token = this.zip_token;
editorUtilities.queryZipProgress(token).then(res => {
let data = res.data;
let progress = data.total === 0 ? 100 : (data.zipped / data.total * 100).toFixed(0);
this.setState({progress: parseInt(progress)});
if (data['total'] === data['zipped']) {
this.setState({
progress: 100
});
clearInterval(this.interval);
location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
setTimeout(function() {
_this.setState({isProgressDialogShow: false});
}, 500);
}
});
}
onCancelDownload = () => {
let zip_token = this.zip_token;
editorUtilities.cancelZipTask(zip_token).then(res => {
this.setState({
isProgressDialogShow: false,
});
});
}
render() {
const { direntList } = this.props;
@@ -140,11 +55,12 @@ class DirentListView extends React.Component {
}
return (
<Fragment>
<table>
<thead>
<tr>
<th width="3%" className="select"><input type="checkbox" className="vam" /></th>
<th width="3%" className="select">
<input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
</th>
<th width="3%"></th>
<th width="5%"></th>
<th width="35%">{gettext('Name')}</th>
@@ -165,44 +81,24 @@ class DirentListView extends React.Component {
currentRepo={this.props.currentRepo}
isRepoOwner={this.props.isRepoOwner}
onItemClick={this.props.onItemClick}
onRenameMenuItemClick={this.onRenameMenuItemClick}
onItemRenameToggle={this.onItemRenameToggle}
onItemSelected={this.props.onItemSelected}
onItemDelete={this.props.onItemDelete}
onItemRename={this.props.onItemRename}
onItemMoveToggle={this.props.onItemMoveToggle}
onItemCopyToggle={this.props.onItemCopyToggle}
onItemDownload={this.props.onItemDownload}
updateDirent={this.props.updateDirent}
isItemFreezed={this.state.isItemFreezed}
onFreezedItem={this.onFreezedItem}
onUnfreezedItem={this.onUnfreezedItem}
onItemDownload={this.onItemDownload}
onDirentItemMove={this.onDirentItemMove}
onDirentItemCopy={this.onDirentItemCopy}
onItemDetails={this.onItemDetails}
updateDirent={this.props.updateDirent}
/>
);
})
}
</tbody>
</table>
{this.state.isProgressDialogShow &&
<ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
/>
}
{this.state.isMoveDialogShow &&
<MoveDirentDialog
dirent={this.state.currentDirent}
direntPath={this.state.direntPath}
onItemMove={this.props.onItemMove}
onCancelMove={this.onCancelMove}
/>
}
{this.state.isCopyDialogShow &&
<CopyDirentDialog
dirent={this.state.currentDirent}
direntPath={this.state.direntPath}
onItemCopy={this.props.onItemCopy}
onCancelCopy={this.onCancelCopy}
/>
}
</Fragment>
);
}
}

1
frontend/src/models/dirent.js
View File

@@ -9,6 +9,7 @@ class Dirent {
this.type = json.type;
this.mtime = moment.unix(json.mtime).fromNow();
this.permission = json.permission;
this.isSelected = false;
if (json.type === 'file') {
this.size = Utils.bytesToSize(json.size);
this.starred = json.starred;

192
frontend/src/pages/repo-wiki-mode/main-panel.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import URLDecorator from '../../utils/url-decorator';
import Repo from '../../models/repo';
import CommonToolbar from '../../components/toolbar/common-toolbar';
import PathToolbar from '../../components/toolbar/path-toolbar';
@@ -11,6 +12,9 @@ import DirentListView from '../../components/dirent-list-view/dirent-list-view';
import DirentDetail from '../../components/dirent-detail/dirent-details';
import CreateFolder from '../../components/dialog/create-folder-dialog';
import CreateFile from '../../components/dialog/create-file-dialog';
import ZipDownloadDialog from '../../components/dialog/zip-download-dialog';
import MoveDirentDialog from '../../components/dialog/move-dirent-dialog';
import CopyDirentDialog from '../../components/dialog/copy-dirent-dialog';
import FileUploader from '../../components/file-uploader/file-uploader';
const propTypes = {
@@ -24,13 +28,18 @@ const propTypes = {
isFileLoading: PropTypes.bool.isRequired,
isViewFile: PropTypes.bool.isRequired,
isDirentListLoading: PropTypes.bool.isRequired,
isDirentSelected: PropTypes.bool.isRequired,
isAllDirentSelected: PropTypes.bool.isRequired,
direntList: PropTypes.array.isRequired,
selectedDirentList: PropTypes.array.isRequired,
updateDirent: PropTypes.func.isRequired,
onSideNavMenuClick: PropTypes.func.isRequired,
onSearchedClick: PropTypes.func.isRequired,
onMainNavBarClick: PropTypes.func.isRequired,
onLinkClick: PropTypes.func.isRequired,
onItemClick: PropTypes.func.isRequired,
onAllDirentSelected: PropTypes.func.isRequired,
onItemSelected: PropTypes.func.isRequired,
onItemDelete: PropTypes.func.isRequired,
onItemRename: PropTypes.func.isRequired,
onItemMove: PropTypes.func.isRequired,
@@ -39,6 +48,9 @@ const propTypes = {
onAddFolder: PropTypes.func.isRequired,
switchViewMode: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
onItemsMove: PropTypes.func.isRequired,
onItemsCopy: PropTypes.func.isRequired,
onItemsDelete: PropTypes.func.isRequired,
};
class MainPanel extends Component {
@@ -54,10 +66,16 @@ class MainPanel extends Component {
createFileType: '',
isDirentDetailShow: false,
currentDirent: null,
currentFilePath: '',
direntPath: '',
currentRepo: null,
isRepoOwner: false,
progress: 0,
isProgressDialogShow: false,
isMoveDialogShow: false,
isCopyDialogShow: false,
isMutipleOperation: false,
};
this.zip_token = null;
}
componentDidMount() {
@@ -75,12 +93,6 @@ class MainPanel extends Component {
document.addEventListener('click', this.hideOperationMenu);
}
componentWillReceiveProps(nextProps) {
// if (nextProps.path !== this.props.path) {
// this.setState({isDirentDetailShow: false});
// }
}
componentWillUnmount() {
document.removeEventListener('click', this.hideOperationMenu);
}
@@ -182,7 +194,7 @@ class MainPanel extends Component {
onItemDetails = (dirent, direntPath) => {
this.setState({
currentDirent: dirent,
currentFilePath: direntPath,
direntPath: direntPath,
isDirentDetailShow: true,
});
}
@@ -210,6 +222,120 @@ class MainPanel extends Component {
}
onSelectedMoveToggle = () => {
this.setState({
isMutipleOperation: true,
isMoveDialogShow: true,
currentDirent: null,
direntPath: '',
});
}
onSelectedCopyToggle = () => {
this.setState({
isMutipleOperation: true,
isCopyDialogShow: true,
currentDirent: null,
direntPath: '',
});
}
onItemMoveToggle = (dirent, direntPath) => {
this.setState({
isMutipleOperation: false,
isMoveDialogShow: true,
currentDirent: dirent,
direntPath: direntPath,
});
}
onItemCopyToggle = (dirent, direntPath) => {
this.setState({
isMutipleOperation: false,
isCopyDialogShow: true,
currentDirent: dirent,
direntPath: direntPath
});
}
onCancelMove = () => {
this.setState({isMoveDialogShow: false});
}
onCancelCopy = () => {
this.setState({isCopyDialogShow: false});
}
onItemsDownload = () => {
let selectedDirentList = this.props.selectedDirentList;
if (selectedDirentList.length) {
if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
let direntPath = Utils.joinPath(this.props.path, selectedDirentList[0].name);
let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
location.href= url;
return;
}
let selectedDirentNames = selectedDirentList.map(dirent => {
return dirent.name;
});
this.setState({isProgressDialogShow: true, progress: 0});
seafileAPI.zipDownload(repoID, this.props.path, selectedDirentNames).then(res => {
this.zip_token = res.data['zip_token'];
this.addDownloadAnimation();
this.interval = setInterval(this.addDownloadAnimation, 1000);
});
}
}
onItemDownload = (dirent, direntPath) => {
if (dirent.type === 'dir') {
this.setState({isProgressDialogShow: true, progress: 0});
seafileAPI.zipDownload(repoID, this.props.path, dirent.name).then(res => {
this.zip_token = res.data['zip_token'];
this.addDownloadAnimation();
this.interval = setInterval(this.addDownloadAnimation, 1000);
}).catch(() => {
clearInterval(this.interval);
// Toast.error(gettext(''));
//todo;
});
} else {
let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
location.href = url;
}
}
addDownloadAnimation = () => {
let _this = this;
let token = this.zip_token;
seafileAPI.queryZipProgress(token).then(res => {
let data = res.data;
let progress = data.total === 0 ? 100 : (data.zipped / data.total * 100).toFixed(0);
this.setState({progress: parseInt(progress)});
if (data['total'] === data['zipped']) {
this.setState({
progress: 100
});
clearInterval(this.interval);
location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
setTimeout(function() {
_this.setState({isProgressDialogShow: false});
}, 500);
}
});
}
onCancelDownload = () => {
let zip_token = this.zip_token;
seafileAPI.cancelZipTask(zip_token).then(res => {
this.setState({
isProgressDialogShow: false,
});
});
}
render() {
let path = this.props.path;
path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
@@ -244,7 +370,16 @@ class MainPanel extends Component {
<div className="main-panel-top panel-top">
<div className="cur-view-toolbar border-left-show">
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
<div className="file-operation">
<div className="dir-operation">
{this.props.isDirentSelected &&
<div className="operation mutiple-dirents-operation">
<button className="btn btn-secondary operation-item op-icon sf2-icon-move" title={gettext('Move')} onClick={this.onSelectedMoveToggle}></button>
<button className="btn btn-secondary operation-item op-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onSelectedCopyToggle}></button>
<button className="btn btn-secondary operation-item op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button>
<button className="btn btn-secondary operation-item op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></button>
</div>
}
{!this.props.isDirentSelected &&
<div className="operation">
{
this.props.permission === 'rw' &&
@@ -263,6 +398,7 @@ class MainPanel extends Component {
</Fragment>
}
</div>
}
{
this.state.uploadMenuShow &&
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
@@ -321,13 +457,17 @@ class MainPanel extends Component {
onItemClick={this.props.onItemClick}
onItemDelete={this.props.onItemDelete}
onItemRename={this.props.onItemRename}
onItemMove={this.props.onItemMove}
onItemCopy={this.props.onItemCopy}
onItemDownload={this.onItemDownload}
onItemMoveToggle={this.onItemMoveToggle}
onItemCopyToggle={this.onItemCopyToggle}
onItemDetails={this.onItemDetails}
isDirentListLoading={this.props.isDirentListLoading}
updateDirent={this.props.updateDirent}
currentRepo={this.state.currentRepo}
isRepoOwner={this.state.isRepoOwner}
isAllItemSelected={this.props.isAllDirentSelected}
onAllItemSelected={this.props.onAllDirentSelected}
onItemSelected={this.props.onItemSelected}
/>
<FileUploader
ref={uploader => this.uploader = uploader}
@@ -346,7 +486,7 @@ class MainPanel extends Component {
<div className="cur-view-detail">
<DirentDetail
dirent={this.state.currentDirent}
direntPath={this.state.currentFilePath}
direntPath={this.state.direntPath}
onItemDetailsClose={this.onItemDetailsClose}
onFileTagChanged={this.onFileTagChanged}
/>
@@ -368,6 +508,34 @@ class MainPanel extends Component {
onAddFolder={this.onAddFolder}
/>
}
{this.state.isMoveDialogShow &&
<MoveDirentDialog
path={this.props.path}
isMutipleOperation={this.state.isMutipleOperation}
selectedDirentList={this.props.selectedDirentList}
dirent={this.state.currentDirent}
direntPath={this.state.direntPath}
onItemMove={this.props.onItemMove}
onItemsMove={this.props.onItemsMove}
onCancelMove={this.onCancelMove}
/>
}
{this.state.isCopyDialogShow &&
<CopyDirentDialog
path={this.props.path}
isMutipleOperation={this.state.isMutipleOperation}
selectedDirentList={this.props.selectedDirentList}
dirent={this.state.currentDirent}
direntPath={this.state.direntPath}
onItemCopy={this.props.onItemCopy}
onItemsCopy={this.props.onItemsCopy}
onCancelCopy={this.onCancelCopy}
/>
}
{this.state.isProgressDialogShow &&
<ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
/>
}
</div>
);
}

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

@@ -39,6 +39,9 @@ class Wiki extends Component {
lastModified: '',
latestContributor: '',
permission: '',
isDirentSelected: false,
isAllDirentSelected: false,
selectedDirentList: [],
};
window.onpopstate = this.onpopstate;
}
@@ -156,7 +159,7 @@ class Wiki extends Component {
let index = direntPath.lastIndexOf('/');
let dirPath = direntPath.slice(0, index + 1);
let dirName = direntPath.slice(index + 1);
seafileAPI.moveDir(repoID, repo.repo_id, copyToDirentPath, dirPath, dirName).then(() => {
seafileAPI.copyDir(repoID, repo.repo_id, copyToDirentPath, dirPath, dirName).then(() => {
this.copyTreeNode(direntPath, copyToDirentPath, repo);
let message = gettext('Successfully copied %(name)s.');
message = message.replace('%(name)s', dirName);
@@ -171,12 +174,12 @@ class Wiki extends Component {
switchViewMode = (mode) => {
let dirPath;
let tree = this.state.treeData;
let node = tree.getNodeByPath(this.state.filePath);
let node = tree.getNodeByPath(this.state.path);
if (node.isDir()) {
dirPath = this.state.filePath;
dirPath = this.state.path;
} else {
const index = this.state.filePath.lastIndexOf('/');
dirPath = this.state.filePath.substring(0, index);
const index = this.state.path.lastIndexOf('/');
dirPath = this.state.path.substring(0, index);
}
cookie.save('view_mode', mode, { path: '/' });
@@ -276,7 +279,7 @@ class Wiki extends Component {
}
return item;
});
this.setState({direnList: newDirentList});
this.setState({direntList: newDirentList});
}
onLinkClick = (event) => {
@@ -317,6 +320,7 @@ class Wiki extends Component {
onMainNavBarClick = (nodePath) => {
//just for dir
this.resetSelected();
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(nodePath);
tree.expandNode(node);
@@ -326,6 +330,7 @@ class Wiki extends Component {
}
onDirentClick = (direntPath) => {
this.resetSelected();
let tree = this.state.treeData.clone();
let node = tree.getNodeByPath(direntPath);
let parentNode = tree.findNodeParentFromTree(node);
@@ -344,6 +349,68 @@ class Wiki extends Component {
}
}
onDirentSelected = (dirent) => {
let direntList = this.state.direntList.map(item => {
if (item.name === dirent.name) {
item.isSelected = !item.isSelected;
}
return item;
});
let selectedDirentList = direntList.filter(item => {
return item.isSelected;
});
if (selectedDirentList.length) {
this.setState({isDirentSelected: true});
if (selectedDirentList.length === direntList.length) {
this.setState({
isAllDirentSelected: true,
direntList: direntList,
selectedDirentList: selectedDirentList,
});
} else {
this.setState({
isAllDirentSelected: false,
direntList: direntList,
selectedDirentList: selectedDirentList
});
}
} else {
this.setState({
isDirentSelected: false,
isAllDirentSelected: false,
direntList: direntList,
selectedDirentList: []
})
}
}
onAllDirentSelected = () => {
if (this.state.isAllDirentSelected) {
let direntList = this.state.direntList.map(item => {
item.isSelected = false;
return item;
});
this.setState({
isDirentSelected: false,
isAllDirentSelected: false,
direntList: direntList,
selectedDirentList: [],
});
} else {
let direntList = this.state.direntList.map(item => {
item.isSelected = true;
return item;
});
this.setState({
isDirentSelected: true,
isAllDirentSelected: true,
direntList: direntList,
selectedDirentList: direntList,
});
}
}
onMainPanelItemRename = (dirent, newName) => {
let path = Utils.joinPath(this.state.path, dirent.name);
this.renameItem(path, dirent.isDir(), newName);
@@ -379,7 +446,6 @@ class Wiki extends Component {
}
deleteDirent(direntPath) {
let newPath = '';
if (direntPath === this.state.path) {
// The deleted item is current item
let parentPath = Utils.getDirName(direntPath);
@@ -418,28 +484,79 @@ class Wiki extends Component {
this.setState({direntList: direntList});
}
onMoveItems = (destRepo, destDirentPath) => {
let direntPaths = this.getSelectedDirentPaths();
let dirNames = this.getSelectedDirentNames();
seafileAPI.moveDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(() => {
direntPaths.forEach(direntPath => {
this.moveTreeNode(direntPath, destDirentPath, destRepo);
this.moveDirent(direntPath);
});
let message = gettext('Successfully moved %(name)s.');
message = message.replace('%(name)s', dirNames);
Toast.success(message);
}).catch(() => {
let message = gettext('Failed to move %(name)s');
message = message.replace('%(name)s', dirNames);
Toast.error(message);
})
}
onCopyItems = (destRepo, destDirentPath) => {
let direntPaths = this.getSelectedDirentPaths();
let dirNames = this.getSelectedDirentNames();
seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(() => {
direntPaths.forEach(direntPath => {
this.copyTreeNode(direntPath, destDirentPath, destRepo);
});
let message = gettext('Successfully copied %(name)s.');
message = message.replace('%(name)s', dirNames);
Toast.success(message);
}).catch(() => {
let message = gettext('Failed to copy %(name)s');
message = message.replace('%(name)s', dirNames);
Toast.error(message);
})
}
onDeleteItems = () => {
let direntPaths = this.getSelectedDirentPaths();
let dirNames = this.getSelectedDirentNames();
seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => {
direntPaths.forEach(direntPath => {
let node = this.state.treeData.getNodeByPath(direntPath);
this.deleteTreeNode(node);
this.deleteDirent(direntPath);
});
});
}
onFileTagChanged = (dirent, direntPath) => {
seafileAPI.listFileTags(repoID, direntPath).then(res => {
let fileTags = res.data.file_tags.map(item => {
return new FileTag(item);
})
});
this.updateDirent(dirent, 'file_tags', fileTags);
})
});
}
onTreeNodeClick = (node) => {
this.resetSelected();
if (!this.state.pathExist) {
this.setState({pathExist: true});
}
if (node instanceof Node && node.isMarkdown()) {
let tree = this.state.treeData.clone();
this.setState({treeData: tree});
if (node.path !== this.state.filePath) {
if (node.path !== this.state.path) {
this.showFile(node.path);
}
} else if (node instanceof Node && node.isDir()) {
let tree = this.state.treeData.clone();
if (this.state.filePath === node.path) {
if (this.state.path === node.path) {
if (node.isExpanded) {
tree.collapseNode(node);
} else {
@@ -447,7 +564,7 @@ class Wiki extends Component {
}
}
this.setState({treeData: tree});
if (node.path !== this.state.filePath) {
if (node.path !== this.state.path) {
this.showDir(node.path);
}
} else {
@@ -617,6 +734,29 @@ class Wiki extends Component {
return path;
}
getSelectedDirentPaths = () => {
let paths = [];
this.state.selectedDirentList.forEach(selectedDirent => {
paths.push(Utils.joinPath(this.state.path, selectedDirent.name));
});
return paths;
}
getSelectedDirentNames = () => {
let names = [];
this.state.selectedDirentList.forEach(selectedDirent => {
names.push(selectedDirent.name);
});
return names;
}
resetSelected = () => {
this.setState({
isDirentSelected: false,
isAllDirentSelected: false,
});
}
render() {
return (
<div id="main" className="wiki-main">
@@ -644,6 +784,7 @@ class Wiki extends Component {
lastModified={this.state.lastModified}
latestContributor={this.state.latestContributor}
direntList={this.state.direntList}
selectedDirentList={this.state.selectedDirentList}
switchViewMode={this.switchViewMode}
updateDirent={this.updateDirent}
onLinkClick={this.onLinkClick}
@@ -651,6 +792,7 @@ class Wiki extends Component {
onSearchedClick={this.onSearchedClick}
onMainNavBarClick={this.onMainNavBarClick}
onItemClick={this.onDirentClick}
onItemSelected={this.onDirentSelected}
onItemDelete={this.onMainPanelItemDelete}
onItemRename={this.onMainPanelItemRename}
onItemMove={this.onMoveItem}
@@ -658,6 +800,12 @@ class Wiki extends Component {
onAddFile={this.onAddFile}
onAddFolder={this.onAddFolder}
onFileTagChanged={this.onFileTagChanged}
isDirentSelected={this.state.isDirentSelected}
isAllDirentSelected={this.state.isAllDirentSelected}
onAllDirentSelected={this.onAllDirentSelected}
onItemsMove={this.onMoveItems}
onItemsCopy={this.onCopyItems}
onItemsDelete={this.onDeleteItems}
/>
</div>
);

2
media/css/seahub_react.css
View File

@@ -78,6 +78,8 @@
.sf2-icon-cancel:before {content:"\e01f"}
.sf2-icon-tag:before {content:"\e037"}
.sf2-icon-minus:before {content:"\e01c"}
.sf2-icon-move:before {content:"\e029"}
.sf2-icon-copy:before {content:"\e028"}
/* common class and element style*/
a { color:#eb8205; }