[share admin] upload links: added support for mobile; improvement (#4011)

* and improved 'share links'

frontend/src/pages/share-admin/upload-links.js

@@ -1,84 +1,65 @@
 import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
-import SharedUploadInfo from '../../models/shared-upload-info';
+import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
+import UploadLink from '../../models/upload-link';
+import ShareAdminLink from '../../components/dialog/share-admin-link';
 
 class Content extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalOpen: false,
-      modalContent: ''
-    };
-  }
-
-  // required by `Modal`, and can only set the 'open' state
-  toggleModal = () => {
-    this.setState({
-      modalOpen: !this.state.modalOpen
-    });
-  }
-
-  showModal = (options) => {
-    this.toggleModal();
-    this.setState({
-      modalContent: options.content
-    });
-  }
-
   render() {
     const { loading, errorMsg, items } = this.props;
 
     if (loading) {
-      return <span className="loading-icon loading-tip"></span>;
-    } else if (errorMsg) {
-      return <p className="error text-center">{errorMsg}</p>;
-    } else {
-      const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('You don\'t have any upload links')}</h2>
-          <p>{gettext('You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder.')}</p>
-        </EmptyTip>
-      );
-
-      const table = (
-        <React.Fragment>
-          <table className="table-hover">
-            <thead>
-              <tr>
-                <th width="4%">{/*icon*/}</th>
-                <th width="30%">{gettext('Name')}</th>
-                <th width="24%">{gettext('Library')}</th>
-                <th width="16%">{gettext('Visits')}</th>
-                <th width="16%">{gettext('Expiration')}</th>
-                <th width="10%">{/*Operations*/}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {items.map((item, index) => {
-                return (<Item key={index} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
-              })}
-            </tbody>
-          </table>
-
-          <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal} centered={true}>
-            <ModalHeader toggle={this.toggleModal}>{gettext('Link')}</ModalHeader>
-            <ModalBody>
-              {this.state.modalContent}
-            </ModalBody>
-          </Modal>
-        </React.Fragment>
-      );
-
-      return items.length ? table : emptyTip; 
+      return <Loading />;
     }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } 
+
+    const emptyTip = (
+      <EmptyTip>
+        <h2>{gettext('You don\'t have any upload links')}</h2>
+        <p>{gettext('You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder.')}</p>
+      </EmptyTip>
+    );
+
+    const isDesktop = Utils.isDesktop();
+    const table = (
+      <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <thead>
+          {isDesktop ? (
+            <tr>
+              <th width="4%">{/*icon*/}</th>
+              <th width="30%">{gettext('Name')}</th>
+              <th width="24%">{gettext('Library')}</th>
+              <th width="16%">{gettext('Visits')}</th>
+              <th width="16%">{gettext('Expiration')}</th>
+              <th width="10%">{/*Operations*/}</th>
+            </tr>
+          ) : ( 
+            <tr>
+              <th width="12%"></th>
+              <th width="80%"></th>
+              <th width="8%"></th>
+            </tr> 
+          )}    
+        </thead>
+        <tbody>
+          {items.map((item, index) => {
+            return (<Item key={index} isDesktop={isDesktop} item={item} onRemoveLink={this.props.onRemoveLink}/>);
+          })}
+        </tbody>
+      </table>
+    );
+
+    return items.length ? table : emptyTip; 
   }
 }
 
@@ -87,21 +68,35 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showOpIcon: false,
+      isOpIconShown: false,
+      isOpMenuOpen: false, // for mobile
+      isLinkDialogOpen: false
     };
   }
 
+ toggleOpMenu = () => {
+   this.setState({
+     isOpMenuOpen: !this.state.isOpMenuOpen
+   });
+ }
+
+  toggleLinkDialog = () => {
+    this.setState({
+      isLinkDialogOpen: !this.state.isLinkDialogOpen
+    });   
+  }
+
   handleMouseOver = () => {
-    this.setState({showOpIcon: true});
+    this.setState({isOpIconShown: true});
   }
 
   handleMouseOut = () => {
-    this.setState({showOpIcon: false});
+    this.setState({isOpIconShown: false});
   }
 
   viewLink = (e) => {
     e.preventDefault();
-    this.props.showModal({content: this.props.item.link});
+    this.toggleLinkDialog();
   }
   
   removeLink = (e) => {
@@ -109,15 +104,7 @@ class Item extends Component {
     this.props.onRemoveLink(this.props.item);
   }
 
-  getUploadParams = () => {
-    let item = this.props.item;
-    let iconUrl = Utils.getFolderIconUrl(false);
-    let uploadUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
-
-    return { iconUrl, uploadUrl };
-  }
-
-  renderExpriedData = () => {
+  renderExpiration = () => {
     let item = this.props.item;
     if (!item.expire_date) {
       return (
@@ -128,8 +115,7 @@ class Item extends Component {
     return (
       <Fragment>
         {item.is_expired ?
-          <span className="error">{expire_date}</span> :
-          expire_date
+          <span className="error">{expire_date}</span> : expire_date
         }
       </Fragment>
     );
@@ -137,25 +123,67 @@ class Item extends Component {
 
   render() {
     let item = this.props.item;
-    let { iconUrl, uploadUrl } = this.getUploadParams();
+    const { isOpIconShown, isLinkDialogOpen } = this.state;
 
-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    let linkIconClassName = 'sf2-icon-link action-icon' + iconVisibility; 
-    let deleteIconClassName = 'sf2-icon-delete action-icon' + iconVisibility;
+    const iconUrl = Utils.getFolderIconUrl(false);
+    const repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}`;
+    const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`;
 
-    return (
+    const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={iconUrl} width="24" /></td>
-        <td><Link to={uploadUrl}>{item.obj_name}</Link></td>
-        <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}`}>{item.repo_name}</Link></td>
+        <td><img src={iconUrl} alt="" width="24" /></td>
+        <td><Link to={objUrl}>{item.obj_name}</Link></td>
+        <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         <td>{item.view_cnt}</td>
-        <td>{this.renderExpriedData()}</td>
+        <td>{this.renderExpiration()}</td>
         <td>
-          <a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
-          <a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
+          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
         </td>
       </tr>
     );
+
+    const mobileItem = (
+      <tr>
+        <td><img src={iconUrl} alt="" width="24" /></td>
+        <td>
+          <Link to={objUrl}>{item.obj_name}</Link> 
+          <br />
+          <span>{item.repo_name}</span><br />
+          <span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span>
+          <span className="item-meta-info">{this.renderExpiration()}<span className="small text-secondary">({gettext('Expiration')})</span></span>
+        </td>
+        <td>
+          <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+            <DropdownToggle
+              tag="i"
+              className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
+              title={gettext('More Operations')}
+              data-toggle="dropdown"
+              aria-expanded={this.state.isOpMenuOpen}
+            />
+            <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+              <div className="mobile-operation-menu-bg-layer"></div>
+              <div className="mobile-operation-menu">
+                {!item.is_expired && <DropdownItem className="mobile-menu-item" onClick={this.viewLink}>{gettext('View')}</DropdownItem>}
+                <DropdownItem className="mobile-menu-item" onClick={this.removeLink}>{gettext('Remove')}</DropdownItem>
+              </div>
+            </div>
+          </Dropdown>
+        </td>
+      </tr>
+    );
+    return (
+      <Fragment>
+        {this.props.isDesktop ? desktopItem : mobileItem}
+        {isLinkDialogOpen &&
+        <ShareAdminLink
+          link={item.link}
+          toggleDialog={this.toggleLinkDialog}
+        />
+        }
+      </Fragment>
+    );
   }
 }
 
@@ -172,9 +200,8 @@ class ShareAdminUploadLinks extends Component {
 
   componentDidMount() {
     seafileAPI.listUploadLinks().then((res) => {
-      // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       let items = res.data.map(item => {
-        return new SharedUploadInfo(item);
+        return new UploadLink(item);
       });
       this.setState({
         loading: false,
@@ -209,13 +236,10 @@ class ShareAdminUploadLinks extends Component {
         return uploadItem.token !== item.token;
       });
       this.setState({items: items});
-      let message = gettext("Successfully deleted upload link.");
+      const message = gettext('Successfully deleted 1 item.');
       toaster.success(message);
     }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext("Failed to delete upload link.");
-      }
+      const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   }
@@ -226,7 +250,7 @@ class ShareAdminUploadLinks extends Component {
         <div className="cur-view-container">
           <div className="cur-view-path share-upload-nav">
             <ul className="nav">
-              { canGenerateShareLink && (
+              {canGenerateShareLink && (
                 <li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
               )}
               <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">{gettext('Upload Links')}</Link></li>
@@ -234,9 +258,9 @@ class ShareAdminUploadLinks extends Component {
           </div>
           <div className="cur-view-content">
             <Content
+              loading={this.state.loading}
               errorMsg={this.state.errorMsg}
               items={this.state.items}
-              loading={this.state.loading}
               onRemoveLink={this.onRemoveLink}
             />
           </div>