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

Feature/update copy dialog (#7047)

Browse Source 
* update copy dirent dialog

* optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2024-11-18 21:21:33 +08:00
committed by GitHub
parent 2531c48f2d
commit e999be4320
12 changed files with 277 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
import FileChooser from '../file-chooser';
import { gettext } from '../../utils/constants';
import { Modal, ModalHeader } from 'reactstrap';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import Searcher from '../file-chooser/searcher';
import SelectDirentBody from './select-dirent-body';
import { MODE_TYPE_MAP } from '../../constants';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, isPro } from '../../utils/constants';
import { RepoInfo } from '../../models';
import toaster from '../toast';
const propTypes = {
path: PropTypes.string.isRequired,
@@ -15,21 +21,70 @@ const propTypes = {
onItemsCopy: PropTypes.func,
onCancelCopy: PropTypes.func.isRequired,
repoEncrypted: PropTypes.bool.isRequired,
onAddFolder: PropTypes.func,
};
// need dirent file Path；
class CopyDirent extends React.Component {
constructor(props) {
super(props);
this.state = {
repo: { repo_id: this.props.repoID },
mode: MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
currentRepo: { repo_id: this.props.repoID },
selectedRepo: { repo_id: this.props.repoID },
repoList: [],
selectedPath: this.props.path,
selectedSearchedRepo: null,
selectedSearchedItem: { repoID: '', filePath: '' },
searchStatus: '',
searchResults: [],
showSearchBar: false,
errMessage: '',
mode: 'only_current_library',
initToShowChildren: false,
};
this.lastMode = MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY;
}
componentDidMount() {
this.initialize();
}
initialize = async () => {
try {
const res = await seafileAPI.getRepoInfo(this.props.repoID);
const repo = new RepoInfo(res.data);
this.setState({ currentRepo: repo });
await this.fetchRepoList();
} catch (error) {
const errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
}
};
fetchRepoList = async () => {
try {
const res = await seafileAPI.listRepos();
const repos = res.data.repos;
const repoList = [];
const uniqueRepoIds = new Set();
for (const repo of repos) {
if (repo.permission === 'rw' && repo.repo_id !== this.props.repoID && !uniqueRepoIds.has(repo.repo_id)) {
uniqueRepoIds.add(repo.repo_id);
repoList.push(repo);
}
}
const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
const selectedRepo = sortedRepoList.find((repo) => repo.repo_id === this.props.repoID);
this.setState({
repoList: sortedRepoList,
repo: selectedRepo,
});
} catch (error) {
const errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
}
};
handleSubmit = () => {
if (this.props.isMultipleOperation) {
this.copyItems();
@@ -39,10 +94,10 @@ class CopyDirent extends React.Component {
};
copyItems = () => {
let { repo, selectedPath } = this.state;
let { selectedRepo, selectedPath } = this.state;
let message = gettext('Invalid destination path');
if (!repo || selectedPath === '') {
if (!selectedRepo || selectedPath === '') {
this.setState({ errMessage: message });
return;
}
@@ -78,16 +133,16 @@ class CopyDirent extends React.Component {
return;
}
this.props.onItemsCopy(repo, selectedPath);
this.props.onItemsCopy(selectedRepo, selectedPath, true);
this.toggle();
};
copyItem = () => {
let { repo, repoID, selectedPath } = this.state;
let { repoID, selectedRepo, selectedPath } = this.state;
let direntPath = Utils.joinPath(this.props.path, this.props.dirent.name);
let message = gettext('Invalid destination path');
if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
if (!selectedRepo || (selectedRepo.repo_id === repoID && selectedPath === '')) {
this.setState({ errMessage: message });
return;
}
@@ -107,7 +162,7 @@ class CopyDirent extends React.Component {
return;
}
this.props.onItemCopy(repo, this.props.dirent, selectedPath, this.props.path);
this.props.onItemCopy(selectedRepo, this.props.dirent, selectedPath, this.props.path, true);
this.toggle();
};
@@ -115,6 +170,113 @@ class CopyDirent extends React.Component {
this.props.onCancelCopy();
};
selectRepo = (repo) => {
this.setState({ selectedRepo: repo });
};
selectSearchedRepo = (repo) => {
this.setState({ selectedSearchedRepo: repo });
};
setSelectedPath = (selectedPath) => {
this.setState({ selectedPath });
};
setErrMessage = (message) => {
this.setState({ errMessage: message });
};
updateMode = (mode) => {
if (mode === this.state.mode) return;
if (mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
this.lastMode = mode;
}
const isShowChildren = mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY || mode === MODE_TYPE_MAP.SEARCH_RESULTS;
this.setState({
mode,
initToShowChildren: isShowChildren,
});
if (this.state.mode === MODE_TYPE_MAP.SEARCH_RESULTS) {
this.setState({
selectedSearchedRepo: null,
searchResults: [],
showSearchBar: false,
});
}
if (this.state.selectedSearchedRepo && mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
this.setState({
selectedSearchedRepo: null,
searchResults: [],
showSearchBar: false,
});
}
this.setState({ selectedSearchedItem: { repoID: '', filePath: '' } });
};
onUpdateSearchStatus = (status) => {
this.setState({ searchStatus: status });
};
onUpdateSearchResults = (results) => {
this.setState({
searchResults: results
});
};
onOpenSearchBar = () => {
this.setState({ showSearchBar: true });
};
onCloseSearchBar = () => {
const mode = this.lastMode;
this.setState({
mode,
searchStatus: '',
searchResults: [],
selectedSearchedRepo: null,
showSearchBar: false,
initToShowChildren: mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
});
};
onSearchedItemClick = (item) => {
item['type'] = item.is_dir ? 'dir' : 'file';
let repo = new RepoInfo(item);
this.onDirentItemClick(repo, item.path, item);
};
onSearchedItemDoubleClick = (item) => {
if (item.type !== 'dir') return;
seafileAPI.getRepoInfo(item.repo_id).then(res => {
const repoInfo = new RepoInfo(res.data);
const path = item.path.substring(0, item.path.length - 1);
const mode = item.repo_id === this.props.repoID ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
this.lastMode = mode;
this.setState({
mode,
selectedRepo: repoInfo,
selectedSearchedRepo: repoInfo,
selectedPath: path,
selectedSearchedItem: { repoID: item.repo_id, filePath: path },
showSearchBar: mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES,
initToShowChildren: true,
});
}).catch(err => {
const errMessage = Utils.getErrorMsg(err);
toaster.danger(errMessage);
});
};
selectSearchedItem = (item) => {
this.setState({ selectedSearchedItem: item });
};
onDirentItemClick = (repo, selectedPath) => {
this.setState({
repo: repo,
@@ -131,10 +293,6 @@ class CopyDirent extends React.Component {
});
};
onSelectedMode = (mode) => {
this.setState({ mode: mode });
};
renderTitle = () => {
const { dirent, isMultipleOperation } = this.props;
let title = gettext('Copy {placeholder} to');
@@ -147,48 +305,68 @@ class CopyDirent extends React.Component {
};
render() {
const { dirent, selectedDirentList, isMultipleOperation, repoID, path } = this.props;
const { mode, errMessage } = this.state;
const { dirent, selectedDirentList, isMultipleOperation, path } = this.props;
const { mode, currentRepo, selectedRepo, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo } = this.state;
const copiedDirent = dirent || selectedDirentList[0];
const { permission } = copiedDirent;
const { isCustomPermission } = Utils.getUserPermission(permission);
const LibraryOption = ({ mode, label }) => (
<div className={`repo-list-item ${this.state.mode === mode ? 'active' : ''}`} onClick={() => this.onSelectedMode(mode)}>
<span className='library'>{label}</span>
</div>
);
return (
<Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex mw-100"></div>}
</ModalHeader>
<Row>
<Col className='repo-list-col border-right'>
<LibraryOption mode='only_current_library' label={gettext('Current Library')} />
{!isCustomPermission && <LibraryOption mode='only_other_libraries' label={gettext('Other Libraries')} />}
<LibraryOption mode='recently_used' label={gettext('Recently Used')} />
</Col>
<Col className='file-list-col'>
<ModalBody>
<FileChooser
repoID={repoID}
currentPath={path}
onDirentItemClick={this.onDirentItemClick}
onRepoItemClick={this.onRepoItemClick}
mode={mode}
hideLibraryName={false}
<Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle} close={
<div className="header-close-list">
<span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
</div>
}>
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
{isPro && (
showSearchBar ? (
<Searcher
onUpdateMode={this.updateMode}
onUpdateSearchStatus={this.onUpdateSearchStatus}
onUpdateSearchResults={this.onUpdateSearchResults}
onClose={this.onCloseSearchBar}
/>
) : (
<IconBtn
iconName="search"
size={24}
className="search"
onClick={this.onOpenSearchBar}
role="button"
onKeyDown={() => {}}
tabIndex={0}
/>
)
)}
</ModalHeader>
<SelectDirentBody
mode={mode}
currentRepo={currentRepo}
selectedRepo={selectedRepo}
currentPath={path}
repoList={this.state.repoList}
selectedPath={selectedPath}
isSupportOtherLibraries={!isCustomPermission}
onCancel={this.toggle}
selectRepo={this.selectRepo}
setSelectedPath={this.setSelectedPath}
setErrMessage={this.setErrMessage}
handleSubmit={this.handleSubmit}
onUpdateMode={this.updateMode}
searchStatus={searchStatus}
searchResults={searchResults}
selectedSearchedItem={this.state.selectedSearchedItem}
onSelectedSearchedItem={this.selectSearchedItem}
onSearchedItemClick={this.onSearchedItemClick}
onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
selectedSearchedRepo={selectedSearchedRepo}
onSelectSearchedRepo={this.selectSearchedRepo}
onAddFolder={this.props.onAddFolder}
initToShowChildren={this.state.initToShowChildren}
fetchRepoInfo={this.fetchRepoInfo}
/>
{errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
</Col>
</Row>
</Modal>
);
}

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

@@ -9,15 +9,7 @@ import Searcher from '../file-chooser/searcher';
import { RepoInfo } from '../../models';
import { seafileAPI } from '../../utils/seafile-api';
import toaster from '../toast';
export const MODE_TYPE_MAP = {
CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
ONLY_CURRENT_LIBRARY: 'only_current_library',
ONLY_ALL_REPOS: 'only_all_repos',
ONLY_OTHER_LIBRARIES: 'only_other_libraries',
RECENTLY_USED: 'recently_used',
SEARCH_RESULTS: 'search_results',
};
import { MODE_TYPE_MAP } from '../../constants';
const propTypes = {
path: PropTypes.string.isRequired,
@@ -53,12 +45,20 @@ class MoveDirent extends React.Component {
}
componentDidMount() {
seafileAPI.getRepoInfo(this.props.repoID).then(res => {
this.initialize();
}
initialize = async () => {
try {
const res = await seafileAPI.getRepoInfo(this.props.repoID);
const repo = new RepoInfo(res.data);
this.setState({ currentRepo: repo });
this.fetchRepoList();
});
await this.fetchRepoList();
} catch (error) {
const errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
}
};
fetchRepoList = async () => {
try {
@@ -317,13 +317,13 @@ class MoveDirent extends React.Component {
const { isCustomPermission } = Utils.getUserPermission(permission);
return (
<Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
<Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle} close={
<div className="header-close-list">
<span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
</div>
}>
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex'></div>}
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
{isPro && (
showSearchBar ? (
<Searcher

2
frontend/src/components/dialog/select-dirent-body.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Button, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
import RepoListWrapper from '../file-chooser/repo-list-wrapper';
import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
import { MODE_TYPE_MAP } from '../../constants';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext } from '../../utils/constants';
import { RepoInfo } from '../../models';

1
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -957,6 +957,7 @@ class DirentGridView extends React.Component {
selectedDirentList={selectedDirentList}
onItemsCopy={this.props.onItemsCopy}
onCancelCopy={this.onCopyToggle}
onAddFolder={this.props.onAddFolder}
/>
}
{this.state.isEditFileTagShow &&

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

@@ -982,6 +982,7 @@ class DirentListItem extends React.Component {
onItemCopy={this.props.onItemCopy}
onCancelCopy={this.onItemCopyToggle}
repoEncrypted={this.props.repoEncrypted}
onAddFolder={this.props.onAddFolder}
/>
</ModalPortal>
}

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

@@ -872,6 +872,7 @@ class DirentListView extends React.Component {
isMultipleOperation={this.state.isMultipleOperation}
onItemsCopy={this.props.onItemsCopy}
onCancelCopy={this.onCopyToggle}
onAddFolder={this.props.onAddFolder}
/>
}
{this.state.isProgressDialogShow &&

11
frontend/src/components/file-chooser/index.js
View File

@@ -9,6 +9,7 @@ import RepoInfo from '../../models/repo-info';
import { seafileAPI } from '../../utils/seafile-api';
import { gettext, isPro } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { MODE_TYPE_MAP } from '../../constants';
import '../../css/file-chooser.css';
@@ -18,13 +19,7 @@ const propTypes = {
repoID: PropTypes.string,
onDirentItemClick: PropTypes.func,
onRepoItemClick: PropTypes.func,
mode: PropTypes.oneOf([
'current_repo_and_other_repos',
'only_all_repos',
'only_current_library',
'only_other_libraries',
'recently_used'
]).isRequired,
mode: PropTypes.isRequired,
fileSuffixes: PropTypes.arrayOf(PropTypes.string),
currentPath: PropTypes.string,
searchResults: PropTypes.array,
@@ -128,7 +123,7 @@ class FileChooser extends React.Component {
searchInfo: '',
searchResults: [],
});
if (this.props.mode === 'only_other_libraries') {
if (this.props.mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES) {
this.onOtherRepoToggle();
}
}

2
frontend/src/components/file-chooser/repo-list-wrapper.js
View File

@@ -5,7 +5,7 @@ import RecentlyUsedListView from './recently-used-list-view';
import { gettext } from '../../utils/constants';
import SearchedListView from './searched-list-view';
import { SearchStatus } from './searcher';
import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
import { MODE_TYPE_MAP } from '../../constants';
import Loading from '../loading';
const RepoListWrapper = (props) => {

2
frontend/src/components/file-chooser/searcher/index.js
View File

@@ -4,7 +4,7 @@ import { Input } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import { seafileAPI } from '../../../utils/seafile-api';
import { SEARCH_CONTAINER } from '../../../constants/zIndexes';
import { MODE_TYPE_MAP } from '../../dialog/move-dirent-dialog';
import { MODE_TYPE_MAP } from '../../../constants';
import './index.css';

1
frontend/src/components/toolbar/selected-dirents-toolbar.js
View File

@@ -430,6 +430,7 @@ class SelectedDirentsToolbar extends React.Component {
isMultipleOperation={this.state.isMultipleOperation}
onItemsCopy={this.props.onItemsCopy}
onCancelCopy={this.onCopyToggle}
onAddFolder={this.props.onAddFolder}
/>
}
{this.state.isZipDialogOpen &&

9
frontend/src/constants/index.js
View File

@@ -23,3 +23,12 @@ export const MAP_TYPE = {
export const DOMESTIC_MAP_TYPE = [MAP_TYPE.B_MAP];
export { KeyCodes, zIndexes, TAG_COLORS };
export const MODE_TYPE_MAP = {
CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
ONLY_CURRENT_LIBRARY: 'only_current_library',
ONLY_ALL_REPOS: 'only_all_repos',
ONLY_OTHER_LIBRARIES: 'only_other_libraries',
RECENTLY_USED: 'recently_used',
SEARCH_RESULTS: 'search_results',
};

20
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -733,7 +733,7 @@ class LibContentView extends React.Component {
};
// toolbar operations
onMoveItems = (destRepo, destDirentPath, moveByDialog = false) => {
onMoveItems = (destRepo, destDirentPath, byDialog = false) => {
let repoID = this.props.repoID;
let selectedDirentList = this.state.selectedDirentList;
@@ -771,7 +771,7 @@ class LibContentView extends React.Component {
toaster.success(message);
}
if (moveByDialog) {
if (byDialog) {
this.updateRecentlyUsedRepos(destRepo, destDirentPath);
}
@@ -792,7 +792,7 @@ class LibContentView extends React.Component {
});
};
onCopyItems = (destRepo, destDirentPath) => {
onCopyItems = (destRepo, destDirentPath, byDialog = false) => {
let repoID = this.props.repoID;
let selectedDirentList = this.state.selectedDirentList;
@@ -822,6 +822,10 @@ class LibContentView extends React.Component {
// show tip message if copy to current repo
let message = Utils.getCopySuccessfulMessage(dirNames);
toaster.success(message);
if (byDialog) {
this.updateRecentlyUsedRepos(destRepo, destDirentPath);
}
}
}).catch((error) => {
if (!error.response.data.lib_need_decrypt) {
@@ -1217,7 +1221,7 @@ class LibContentView extends React.Component {
};
// list operations
onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath, moveByDialog = false) => {
onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath, byDialog = false) => {
this.updateCurrentNotExistDirent(dirent);
let repoID = this.props.repoID;
// just for view list state
@@ -1262,7 +1266,7 @@ class LibContentView extends React.Component {
toaster.success(message);
}
if (moveByDialog) {
if (byDialog) {
this.updateRecentlyUsedRepos(destRepo, moveToDirentPath);
}
@@ -1287,7 +1291,7 @@ class LibContentView extends React.Component {
});
};
onCopyItem = (destRepo, dirent, copyToDirentPath, nodeParentPath) => {
onCopyItem = (destRepo, dirent, copyToDirentPath, nodeParentPath, byDialog = false) => {
let repoID = this.props.repoID;
// just for view list state
let dirName = dirent.name;
@@ -1321,6 +1325,10 @@ class LibContentView extends React.Component {
let message = gettext('Successfully copied %(name)s.');
message = message.replace('%(name)s', dirName);
toaster.success(message);
if (byDialog) {
this.updateRecentlyUsedRepos(destRepo, copyToDirentPath);
}
}
}).catch((error) => {
if (!error.response.data.lib_need_decrypt) {