org admin set user default quota (#5660)

* org admin set user default quota

* update

frontend/src/components/dialog/set-org-user-default-quota.js

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string,
+  userDefaultQuota: PropTypes.number.isRequired,
+  updateQuota: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserDefaultQuota extends React.Component {
+
+  constructor(props) {
+    super(props);
+    const initialQuota = this.props.userDefaultQuota < 0 ? '' : this.props.userDefaultQuota / (1000 * 1000);
+    this.state = {
+      inputValue: initialQuota,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value
+    });
+  };
+
+  formSubmit = () => {
+    const { orgID } = this.props;
+    const quota = this.state.inputValue.trim();
+
+    if (!quota) {
+      this.setState({
+        formErrorMsg: gettext('It is required.')
+      });
+      return false;
+    }
+
+    this.setState({
+      submitBtnDisabled: true
+    });
+
+    seafileAPI.orgAdminSetOrgUserDefaultQuota(orgID, quota).then((res) => {
+      this.props.updateQuota(res.data.user_default_quota);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      });
+    });
+  };
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user default quota')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <InputGroup>
+              <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+              <InputGroupAddon addonType="append">
+                <InputGroupText>MB</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+            <p className="small text-secondary mt-2 mb-2">{gettext('Tip: 0 means default limit')}</p>
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserDefaultQuota.propTypes = propTypes;
+
+export default SetOrgUserDefaultQuota;

frontend/src/pages/org-admin/org-info.js

@@ -3,9 +3,11 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { mediaUrl, gettext, orgMemberQuotaEnabled } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import MainPanelTopbar from './main-panel-topbar';
-
+import SetOrgUserDefaultQuota from '../../components/dialog/set-org-user-default-quota';
 import '../../css/org-admin-info-page.css';
 
+const { orgID } = window.org.pageOptions;
+
 class OrgInfo extends Component {
 
   constructor(props) {
@@ -14,6 +16,8 @@ class OrgInfo extends Component {
       org_name: '',
       storage_quota: 0,
       storage_usage: 0,
+      isSetUserDefaultQuotaDialogOpen: false,
+      user_default_quota: 0,
       member_quota: 0,
       member_usage: 0,
       active_members: 0
@@ -25,21 +29,33 @@ class OrgInfo extends Component {
       const {
         org_id, org_name,
         member_quota, member_usage, active_members,
-        storage_quota, storage_usage
+        storage_quota, storage_usage, user_default_quota
       } = res.data;
       this.setState({
         org_id, org_name,
         member_quota, member_usage, active_members,
-        storage_quota, storage_usage
+        storage_quota, storage_usage, user_default_quota
       });
     });
   }
 
+  toggleSetUserDefaultQuotaDialog = () => {
+    this.setState({
+      isSetUserDefaultQuotaDialogOpen: !this.state.isSetUserDefaultQuotaDialogOpen
+    });
+  };
+
+  updateQuota = (quota) => {
+    this.setState({
+      user_default_quota: quota
+    });
+  };
+
   render() {
     const {
       org_id, org_name,
       member_quota, member_usage, active_members,
-      storage_quota, storage_usage
+      storage_quota, storage_usage, user_default_quota
     } = this.state;
     return (
       <Fragment>
@@ -104,10 +120,29 @@ class OrgInfo extends Component {
                     <p>{Utils.bytesToSize(storage_usage)}</p>
                   )}
                 </div>
+
+                <div className="info-content-item">
+                  <h4 className="info-content-item-heading">{gettext('User default quota')}</h4>
+                  <span>{Utils.bytesToSize(user_default_quota)}</span>
+                  <span
+                    title={gettext('Edit')}
+                    className={`sf3-font sf3-font-rename attr-action-icon`}
+                    onClick={this.toggleSetUserDefaultQuotaDialog}>
+                  </span>
+
+                </div>
               </div>
             </div>
           </div>
         </div>
+        {this.state.isSetUserDefaultQuotaDialogOpen &&
+        <SetOrgUserDefaultQuota
+          orgID={orgID}
+          userDefaultQuota={this.state.user_default_quota}
+          updateQuota={this.updateQuota}
+          toggleDialog={this.toggleSetUserDefaultQuotaDialog}
+        />
+        }
       </Fragment>
     );
   }