change permission on share pop up (#4386)

* change permission on share pop up

* update

* add Utils.getShareLinkPermissionStr

frontend/src/components/dialog/generate-share-link.js

@@ -4,6 +4,7 @@ import moment from 'moment';
 import copy from 'copy-to-clipboard';
 import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Alert } from 'reactstrap';
 import { isPro, gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
+import ShareLinkPermissionEditor from '../../components/select-editor/share-link-permission-editor';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import ShareLink from '../../models/share-link';
@@ -26,6 +27,7 @@ class GenerateShareLink extends React.Component {
     this.defaultExpireDays = this.isExpireDaysNoLimit ? '' : shareLinkExpireDaysDefault;
 
     this.state = {
+      isOpIconShown: false,
       isValidate: false,
       isShowPasswordInput: false,
       isPasswordVisible: false,
@@ -273,6 +275,27 @@ class GenerateShareLink extends React.Component {
     this.setState({ isSendLinkShown: !this.state.isSendLinkShown });
   }
 
+  handleMouseOver = () => {
+    this.setState({isOpIconShown: true});
+  }
+
+  handleMouseOut = () => {
+    this.setState({isOpIconShown: false});
+  }
+
+  changePerm = (permission) => {
+    const permissionDetails = Utils.getShareLinkPermissionObject(permission).permissionDetails;
+    seafileAPI.updateShareLink(this.state.sharedLinkInfo.token, JSON.stringify(permissionDetails)).then((res) => {
+      let sharedLinkInfo = new ShareLink(res.data);
+      this.setState({sharedLinkInfo: sharedLinkInfo});
+      let message = gettext('Successfully modified permission.');
+      toaster.success(message);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   render() {
     if (this.state.isLoading) {
       return <Loading />;
@@ -283,6 +306,8 @@ class GenerateShareLink extends React.Component {
 
     if (this.state.sharedLinkInfo) {
       let sharedLinkInfo = this.state.sharedLinkInfo;
+      let currentPermission = Utils.getShareLinkPermissionStr(sharedLinkInfo.permissions);
+      const { permissionOptions , isOpIconShown } = this.state;
       return (
         <div>
           <Form className="mb-4">
@@ -314,6 +339,22 @@ class GenerateShareLink extends React.Component {
                 <dd>{moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD hh:mm:ss')}</dd>
               </FormGroup>
             )}
+
+            {(isPro && sharedLinkInfo.permissions) && (
+              <FormGroup className="mb-0">
+                <dt className="text-secondary font-weight-normal">{gettext('Permissions:')}</dt>
+                <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+                  <ShareLinkPermissionEditor
+                    isTextMode={true}
+                    isEditIconShow={isOpIconShown && !sharedLinkInfo.is_expired}
+                    currentPermission={currentPermission}
+                    permissionOptions={permissionOptions}
+                    onPermissionChanged={this.changePerm}
+                  />
+                </dd>
+              </FormGroup>
+            )}
+
           </Form>
           {(canSendShareLinkEmail && !this.state.isSendLinkShown && !this.state.isNoticeMessageShow) &&
             <Button onClick={this.toggleSendLink} className='mr-2'>{gettext('Send')}</Button>

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

@@ -112,27 +112,13 @@ class Item extends Component {
     let itemType = item.is_dir ? (item.path === '/' ? 'library' : 'dir') : 'file';
     let permission = item.repo_folder_permission;
     let permissionOptions = Utils.getShareLinkPermissionList(itemType, permission, item.path, item.can_edit);
-    let currentPermission = this.getCurrentPermission();
+    let currentPermission = Utils.getShareLinkPermissionStr(this.props.item.permissions);
     this.setState({
       permissionOptions: permissionOptions,
       currentPermission: currentPermission
     });
   }
 
-  getCurrentPermission = () => {
-    const { can_edit, can_download } = this.props.item.permissions;
-    switch (`${can_edit} ${can_download}`) {
-      case 'false true':
-        return 'preview_download';
-      case 'false false':
-        return 'preview_only';
-      case 'true true':
-        return 'edit_download';
-      case 'true false':
-        return 'cloud_edit';
-    }
-  }
-
   toggleOpMenu = () => {
     this.setState({
       isOpMenuOpen: !this.state.isOpMenuOpen

frontend/src/utils/utils.js

@@ -155,6 +155,23 @@ export const Utils = {
     return permissionOptions;
   },
 
+  getShareLinkPermissionStr: function(permissions) {
+    const { can_edit, can_download } = permissions;
+    if (can_edit) {
+      if (can_download) {
+        return 'edit_download';
+      } else {
+        return 'cloud_edit';
+      }
+    } else {
+      if (can_download) {
+        return 'preview_download';
+      } else {
+        return 'preview_only';
+      }
+    }
+  },
+
   isEditableOfficeFile: function(filename) {
     // no file ext
     if (filename.lastIndexOf('.') == -1) {