update draft&review dispaly (#2505)

* replace draft.id with draft_name

* add updateDraftsList function

* Repair operation display

* update review dispaly

* refactor code

frontend/src/app.js

@@ -27,21 +27,30 @@ class App extends Component {
       isOpen: false,
       isSidePanelClosed: false,
       draftCounts: 0,
-      draftList:[]
+      draftList:[],
+      isLoadingDraft: true,
     };
   }
 
   componentDidMount() {
-    this.getDrafts()
+    this.getDrafts();
   }
 
   getDrafts = () => {
     editUtilties.listDrafts().then(res => {
       this.setState({
         draftCounts: res.data.draft_counts,
-        draftList: res.data.data 
-      })  
-    })
+        draftList: res.data.data, 
+        isLoadingDraft: false,
+      }); 
+    });
+  }
+
+  updateDraftsList = (draft_id) => {
+    this.setState({
+      draftCounts: this.state.draftCounts - 1,
+      draftList: this.state.draftList.filter(draft => draft.id != draft_id), 
+    });
   }
 
   onCloseSidePanel = () => {
@@ -69,7 +78,11 @@ class App extends Component {
           <Router>
             <FilesActivities path={siteRoot + 'dashboard'} />
             <DraftsView path={siteRoot + 'drafts'}  currentTab={currentTab}>
-              <DraftContent path='/' getDrafts={this.getDrafts} draftList={this.state.draftList}/>
+              <DraftContent path='/' getDrafts={this.getDrafts} 
+                isLoadingDraft={this.state.isLoadingDraft}
+                draftList={this.state.draftList}
+                updateDraftsList={this.updateDraftsList}
+              />
               <ReviewContent path='reviews' />
             </DraftsView>
             <Starred path={siteRoot + 'starred'} />

frontend/src/components/draft-list-view/draft-list-item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot, lang } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import MenuControl from '../menu-control';
 import moment from 'moment';
 
@@ -66,14 +67,9 @@ class DraftListItem extends React.Component {
     window.open(url);
   }
 
-  getFileName(filePath) {
-    let lastIndex = filePath.lastIndexOf('/');
-    return filePath.slice(lastIndex+1);
-  }
-
   render() {
     let draft = this.props.draft;
-    let fileName = this.getFileName(draft.draft_file_path);
+    let fileName = Utils.getFileName(draft.draft_file_path);
     let localTime = moment.utc(draft.updated_at).toDate();
     localTime = moment(localTime).fromNow();
     return (

frontend/src/components/menu-control.js

@@ -10,7 +10,7 @@ class MenuControl extends React.Component {
  
   render() {
     return (
-      <i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'hide'}`} onClick={this.props.onClick}></i>
+      <i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'invisible'}`} onClick={this.props.onClick}></i>
     );
   }
 }

frontend/src/components/review-list-view/review-list-item.js

@@ -56,7 +56,6 @@ class ReviewListItem extends React.Component {
         <td className="icon" style={{width: '4%'}}><img src={siteRoot + 'media/img/file/192/txt.png'} alt="icon"/></td>
         <td className="name a-simulate" style={{width: '46%'}} onClick={this.onReviewsClick}>{fileName}</td>
         <td className='library'>{item.draft_origin_repo_name}</td>
-        <td className="status" style={{width: '20%'}}>{item.status}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>
         <td className="menu-toggle"></td>
       </tr>

frontend/src/components/review-list-view/review-list-view.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+import classnames from 'classnames';
 import { gettext } from '../../utils/constants';
 import ReviewListItem from './review-list-item';
 
@@ -10,23 +12,67 @@ const propTypes = {
 
 class ReviewListView extends React.Component {
 
+    constructor(props) {
+      super(props);
+  
+      this.toggle = this.toggle.bind(this);
+      this.state = {
+        activeTab: 'open'
+      };
+    }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  }
+
   render() {
     let items = this.props.itemsList;
+    let { activeTab } = this.state;
     return (
       <div className="table-container">
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === 'open' })}
+              onClick={() => { this.toggle('open');}}
+              >
+              Open
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === 'finished' })}
+              onClick={() => { this.toggle('finished');}}
+              >
+              Published
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === 'closed' })}
+              onClick={() => { this.toggle('closed');}}
+              >
+              Closed
+            </NavLink>
+          </NavItem>
+        </Nav>
         <table>
           <thead>
             <tr>
               <th style={{width: '4%'}}>{/*img*/}</th>
               <th style={{width: '26%'}}>{gettext('Name')}</th>
               <th style={{width: '20%'}}>{gettext('Library')}</th>
-              <th style={{width: '20%'}}>{gettext('Status')}</th>
               <th style={{width: '20%'}}>{gettext('Last Update')}</th>
               <th style={{width: '10%'}}></th>
             </tr>
           </thead>
           <tbody>
             { items && items.map((item) => {
+              if(item.status === activeTab) {
                 return (
                     <ReviewListItem 
                       key={item.id} 
@@ -34,6 +80,7 @@ class ReviewListView extends React.Component {
                       isItemFreezed={this.props.isItemFreezed}
                     />
                 );
+              }
             })}
           </tbody>
         </table>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { siteRoot, gettext } from '../../utils/constants';
 import editUtilties from '../../utils/editor-utilties';
+import { Utils } from '../../utils/utils';
 import Toast from '../../components/toast';
 import Loading from '../../components/loading';
 import DraftListView from '../../components/draft-list-view/draft-list-view';
@@ -12,7 +13,6 @@ class DraftContent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoadingDraft: true,
       isMenuShow: false,
       menuPosition: {top:'', left: ''},
       currentDraft: null,
@@ -21,7 +21,6 @@ class DraftContent extends React.Component {
   }
 
   componentDidMount() {
-    this.initDraftList();
     document.addEventListener('click', this.onHideContextMenu);
   }
 
@@ -29,38 +28,32 @@ class DraftContent extends React.Component {
     document.removeEventListener('click', this.onHideContextMenu);
   }
 
-  initDraftList() {
-    this.setState({isLoadingDraft: true});
-    this.props.getDrafts();
-    this.setState({
-      isLoadingDraft: false,
-    });
-  }
-
   onDeleteHandler = () => {
     let draft = this.state.currentDraft;
+    let draft_name = Utils.getFileName(draft.draft_file_path);
     editUtilties.deleteDraft(draft.id).then(res => {
-      this.initDraftList();
+      this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully deleted draft %(draft)s.');
-      msg_s = msg_s.replace('%(draft)s', draft.id);
+      msg_s = msg_s.replace('%(draft)s', draft_name);
       Toast.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to delete draft %(draft)s.');
-      msg_s = msg_s.replace('%(draft)s', draft.id);
+      msg_s = msg_s.replace('%(draft)s', draft_name);
       Toast.error(msg_s);
     });
   }
 
   onPublishHandler = () => {
     let draft = this.state.currentDraft;
+    let draft_name = Utils.getFileName(draft.draft_file_path);
     editUtilties.publishDraft(draft.id).then(res => {
-      this.initDraftList();
+      this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully published draft %(draft)s.');
-      msg_s = msg_s.replace('%(draft)s', draft.id);
+      msg_s = msg_s.replace('%(draft)s', draft_name);
       Toast.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to publish draft %(draft)s.');
-      msg_s = msg_s.replace('%(draft)s', draft.id);
+      msg_s = msg_s.replace('%(draft)s', draft_name);
       Toast.error(msg_s);
     });
   }
@@ -109,15 +102,15 @@ class DraftContent extends React.Component {
   render() {
     return (
       <div className="cur-view-content">
-        {this.state.isLoadingDraft && <Loading /> }
-        {(!this.state.isLoadingDraft && this.props.draftList.length !==0) &&
+        {this.props.isLoadingDraft && <Loading /> }
+        {(!this.props.isLoadingDraft && this.props.draftList.length !==0) &&
           <DraftListView
             draftList={this.props.draftList} 
             isItemFreezed={this.state.isItemFreezed}
             onMenuToggleClick={this.onMenuToggleClick}
           />
         }
-        {(!this.state.isLoadingDraft && this.props.draftList.length === 0) &&
+        {(!this.props.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>

frontend/src/utils/utils.js

@@ -162,4 +162,9 @@ export const Utils = {
       .parentNode
       .innerHTML;
   },
+
+  getFileName: function(filePath) {
+    let lastIndex = filePath.lastIndexOf('/');
+    return filePath.slice(lastIndex+1);
+  }
 };