Org department (#3194)

* add org department

* delete hash

* update

* update

* render repo icon

* update dialogs

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -98,7 +98,7 @@ class AddReviewerDialog extends React.Component {
           <p>{gettext('Add new reviewer')}</p>
           <div className='add-reviewer'>
             <UserSelect
-              placeholder={gettext('Please enter 1 or more character')}
+              placeholder={gettext('Select users...')}
               onSelectChange={this.handleSelectChange}
               ref="reviewSelect"
               isMulti={true}

frontend/src/components/dialog/org-add-department-dialog.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  onDepartChanged: PropTypes.func.isRequired,
+};
+
+class AddDepartDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      departName: '',
+      errMessage: '',
+    };
+  }
+
+  handleSubmit = () => {
+    let isValid = this.validateName();
+    if (isValid) {
+      let parentGroup = -1;
+      if (this.props.parentGroupID) {
+        parentGroup = this.props.parentGroupID;
+      }
+      seafileAPI.orgAdminAddDepartGroup(orgID, parentGroup, this.state.departName.trim()).then((res) => {
+        this.props.toggle();
+        this.props.onDepartChanged();
+      }).catch(error => {
+        let errorMsg = gettext(error.response.data.error_msg);
+        this.setState({ errMessage: errorMsg });
+      });
+    }
+  }
+
+  validateName = () => {
+    let errMessage = '';
+    const name = this.state.departName.trim();
+    if (!name.length) {
+      errMessage = gettext('Name is required');
+      this.setState({ errMessage: errMessage });
+      return false;
+    }
+    return true;
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      departName: e.target.value, 
+    });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+      e.preventDefault();
+    }
+  }
+
+  render() {
+    let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="departName">{gettext('Name')}</Label>
+              <Input 
+                id="departName" 
+                onKeyPress={this.handleKeyPress} 
+                value={this.state.departName} 
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Form>
+          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+AddDepartDialog.propTypes = propTypes;
+
+export default AddDepartDialog;

frontend/src/components/dialog/org-add-member-dialog.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import UserSelect from '../user-select.js';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  onMemberChanged: PropTypes.func.isRequired
+};
+
+class AddMemberDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errMessage: '',
+    };
+    this.Options = [];
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({ selectedOption: option });
+    this.Options = [];
+  }
+
+  handleSubmit = () => {
+    if (!this.state.selectedOption) return;
+    const email = this.state.selectedOption.email;
+    this.refs.orgSelect.clearSelect();
+    this.setState({ errorMsg: [] });
+    seafileAPI.orgAdminAddDepartGroupUser(orgID, this.props.groupID, email).then((res) => {
+      if (res.data.failed) {
+        this.setState({ errorMsg: res.data.failed[0] });
+      }
+      this.setState({
+        selectedOption: null,
+      });
+      if (res.data.success) {
+        this.props.onMemberChanged();
+        this.props.toggle();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
+        <ModalBody>
+          <UserSelect
+            placeholder={gettext('Select users...')}
+            onSelectChange={this.handleSelectChange}
+            ref="orgSelect"
+            isMulti={false}
+            className='org-add-member-select'
+          />
+          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+AddMemberDialog.propTypes = propTypes;
+
+export default AddMemberDialog;

frontend/src/components/dialog/org-add-repo-dialog.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  onRepoChanged: PropTypes.func.isRequired,
+};
+
+class AddRepoDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      repoName: '',
+      errMessage: '',
+    };
+  }
+
+  handleSubmit = () => {
+    let isValid = this.validateName();
+    if (isValid) {
+      seafileAPI.orgAdminAddDepartGroupRepo(orgID, this.props.groupID, this.state.repoName.trim()).then((res) => {
+        this.props.toggle();
+        this.props.onRepoChanged();
+      }).catch(error => {
+        let errorMsg = gettext(error.response.data.error_msg);
+        this.setState({ errMessage: errorMsg });
+      });
+    }
+  }
+
+  validateName = () => {
+    let errMessage = '';
+    const name = this.state.repoName.trim();
+    if (!name.length) {
+      errMessage = gettext('Name is required');
+      this.setState({ errMessage: errMessage });
+      return false;
+    }
+    return true;
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      repoName: e.target.value,
+    });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+      e.preventDefault();
+    }
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('New Library')}</ModalHeader>
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <Label for="repoName">{gettext('Name')}</Label>
+              <Input 
+                id="repoName" 
+                onKeyPress={this.handleKeyPress} 
+                value={this.state.repoName} 
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Form>
+          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+AddRepoDialog.propTypes = propTypes;
+
+export default AddRepoDialog;

frontend/src/components/dialog/org-add-user-dialog.js

@@ -145,7 +145,7 @@ class AddOrgUserDialog extends React.Component {
             <FormGroup>
               <Label for="userPwd">{gettext('Password')}</Label>
               <InputGroup className="passwd">
-                <Input id="userPwd" innerRef={input => {this.passwdInput = input}} value={this.state.password || ''} onChange={this.inputPassword} />
+                <Input id="userPwd" innerRef={input => {this.passwdInput = input;}} value={this.state.password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
                   <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}></i></Button>
                   <Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
@@ -154,7 +154,7 @@ class AddOrgUserDialog extends React.Component {
             </FormGroup>
             <FormGroup>
               <Label for="userPwdNew">{gettext('Confirm Password')}</Label>
-              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input}}  className="passwd"   value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input;}}  className="passwd"   value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
             </FormGroup>
           </Form>
           <Label className="err-message">{gettext(this.state.errMessage)}</Label>

frontend/src/components/dialog/org-delete-department-dialog.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  groupName: PropTypes.string,
+  toggle: PropTypes.func.isRequired,
+  onDepartChanged: PropTypes.func.isRequired
+};
+
+class DeleteDepartDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      errMessage: null
+    };
+  }
+
+  deleteDepart = () => {
+    seafileAPI.orgAdminDeleteDepartGroup(orgID, this.props.groupID).then((res) => {
+      if (res.data.success) {
+        this.props.onDepartChanged();
+        this.props.toggle();
+      }
+    }).catch(err => {
+      this.setState({ errMessage: 'There are sub-departments in this department.' });
+    });
+  }
+
+  render() {
+    let subtitle = gettext('Are you sure you want to delete {placeholder} ?');
+    subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) + '</span>');
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
+        <ModalBody>
+          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
+          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+        </ModalBody>
+        <ModalFooter>
+          {!this.state.errMessage && <Button color="primary" onClick={this.deleteDepart}>{gettext('Delete')}</Button>}
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+DeleteDepartDialog.propTypes = propTypes;
+
+export default DeleteDepartDialog;

frontend/src/components/dialog/org-delete-member-dialog.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  member: PropTypes.object.isRequired,
+  toggle: PropTypes.func.isRequired,
+  onMemberChanged: PropTypes.func.isRequired
+};
+
+class DeleteMemberDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  deleteMember = () => {
+    const userEmail = this.props.member.email;
+    seafileAPI.orgAdminDeleteDepartGroupUser(orgID, this.props.groupID, userEmail).then((res) => {
+      if (res.data.success) {
+        this.props.onMemberChanged();
+        this.props.toggle();
+      }
+    });
+  }
+
+  render() {
+    let subtitle = gettext('Are you sure you want to delete {placeholder} ?');
+    subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.member.name) + '</span>');
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</ModalHeader>
+        <ModalBody>
+          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.deleteMember}>{gettext('Delete')}</Button>
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+DeleteMemberDialog.propTypes = propTypes;
+
+export default DeleteMemberDialog;

frontend/src/components/dialog/org-delete-repo-dialog.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+class DeleteRepoDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  deleteRepo = () => {
+    seafileAPI.orgAdminDeleteDepartGroupRepo(orgID, this.props.groupID, this.props.repo.repo_id).then((res) => {
+      if (res.data.success) {
+        this.props.onRepoChanged();
+        this.props.toggle();
+      }
+    });
+  }
+
+  render() {
+    let subtitle = gettext('Are you sure you want to delete {placeholder} ?');
+    subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.repo.name) + '</span>');
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</ModalHeader>
+        <ModalBody>
+          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.deleteRepo}>{gettext('Delete')}</Button>
+          <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+const propTypes = {
+  repo: PropTypes.object.isRequired,
+  toggle: PropTypes.func.isRequired,
+  onRepoChanged: PropTypes.func.isRequired
+};
+
+DeleteRepoDialog.propTypes = propTypes;
+
+export default DeleteRepoDialog;

frontend/src/components/dialog/org-set-group-quota-dialog.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
+import { gettext, orgID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  groupID: PropTypes.number.isRequired,
+  onDepartChanged: PropTypes.func.isRequired,
+};
+
+class SetGroupQuotaDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      quota: '',
+      errMessage: '',
+    };
+  }
+
+  setGroupQuota = () => {
+    const myReg = /^[1-9]\d*$/im;
+    let quota = this.state.quota;
+    if ((quota.length && myReg.test(quota)) || quota == -2) {
+      this.setState({ errMessage: '' });
+      let newQuota = this.state.quota == -2 ? this.state.quota : this.state.quota * 1000000;
+      seafileAPI.orgAdminSetGroupQuota(orgID, this.props.groupID, newQuota).then((res) => {
+        this.props.toggle();
+        this.props.onDepartChanged();
+      });
+    } else {
+      const err = gettext('Quota is invalid.');
+      this.setState({ errMessage: err });
+    } 
+  }
+
+  handleChange = (e) => {
+    const quota = e.target.value.trim();
+    this.setState({ quota: quota });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      this.setGroupQuota();
+      e.preventDefault();
+    }
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggle}>
+        <ModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</ModalHeader>
+        <ModalBody>
+          <InputGroup>
+            <Input
+              onKeyPress={this.handleKeyPress} 
+              value={this.state.quota} 
+              onChange={this.handleChange}
+            />
+            <InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
+          </InputGroup>
+          <p className="tip">
+            <br/><span>{gettext('An integer that is greater than 0 or equal to -2.')}</span><br/>
+            <span>{gettext('Tip: -2 means no limit.')}</span>
+          </p>
+          { this.state.errMessage && <p className="error">{this.state.errMessage}</p> }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.setGroupQuota}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetGroupQuotaDialog.propTypes = propTypes;
+
+export default SetGroupQuotaDialog;