mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-27 23:56:18 +00:00
feat: sdoc diff (#5465)
* feat: sdoc diff * feat: add changes * feat: optimize code
This commit is contained in:
杨国璇
GitHub
207
frontend/src/pages/sdoc-file-history/side-panel.js
Normal file
207
frontend/src/pages/sdoc-file-history/side-panel.js
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Loading from '../../components/loading';
|
||||
import { gettext, filePath, historyRepoID } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import FileHistory from '../../models/file-history';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import editUtilities from '../../utils/editor-utilities';
|
||||
import toaster from '../../components/toast';
|
||||
import HistoryVersion from './history-version';
|
||||
import Switch from '../../components/common/switch';
|
||||
|
||||
class SidePanel extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
historyVersions: [],
|
||||
errorMessage: '',
|
||||
};
|
||||
this.init();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.listHistoryVersions(historyRepoID, filePath, this.nextCommit, (historyVersion, lastHistoryVersion) => {
|
||||
this.props.onSelectHistoryVersion(historyVersion, lastHistoryVersion);
|
||||
});
|
||||
}
|
||||
|
||||
init = () => {
|
||||
this.hasMore = true;
|
||||
this.nextCommit = '';
|
||||
this.filePath = '';
|
||||
this.oldFilePath = '';
|
||||
}
|
||||
|
||||
listHistoryVersions = (repoID, filePath, commit, callback) => {
|
||||
seafileAPI.listOldFileHistoryRecords(repoID, filePath, commit).then((res) => {
|
||||
let historyData = res.data;
|
||||
if (!historyData) {
|
||||
this.setState({ isLoading: false, errorMessage: 'There is an error in server.' });
|
||||
return;
|
||||
}
|
||||
this.updateHistoryVersions(historyData, callback);
|
||||
}).catch(error => {
|
||||
const errorMessage = Utils.getErrorMsg(error, true);
|
||||
this.setState({ isLoading: false, errorMessage: errorMessage });
|
||||
});
|
||||
}
|
||||
|
||||
updateHistoryVersions(result, callback) {
|
||||
const dataCount = result.data ? result.data.length : 0;
|
||||
this.nextCommit = result.next_start_commit || '';
|
||||
if (dataCount) {
|
||||
const addedHistoryVersions = result.data.map(item => new FileHistory(item));
|
||||
this.filePath = addedHistoryVersions[dataCount - 1].path;
|
||||
this.oldFilePath = addedHistoryVersions[dataCount - 1].revRenamedOldPath;
|
||||
const historyVersions = [ ...this.state.historyVersions, ...addedHistoryVersions ];
|
||||
this.setState({ historyVersions: historyVersions, isLoading: false, errorMessage: '' }, () => {
|
||||
callback && callback(historyVersions[0], historyVersions[1]);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.nextCommit) {
|
||||
this.listHistoryVersions(historyRepoID, filePath, this.nextCommit);
|
||||
return;
|
||||
}
|
||||
this.hasMore = false;
|
||||
this.setState({ isLoading: false, errorMessage: '' });
|
||||
}
|
||||
|
||||
onScrollHandler = (event) => {
|
||||
const clientHeight = event.target.clientHeight;
|
||||
const scrollHeight = event.target.scrollHeight;
|
||||
const scrollTop = event.target.scrollTop;
|
||||
const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
|
||||
if (isBottom && this.hasMore && this.nextCommit) {
|
||||
this.loadMore();
|
||||
}
|
||||
}
|
||||
|
||||
loadMore = () => {
|
||||
if (this.state.isLoading) return;
|
||||
this.setState({ isLoading: true }, () => {
|
||||
const currentFilePath = this.oldFilePath || this.filePath;
|
||||
this.listHistoryVersions(historyRepoID, currentFilePath, this.nextCommit);
|
||||
});
|
||||
}
|
||||
|
||||
restoreVersion = (historyVersion) => {
|
||||
const { commitId, path } = historyVersion;
|
||||
editUtilities.revertFile(path, commitId).then(res => {
|
||||
if (res.data.success) {
|
||||
this.init();
|
||||
this.setState({ isLoading: true, historyVersions: [], errorMessage: '' } , () => {
|
||||
this.listHistoryVersions(historyRepoID, filePath);
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
const errorMessage = Utils.getErrorMsg(error, true);
|
||||
toaster.danger(gettext(errorMessage));
|
||||
});
|
||||
}
|
||||
|
||||
onSelectHistoryVersion = (historyVersion) => {
|
||||
const { isShowChanges } = this.props;
|
||||
if (!isShowChanges) {
|
||||
this.props.onSelectHistoryVersion(historyVersion);
|
||||
return;
|
||||
}
|
||||
const { historyVersions } = this.state;
|
||||
const historyVersionIndex = historyVersions.findIndex(item => item.commitId === historyVersion.commitId);
|
||||
this.props.onSelectHistoryVersion(historyVersion, historyVersions[historyVersionIndex + 1]);
|
||||
}
|
||||
|
||||
renderHistoryVersions = () => {
|
||||
const { isLoading, historyVersions, errorMessage } = this.state;
|
||||
if (historyVersions.length === 0) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Loading />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<div className="h-100 w-100 d-flex align-items-center justify-content-center error-message">
|
||||
{gettext(errorMessage)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="h-100 w-100 d-flex align-items-center justify-content-center empty-tip-color">
|
||||
{gettext('No_historical_versions')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{historyVersions.map((historyVersion, index) => {
|
||||
return (
|
||||
<HistoryVersion
|
||||
key={historyVersion.commitId}
|
||||
index={index}
|
||||
currentVersion={this.props.currentVersion}
|
||||
historyVersion={historyVersion}
|
||||
onSelectHistoryVersion={this.onSelectHistoryVersion}
|
||||
onRestore={this.restoreVersion}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{isLoading && (
|
||||
<div className="loading-more d-flex align-items-center justify-content-center w-100">
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
onShowChanges = () => {
|
||||
const { isShowChanges } = this.props;
|
||||
this.props.onShowChanges(!isShowChanges);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { historyVersions } = this.state;
|
||||
|
||||
return (
|
||||
<div className="sdoc-file-history-panel h-100 o-hidden d-flex flex-column">
|
||||
<div className="sdoc-file-history-select-range">
|
||||
<div className="sdoc-file-history-select-range-title">
|
||||
{gettext('History Versions')}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classnames('sdoc-file-history-versions', { 'o-hidden': historyVersions.length === 0 } )}
|
||||
onScroll={this.onScrollHandler}
|
||||
>
|
||||
{this.renderHistoryVersions()}
|
||||
</div>
|
||||
<div className="sdoc-file-history-diff-switch d-flex align-items-center">
|
||||
<Switch
|
||||
checked={this.props.isShowChanges}
|
||||
placeholder={gettext('Show changes')}
|
||||
className="sdoc-history-show-changes w-100"
|
||||
size="small"
|
||||
onChange={this.onShowChanges}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SidePanel.propTypes = {
|
||||
isShowChanges: PropTypes.bool,
|
||||
currentVersion: PropTypes.object,
|
||||
onSelectHistoryVersion: PropTypes.func,
|
||||
onShowChanges: PropTypes.func,
|
||||
};
|
||||
|
||||
export default SidePanel;
|
||||
Reference in New Issue
Block a user