[manage group members] redesigned 'search group members' & removed the dialog footer (#5438)

frontend/src/components/dialog/manage-members-dialog.js

@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import ListAndAddGroupMembers from '../list-and-add-group-members';
-import SearchGroupMembers from '../search-group-members';
 
 import '../../css/manage-members-dialog.css';
 
@@ -13,55 +12,19 @@ const propTypes = {
   toggleManageMembersDialog: PropTypes.func.isRequired
 };
 
-const MANAGEMENT_MODE= {
-  LIST_AND_ADD: 'list_and_add',
-  SEARCH: 'search'
-};
-
 class ManageMembersDialog extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentMode: MANAGEMENT_MODE.LIST_AND_ADD
-    };
-  }
-
-  changeMode = () => {
-    this.setState({
-      currentMode: this.state.currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
-        MANAGEMENT_MODE.SEARCH : MANAGEMENT_MODE.LIST_AND_ADD
-    });
-  }
-
   render() {
-    const { currentMode } = this.state;
     const { groupID, isOwner, toggleManageMembersDialog: toggle } = this.props;
     return (
       <Modal isOpen={true} toggle={toggle} className="group-manage-members-dialog">
-        <ModalHeader toggle={toggle}>
-          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
-            gettext('Manage group members') : (
-              <Fragment>
-                <button className="fa fa-arrow-left back-icon border-0 bg-transparent mr-2 p-0" onClick={this.changeMode} title={gettext('Back')} aria-label={gettext('Back')}></button>
-                <span>{gettext('Search group members')}</span>
-              </Fragment>
-            )
-          }
-        </ModalHeader>
+        <ModalHeader toggle={toggle}>{gettext('Manage group members')}</ModalHeader>
         <ModalBody className="pb-0">
-          {currentMode == MANAGEMENT_MODE.LIST_AND_ADD ?
           <ListAndAddGroupMembers
             groupID={groupID}
             isOwner={isOwner}
-              changeMode={this.changeMode}
-            /> :
-            <SearchGroupMembers groupID={groupID} isOwner={isOwner} />
-          }
+          />
         </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={toggle}>{gettext('Close')}</Button>
-        </ModalFooter>
       </Modal>
     );
   }

frontend/src/components/list-and-add-group-members.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button, InputGroup, InputGroupText, Input } from 'reactstrap';
 import { Utils } from '../utils/utils';
 import { gettext } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
@@ -11,8 +11,7 @@ import GroupMembers from './group-members';
 
 const propTypes = {
   groupID: PropTypes.string.isRequired,
-  isOwner: PropTypes.bool.isRequired,
-  changeMode: PropTypes.func.isRequired
+  isOwner: PropTypes.bool.isRequired
 };
 
 class ManageMembersDialog extends React.Component {
@@ -28,7 +27,10 @@ class ManageMembersDialog extends React.Component {
       hasNextPage: false,
       selectedOption: null,
       errMessage: [],
-      isItemFreezed: false
+      isItemFreezed: false,
+      searchActive: false,
+      keyword: '',
+      membersFound: []
     };
   }
 
@@ -130,8 +132,39 @@ class ManageMembersDialog extends React.Component {
     });
   }
 
+  searchMembers = (e) => {
+    const { groupMembers } = this.state;
+    const keyword = e.target.value;
+    const value = keyword.trim().toLowerCase();
+    const membersFound = groupMembers.filter(item => item.name.toLowerCase().indexOf(value) > -1);
+    this.setState({ keyword, membersFound });
+  }
+
+  clearSearch = () => {
+    this.setState({
+      keyword: '',
+      membersFound: []
+    });
+  }
+
+  onSearchInputFocus = () => {
+    this.setState({
+      searchActive: true
+    });
+  }
+
+  onSearchInputBlur = () => {
+    this.setState({
+      searchActive: false
+    });
+  }
+
   render() {
-    const { isLoading, hasNextPage, groupMembers } = this.state;
+    const {
+      isLoading, hasNextPage, groupMembers,
+      keyword, membersFound,
+      searchActive
+    } = this.state;
     return (
       <Fragment>
         <p className="mb-2">{gettext('Add group member')}</p>
@@ -157,16 +190,31 @@ class ManageMembersDialog extends React.Component {
             })
         }
         {groupMembers.length > 10 &&
-          <button className="btn btn-secondary btn-block search-group-members-btn text-left border-0" onClick={this.props.changeMode}>
-            <i className="fas fa-search mr-1" aria-hidden={true}></i>
-            {gettext('Search group members')}
-          </button>
+          <InputGroup className={`search-group-members rounded ${searchActive ? 'active' : ''}`}>
+            <InputGroupText>
+              <i className="fas fa-search" aria-hidden={true}></i>
+            </InputGroupText>
+            <Input
+              type="text"
+              className="input-group-input px-0"
+              placeholder={gettext('Search group members')}
+              value={keyword}
+              onChange={this.searchMembers}
+              onFocus={this.onSearchInputFocus}
+              onBlur={this.onSearchInputBlur}
+            />
+            {keyword && (
+              <InputGroupText>
+                <i className="sf2-icon-x1" aria-hidden={true} onClick={this.clearSearch}></i>
+              </InputGroupText>
+            )}
+          </InputGroup>
         }
-        <div className="manage-members" onScroll={this.handleScroll}>
+        <div className="manage-members" onScroll={keyword.trim() ? () => {} : this.handleScroll}>
           {isLoading ? <Loading /> : (
             <Fragment>
               <GroupMembers
-                groupMembers={groupMembers}
+                groupMembers={keyword.trim() ? membersFound : groupMembers}
                 changeMember={this.changeMember}
                 deleteMember={this.deleteMember}
                 groupID={this.props.groupID}
@@ -174,7 +222,7 @@ class ManageMembersDialog extends React.Component {
                 isItemFreezed={this.state.isItemFreezed}
                 toggleItemFreezed={this.toggleItemFreezed}
               />
-              {hasNextPage && <Loading />}
+              {(!keyword.trim() && hasNextPage) && <Loading />}
             </Fragment>
           )}
         </div>

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

@@ -1,133 +0,0 @@
-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
-    };
-    this.isInit = true;
-  }
-
-  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.isInit = false;
-      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 && !this.isInit && <div className="mx-2 my-4">{gettext('No members')}</div>}
-              {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;

frontend/src/css/manage-members-dialog.css

@@ -1,6 +1,7 @@
 .manage-members {
+  min-height: 200px;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 0.5rem 0;
 }
 
@@ -31,18 +32,31 @@
   margin-top: 10px;
 }
 
-.group-manage-members-dialog .back-icon {
-  color: #999999; 
-  cursor: pointer;
-}
-
-.group-manage-members-dialog .search-group-members-btn {
+.group-manage-members-dialog .search-group-members {
+  color: #999;
   font-size: 14px;
   font-weight: normal;
   background: #f1f1f1;
+  border: 1px solid transparent;
   margin: 12px 0 0;
 }
 
-.group-manage-members-dialog .search-group-members-btn:hover {
-  background: #dbdbdb;
+.group-manage-members-dialog .search-group-members.active {
+  background: #fff;
+  border-color: #ccc;
+}
+
+.group-manage-members-dialog .search-group-members .input-group-text,
+.group-manage-members-dialog .search-group-members .input-group-input {
+  background: transparent;
+  color: inherit;
+  border: none;
+}
+
+.group-manage-members-dialog .search-group-members.active .input-group-input {
+  color: #495057;
+}
+
+.group-manage-members-dialog .search-group-members .input-group-input:focus {
+  box-shadow: none;
 }

media/css/seahub_react.css

@@ -47,6 +47,7 @@
     font-family: 'seafile-font2';
     speak: none;
     font-weight: normal;
+    font-style: normal;
     font-variant: normal;
     text-transform: none;
     -webkit-font-smoothing: antialiased;