[share admin] share links: added support for mobile; bugfix & improvement (#4004)

* and bugfix for 'generate share link'
2025-09-06 17:33:18 +00:00 · 2019-08-20 12:00:58 +08:00
parent d15a089bc3
commit 2e1fc1110f
6 changed files with 280 additions and 92 deletions
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import copy from 'copy-to-clipboard';
 import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
-import { gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
+import { isPro, gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import SharedLinkInfo from '../../models/shared-link-info';
+import ShareLink from '../../models/share-link';
 import toaster from '../toast';
 import Loading from '../loading';
 import SendLink from '../send-link';
@@ -43,7 +43,7 @@ class GenerateShareLink extends React.Component {
      'can_edit': false, 
      'can_download': true
    };
-    this.isOfficeFile = Utils.isOfficeFile(this.props.itemPath);
+    this.isOfficeFile = Utils.isEditableOfficeFile(this.props.itemPath);
  }

  componentDidMount() {
@@ -51,7 +51,7 @@ class GenerateShareLink extends React.Component {
    let repoID = this.props.repoID;
    seafileAPI.getShareLink(repoID, path).then((res) => {
      if (res.data.length !== 0) {
-        let sharedLinkInfo = new SharedLinkInfo(res.data[0]);
+        let sharedLinkInfo = new ShareLink(res.data[0]);
        this.setState({
          isLoading: false,
          sharedLinkInfo: sharedLinkInfo
@@ -133,11 +133,10 @@ class GenerateShareLink extends React.Component {
      this.setState({errorInfo: ''});
      let { itemPath, repoID } = this.props;
      let { password, isExpireChecked, expireDays } = this.state;
-      let permissions = this.permissions;
-      permissions = JSON.stringify(permissions);
+      let permissions = isPro ? JSON.stringify(this.permissions) : '';
      const expireDaysSent = isExpireChecked ? expireDays : '';
      seafileAPI.createShareLink(repoID, itemPath, password, expireDaysSent, permissions).then((res) => {
-        let sharedLinkInfo = new SharedLinkInfo(res.data);
+        let sharedLinkInfo = new ShareLink(res.data);
        this.setState({sharedLinkInfo: sharedLinkInfo});
      }).catch((error) => {
        let errMessage = Utils.getErrorMsg(error);
@@ -402,6 +401,8 @@ class GenerateShareLink extends React.Component {
              </FormGroup>
            </Fragment>
          )}
+          {isPro && ( 
+            <Fragment>
          <FormGroup check>
            <Label check>
              <span>{'  '}{gettext('Set permission')}</span>
@@ -424,6 +425,8 @@ class GenerateShareLink extends React.Component {
              </Label>
            </FormGroup>
          }
+            </Fragment>
+          )}
          {this.state.errorInfo && <Alert color="danger" className="mt-2">{gettext(this.state.errorInfo)}</Alert>}
          <Button onClick={this.generateShareLink} className="mt-2">{gettext('Generate')}</Button>
        </Form>
--- a/frontend/src/components/dialog/share-link-permission-select.js
+++ b/frontend/src/components/dialog/share-link-permission-select.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  currentPerm: PropTypes.string.isRequired,
+  permissions: PropTypes.array.isRequired,
+  changePerm: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class ShareLinkPermissionSelect extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentOption: this.props.currentPerm 
+    };
+  }
+
+  switchOption = (e) => {
+    if (!e.target.checked) {
+      return;
+    }
+
+    const currentOption = e.target.value;
+    this.setState({
+      currentOption: currentOption 
+    });
+
+    this.props.changePerm(currentOption);
+    this.props.toggleDialog();
+  }
+
+  render() {
+    const options = this.props.permissions;
+    const { currentOption } = this.state;
+
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalBody>
+          {options.map((item, index) => {
+            return (
+              <div className="d-flex" key={index}>
+                <input id={`option-${index}`} className="mt-1" type="radio" name="permission" value={item} checked={currentOption == item} onChange={this.switchOption} />
+                <label htmlFor={`option-${index}`} className="ml-2">
+                  {Utils.getShareLinkPermissionObject(item).text}
+                </label>
+              </div>
+            );
+          })}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+ShareLinkPermissionSelect.propTypes = propTypes;
+
+export default ShareLinkPermissionSelect;
--- a/frontend/src/components/select-editor/share-links-permission-editor.js
+++ b/frontend/src/components/select-editor/share-links-permission-editor.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import SelectEditor from './select-editor';

 const propTypes = {
@@ -11,16 +11,10 @@ const propTypes = {
  onPermissionChanged: PropTypes.func.isRequired
 };

-class ShareLinksPermissionEditor extends React.Component {
+class ShareLinkPermissionEditor extends React.Component {

  translatePermission = (permission) => {
-    if (permission === 'Preview only') {
-      return gettext('Preview only');
-    }
-      
-    if (permission === 'Preview and download') {
-      return gettext('Preview and download');
-    }
+    return Utils.getShareLinkPermissionObject(permission).text;
  }

  render() {
@@ -37,6 +31,6 @@ class ShareLinksPermissionEditor extends React.Component {
  }
 }

-ShareLinksPermissionEditor.propTypes = propTypes;
+ShareLinkPermissionEditor.propTypes = propTypes;

-export default ShareLinksPermissionEditor;
+export default ShareLinkPermissionEditor;
--- a/frontend/src/models/shared-link-info.js
+++ b/frontend/src/models/shared-link-info.js
@@ -1,4 +1,4 @@
-class SharedLinkInfo {
+class ShareLink {

  constructor(object) {
    this.repo_id = object.repo_id;
@@ -18,4 +18,4 @@ class SharedLinkInfo {

 }

-export default SharedLinkInfo;
+export default ShareLink;
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -1,15 +1,18 @@
 import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
-import SharedLinkInfo from '../../models/shared-link-info';
-import ShareLinksPermissionEditor from '../../components/select-editor/share-links-permission-editor';
+import { isPro, gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
+import ShareLink from '../../models/share-link';
+import ShareLinkPermissionEditor from '../../components/select-editor/share-link-permission-editor';
+import Loading from '../../components/loading';
 import toaster from '../../components/toast';
 import EmptyTip from '../../components/empty-tip';
+import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select';

 class Content extends Component {

@@ -62,7 +65,7 @@ class Content extends Component {
    const { loading, errorMsg, items, sortBy, sortOrder } = this.props;

    if (loading) {
-      return <span className="loading-icon loading-tip"></span>;
+      return <Loading />;
    } else if (errorMsg) {
      return <p className="error text-center">{errorMsg}</p>;
    } else {
@@ -78,23 +81,34 @@ class Content extends Component {
      const sortByTime = sortBy == 'time';
      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;

+      const isDesktop = Utils.isDesktop();
+      // only for some columns
+      const columnWidths = isPro ? ['14%', '7%', '14%'] : ['21%', '14%', '20%'];
      const table = (
        <React.Fragment>
-          <table className="table-hover">
+          <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
            <thead>
+              {isDesktop ? (
                <tr>
                  <th width="4%">{/*icon*/}</th>
                  <th width="31%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-                <th width="14%">{gettext('Library')}</th>
-                <th width="20%">{gettext('Permission')}</th>
-                <th width="7%">{gettext('Visits')}</th>
-                <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
+                  <th width={columnWidths[0]}>{gettext('Library')}</th>
+                  {isPro && <th width="20%">{gettext('Permission')}</th>}
+                  <th width={columnWidths[1]}>{gettext('Visits')}</th>
+                  <th width={columnWidths[2]}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></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} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
+                return (<Item key={index} isDesktop={isDesktop} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
              })}
            </tbody>
          </table>
@@ -121,20 +135,76 @@ class Item extends Component {
  constructor(props) {
    super(props);

-    let item = this.props.item;
+    const item = this.props.item;
+
+    if (isPro) {
+      this.editOption = 'edit_download';
+      this.permissionOptions = ['preview_download', 'preview_only'];
+      this.updatePermissionOptions();
+    }
+
    this.state = {
-      currentPermission: item.permissions.can_download ? 'Preview and download' : 'Preview only',
-      showOpIcon: false,
+      currentPermission: isPro ? this.getCurrentPermission() : '',
+      isOpIconShown: false,
+      isOpMenuOpen: false, // for mobile
+      isPermSelectDialogOpen: false // for mobile
    };
-    this.permissionOptions = ['Preview only', 'Preview and download'];
+  }
+
+  updatePermissionOptions = () => {
+    const item = this.props.item;
+    let options = this.permissionOptions;
+  
+    if (!Utils.isEditableOfficeFile(item.obj_name)) {
+      return ;
+    }
+
+    if (item.permissions.can_edit) {
+      options.push(this.editOption);
+      return ;
+    }
+
+    seafileAPI.getFileInfo(item.repo_id, item.path).then((res) => {
+      if (res.data.can_edit) {
+        options.push(this.editOption);
+        return ;
+      }
+    }).catch(error => {
+      return ;
+    });
+  }
+
+  getCurrentPermission = () => {
+    const options = this.permissionOptions;
+    const { can_edit, can_download } = this.props.item.permissions;
+    switch (`${can_edit} ${can_download}`) {
+      case 'false true':
+        return options[0];
+      case 'false false':
+        return options[1];
+      case 'true true':
+        return this.editOption;
+    }
+  }
+
+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    }); 
+  }
+
+  togglePermSelectDialog = () => {
+    this.setState({
+      isPermSelectDialogOpen: !this.state.isPermSelectDialogOpen
+    }); 
  }

  handleMouseOver = () => {
-    this.setState({showOpIcon: true});
+    this.setState({isOpIconShown: true});
  }

  handleMouseOut = () => {
-    this.setState({showOpIcon: false});
+    this.setState({isOpIconShown: false});
  }

  viewLink = (e) => {
@@ -147,22 +217,6 @@ class Item extends Component {
    this.props.onRemoveLink(this.props.item);
  }

-  getLinkParams = () => {
-    let item = this.props.item;
-    let iconUrl = '';
-    let linkUrl = '';
-    if (item.is_dir) {
-      let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
-      iconUrl = Utils.getFolderIconUrl(false);
-      linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(path)}`;
-    } else {
-      iconUrl = Utils.getFileIconUrl(item.obj_name); 
-      linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
-    }
-
-    return { iconUrl, linkUrl };
-  }
-
  renderExpriedData = () => {
    let item = this.props.item;
    if (!item.expire_date) {
@@ -181,64 +235,112 @@ class Item extends Component {
    );
  }

-  changePerm = (changed_to_permissions) => {
+  changePerm = (permission) => {
    const item = this.props.item;
-    let permissions = item.permissions;
-
-    if (changed_to_permissions === 'Preview only')
-      permissions.can_download = false;
-    else if (changed_to_permissions === 'Preview and download')
-      permissions.can_download = true;
-
-    seafileAPI.updateShareLink(item.token, JSON.stringify(permissions)).then(() => {
+    const permissionDetails = Utils.getShareLinkPermissionObject(permission).permissionDetails;
+    seafileAPI.updateShareLink(item.token, JSON.stringify(permissionDetails)).then(() => {
      this.setState({
-        currentPermission: changed_to_permissions,
+        currentPermission: permission 
      });
-      let message = gettext("Successfully modified permission.");
+      let message = gettext('Successfully modified permission.');
      toaster.success(message);
    }).catch((error) => {
      let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext("Failed to modify permission.");
-      }
      toaster.danger(errMessage);
    });
  }

  render() {
    const item = this.props.item;
-    let { iconUrl, linkUrl } = this.getLinkParams();
+    const { currentPermission, isOpIconShown, isPermSelectDialogOpen } = this.state;

-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    let linkIconClassName = 'sf2-icon-link action-icon' + iconVisibility; 
-    let deleteIconClassName = 'sf2-icon-delete action-icon' + iconVisibility;
-    return (
+    let iconUrl, linkUrl;
+    if (item.is_dir) {
+      let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
+      iconUrl = Utils.getFolderIconUrl(false);
+      linkUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(path)}`;
+    } else {
+      iconUrl = Utils.getFileIconUrl(item.obj_name); 
+      linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
+    }
+
+    const desktopItem = (
      <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        <td><img src={iconUrl} width="24" alt=""/></td>
+        <td><img src={iconUrl} width="24" alt="" /></td>
        <td>
          {item.is_dir ?
            <Link to={linkUrl}>{item.obj_name}</Link> :
            <a href={linkUrl} target="_blank">{item.obj_name}</a>
          }
        </td>
-        <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}/`}>{item.repo_name}</Link></td>
+        <td><Link to={`${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`}>{item.repo_name}</Link></td>
+        {isPro &&
        <td>
-          <ShareLinksPermissionEditor 
+          <ShareLinkPermissionEditor 
            isTextMode={true}
-            isEditIconShow={this.state.showOpIcon}
-            currentPermission={this.state.currentPermission}
+            isEditIconShow={isOpIconShown && !item.is_expired}
+            currentPermission={currentPermission}
            permissionOptions={this.permissionOptions}
            onPermissionChanged={this.changePerm}
          />
        </td>
+        }
        <td>{item.view_cnt}</td>
        <td>{this.renderExpriedData()}</td> 
        <td>
-          <a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
-          <a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
+          <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 = ( 
+      <Fragment>
+        <tr>
+          <td><img src={iconUrl} alt="" width="24" /></td>
+          <td>
+            {item.is_dir ?
+              <Link to={linkUrl}>{item.obj_name}</Link> :
+              <a href={linkUrl} target="_blank">{item.obj_name}</a>
+            }
+            {isPro && <span className="item-meta-info-highlighted">{Utils.getShareLinkPermissionObject(currentPermission).text}</span>}
+            <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.renderExpriedData()}<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">
+                  {(isPro && !item.is_expired) && <DropdownItem className="mobile-menu-item" onClick={this.togglePermSelectDialog}>{gettext('Permission')}</DropdownItem>}
+                  <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>
+        {isPermSelectDialogOpen &&
+        <ShareLinkPermissionSelect
+          currentPerm={currentPermission}
+          permissions={this.permissionOptions}
+          changePerm={this.changePerm}
+          toggleDialog={this.togglePermSelectDialog}
+        />
+        }
+      </Fragment>
+    );
+
+    return this.props.isDesktop ? desktopItem : mobileItem;
  }
 }

@@ -305,9 +407,8 @@ class ShareAdminShareLinks extends Component {

  componentDidMount() {
    seafileAPI.listShareLinks().then((res) => {
-      // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
      let items = res.data.map(item => {
-        return new SharedLinkInfo(item);
+        return new ShareLink(item);
      });
      this.setState({
        loading: false,
@@ -327,7 +428,6 @@ class ShareAdminShareLinks extends Component {
            errorMsg: gettext('Error')
          });
        }
-
      } else {
        this.setState({
          loading: false,
@@ -343,13 +443,10 @@ class ShareAdminShareLinks extends Component {
        return uploadItem.token !== item.token;
      });
      this.setState({items: items});
-      let message = gettext("Successfully deleted share link.");
+      let 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 share link.");
-      }
      toaster.danger(errMessage);
    });
  }
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -108,13 +108,13 @@ export const Utils = {
    }
  },

-  isOfficeFile: function(filename) {
+  isEditableOfficeFile: function(filename) {
    // no file ext
    if (filename.lastIndexOf('.') == -1) {
      return false;
    }
    var file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
-    var exts = ['doc', 'ppt', 'xls', 'docx', 'pptx', 'xlsx'];
+    var exts = ['docx', 'pptx', 'xlsx'];
    if (exts.indexOf(file_ext) != -1) {
      return true;
    } else {
@@ -421,6 +421,38 @@ export const Utils = {
    return title;
  },

+  getShareLinkPermissionObject: function(permission) {
+    switch (permission) {
+      case 'preview_download':
+        return {
+          value: permission, 
+          text: gettext('Preview and download'), 
+          permissionDetails: {
+            'can_edit': false,
+            "can_download": true
+          }
+        };
+      case 'preview_only':
+        return {
+          value: permission, 
+          text: gettext('Preview only'), 
+          permissionDetails: {
+            'can_edit': false,
+            "can_download": false 
+          }
+        };
+      case 'edit_download':
+        return {
+          value: permission,
+          text: gettext('Edit on cloud and download'), 
+          permissionDetails: {
+            'can_edit': true,
+            "can_download": true
+          }
+        };
+    }
+  },
+
  formatSize: function(options) {
    /*
     * param: {bytes, precision}