haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 16:31:13 +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

107
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) {
this.setState({errMessage: message});
return;
}
if (filePath && direntPath.length > filePath.length && direntPath.indexOf(filePath) > -1) {
// copy the dirent to itself. eg: A/B -> A/B
if (selectedPath && direntPath === selectedPath) {
this.setState({errMessage: message});
return;
}
if ( filePath && filePath.length > direntPath.length && filePath.indexOf(direntPath) > -1) {
// copy the dirent to current path
if (selectedPath && this.props.path === 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 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:');
title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
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 = () => {
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) && 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 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, filePath } = this.state;
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) {
// 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 && Utils.getDirName(direntPath) === 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 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:');
title = title.replace('{placeholder}', '<span class="sf-font">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
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}
/>

208
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,69 +55,50 @@ class DirentListView extends React.Component {
}
return (
<Fragment>
<table>
<thead>
<tr>
<th width="3%" className="select"><input type="checkbox" className="vam" /></th>
<th width="3%"></th>
<th width="5%"></th>
<th width="35%">{gettext('Name')}</th>
<th width="10%"></th>
<th width="20%"></th>
<th width="11%">{gettext('Size')}</th>
<th width="13%">{gettext('Last Update')}</th>
</tr>
</thead>
<tbody>
{
direntList.length !== 0 && direntList.map((dirent, index) => {
return (
<DirentListItem
key={index}
dirent={dirent}
path={this.props.path}
currentRepo={this.props.currentRepo}
isRepoOwner={this.props.isRepoOwner}
onItemClick={this.props.onItemClick}
onRenameMenuItemClick={this.onRenameMenuItemClick}
onItemDelete={this.props.onItemDelete}
onItemRename={this.props.onItemRename}
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>
<table>
<thead>
<tr>
<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>
<th width="10%"></th>
<th width="20%"></th>
<th width="11%">{gettext('Size')}</th>
<th width="13%">{gettext('Last Update')}</th>
</tr>
</thead>
<tbody>
{
direntList.length !== 0 && direntList.map((dirent, index) => {
return (
<DirentListItem
key={index}
dirent={dirent}
path={this.props.path}
currentRepo={this.props.currentRepo}
isRepoOwner={this.props.isRepoOwner}
onItemClick={this.props.onItemClick}
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}
onItemDetails={this.onItemDetails}
/>
);
})
}
</tbody>
</table>
);
}
}