[group] added 'search group members'

- 'search group members' is offered only when there are more than 10
members in the group

frontend/src/components/search-group-members.js

@@ -0,0 +1,130 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Button } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import { gettext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+import Loading from './loading';
+import GroupMembers from './group-members';
+
+const propTypes = {
+  groupID: PropTypes.string.isRequired,
+  isOwner: PropTypes.bool.isRequired
+};
+
+class SearchGroupMembers extends React.Component {
+
+  // pagination is not needed
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      q: '', // query
+      groupMembers: [],
+      errMessage: [],
+      isItemFreezed: false
+    };
+  }
+
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
+  changeMember = (targetMember) => {
+    this.setState({
+      groupMembers: this.state.groupMembers.map((item) => {
+        if (item.email == targetMember.email) {
+          item = targetMember;
+        }
+        return item;
+      })
+    });
+  }
+
+  deleteMember = (targetMember) => {
+    const groupMembers = this.state.groupMembers;
+    groupMembers.splice(groupMembers.indexOf(targetMember), 1);
+    this.setState({
+      groupMembers: groupMembers
+    });
+  }
+
+  submit = () => {
+    let { q } = this.state;
+    q = q.trim();
+    if (!q) {
+      return;
+    }
+    this.setState({
+      isLoading: true
+    });
+    seafileAPI.searchGroupMember(this.props.groupID, q).then((res) => {
+      this.setState({
+        isLoading: false,
+        groupMembers: res.data,
+        errorMsg: ''
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({
+        isLoading: false,
+        errorMsg: errMessage
+      });
+    });
+  }
+
+  onInputChange = (e) => {
+    this.setState({
+      q: e.target.value
+    });
+  }
+
+  onInputKeyDown = (e) => {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
+  render() {
+    const { isLoading, q, errorMsg, groupMembers } = this.state;
+    return (
+      <Fragment>
+        <div className="d-flex justifiy-content-between">
+          <Input
+            type="text"
+            id="search-member"
+            className="form-control search-members-input mr-2"
+            value={q}
+            onChange={this.onInputChange}
+            onKeyDown={this.onInputKeyDown}
+          />
+          <Button type="button" color="secondary" className="flex-shrink-0" onClick={this.submit} disabled={!q.trim()}>{gettext('Submit')}</Button>
+        </div>
+        {errorMsg && <p className="error">{errorMsg}</p>}
+        <div className="manage-members">
+          {isLoading ? <Loading /> : (
+            <Fragment>
+              {groupMembers.length > 0 && (
+                <GroupMembers
+                  groupMembers={groupMembers}
+                  changeMember={this.changeMember}
+                  deleteMember={this.deleteMember}
+                  groupID={this.props.groupID}
+                  isOwner={this.props.isOwner}
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleItemFreezed={this.toggleItemFreezed}
+                />
+              )}
+            </Fragment>
+          )}
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SearchGroupMembers.propTypes = propTypes;
+
+export default SearchGroupMembers;