Draft review (#2416)

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { siteRoot, lang } from '../../utils/constants';
+import moment from 'moment';
+
+moment.locale(lang);
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+}
+class ReviewListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlight: '',
+    };
+  }
+
+  onMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: 'tr-highlight'
+      });
+    }
+  }
+
+  onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: ''
+      });
+    }
+  }
+
+  onReviewsClick = () => {
+    let item = this.props.item;
+    let filePath = item.draft_file_path;
+    let itemID = item.id;
+    window.open(siteRoot + 'drafts/review/' + itemID);
+  }
+
+  getFileName(filePath) {
+    let lastIndex = filePath.lastIndexOf("/");
+    return filePath.slice(lastIndex+1);
+  }
+
+  render() {
+    let item = this.props.item;
+    let fileName = this.getFileName(item.draft_file_path);
+    let localTime = moment.utc(item.updated_at).toDate();
+    localTime = moment(localTime).fromNow();
+
+    return (
+      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="icon" style={{width: "4%"}}><img src={siteRoot + "media/img/file/192/txt.png"} /></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>
+    );
+  }
+}
+
+ReviewListItem.propTypes = propTypes;
+
+export default ReviewListItem;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import ReviewListItem from './review-list-item';
+
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+  itemsList: PropTypes.array.isRequired,
+};
+
+class ReviewListView extends React.Component {
+
+  render() {
+    let items = this.props.itemsList;
+    return (
+      <div className="table-container">
+        <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}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+     </div>
+    );
+  }
+}
+
+ReviewListView.propTypes = propTypes;
+
+export default ReviewListView;