feat: sdoc support list history (#5457)

* feat: sdoc support list history

* Feat: git add .

* feat: update code

* feat: update code

frontend/src/pages/sdoc-file-history/index.js

@@ -0,0 +1,261 @@
+import React, { Fragment } from 'react';
+import ReactDom from 'react-dom';
+import { Button } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, PER_PAGE, filePath, fileName, historyRepoID, canDownload, canCompare } from '../../utils/constants';
+import editUtilities from '../../utils/editor-utilities';
+import Loading from '../../components/loading';
+import Logo from '../../components/logo';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import HistoryItem from '../file-history-old/history-item';
+
+import '../../css/layout.css';
+import '../../css/toolbar.css';
+import '../../css/search.css';
+import '../../css/file-history-old.css';
+
+class SdocFileHistory extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      historyList: [],
+      currentPage: 1,
+      hasMore: false,
+      nextCommit: undefined,
+      filePath: '',
+      oldFilePath: '',
+      isLoading: true,
+      isReloadingData: false,
+    };
+  }
+
+  componentDidMount() {
+    this.listOldHistoryRecords(historyRepoID, filePath);
+  }
+
+  listNewHistoryRecords = (filePath, PER_PAGE) => {
+    editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
+      let historyData = res.data;
+      if (!historyData) {
+        this.setState({isLoading: false});
+        throw Error('There is an error in server.');
+      }
+      this.initNewRecords(res.data);
+    });
+  }
+
+  listOldHistoryRecords = (repoID, filePath) => {
+    seafileAPI.listOldFileHistoryRecords(repoID, filePath).then((res) => {
+      let historyData = res.data;
+      if (!historyData) {
+        this.setState({isLoading: false});
+        throw Error('There is an error in server.');
+      }
+      this.initOldRecords(res.data);
+    });
+  }
+
+  initNewRecords(result) {
+    if (result.total_count < 5) {
+      if (result.data.length) {
+        let commitID = result.data[result.data.length-1].commit_id;
+        let path = result.data[result.data.length-1].path;
+        let oldPath = result.data[result.data.length-1].old_path;
+        path = oldPath ? oldPath : path;
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, path, commitID).then((res) => {
+          if (!res.data) {
+            this.setState({isLoading: false});
+            throw Error('There is an error in server.');
+          }
+          this.setState({
+            historyList: result.data.concat(res.data.data.slice(1, res.data.data.length)),
+            isLoading: false,
+          });
+        });
+      } else {
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
+          if (!res.data) {
+            this.setState({isLoading: false});
+            throw Error('There is an error in server.');
+          }
+          this.setState({
+            historyList: res.data.data,
+            isLoading: false,
+          });
+        });
+      }
+    } else {
+      this.setState({
+        historyList: result.data,
+        currentPage: result.page,
+        hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
+        isLoading: false,
+      });
+    }
+  }
+
+  initOldRecords(result) {
+    if (result.data.length) {
+      this.setState({
+        historyList: result.data,
+        nextCommit: result.next_start_commit,
+        filePath: result.data[result.data.length-1].path,
+        oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
+        isLoading: false,
+      });
+    } else {
+      this.setState({nextCommit: result.next_start_commit,});
+      if (this.state.nextCommit) {
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
+          this.initOldRecords(res.data);
+        });
+      } else {
+        this.setState({isLoading: 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();
+    }
+  }
+
+  reloadMore = () => {
+    if (!this.state.isReloadingData) {
+      const commitID = this.state.nextCommit;
+      const filePath = this.state.filePath;
+      const oldFilePath = this.state.oldFilePath;
+      this.setState({ isReloadingData: true });
+      if (oldFilePath) {
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, oldFilePath, commitID).then((res) => {
+          this.updateOldRecords(res.data, oldFilePath);
+        });
+      } else {
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, commitID).then((res) => {
+          this.updateOldRecords(res.data, filePath);
+        });
+      }
+    }
+  }
+
+  updateNewRecords(result) {
+    this.setState({
+      historyList: [...this.state.historyList, ...result.data],
+      currentPage: result.page,
+      hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
+      isReloadingData: false,
+    });
+  }
+
+  updateOldRecords(result, filePath) {
+    if (result.data.length) {
+      this.setState({
+        historyList: [...this.state.historyList, ...result.data],
+        nextCommit: result.next_start_commit,
+        filePath: result.data[result.data.length-1].path,
+        oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
+        isReloadingData: false,
+      });
+    } else {
+      this.setState({nextCommit: result.next_start_commit,});
+      if (this.state.nextCommit) {
+        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
+          this.updateOldRecords(res.data, filePath);
+        });
+      }
+    }
+  }
+
+  onItemRestore = (item) => {
+    let commitId = item.commit_id;
+    let filePath = item.path;
+    editUtilities.revertFile(filePath, commitId).then(res => {
+      if (res.data.success) {
+        this.setState({ isLoading: true });
+        this.refreshFileList();
+      }
+    });
+  }
+
+  refreshFileList() {
+    seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
+      this.initOldRecords(res.data);
+    });
+  }
+
+  onSearchedClick = (searchedItem) => {
+    Utils.handleSearchedItemClick(searchedItem);
+  }
+
+  onBackClick = (event) => {
+    event.preventDefault();
+    window.history.back();
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div id="header" className="old-history-header">
+          <div className="logo">
+            <Logo showCloseSidePanelIcon={false}/>
+          </div>
+          <div className='toolbar'>
+            <CommonToolbar onSearchedClick={this.onSearchedClick} />
+          </div>
+        </div>
+        <div id="main" onScroll={this.onScrollHandler}>
+          <div className="old-history-main">
+            <Fragment>
+              <a href="#" className="go-back" title="Back" onClick={this.onBackClick}>
+                <span className="fas fa-chevron-left"></span>
+              </a>
+              <h2><span className="file-name">{fileName}</span>{' '}{gettext('History Versions')}</h2>
+            </Fragment>
+            <Fragment>
+              <table className="commit-list">
+                <thead>
+                  <tr>
+                    <th width="40%" >{gettext('Time')}</th>
+                    <th width="30%" >{gettext('Modifier')}</th>
+                    <th width="25%" >{gettext('Size')}</th>
+                    <th width="5%" ></th>
+                  </tr>
+                </thead>
+                {!this.state.isLoading &&
+                  <tbody>
+                    {this.state.historyList.map((item, index) => {
+                      return (
+                        <HistoryItem
+                          key={index}
+                          item={item}
+                          index={index}
+                          canDownload={canDownload}
+                          canCompare={canCompare}
+                          onItemRestore={this.onItemRestore}
+                        />
+                      );
+                    })}
+                  </tbody>
+                }
+              </table>
+              {(this.state.isReloadingData || this.state.isLoading) && <Loading />}
+              {this.state.nextCommit && !this.state.isLoading && !this.state.isReloadingData &&
+                <Button className="get-more-btn" onClick={this.reloadMore}>{gettext('More')}</Button>
+              }
+            </Fragment>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+ReactDom.render(<SdocFileHistory />, document.getElementById('wrapper'));

frontend/src/shared-file-view-sdoc.js

@@ -4,9 +4,10 @@ import { SimpleViewer } from '@seafile/sdoc-editor';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './_i18n/i18n-sdoc-editor';
 import Loading from './components/loading';
+import { Utils } from './utils/utils';
 
-const { serviceURL } = window.app.config;
-const { username } = window.app.pageOptions;
+const { serviceURL, siteRoot } = window.app.config;
+const { username, filePerm } = window.app.pageOptions;
 const { repoID, filePath, fileName, rawPath } = window.shared.pageOptions;
 
 window.seafile = {
@@ -16,6 +17,9 @@ window.seafile = {
   docPath: filePath,
   serviceUrl: serviceURL,
   username,
+  siteRoot,
+  docPerm: filePerm,
+  historyURL: Utils.generateHistoryURL(siteRoot, repoID, filePath),
 };
 
 ReactDom.render(

frontend/src/utils/utils.js

@@ -1536,6 +1536,11 @@ export const Utils = {
   updateTabTitle: function(content) {
     const title = document.getElementsByTagName('title')[0];
     title.innerText = content;
+  },
+
+  generateHistoryURL: function(siteRoot, repoID, path) {
+    if (!siteRoot || !repoID || !path) return '';
+    return siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + this.encodePath(path);
   }
 
 };

frontend/src/view-file-sdoc.js

@@ -4,10 +4,11 @@ import { SimpleEditor } from '@seafile/sdoc-editor';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './_i18n/i18n-sdoc-editor';
 import Loading from './components/loading';
+import { Utils } from './utils/utils';
 
-const { serviceURL, avatarURL } = window.app.config;
+const { serviceURL, avatarURL, siteRoot } = window.app.config;
 const { username, name } = window.app.userInfo;
-const { repoID, docPath, docName, docUuid, seadocAccessToken, seadocServerUrl } = window.app.pageOptions;
+const { repoID, docPath, docName, docUuid, seadocAccessToken, seadocServerUrl, filePerm } = window.app.pageOptions;
 
 window.seafile = {
   repoID,
@@ -21,6 +22,9 @@ window.seafile = {
   name,
   username,
   avatarURL,
+  siteRoot,
+  docPerm: filePerm,
+  historyURL: Utils.generateHistoryURL(siteRoot, repoID, docPath),
 };
 
 ReactDom.render(