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>

frontend/src/css/common.css

@@ -0,0 +1,100 @@
+.panel-heading {
+  position: relative;
+  padding: .5rem 1rem;
+  width: 100%;
+  border-bottom: 1px solid #e8e8e8;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  height: 36px;
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.a-simulate {
+  color: #eb8205 !important;
+  text-decoration: none;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.a-simulate:hover {
+  text-decoration: underline;
+}
+
+.flex-right {
+  justify-content: flex-end;
+}
+/* begin main table list style */
+
+.table-container {
+  flex: 1;
+  padding: 10px 1rem;
+  overflow: auto;
+}
+
+.table-container table {
+  width: 100%;
+}
+
+.table-container table th {
+  text-align: left;
+  font-weight: normal;
+  color: #9c9c9c;
+}
+
+.table-container table td {
+  color: #333;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.table-container table th, .table-container table td {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+
+.table-container table tr img {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+/* specific handler */
+.table-container table .menu-toggle {
+  text-align: center;
+}
+
+.tr-highlight {
+  background-color: #f8f8f8;
+}
+
+/* end main list style */
+
+/* begin dropdown-menu style */
+.dropdown-menu {
+  min-width: 8rem;
+}
+/* end dropdown-menu style */
+
+/* begin tip */
+.empty-tip {
+  padding: 30px 40px;
+  background-color: #FAFAFA;
+  border: solid 1px #DDD;
+  border-radius: 3px;
+  box-shadow: inset 0 0 8px #EEE;
+  margin-top: 5.5em;
+}
+
+.empty-tip h2 {
+  text-align: center;
+}
+/* end tip */

frontend/src/dashboard.js

@@ -8,7 +8,6 @@ import Notification from './components/notification';
 
 import { SeafileAPI } from 'seafile-js';
 import cookie from 'react-cookies';
-
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';

frontend/src/drafts.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import editUtilties from './utils/editor-utilties';
+import SidePanel from './pages/drafts/side-panel';
+import MainPanel from './pages/drafts/main-panel';
+
+import 'seafile-ui';
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
+import './css/layout.css';
+import './css/common.css';
+
+class Drafts extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      draftList: [],
+      isLoadingDraft: true,
+    };
+  }
+
+  componentDidMount() {
+    this.initDraftList();
+  }
+
+  initDraftList() {
+    editUtilties.listDrafts().then(res => {
+      this.setState({
+        draftList: res.data.data,
+        isLoadingDraft: false,
+      });
+    });
+  }
+
+  deleteDraft = (draft) => {
+    editUtilties.deleteDraft(draft.id).then(res => {
+      this.initDraftList();
+    })
+  }
+
+  publishDraft = (draft) => {
+    editUtilties.publishDraft(draft.id).then(res => {
+      this.initDraftList();
+    })
+  }
+
+  render() {
+    return (
+      <div id="main">
+        <SidePanel></SidePanel>
+        <MainPanel 
+          isLoadingDraft={this.state.isLoadingDraft}
+          draftList={this.state.draftList}
+          deleteDraft={this.deleteDraft}
+          publishDraft={this.publishDraft}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Drafts />,
+  document.getElementById('wrapper')
+);

frontend/src/pages/drafts/main-panel.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../components/constance';
+import Loading from '../../components/loading';
+import Account from '../../components/account';
+import { seafileAPI } from '../../utils/editor-utilties';
+import Notification from '../../components/notification';
+import ListView from '../../components/list-view/list-view';
+import ListMenu from '../../components/list-view/list-menu';
+
+const propTypes = {
+  draftList: PropTypes.array.isRequired,
+};
+
+class MainPanel extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMenuShow: false,
+      menuPosition: {top:'', left: ''},
+      currentDraft: null,
+      isItemFreezed: false, 
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onHideContextMenu);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onHideContextMenu);
+  }
+
+  onMenuToggleClick = (e, draft) => {
+    if (this.state.isMenuShow) {
+      this.onHideContextMenu();
+    } else {
+      this.onShowContextMenu(e, draft);
+    }
+  }
+
+  onShowContextMenu = (e, draft) => {
+    let left = e.clientX - 8*16;
+    let top  = e.clientY + 10;
+    let position = {top: top, left: left};
+    this.setState({
+      isMenuShow: true,
+      menuPosition: position,
+      currentDraft: draft,
+      isItemFreezed: true
+    });
+  }
+
+  onHideContextMenu = () => {
+    this.setState({
+      isMenuShow: false,
+      currentDraft: null,
+      isItemFreezed: false
+    });
+  }
+
+  onPublishHandler = () => {
+    this.props.publishDraft(this.state.currentDraft);
+  }
+
+  onDeleteHandler = () => {
+    this.props.deleteDraft(this.state.currentDraft);
+  }
+  
+  render() {
+    return (
+      <div className="main-panel">
+        <div className="main-panel-north flex-right">
+          <Notification seafileAPI={seafileAPI}/>
+          <Account />
+        </div>
+        <div className="main-panel-center">
+          <div className="panel-heading text-left">{gettext('Drafts')}</div>
+          {this.props.isLoadingDraft ?
+            <Loading /> :
+            <div className="table-container">
+              {this.props.draftList.length ? 
+                <ListView
+                  draftList={this.props.draftList} 
+                  isItemFreezed={this.state.isItemFreezed}
+                  onMenuToggleClick={this.onMenuToggleClick}
+                /> :
+                <div className="message empty-tip">
+                  <h2>{gettext('There is no draft file existing')}</h2>
+                </div>
+              }
+            </div>
+          }
+          {
+            this.state.isMenuShow && 
+            <ListMenu 
+              isMenuShow={this.state.isMenuShow} 
+              currentDraft={this.state.currentDraft} 
+              menuPosition={this.state.menuPosition} 
+              onPublishHandler={this.onPublishHandler}
+              onDeleteHandler={this.onDeleteHandler}
+            />
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+MainPanel.propTypes = propTypes;
+
+export default MainPanel;

frontend/src/pages/drafts/side-panel.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Logo from '../../components/logo';
+import MainSideNav from '../../components/main-side-nav';
+import SideNavFooter from '../../components/side-nav-footer';
+
+
+class SidePanel extends React.Component {
+
+  render() {
+    return (
+      <div className="side-panel">
+        <div className="side-panel-north"><Logo /></div>
+        <div className="side-panel-center">
+          <MainSideNav />
+        </div>
+        <div className="side-panel-footer">
+          <SideNavFooter />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SidePanel;

frontend/src/utils/editor-utilties.js

@@ -97,9 +97,21 @@ class EditorUtilities {
   revertFile(filePath, commitID) {
     return seafileAPI.revertFile(historyRepoID, filePath, commitID);
   }
+
+  listDrafts() {
+    return seafileAPI.listDrafts();
+  }
+
+  deleteDraft(id) {
+    return seafileAPI.deleteDraft(id);
+  }
+
+  publishDraft(id) {
+    return seafileAPI.publishDraft(id);
+  }
 }
 
 const editorUtilities = new EditorUtilities();
 
 export default editorUtilities;
-export { seafileAPI };
+export { seafileAPI };