Merge pull request #5771 from haiwen/feat-sdoc-history-group

feat: sdoc history group
haiwen · Nov 22, 2023 · 2a859dc · 2a859dc
2 parents 99ee1a7 + 95769aa
commit 2a859dc
Show file tree

Hide file tree

Showing 11 changed files with 428 additions and 120 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,7 +36,7 @@
     "react-select": "5.7.0",
     "react-transition-group": "4.4.5",
     "reactstrap": "8.9.0",
-    "seafile-js": "0.2.217",
+    "seafile-js": "0.2.218",
     "socket.io-client": "^2.2.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^3.0.1",

diff --git a/frontend/src/pages/sdoc/sdoc-file-history/history-version.js b/frontend/src/pages/sdoc/sdoc-file-history/history-version.js
@@ -2,6 +2,7 @@ import moment from 'moment';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
+import classnames from 'classnames';
 import { gettext, filePath } from '../../../utils/constants';
 import URLDecorator from '../../../utils/url-decorator';
 import Rename from '../../../components/rename';
@@ -39,9 +40,9 @@ class HistoryVersion extends React.Component {
 
   onClick = () => {
     this.setState({ isShowOperationIcon: false });
-    const { currentVersion, historyVersion } = this.props;
+    const { currentVersion, historyVersion, path } = this.props;
     if (currentVersion.commit_id === historyVersion.commit_id) return;
-    this.props.onSelectHistoryVersion(historyVersion);
+    this.props.onSelectHistoryVersion(path);
   };
 
   onRestore = () => {
@@ -73,19 +74,36 @@ class HistoryVersion extends React.Component {
     this.toggleRename();
   };
 
+  showDailyHistory = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    const { path } = this.props;
+    this.props.showDailyHistory(path);
+  };
+
   render() {
-    const { currentVersion, historyVersion } = this.props;
+    const { currentVersion, historyVersion, path, showDaily } = this.props;
     if (!currentVersion || !historyVersion) return null;
-    const { ctime, commit_id, creator_name, obj_id, name} = historyVersion;
+    const { ctime, commit_id, creator_name, obj_id, name, count } = historyVersion;
     const isHighlightItem = commit_id === currentVersion.commit_id;
     const url = URLDecorator.getUrl({ type: 'download_historic_file', filePath: filePath, objID: obj_id });
     return (
       <li
-        className={`history-list-item ${isHighlightItem ? 'item-active' : ''}`}
+        className={`history-list-item ${isHighlightItem ? 'item-active' : ''} ${path[2] > 0 ? 'daily-history-detail' : ''}`}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onClick={this.onClick}
       >
+        {path[2] === 0 && (
+          <div className="daily-history-detail-toggle-container">
+            {count > 1 && (
+              <div className={classnames('daily-history-detail-toggle', { 'daily-history-detail-show': showDaily })} onClick={this.showDailyHistory}>
+                <i className="dropdown-toggle"></i>
+              </div>
+            )}
+          </div>
+        )}
+        {path[2] > 0 && (<div className="daily-history-detail-no-more"></div>)}
         <div className="history-info">
           {this.state.isRenameShow ?
             <Rename name={name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/>
@@ -109,7 +127,7 @@ class HistoryVersion extends React.Component {
             <DropdownMenu>
               {/* {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>} */}
               <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
-              {(this.props.index !== 0) && <DropdownItem onClick={this.onItemCopy}>{gettext('Copy')}</DropdownItem>}
+              {(path[0] !== 0 && path[1] !== 0 && path[2] !== 0) && <DropdownItem onClick={this.onItemCopy}>{gettext('Copy')}</DropdownItem>}
               <DropdownItem onClick={this.toggleRename}>{gettext('Rename')}</DropdownItem>
             </DropdownMenu>
           </Dropdown>
@@ -120,13 +138,15 @@ class HistoryVersion extends React.Component {
 }
 
 HistoryVersion.propTypes = {
-  index: PropTypes.number,
+  showDaily: PropTypes.bool,
+  path: PropTypes.array,
   currentVersion: PropTypes.object.isRequired,
   historyVersion: PropTypes.object,
   onSelectHistoryVersion: PropTypes.func.isRequired,
   onRestore: PropTypes.func.isRequired,
   onCopy: PropTypes.func.isRequired,
   renameHistoryVersion: PropTypes.func.isRequired,
+  showDailyHistory: PropTypes.func.isRequired,
 };
 
 export default HistoryVersion;
diff --git a/frontend/src/css/sdoc-file-history.css → ...rc/pages/sdoc/sdoc-file-history/index.css b/frontend/src/css/sdoc-file-history.css → ...rc/pages/sdoc/sdoc-file-history/index.css
@@ -150,6 +150,10 @@
   border-bottom: 1px solid #e5e5e5;
 }
 
+.sdoc-file-history-versions .history-list-item.history-month-title {
+  padding: 5px 16px;
+}
+
 .sdoc-file-history-versions .history-list-item:last-child {
   border-bottom: none;
 }
@@ -159,6 +163,25 @@
   cursor: pointer;
 }
 
+.sdoc-file-history-versions .history-list-item .history-operation {
+  flex-shrink: 0;
+}
+
+.sdoc-file-history-versions .history-list-item .history-info {
+  overflow: hidden;
+}
+
+.sdoc-file-history-versions .history-list-item .history-info .name {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-file-history-versions .history-list-item.item-active .history-info .name{
+  color: #ff8000;
+}
+
 .sdoc-file-history-versions .history-list-item .history-operation:hover {
   cursor: pointer;
 }
@@ -210,6 +233,57 @@
   font-weight: bolder;
 }
 
+.sdoc-file-history-versions .history-info .rename-container,
+.sdoc-file-history-versions .history-info .rename-container input {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  overflow: hidden;
+}
+
+.sdoc-file-history-versions .history-info .rename-container input:focus {
+  box-shadow: none;
+}
+
+.sdoc-file-history-versions .daily-history-detail-toggle-container {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sdoc-file-history-versions .daily-history-detail-toggle-container .daily-history-detail-toggle {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-file-history-versions .daily-history-detail-no-more {
+  width: 20px;
+  height: 20px;
+  margin-right: 14px;
+}
+
+.sdoc-file-history-versions .daily-history-detail-toggle .dropdown-toggle {
+  font-size: 18px;
+  color: #888;
+  transform: rotate(-90deg);
+  transition: all .1s;
+}
+
+.sdoc-file-history-versions .daily-history-detail-toggle.daily-history-detail-show .dropdown-toggle {
+  transform: unset;
+}
+
+.sdoc-file-history-versions .daily-history-detail-toggle .dropdown-toggle:hover {
+  color: #333;
+  cursor: pointer;
+}
+
 @media (min-width:992px) {
 
   .history-side-panel {

diff --git a/frontend/src/pages/sdoc/sdoc-file-history/index.js b/frontend/src/pages/sdoc/sdoc-file-history/index.js
@@ -12,7 +12,7 @@ import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 
 import '../../../css/layout.css';
-import '../../../css/sdoc-file-history.css';
+import './index.css';
 
 const { serviceURL, avatarURL, siteRoot } = window.app.config;
 const { username, name } = window.app.pageOptions;
@@ -48,15 +48,15 @@ class SdocFileHistory extends React.Component {
     };
   }
 
-  onSelectHistoryVersion = (currentVersion, lastVersion) => {
+  onSelectHistoryVersion = (currentVersion, isShowChanges) => {
     this.setState({ isLoading: true, currentVersion });
     seafileAPI.getFileRevision(historyRepoID, currentVersion.commit_id, currentVersion.path).then(res => {
       return seafileAPI.getFileContent(res.data);
     }).then(res => {
       const currentVersionContent = res.data;
-      if (lastVersion) {
-        seafileAPI.getFileRevision(historyRepoID, lastVersion.commit_id, lastVersion.path).then(res => {
-          return seafileAPI.getFileContent(res.data);
+      if (isShowChanges) {
+        seafileAPI.getNextFileRevision(historyRepoID, currentVersion.id, currentVersion.path).then(res => {
+          return res.data ? seafileAPI.getFileContent(res.data) : { data: '' };
         }).then(res => {
           const lastVersionContent = res.data;
           this.setContent(currentVersionContent, lastVersionContent);
@@ -79,28 +79,28 @@ class SdocFileHistory extends React.Component {
     this.setState({ currentVersionContent, lastVersionContent, isLoading: false, changes: [], currentDiffIndex: 0 });
   };
 
-  onShowChanges = (isShowChanges, lastVersion) => {
-    if (isShowChanges && lastVersion) {
-      const { currentVersionContent } = this.state;
-      this.setState({ isLoading: true }, () => {
+  onShowChanges = (isShowChanges) => {
+    if (isShowChanges) {
+      const { currentVersionContent, currentVersion } = this.state;
+      this.setState({ isLoading: true, isShowChanges }, () => {
         localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + '');
-        seafileAPI.getFileRevision(historyRepoID, lastVersion.commit_id, lastVersion.path).then(res => {
-          return seafileAPI.getFileContent(res.data);
+        seafileAPI.getNextFileRevision(historyRepoID, currentVersion.id, currentVersion.path).then(res => {
+          return res.data ? seafileAPI.getFileContent(res.data) : { data: '' };
         }).then(res => {
           const lastVersionContent = res.data;
           this.setContent(currentVersionContent, lastVersionContent);
-          this.setState({ isShowChanges });
         }).catch(error => {
           const errorMessage = Utils.getErrorMsg(error, true);
           toaster.danger(gettext(errorMessage));
           this.setContent(currentVersionContent, '');
-          this.setState({ isShowChanges });
         });
       });
       return;
     }
-    this.setState({ isShowChanges }, () => {
-      localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + '');
+    this.setState({ isLoading: true, isShowChanges }, () => {
+      this.setState({ isLoading: false, lastVersionContent: '' }, () => {
+        localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + '');
+      });
     });
   };
 
@@ -175,10 +175,10 @@ class SdocFileHistory extends React.Component {
           >
             <span className="fas fa-chevron-down"></span>
           </div>
-          <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-last">
+          <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-last" delay={0} fade={false}>
             {gettext('Last modification')}
           </UncontrolledTooltip>
-          <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-next">
+          <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-next" delay={0} fade={false}>
             {gettext('Next modification')}
           </UncontrolledTooltip>
         </div>