update draft&review dispaly (#2505)

* replace draft.id with draft_name

* add updateDraftsList function

* Repair operation display

* update review dispaly

* refactor code

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,11 +10,11 @@ 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>
     );
   }
 }
 
 MenuControl.propTypes = propTypes;
 
-export default MenuControl;
+export default MenuControl;

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,30 +12,75 @@ 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) => {
-              return (
-                <ReviewListItem 
-                  key={item.id} 
-                  item={item} 
-                  isItemFreezed={this.props.isItemFreezed}
-                />
-              );
+              if(item.status === activeTab) {
+                return (
+                    <ReviewListItem 
+                      key={item.id} 
+                      item={item} 
+                      isItemFreezed={this.props.isItemFreezed}
+                    />
+                );
+              }
             })}
           </tbody>
         </table>