mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-01 15:09:14 +00:00
file history page rewrite
This commit is contained in:
王健辉
209
frontend/src/file-history-old.js
Normal file
209
frontend/src/file-history-old.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Utils } from './utils/utils';
|
||||
import { seafileAPI } from './utils/seafile-api';
|
||||
import { siteRoot, gettext, PER_PAGE, filePath, fileName, historyRepoID, useNewAPI } from './utils/constants';
|
||||
import editUtilties from './utils/editor-utilties';
|
||||
import Loading from './components/loading';
|
||||
import Logo from './components/logo';
|
||||
import CommonToolbar from './components/toolbar/common-toolbar';
|
||||
import HistoryItem from './pages/file-history-old/history-item';
|
||||
|
||||
import './assets/css/fa-solid.css';
|
||||
import './assets/css/fa-regular.css';
|
||||
import './assets/css/fontawesome.css';
|
||||
import './css/layout.css';
|
||||
import './css/toolbar.css';
|
||||
import './css/search.css';
|
||||
import './css/file-history-old.css';
|
||||
|
||||
class FileHistory extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
historyList: [],
|
||||
currentPage: 1,
|
||||
hasMore: false,
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
fileOwner: '',
|
||||
isReloadingData: false,
|
||||
};
|
||||
}
|
||||
|
||||
onSearchedClick = (selectedItem) => {
|
||||
if (selectedItem.is_dir === true) {
|
||||
let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
|
||||
let newWindow = window.open('about:blank');
|
||||
newWindow.location.href = url;
|
||||
} else {
|
||||
let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
|
||||
let newWindow = window.open('about:blank');
|
||||
newWindow.location.href = url;
|
||||
}
|
||||
}
|
||||
|
||||
onCloseSidePanel = () => {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (useNewAPI) {
|
||||
editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
|
||||
let historyList = res.data;
|
||||
if (historyList.length === 0) {
|
||||
this.setState({isLoading: false});
|
||||
throw Error('there has an error in server');
|
||||
}
|
||||
this.initResultState(res.data);
|
||||
});
|
||||
} else {
|
||||
seafileAPI.getFileHistory(historyRepoID, filePath).then((res) => {
|
||||
let historyList = res.data;
|
||||
if (historyList.length === 0) {
|
||||
this.setState({isLoading: false});
|
||||
throw Error('there has an error in server');
|
||||
}
|
||||
this.initResultState(res.data);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
refershFileList() {
|
||||
editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
|
||||
this.initResultState(res.data);
|
||||
});
|
||||
}
|
||||
|
||||
initResultState(result) {
|
||||
if (useNewAPI) {
|
||||
if (result.data.length) {
|
||||
this.setState({
|
||||
historyList: result.data,
|
||||
currentPage: result.page,
|
||||
hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
fileOwner: result.data[0].creator_email,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (result.data.length) {
|
||||
this.setState({
|
||||
historyList: result.data,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
fileOwner: result.data[0].creator_email,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateResultState(result) {
|
||||
if (result.data.length) {
|
||||
this.setState({
|
||||
historyList: [...this.state.historyList, ...result.data],
|
||||
currentPage: result.page,
|
||||
hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
fileOwner: result.data[0].creator_email
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
reloadMore = () => {
|
||||
if (!this.state.isReloadingData) {
|
||||
let currentPage = this.state.currentPage + 1;
|
||||
this.setState({
|
||||
currentPage: currentPage,
|
||||
isReloadingData: true,
|
||||
});
|
||||
editUtilties.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
|
||||
this.updateResultState(res.data);
|
||||
this.setState({isReloadingData: false});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onScrollHandler = (event) => {
|
||||
const clientHeight = event.target.clientHeight;
|
||||
const scrollHeight = event.target.scrollHeight;
|
||||
const scrollTop = event.target.scrollTop;
|
||||
const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
|
||||
let hasMore = this.state.hasMore;
|
||||
if (isBottom && hasMore) {
|
||||
this.reloadMore();
|
||||
}
|
||||
}
|
||||
|
||||
onItemRestore = (item) => {
|
||||
let commitId = item.commit_id;
|
||||
editUtilties.revertFile(filePath, commitId).then(res => {
|
||||
if (res.data.success) {
|
||||
this.setState({isLoading: true});
|
||||
this.refershFileList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div id="header" className="old-history-header">
|
||||
<div className="logo">
|
||||
<Logo onCloseSidePanel={this.onCloseSidePanel} />
|
||||
</div>
|
||||
<div className='toolbar'>
|
||||
<CommonToolbar onSearchedClick={this.onSearchedClick} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" onScroll={this.onScrollHandler}>
|
||||
<div className="old-history-main">
|
||||
<div>
|
||||
<a href="javascript:window.history.back()" className="go-back" title="Back">
|
||||
<span className="fas fa-chevron-left"></span>
|
||||
</a>
|
||||
<h2><span className="file-name">{fileName}</span>{gettext(' History Versions')}</h2>
|
||||
<p>{gettext('Tip: a new version will be generated after each modification, and you can restore the file to a previous version.')}</p>
|
||||
</div>
|
||||
<div>
|
||||
{this.state.isLoading && <Loading />}
|
||||
{!this.state.isLoading &&
|
||||
<table className="commit-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="25%" >{gettext('Time')}</th>
|
||||
<th width="25%" >{gettext('Modifier')}</th>
|
||||
<th width="20%" >{gettext('Size')}</th>
|
||||
<th width="30%" >{gettext('Operation')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.historyList.map((item, index) => {
|
||||
return (
|
||||
<HistoryItem
|
||||
key={index}
|
||||
item={item}
|
||||
index={index}
|
||||
onItemRestore={this.onItemRestore}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render (
|
||||
<FileHistory />,
|
||||
document.getElementById('wrapper')
|
||||
);
|
||||
Reference in New Issue
Block a user