update draft (#2491)

frontend/src/app.js

@@ -9,6 +9,7 @@ import DraftContent from './pages/drafts/draft-content';
 import ReviewContent from './pages/drafts/review-content';
 import FilesActivities from './pages/dashboard/files-activities';
 import Starred from './pages/starred/starred';
+import editUtilties from './utils/editor-utilties';
 
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
@@ -25,9 +26,24 @@ class App extends Component {
     this.state = {
       isOpen: false,
       isSidePanelClosed: false,
+      draftCounts: 0,
+      draftList:[]
     };
   }
 
+  componentDidMount() {
+    this.getDrafts()
+  }
+
+  getDrafts = () => {
+    editUtilties.listDrafts().then(res => {
+      this.setState({
+        draftCounts: res.data.draft_counts,
+        draftList: res.data.data 
+      })  
+    })
+  }
+
   onCloseSidePanel = () => {
     this.setState({
       isSidePanelClosed: !this.state.isSidePanelClosed
@@ -41,18 +57,19 @@ class App extends Component {
   }
 
   render() {
+
     let href = window.location.href.split('/');
     let currentTab = href[href.length - 2];
 
     return (
       <div id="main">
-        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} />
+        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} draftCounts={this.state.draftCounts} />
 
         <MainPanel onShowSidePanel={this.onShowSidePanel}>
           <Router>
             <FilesActivities path={siteRoot + 'dashboard'} />
             <DraftsView path={siteRoot + 'drafts'}  currentTab={currentTab}>
-              <DraftContent path='/' />
+              <DraftContent path='/' getDrafts={this.getDrafts} draftList={this.state.draftList}/>
               <ReviewContent path='reviews' />
             </DraftsView>
             <Starred path={siteRoot + 'starred'} />

frontend/src/components/main-side-nav.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import { gettext, siteRoot } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
+import { Badge } from 'reactstrap';
 
 const propTypes = {
   currentTab: PropTypes.string.isRequired,
@@ -172,7 +173,7 @@ class MainSideNav extends React.Component {
             <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
               <Link to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                 <span className="sf2-icon-edit" aria-hidden="true"></span>
-                {gettext('Drafts')}
+                {gettext('Drafts')}  {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
               </Link>
             </li>
             <li className="tab" id="share-admin-nav">

frontend/src/components/side-panel.js

@@ -19,7 +19,7 @@ class SidePanel extends React.Component {
           <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
         </div>
         <div className="side-panel-center">
-          <MainSideNav currentTab={this.props.currentTab}/>
+          <MainSideNav currentTab={this.props.currentTab} draftCounts={this.props.draftCounts}/>
         </div>
         <div className="side-panel-footer">
           <SideNavFooter />

frontend/src/markdown-editor.js

@@ -13,6 +13,8 @@ let mode = window.app.pageOptions.mode;
 let draftID = window.app.pageOptions.draftID;
 let reviewID = window.app.pageOptions.reviewID;
 let isDraft = window.app.pageOptions.isDraft;
+let hasDraft = window.app.pageOptions.hasDraft;
+let draftFilePath = window.app.pageOptions.draftFilePath;
 let userName = window.app.userInfo.username;
 let dirPath = '/';
 
@@ -210,6 +212,10 @@ class EditorUtilities {
   getUserAvatar(size) {
     return seafileAPI.getUserAvatar(userName, size);
   }
+
+  goDraftPage() {
+    window.location.href = serviceUrl + '/lib/' + repoID + '/file' + draftFilePath + '?mode=edit'
+  }
 }
 
 
@@ -286,6 +292,7 @@ class MarkdownEditor extends React.Component {
           draftID={draftID}
           reviewID={reviewID}
           isDraft={isDraft}
+          hasDraft={hasDraft}
         />
       );
     }   

frontend/src/pages/drafts/draft-content.js

@@ -12,7 +12,6 @@ class DraftContent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      draftList: [],
       isLoadingDraft: true,
       isMenuShow: false,
       menuPosition: {top:'', left: ''},
@@ -32,11 +31,9 @@ class DraftContent extends React.Component {
 
   initDraftList() {
     this.setState({isLoadingDraft: true});
-    editUtilties.listDrafts().then(res => {
-      this.setState({
-        draftList: res.data.data,
-        isLoadingDraft: false,
-      });
+    this.props.getDrafts();
+    this.setState({
+      isLoadingDraft: false,
     });
   }
 
@@ -113,14 +110,14 @@ class DraftContent extends React.Component {
     return (
       <div className="cur-view-content">
         {this.state.isLoadingDraft && <Loading /> }
-        {(!this.state.isLoadingDraft && this.state.draftList.length !==0) &&
+        {(!this.state.isLoadingDraft && this.props.draftList.length !==0) &&
           <DraftListView
-            draftList={this.state.draftList} 
+            draftList={this.props.draftList} 
             isItemFreezed={this.state.isItemFreezed}
             onMenuToggleClick={this.onMenuToggleClick}
           />
         }
-        {(!this.state.isLoadingDraft && this.state.draftList.length === 0) &&
+        {(!this.state.isLoadingDraft && this.props.draftList.length === 0) &&
           <div className="message empty-tip">
             <h2>{gettext('No draft yet')}</h2>
             <p>{gettext('Draft is a way to let you collaborate with others on files. You can create a draft from a file, edit the draft and then ask for a review. The original file will be updated only after the draft be reviewed.')}</p>