mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-10 03:11:07 +00:00
fix: trash dialog UI (#7221)
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
GitHub
@@ -1,484 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { navigate } from '@gatsbyjs/reach-router';
|
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||
import dayjs from 'dayjs';
|
||||
import { Utils, isMobile } from '../../utils/utils';
|
||||
import { gettext, siteRoot, enableUserCleanTrash, username } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { repotrashAPI } from '../../utils/repo-trash-api';
|
||||
import ModalPortal from '../../components/modal-portal';
|
||||
import toaster from '../../components/toast';
|
||||
import CleanTrash from '../../components/dialog/clean-trash';
|
||||
import Paginator from '../paginator';
|
||||
import Loading from '../../components/loading';
|
||||
import EmptyTip from '../../components/empty-tip';
|
||||
|
||||
import '../../css/toolbar.css';
|
||||
import '../../css/search.css';
|
||||
import '../../css/trash-dialog.css';
|
||||
|
||||
const propTypes = {
|
||||
repoID: PropTypes.string.isRequired,
|
||||
currentRepoInfo: PropTypes.object.isRequired,
|
||||
showTrashDialog: PropTypes.bool.isRequired,
|
||||
toggleTrashDialog: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class TrashDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
items: [],
|
||||
scanStat: null,
|
||||
more: false,
|
||||
isCleanTrashDialogOpen: false,
|
||||
trashType: 0,
|
||||
isOldTrashDialogOpen: false,
|
||||
currentPage: 1,
|
||||
perPage: 100,
|
||||
hasNextPage: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getItems2();
|
||||
}
|
||||
|
||||
getItems2 = (page) => {
|
||||
repotrashAPI.getRepoFolderTrash2(this.props.repoID, page, this.state.perPage).then((res) => {
|
||||
const { items, total_count } = res.data;
|
||||
if (!page) {
|
||||
page = 1;
|
||||
}
|
||||
this.setState({
|
||||
currentPage: page,
|
||||
hasNextPage: total_count - page * this.state.perPage > 0,
|
||||
isLoading: false,
|
||||
items: items,
|
||||
more: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onSearchedClick = (selectedItem) => {
|
||||
if (selectedItem.is_dir === true) {
|
||||
let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
|
||||
navigate(url, { replace: true });
|
||||
} else {
|
||||
let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
|
||||
let newWindow = window.open('about:blank');
|
||||
newWindow.location.href = url;
|
||||
}
|
||||
};
|
||||
|
||||
resetPerPage = (perPage) => {
|
||||
this.setState({
|
||||
perPage: perPage
|
||||
}, () => {
|
||||
this.getItems2(1);
|
||||
});
|
||||
};
|
||||
cleanTrash = () => {
|
||||
this.toggleCleanTrashDialog();
|
||||
};
|
||||
|
||||
toggleCleanTrashDialog = () => {
|
||||
this.setState({
|
||||
isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen
|
||||
});
|
||||
};
|
||||
|
||||
refreshTrash2 = () => {
|
||||
this.setState({
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
items: [],
|
||||
scanStat: null,
|
||||
more: false,
|
||||
showFolder: false
|
||||
});
|
||||
this.getItems2();
|
||||
};
|
||||
|
||||
renderFolder = (commitID, baseDir, folderPath) => {
|
||||
this.setState({
|
||||
showFolder: true,
|
||||
commitID: commitID,
|
||||
baseDir: baseDir,
|
||||
folderPath: folderPath,
|
||||
folderItems: [],
|
||||
isLoading: true
|
||||
});
|
||||
|
||||
seafileAPI.listCommitDir(this.props.repoID, commitID, `${baseDir.substr(0, baseDir.length - 1)}${folderPath}`).then((res) => {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
folderItems: res.data.dirent_list
|
||||
});
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Permission denied')
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Error')
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Please check the network.')
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
clickFolderPath = (folderPath, e) => {
|
||||
e.preventDefault();
|
||||
const { commitID, baseDir } = this.state;
|
||||
this.renderFolder(commitID, baseDir, folderPath);
|
||||
};
|
||||
|
||||
clickRoot = (e) => {
|
||||
e.preventDefault();
|
||||
this.refreshTrash2();
|
||||
};
|
||||
|
||||
renderFolderPath = () => {
|
||||
const pathList = this.state.folderPath.split('/');
|
||||
const repoFolderName = this.props.currentRepoInfo.repo_name;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a href="#" onClick={this.clickRoot} className="path-item" title={repoFolderName}>{repoFolderName}</a>
|
||||
<span className="path-split">/</span>
|
||||
{pathList.map((item, index) => {
|
||||
if (index > 0 && index != pathList.length - 1) {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<a className="path-item" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index + 1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
|
||||
<span className="path-split">/</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
)}
|
||||
<span className="last-path-item" title={pathList[pathList.length - 1]}>{pathList[pathList.length - 1]}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showTrashDialog, toggleTrashDialog } = this.props;
|
||||
const { isCleanTrashDialogOpen, showFolder, isLoading, items } = this.state;
|
||||
const isRepoAdmin = this.props.currentRepoInfo.owner_email === username || this.props.currentRepoInfo.is_admin;
|
||||
const repoFolderName = this.props.currentRepoInfo.repo_name;
|
||||
const oldTrashUrl = siteRoot + 'repo/' + this.props.repoID + '/trash/';
|
||||
let title = gettext('{placeholder} Trash');
|
||||
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoFolderName) + '</span>');
|
||||
|
||||
return (
|
||||
<Modal className="trash-dialog" isOpen={showTrashDialog} toggle={toggleTrashDialog}>
|
||||
<ModalHeader
|
||||
close={
|
||||
<>
|
||||
<a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>
|
||||
{(enableUserCleanTrash && !showFolder && isRepoAdmin) &&
|
||||
<button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
|
||||
}
|
||||
<span aria-hidden="true" className="trash-dialog-close-icon sf3-font sf3-font-x-01 ml-4" onClick={toggleTrashDialog}></span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div dangerouslySetInnerHTML={{ __html: title }}></div>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{isLoading && <Loading />}
|
||||
{!isLoading && items.length === 0 &&
|
||||
<EmptyTip text={gettext('No file')} className="m-0" />
|
||||
}
|
||||
{!isLoading && items.length > 0 &&
|
||||
<div>
|
||||
<div className="path-container dir-view-path mb-2">
|
||||
<span className="path-label mr-1">{gettext('Current path: ')}</span>
|
||||
{showFolder ?
|
||||
this.renderFolderPath() :
|
||||
<span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
|
||||
}
|
||||
</div>
|
||||
<Content
|
||||
data={this.state}
|
||||
repoID={this.props.repoID}
|
||||
getMore={this.getMore}
|
||||
currentPage={this.state.currentPage}
|
||||
curPerPage={this.state.perPage}
|
||||
hasNextPage={this.state.hasNextPage}
|
||||
renderFolder={this.renderFolder}
|
||||
getListByPage={this.getItems2}
|
||||
resetPerPage={this.resetPerPage}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{isCleanTrashDialogOpen &&
|
||||
<ModalPortal>
|
||||
<CleanTrash
|
||||
repoID={this.props.repoID}
|
||||
refreshTrash={this.refreshTrash2}
|
||||
toggleDialog={this.toggleCleanTrashDialog}
|
||||
/>
|
||||
</ModalPortal>
|
||||
}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Content extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.theadData = [
|
||||
{ width: '5%', text: gettext('Name') },
|
||||
{ width: '20%', text: '' },
|
||||
{ width: '40%', text: gettext('Original path') },
|
||||
{ width: '12%', text: gettext('Delete Time') },
|
||||
{ width: '13%', text: gettext('Size') },
|
||||
{ width: '10%', text: '' }
|
||||
];
|
||||
}
|
||||
|
||||
getPreviousPage = () => {
|
||||
this.props.getListByPage(this.props.currentPage - 1);
|
||||
};
|
||||
|
||||
getNextPage = () => {
|
||||
this.props.getListByPage(this.props.currentPage + 1);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { items, showFolder, commitID, baseDir, folderPath, folderItems } = this.props.data;
|
||||
const { curPerPage, currentPage, hasNextPage } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
{this.theadData.map((item, index) => {
|
||||
return <th key={index} className={index === 0 ? 'pl10' : ''} width={item.width}>{item.text}</th>;
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{showFolder ?
|
||||
folderItems.map((item, index) => {
|
||||
return <FolderItem
|
||||
key={index}
|
||||
item={item}
|
||||
repoID={this.props.repoID}
|
||||
commitID={commitID}
|
||||
baseDir={baseDir}
|
||||
folderPath={folderPath}
|
||||
renderFolder={this.props.renderFolder}
|
||||
/>;
|
||||
}) :
|
||||
items.map((item, index) => {
|
||||
return <Item
|
||||
key={index}
|
||||
repoID={this.props.repoID}
|
||||
item={item}
|
||||
renderFolder={this.props.renderFolder}
|
||||
/>;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<Paginator
|
||||
gotoPreviousPage={this.getPreviousPage}
|
||||
gotoNextPage={this.getNextPage}
|
||||
currentPage={currentPage}
|
||||
hasNextPage={hasNextPage}
|
||||
curPerPage={curPerPage}
|
||||
resetPerPage={this.props.resetPerPage}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Content.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
getMore: PropTypes.func,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
getListByPage: PropTypes.func.isRequired,
|
||||
resetPerPage: PropTypes.func.isRequired,
|
||||
currentPage: PropTypes.number.isRequired,
|
||||
curPerPage: PropTypes.number.isRequired,
|
||||
hasNextPage: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
|
||||
class Item extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
restored: false,
|
||||
isIconShown: false
|
||||
};
|
||||
}
|
||||
|
||||
handleMouseOver = () => {
|
||||
this.setState({ isIconShown: true });
|
||||
};
|
||||
|
||||
handleMouseOut = () => {
|
||||
this.setState({ isIconShown: false });
|
||||
};
|
||||
|
||||
restoreItem = (e) => {
|
||||
e.preventDefault();
|
||||
const item = this.props.item;
|
||||
const { commit_id, parent_dir, obj_name } = item;
|
||||
const path = parent_dir + obj_name;
|
||||
const request = item.is_dir ?
|
||||
seafileAPI.restoreFolder(this.props.repoID, commit_id, path) :
|
||||
seafileAPI.restoreFile(this.props.repoID, commit_id, path);
|
||||
request.then((res) => {
|
||||
this.setState({
|
||||
restored: true
|
||||
});
|
||||
toaster.success(gettext('Restored 1 item'));
|
||||
}).catch((error) => {
|
||||
let errorMsg = '';
|
||||
if (error.response) {
|
||||
errorMsg = error.response.data.error_msg || gettext('Error');
|
||||
} else {
|
||||
errorMsg = gettext('Please check the network.');
|
||||
}
|
||||
toaster.danger(errorMsg);
|
||||
});
|
||||
};
|
||||
|
||||
renderFolder = (e) => {
|
||||
e.preventDefault();
|
||||
const item = this.props.item;
|
||||
this.props.renderFolder(item.commit_id, item.parent_dir, Utils.joinPath('/', item.obj_name));
|
||||
};
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
const { restored, isIconShown } = this.state;
|
||||
|
||||
if (restored) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return item.is_dir ? (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
|
||||
<td className="pl10"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
|
||||
<td><a href="#" onClick={this.renderFolder}>{item.obj_name}</a></td>
|
||||
<td>{item.parent_dir}</td>
|
||||
<td title={dayjs(item.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.deleted_time).format('YYYY-MM-DD')}</td>
|
||||
<td></td>
|
||||
<td>
|
||||
<a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
|
||||
<td className="pl10"><img src={Utils.getFileIconUrl(item.obj_name)} alt={gettext('File')} width="24" /></td>
|
||||
<td><a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${item.obj_id}&commit_id=${item.commit_id}&base=${encodeURIComponent(item.parent_dir)}&p=${encodeURIComponent('/' + item.obj_name)}`} target="_blank" rel="noreferrer">{item.obj_name}</a></td>
|
||||
<td>{item.parent_dir}</td>
|
||||
<td title={dayjs(item.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.deleted_time).format('YYYY-MM-DD')}</td>
|
||||
<td>{Utils.bytesToSize(item.size)}</td>
|
||||
<td>
|
||||
<a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Item.propTypes = {
|
||||
item: PropTypes.object.isRequired,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
repoID: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
class FolderItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isIconShown: false
|
||||
};
|
||||
}
|
||||
|
||||
handleMouseOver = () => {
|
||||
this.setState({ isIconShown: true });
|
||||
};
|
||||
|
||||
handleMouseOut = () => {
|
||||
this.setState({ isIconShown: false });
|
||||
};
|
||||
|
||||
renderFolder = (e) => {
|
||||
e.preventDefault();
|
||||
const item = this.props.item;
|
||||
const { commitID, baseDir, folderPath } = this.props;
|
||||
this.props.renderFolder(commitID, baseDir, Utils.joinPath(folderPath, item.name));
|
||||
};
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
const { commitID, baseDir, folderPath } = this.props;
|
||||
|
||||
return item.type == 'dir' ? (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="pl10"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
|
||||
<td><a href="#" onClick={this.renderFolder}>{item.name}</a></td>
|
||||
<td>{item.parent_dir}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="pl10">
|
||||
<img src={Utils.getFileIconUrl(item.name)} alt={gettext('File')} width="24" />
|
||||
</td>
|
||||
<td>
|
||||
<a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${item.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} target="_blank" rel="noreferrer">{item.name}</a>
|
||||
</td>
|
||||
<td>{item.parent_dir}</td>
|
||||
<td></td>
|
||||
<td>{Utils.bytesToSize(item.size)}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FolderItem.propTypes = {
|
||||
item: PropTypes.object.isRequired,
|
||||
commitID: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
baseDir: PropTypes.string.isRequired,
|
||||
folderPath: PropTypes.string.isRequired,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
TrashDialog.propTypes = propTypes;
|
||||
|
||||
export default TrashDialog;
|
||||
@@ -1,5 +1,12 @@
|
||||
.trash-dialog {
|
||||
max-width: 1100px;
|
||||
height: calc(100% - 56px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trash-dialog .modal-content {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trash-dialog .modal-header {
|
||||
255
frontend/src/components/dialog/trash-dialog/index.js
Normal file
255
frontend/src/components/dialog/trash-dialog/index.js
Normal file
@@ -0,0 +1,255 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { navigate } from '@gatsbyjs/reach-router';
|
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import { gettext, siteRoot, enableUserCleanTrash, username } from '../../../utils/constants';
|
||||
import { seafileAPI } from '../../../utils/seafile-api';
|
||||
import { repoTrashAPI } from '../../../utils/repo-trash-api';
|
||||
import ModalPortal from '../../modal-portal';
|
||||
import Table from './table';
|
||||
import CleanTrash from '../clean-trash';
|
||||
import Paginator from '../../paginator';
|
||||
import Loading from '../../loading';
|
||||
import EmptyTip from '../../empty-tip';
|
||||
|
||||
import '../../../css/toolbar.css';
|
||||
import '../../../css/search.css';
|
||||
import './index.css';
|
||||
|
||||
class TrashDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
items: [],
|
||||
scanStat: null,
|
||||
more: false,
|
||||
isCleanTrashDialogOpen: false,
|
||||
trashType: 0,
|
||||
isOldTrashDialogOpen: false,
|
||||
currentPage: 1,
|
||||
perPage: 100,
|
||||
hasNextPage: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getFolderTrash();
|
||||
}
|
||||
|
||||
getFolderTrash = (page) => {
|
||||
repoTrashAPI.getRepoFolderTrash(this.props.repoID, page, this.state.perPage).then((res) => {
|
||||
const { items, total_count } = res.data;
|
||||
if (!page) {
|
||||
page = 1;
|
||||
}
|
||||
this.setState({
|
||||
currentPage: page,
|
||||
hasNextPage: total_count - page * this.state.perPage > 0,
|
||||
isLoading: false,
|
||||
items: items,
|
||||
more: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onSearchedClick = (selectedItem) => {
|
||||
if (selectedItem.is_dir === true) {
|
||||
let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
|
||||
navigate(url, { replace: true });
|
||||
} else {
|
||||
let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
|
||||
let newWindow = window.open('about:blank');
|
||||
newWindow.location.href = url;
|
||||
}
|
||||
};
|
||||
|
||||
getPreviousPage = () => {
|
||||
this.getFolderTrash(this.state.currentPage - 1);
|
||||
};
|
||||
|
||||
getNextPage = () => {
|
||||
this.getFolderTrash(this.state.currentPage + 1);
|
||||
};
|
||||
|
||||
resetPerPage = (perPage) => {
|
||||
this.setState({
|
||||
perPage: perPage
|
||||
}, () => {
|
||||
this.getFolderTrash(1);
|
||||
});
|
||||
};
|
||||
|
||||
cleanTrash = () => {
|
||||
this.toggleCleanTrashDialog();
|
||||
};
|
||||
|
||||
toggleCleanTrashDialog = () => {
|
||||
this.setState({
|
||||
isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen
|
||||
});
|
||||
};
|
||||
|
||||
refreshTrash2 = () => {
|
||||
this.setState({
|
||||
isLoading: true,
|
||||
errorMsg: '',
|
||||
items: [],
|
||||
scanStat: null,
|
||||
more: false,
|
||||
showFolder: false
|
||||
});
|
||||
this.getFolderTrash();
|
||||
};
|
||||
|
||||
renderFolder = (commitID, baseDir, folderPath) => {
|
||||
this.setState({
|
||||
showFolder: true,
|
||||
commitID: commitID,
|
||||
baseDir: baseDir,
|
||||
folderPath: folderPath,
|
||||
folderItems: [],
|
||||
isLoading: true
|
||||
});
|
||||
|
||||
seafileAPI.listCommitDir(this.props.repoID, commitID, `${baseDir.substr(0, baseDir.length - 1)}${folderPath}`).then((res) => {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
folderItems: res.data.dirent_list
|
||||
});
|
||||
}).catch((error) => {
|
||||
if (error.response) {
|
||||
if (error.response.status == 403) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Permission denied')
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Error')
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
errorMsg: gettext('Please check the network.')
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
clickFolderPath = (folderPath, e) => {
|
||||
e.preventDefault();
|
||||
const { commitID, baseDir } = this.state;
|
||||
this.renderFolder(commitID, baseDir, folderPath);
|
||||
};
|
||||
|
||||
clickRoot = (e) => {
|
||||
e.preventDefault();
|
||||
this.refreshTrash2();
|
||||
};
|
||||
|
||||
renderFolderPath = () => {
|
||||
const pathList = this.state.folderPath.split('/');
|
||||
const repoFolderName = this.props.currentRepoInfo.repo_name;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a href="#" onClick={this.clickRoot} className="path-item" title={repoFolderName}>{repoFolderName}</a>
|
||||
<span className="path-split">/</span>
|
||||
{pathList.map((item, index) => {
|
||||
if (index > 0 && index != pathList.length - 1) {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<a className="path-item" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index + 1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
|
||||
<span className="path-split">/</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
)}
|
||||
<span className="last-path-item" title={pathList[pathList.length - 1]}>{pathList[pathList.length - 1]}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showTrashDialog, toggleTrashDialog, repoID } = this.props;
|
||||
const { isCleanTrashDialogOpen, showFolder, isLoading, items, perPage, currentPage, hasNextPage } = this.state;
|
||||
const isRepoAdmin = this.props.currentRepoInfo.owner_email === username || this.props.currentRepoInfo.is_admin;
|
||||
const repoFolderName = this.props.currentRepoInfo.repo_name;
|
||||
const oldTrashUrl = siteRoot + 'repo/' + this.props.repoID + '/trash/';
|
||||
let title = gettext('{placeholder} Trash');
|
||||
title = title.replace('{placeholder}', '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repoFolderName) + '</span>');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal className="trash-dialog" isOpen={showTrashDialog} toggle={toggleTrashDialog}>
|
||||
<ModalHeader
|
||||
close={
|
||||
<>
|
||||
<a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>
|
||||
{(enableUserCleanTrash && !showFolder && isRepoAdmin) &&
|
||||
<button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
|
||||
}
|
||||
<span aria-hidden="true" className="trash-dialog-close-icon sf3-font sf3-font-x-01 ml-4" onClick={toggleTrashDialog}></span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div dangerouslySetInnerHTML={{ __html: title }}></div>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{isLoading && <Loading />}
|
||||
{!isLoading && items.length === 0 &&
|
||||
<EmptyTip text={gettext('No file')} className="m-0" />
|
||||
}
|
||||
{!isLoading && items.length > 0 &&
|
||||
<div>
|
||||
<div className="path-container dir-view-path mb-2">
|
||||
<span className="path-label mr-1">{gettext('Current path: ')}</span>
|
||||
{showFolder ?
|
||||
this.renderFolderPath() :
|
||||
<span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
|
||||
}
|
||||
</div>
|
||||
<Table repoID={repoID} data={this.state} renderFolder={this.renderFolder} />
|
||||
<Paginator
|
||||
gotoPreviousPage={this.getPreviousPage}
|
||||
gotoNextPage={this.getNextPage}
|
||||
currentPage={currentPage}
|
||||
hasNextPage={hasNextPage}
|
||||
curPerPage={perPage}
|
||||
resetPerPage={this.resetPerPage}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
{isCleanTrashDialogOpen && (
|
||||
<ModalPortal>
|
||||
<CleanTrash
|
||||
repoID={repoID}
|
||||
refreshTrash={this.refreshTrash2}
|
||||
toggleDialog={this.toggleCleanTrashDialog}
|
||||
/>
|
||||
</ModalPortal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TrashDialog.propTypes = {
|
||||
repoID: PropTypes.string.isRequired,
|
||||
currentRepoInfo: PropTypes.object.isRequired,
|
||||
showTrashDialog: PropTypes.bool.isRequired,
|
||||
toggleTrashDialog: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default TrashDialog;
|
||||
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import dayjs from 'dayjs';
|
||||
import { Utils, isMobile } from '../../../../../utils/utils';
|
||||
import { gettext, siteRoot } from '../../../../../utils/constants';
|
||||
import { seafileAPI } from '../../../../../utils/seafile-api';
|
||||
import toaster from '../../../../toast';
|
||||
|
||||
class FileRecord extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
restored: false,
|
||||
isIconShown: false
|
||||
};
|
||||
}
|
||||
|
||||
handleMouseOver = () => {
|
||||
this.setState({ isIconShown: true });
|
||||
};
|
||||
|
||||
handleMouseOut = () => {
|
||||
this.setState({ isIconShown: false });
|
||||
};
|
||||
|
||||
restoreItem = (e) => {
|
||||
e.preventDefault();
|
||||
const { record } = this.props;
|
||||
const { commit_id, parent_dir, obj_name, is_dir } = record;
|
||||
const path = parent_dir + obj_name;
|
||||
const request = is_dir ?
|
||||
seafileAPI.restoreFolder(this.props.repoID, commit_id, path) :
|
||||
seafileAPI.restoreFile(this.props.repoID, commit_id, path);
|
||||
request.then((res) => {
|
||||
this.setState({
|
||||
restored: true
|
||||
});
|
||||
toaster.success(gettext('Restored 1 item'));
|
||||
}).catch((error) => {
|
||||
let errorMsg = '';
|
||||
if (error.response) {
|
||||
errorMsg = error.response.data.error_msg || gettext('Error');
|
||||
} else {
|
||||
errorMsg = gettext('Please check the network.');
|
||||
}
|
||||
toaster.danger(errorMsg);
|
||||
});
|
||||
};
|
||||
|
||||
renderFolder = (e) => {
|
||||
e.preventDefault();
|
||||
const { record } = this.props;
|
||||
this.props.renderFolder(record.commit_id, record.parent_dir, Utils.joinPath('/', record.obj_name));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { record } = this.props;
|
||||
const { restored, isIconShown } = this.state;
|
||||
|
||||
if (restored) return null;
|
||||
|
||||
return record.is_dir ? (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
|
||||
<td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
|
||||
<td><a href="#" onClick={this.renderFolder}>{record.obj_name}</a></td>
|
||||
<td>{record.parent_dir}</td>
|
||||
<td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</td>
|
||||
<td></td>
|
||||
<td>
|
||||
<a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
|
||||
<td className="pl-2 pr-2"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
|
||||
<td>
|
||||
<a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
|
||||
{record.obj_name}
|
||||
</a>
|
||||
</td>
|
||||
<td>{record.parent_dir}</td>
|
||||
<td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>
|
||||
{dayjs(record.deleted_time).format('YYYY-MM-DD')}
|
||||
</td>
|
||||
<td>{Utils.bytesToSize(record.size)}</td>
|
||||
<td>
|
||||
<a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FileRecord.propTypes = {
|
||||
record: PropTypes.object.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default FileRecord;
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import FileRecord from './file-record';
|
||||
|
||||
const FileRecords = ({ records, repoID, renderFolder }) => {
|
||||
if (!Array.isArray(records) || records.length === 0) return null;
|
||||
return records.map((record, index) => {
|
||||
return (
|
||||
<FileRecord
|
||||
key={index}
|
||||
record={record}
|
||||
repoID={repoID}
|
||||
renderFolder={renderFolder}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
FileRecords.propTypes = {
|
||||
records: PropTypes.array,
|
||||
};
|
||||
|
||||
export default FileRecords;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Utils } from '../../../../../utils/utils';
|
||||
import { gettext, siteRoot } from '../../../../../utils/constants';
|
||||
|
||||
class FolderRecord extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isIconShown: false
|
||||
};
|
||||
}
|
||||
|
||||
handleMouseOver = () => {
|
||||
this.setState({ isIconShown: true });
|
||||
};
|
||||
|
||||
handleMouseOut = () => {
|
||||
this.setState({ isIconShown: false });
|
||||
};
|
||||
|
||||
renderFolder = (e) => {
|
||||
e.preventDefault();
|
||||
const { commitID, baseDir, folderPath, record } = this.props;
|
||||
this.props.renderFolder(commitID, baseDir, Utils.joinPath(folderPath, record.name));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { commitID, baseDir, folderPath, record } = this.props;
|
||||
|
||||
return record.type == 'dir' ? (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
|
||||
<td><a href="#" onClick={this.renderFolder}>{record.name}</a></td>
|
||||
<td>{record.parent_dir}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td className="pl-2 pr-2">
|
||||
<img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
|
||||
</td>
|
||||
<td>
|
||||
<a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
|
||||
{record.name}
|
||||
</a>
|
||||
</td>
|
||||
<td>{record.parent_dir}</td>
|
||||
<td></td>
|
||||
<td>{Utils.bytesToSize(record.size)}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FolderRecord.propTypes = {
|
||||
record: PropTypes.object.isRequired,
|
||||
commitID: PropTypes.string.isRequired,
|
||||
repoID: PropTypes.string.isRequired,
|
||||
baseDir: PropTypes.string.isRequired,
|
||||
folderPath: PropTypes.string.isRequired,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default FolderRecord;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import FolderRecord from './folder-record';
|
||||
|
||||
const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderFolder }) => {
|
||||
if (!Array.isArray(records) || records.length === 0) return null;
|
||||
return records.map((record, index) => {
|
||||
return (
|
||||
<FolderRecord
|
||||
key={index}
|
||||
record={record}
|
||||
repoID={repoID}
|
||||
commitID={commitID}
|
||||
baseDir={baseDir}
|
||||
folderPath={folderPath}
|
||||
renderFolder={renderFolder}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
FolderRecords.propTypes = {
|
||||
records: PropTypes.array,
|
||||
};
|
||||
|
||||
export default FolderRecords;
|
||||
59
frontend/src/components/dialog/trash-dialog/table/index.js
Normal file
59
frontend/src/components/dialog/trash-dialog/table/index.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { gettext } from '../../../../utils/constants';
|
||||
import FolderRecords from './folder-records';
|
||||
import FileRecords from './file-records';
|
||||
|
||||
const Table = ({ repoID, renderFolder, data }) => {
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
|
||||
const containerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const handleResize = () => {
|
||||
if (!container) return;
|
||||
setContainerWidth(container.offsetWidth);
|
||||
};
|
||||
const resizeObserver = new ResizeObserver(handleResize);
|
||||
container && resizeObserver.observe(container);
|
||||
|
||||
return () => {
|
||||
container && resizeObserver.unobserve(container);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const { items, showFolder, commitID, baseDir, folderPath, folderItems } = data;
|
||||
|
||||
return (
|
||||
<div className="table-container p-0" ref={containerRef}>
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 40 }} className="pl-2 pr-2">{/* icon */}</th>
|
||||
<th style={{ width: (containerWidth - 40) * 0.25 }}>{gettext('Name')}</th>
|
||||
<th style={{ width: (containerWidth - 40) * 0.4 }}>{gettext('Original path')}</th>
|
||||
<th style={{ width: (containerWidth - 40) * 0.12 }}>{gettext('Delete Time')}</th>
|
||||
<th style={{ width: (containerWidth - 40) * 0.13 }}>{gettext('Size')}</th>
|
||||
<th style={{ width: (containerWidth - 40) * 0.1 }}>{/* op */}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{showFolder ? (
|
||||
<FolderRecords records={folderItems} repoID={repoID} commitID={commitID} baseDir={baseDir} folderPath={folderPath} renderFolder={renderFolder} />
|
||||
) : (
|
||||
<FileRecords records={items} repoID={repoID} renderFolder={renderFolder} />
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Table.propTypes = {
|
||||
repoID: PropTypes.string.isRequired,
|
||||
data: PropTypes.object.isRequired,
|
||||
renderFolder: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Table;
|
||||
@@ -34,7 +34,7 @@ class RepotrashAPI {
|
||||
return this;
|
||||
}
|
||||
|
||||
getRepoFolderTrash2(repoID, page, per_page) {
|
||||
getRepoFolderTrash(repoID, page, per_page) {
|
||||
const url = this.server + '/api/v2.1/repos/' + repoID + '/trash2/';
|
||||
let params = {
|
||||
page: page || 1,
|
||||
@@ -44,8 +44,8 @@ class RepotrashAPI {
|
||||
}
|
||||
}
|
||||
|
||||
let repotrashAPI = new RepotrashAPI();
|
||||
let repoTrashAPI = new RepotrashAPI();
|
||||
let xcsrfHeaders = cookie.load('sfcsrftoken');
|
||||
repotrashAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
|
||||
repoTrashAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
|
||||
|
||||
export { repotrashAPI };
|
||||
export { repoTrashAPI };
|
||||
|
||||
Reference in New Issue
Block a user