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 {
|
.trash-dialog {
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
|
height: calc(100% - 56px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash-dialog .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash-dialog .modal-header {
|
.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;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
getRepoFolderTrash2(repoID, page, per_page) {
|
getRepoFolderTrash(repoID, page, per_page) {
|
||||||
const url = this.server + '/api/v2.1/repos/' + repoID + '/trash2/';
|
const url = this.server + '/api/v2.1/repos/' + repoID + '/trash2/';
|
||||||
let params = {
|
let params = {
|
||||||
page: page || 1,
|
page: page || 1,
|
||||||
@@ -44,8 +44,8 @@ class RepotrashAPI {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let repotrashAPI = new RepotrashAPI();
|
let repoTrashAPI = new RepotrashAPI();
|
||||||
let xcsrfHeaders = cookie.load('sfcsrftoken');
|
let xcsrfHeaders = cookie.load('sfcsrftoken');
|
||||||
repotrashAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
|
repoTrashAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
|
||||||
|
|
||||||
export { repotrashAPI };
|
export { repoTrashAPI };
|
||||||
|
|||||||
Reference in New Issue
Block a user