add wiki support owner department (#6113)

* add wiki support owner department

* wiki can select owner

---------

Co-authored-by: ‘JoinTyang’ <yangtong1009@163.com>

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
+import { SeahubSelect } from '../common/select';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
@@ -15,9 +19,35 @@ class AddWikiDialog extends React.Component {
     this.state = {
       name: '',
       isSubmitBtnActive: false,
+      selectedOption: null,
+      options: [],
     };
   }
 
+  componentDidMount() {
+    this.listDepartments();
+  }
+
+  listDepartments = () => {
+    seafileAPI.listDepartments().then(res => {
+      const departments = res.data.sort((a, b) => {
+        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+      });
+      let options = [];
+      for (let i = 0 ; i < departments.length; i++) {
+        let obj = {};
+        obj.value = departments[i].name;
+        obj.id = departments[i].id;
+        obj.label = departments[i].name;
+        options.push(obj);
+      }
+      this.setState({options: options});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   inputNewName = (e) => {
     this.setState({
       name: e.target.value,
@@ -33,8 +63,9 @@ class AddWikiDialog extends React.Component {
 
   handleSubmit = () => {
     const wikiName = this.state.name.trim();
+    const departmentID = this.state.selectedOption ? this.state.selectedOption.id : null;
     if (!wikiName) return;
-    this.props.addWiki(wikiName);
+    this.props.addWiki(wikiName, departmentID);
     this.props.toggleCancel();
   };
 
@@ -42,6 +73,10 @@ class AddWikiDialog extends React.Component {
     this.props.toggleCancel();
   };
 
+  handleSelectChange = (option) => {
+    this.setState({ selectedOption: option });
+  };
+
   render() {
     return (
       <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
@@ -49,6 +84,18 @@ class AddWikiDialog extends React.Component {
         <ModalBody>
           <Label>{gettext('Name')}</Label>
           <Input onKeyDown={this.handleKeyDown} autoFocus={true} value={this.state.name} onChange={this.inputNewName}/>
+          <Label className='mt-4'>{gettext('Wiki owner')} ({gettext('Optional')})</Label>
+          <SeahubSelect
+            onChange={this.handleSelectChange}
+            options={this.state.options}
+            hideSelectedOptions={true}
+            placeholder={gettext('Select a department')}
+            maxMenuHeight={200}
+            value={this.state.selectedOption}
+            components={{ NoOptionsMessage: (
+              <div style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('No department')}</div>
+            ) }}
+          />
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>

frontend/src/components/dialog/transfer-dialog.js

@@ -166,14 +166,11 @@ class TransferDialog extends React.Component {
       </Fragment>
     );
   };
+
   render() {
-
-
     const { itemName: repoName } = this.props;
     let title = gettext('Transfer Library {library_name}');
     title = title.replace('{library_name}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
-
-
     return (
       <Modal isOpen={true} style={{maxWidth: '720px'}} toggle={this.props.toggleDialog} className="transfer-dialog">
         <ModalHeader toggle={this.props.toggleDialog}>