custom share permission (#4967)

* custom share permission

* remove path field

* add permission manager ui

* optimize custom permission manager style

* add permission setting

* add normalize_custom_permission_name

* optimize repo custom permission

* delete useless code

* optimize code

* optimize code

* optimize markdown file page

* fix a few bugs

* add permission control

* repair modify permission

* optimize style

* optimize copyright

* add try-except

* optimize code

* move file&folder

* batch operation item

* repair batch move item

* update copyright

* optimize move permission control

* optimize code

* optimize code

* optimize code & fix code wranning

* optimize code

* delete unsupport permission

* optimize code

* repair code bug

* add pro limit

* optimize code

* add permission handle for permission editor

* repair new file&folder bug

* optimize file uploader code

* custom permission user can not visit custom permission module

* optimize code

* forbid comment&detail module

* optimize code

* optimize modify/preview permission

* optimize custom permission share perm

* optimize view file module: file-toolbar

* optimize custom drag move operation

* repair column view bug

* optimize drag operation code

* repair code bug

* optimize code

Co-authored-by: shanshuirenjia <978987373@qq.com>

frontend/src/components/dialog/perm-select.js

@@ -2,8 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
+import CustomPermission from '../../models/custom-permission';
+import Loading from '../loading';
+import toaster from '../toast';
+import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
+  repoID: PropTypes.string,
   currentPerm: PropTypes.string.isRequired,
   permissions: PropTypes.array.isRequired,
   changePerm: PropTypes.func.isRequired,
@@ -16,8 +21,36 @@ class PermSelect extends React.Component {
     super(props);
 
     this.state = {
-      currentOption: this.props.currentPerm
+      isLoading: true,
+      currentOption: this.props.currentPerm,
+      customPermissions: []
     };
+
+    this.customPermissions = null;
+  }
+
+  componentDidMount() {
+    if (this.props.repoID) {
+      this.listCustomPermissions();
+    } else {
+      this.setState({isLoading: false});
+    }
+  }
+
+  listCustomPermissions = () => {
+    const { repoID } = this.props;
+    seafileAPI.listCustomPermissions(repoID).then(res => {
+      const { permission_list: permissions } = res.data;
+      const customPermissions = permissions.map(item => new CustomPermission(item));
+      this.setState({
+        isLoading: false,
+        customPermissions: customPermissions
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({isLoading: false});
+    });
   }
 
   switchOption = (e) => {
@@ -34,21 +67,62 @@ class PermSelect extends React.Component {
     this.props.toggleDialog();
   }
 
+  translatePermission = (permission) => {
+    let value = Utils.sharePerms(permission);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === permission);
+      value = item && item.name;
+    }
+    return value;
+    
+  }
+  
+  translateExplanation = (explanation) => {
+    let value = Utils.sharePermsExplanation(explanation);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === explanation);
+      value = item && item.description;
+    }
+    return value;
+  }
+
+  getPermissions = () => {
+    const { permissions } = this.props;
+    let newPermissions = permissions.slice();
+    const { customPermissions } = this.state;
+    if (!this.customPermissions) {
+      if (customPermissions.length > 0) {
+        customPermissions.forEach(item => {
+          newPermissions.push(item.id + '');
+        });
+      }
+      this.customPermissions = newPermissions;
+    }
+    return this.customPermissions;
+  }
+
+
   render() {
-    const options = this.props.permissions;
-    const { currentOption } = this.state;
+    const { isLoading, currentOption } = this.state;
+    let permissions = [];
+    if (!isLoading) {
+      permissions = this.getPermissions();
+    }
 
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalBody>
-          {options.map((item, index) => {
+        <ModalBody style={{maxHeight: '400px', overflow: 'auto'}}>
+          {isLoading && <Loading />}
+          {!isLoading && permissions.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.sharePerms(item)}
+                  {this.translatePermission(item)}
                   <p className="text-secondary small m-0">
-                    {Utils.sharePermsExplanation(item)}
+                    {this.translateExplanation(item)}
                   </p>
                 </label>
               </div>