Drafts module (#2375)

frontend/src/components/constance.js

@@ -9,6 +9,7 @@ export const siteTitle = window.app.config.siteTitle;
 export const logoWidth = window.app.config.logoWidth;
 export const logoHeight = window.app.config.logoHeight;
 export const isPro = window.app.config.isPro === "True";
+export const lang = window.app.config.lang;
 
 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { siteRoot, lang } from '../constance';
+import NodeMenuControl from '../menu-component/node-menu-control';
+import moment from 'moment';
+
+moment.locale(lang);
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+  onMenuToggleClick: PropTypes.func.isRequired,
+}
+class ListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMenuControlShow: false,
+      highlight: '',
+    };
+  }
+
+  onMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isMenuControlShow: true,
+        highlight: 'tr-highlight'
+      });
+    }
+  }
+
+  onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isMenuControlShow: false,
+        highlight: ''
+      });
+    }
+  }
+
+  onMenuToggleClick = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    let draft = this.props.draft;
+    this.props.onMenuToggleClick(e, draft);
+  }
+
+  onDraftEditClick = () => {
+    let draft = this.props.draft;
+    let filePath = draft.draft_file_path;
+    let repoID = draft.draft_repo_id;
+    window.location.href= siteRoot + 'lib/' + repoID + '/file' + filePath + '?mode=edit';
+  }
+
+  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 localTime = moment.utc(draft.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.onDraftEditClick}>{fileName}</td>
+        <td className="owner" style={{width: "20%"}}>{draft.owner}</td>
+        <td className="update" style={{width: "20%"}}>{localTime}</td>
+        <td className="menu-toggle" style={{width: "10%"}}>
+          <NodeMenuControl
+            isShow={this.state.isMenuControlShow}
+            onClick={this.onMenuToggleClick}
+          />
+        </td>
+      </tr>
+    );
+  }
+}
+
+ListItem.propTypes = propTypes;
+
+export default ListItem;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../constance';
+
+const propTypes = {
+  isMenuShow: PropTypes.bool.isRequired,
+  menuPosition: PropTypes.object.isRequired,
+  onDeleteHandler: PropTypes.func.isRequired,
+  onPublishHandler: PropTypes.func.isRequired
+};
+
+class ListMenu extends React.Component {
+
+  render() {
+    let style = '';
+    let {isMenuShow, menuPosition} = this.props;
+    if (isMenuShow) {
+      style = {position: 'fixed', top: menuPosition.top, left: menuPosition.left, display: 'block'}
+    }
+    return (
+      <div>
+        <ul className="dropdown-menu" style={style}>
+          <li className="dropdown-item" onClick={this.props.onDeleteHandler}>{gettext('Delete')}</li>
+          <li className="dropdown-item" onClick={this.props.onPublishHandler}>{gettext('Publish')}</li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+ListMenu.propTypes = propTypes;
+
+export default ListMenu;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../constance';
+import ListItem from './list-item';
+
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+  draftList: PropTypes.array.isRequired,
+  onMenuToggleClick: PropTypes.func.isRequired,
+};
+
+class ListView extends React.Component {
+
+  render() {
+    let drafts = this.props.draftList;
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th style={{width: '4%'}}>{/*img*/}</th>
+            <th style={{width: '46%'}}>{gettext('Name')}</th>
+            <th style={{width: '20%'}}>{gettext('Owner')}</th>
+            <th style={{width: '20%'}}>{gettext('Update time')}</th>
+            <th style={{width: '10%'}}></th>
+          </tr>
+        </thead>
+        <tbody>
+          { drafts && drafts.map((draft) => {
+            return (
+              <ListItem 
+                key={draft.id} 
+                draft={draft} 
+                onMenuToggleClick={this.props.onMenuToggleClick} 
+                isItemFreezed={this.props.isItemFreezed}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+ListView.propTypes = propTypes;
+
+export default ListView;

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

@@ -114,6 +114,11 @@ class  MainSideNav extends React.Component {
               <a className="ellipsis user-select-no" title="Share Admin" onClick={this.shExtend}><span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span><span aria-hidden="true" className="sf2-icon-wrench"></span>Share Admin</a>
               {this.renderSharedAdmin()}
             </li>
+            <li className="tab">
+              <a href={siteRoot + 'drafts/'}>
+                <span className="sf2-icon-edit" aria-hidden="true"></span>Drafts
+              </a>
+            </li>
           </ul>
         </div>
       </div>