org admin search user

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

@@ -4,6 +4,7 @@ import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
 import OrgUsers from './org-users-users';
+import OrgUsersSearchUsers from './org-users-search-users';
 import OrgAdmins from './org-users-admins';
 import OrgUserProfile from './org-user-profile';
 import OrgUserRepos from './org-user-repos';
@@ -68,6 +69,7 @@ class Org extends React.Component {
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'}/>
             <OrgUsers path={siteRoot + 'org/useradmin'} />
+            <OrgUsersSearchUsers path={siteRoot + 'org/useradmin/search-users'} />
             <OrgAdmins path={siteRoot + 'org/useradmin/admins/'} />
             <OrgUserProfile path={siteRoot + 'org/useradmin/info/:email/'} />
             <OrgUserRepos path={siteRoot + 'org/useradmin/info/:email/repos/'} />

frontend/src/pages/org-admin/main-panel-topbar.js

@@ -18,6 +18,7 @@ class MainPanelTopbar extends Component {
           </div>
         </div>
         <div className="common-toolbar">
+          {this.props.search && this.props.search}
           <Account isAdminPanel={true}/>
         </div>
       </div>

frontend/src/pages/org-admin/org-users-search-users.js

@@ -0,0 +1,186 @@
+import React, { Component, Fragment } from 'react';
+import { Button, Form, FormGroup, Input, Col } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, orgID } from '../../utils/constants';
+import toaster from '../../components/toast';
+import UserItem from './org-user-item';
+import OrgUserInfo from '../../models/org-user';
+
+class OrgUsersSearchUsersResult extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  render() {
+    let { orgUsers } = this.props;
+    return (
+      <div className="cur-view-content">
+        <table>
+          <thead>
+            <tr>
+              <th width="30%">{gettext('Name')}</th>
+              <th width="15%">{gettext('Status')}</th>
+              <th width="20%">
+                <a className="d-inline-block table-sort-op" href="#" >{gettext('Space Used')}</a> / {gettext('Quota')}
+              </th>
+              <th width="25%">{gettext('Created At')} / {gettext('Last Login')}</th>
+              <th width="10%">{/*Operations*/}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {orgUsers.map((item, index) => {
+              return (
+                <UserItem
+                  key={index}
+                  user={item}
+                  currentTab="users"
+                  isItemFreezed={this.state.isItemFreezed}
+                  toggleDelete={this.props.toggleDelete}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                />
+              );})}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+class OrgUsersSearchUsers extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      query: '',
+      orgUsers: [],
+      org_id: '',
+      isSubmitBtnActive: false,
+      loading: true,
+      errorMsg: '',
+    };
+  }
+
+  componentDidMount () {
+    let params = (new URL(document.location)).searchParams;
+    this.setState({
+      query: params.get('query') || '',
+    }, () => {this.getItems();});
+  }
+
+  getItems = () => {
+    seafileAPI.orgAdminSearchUser(1, this.state.query.trim()).then(res => {
+      let userList = res.data.user_list.map(item => {
+        return new OrgUserInfo(item);
+      });
+      this.setState({
+        orgUsers: userList,
+        loading: false,
+      });
+    }).catch((error) => {
+      this.setState({
+        loading: false,
+        errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
+      });
+    });
+  }
+
+  deleteUser = (email) => {
+    seafileAPI.orgAdminDeleteOrgUser(orgID, email).then(res => {
+      let newUserList = this.state.orgUsers.filter(item => {
+        return item.email != email;
+      });
+      this.setState({orgUsers: newUserList});
+      toaster.success(gettext('Successfully deleted 1 item.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  updateUser = (email, key, value) => {
+    seafileAPI.sysAdminUpdateUser(email, key, value).then(res => {
+      let newUserList = this.state.orgUsers.map(item => {
+        if (item.email == email) {
+          item[key]= res.data[key];
+        }
+        return item;
+      });
+      this.setState({orgUsers: newUserList});
+      const msg = (key == 'is_active' && value) ?
+        res.data.update_status_tip : gettext('Edit succeeded');
+      toaster.success(msg);
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      query: e.target.value
+    }, this.checkSubmitBtnActive);
+  }
+
+  checkSubmitBtnActive = () => {
+    const { query } = this.state;
+    this.setState({
+      isSubmitBtnActive: query.trim()
+    });
+  }
+
+  render() {
+    const { query, isSubmitBtnActive } = this.state;
+
+    return (
+      <Fragment>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Users')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <div className="mt-4 mb-6">
+                <h4 className="border-bottom font-weight-normal mb-2 pb-1">{gettext('Search Users')}</h4>
+                <Form>
+                  <FormGroup row>
+                    <Col sm={5}>
+                      <Input type="text" name="query" value={query} placeholder={gettext('Search users')} onChange={this.handleInputChange} />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm={{size: 5}}>
+                      <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getItems}>{gettext('Submit')}</button>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </div>
+              <div className="mt-4 mb-6">
+                <h4 className="border-bottom font-weight-normal mb-2 pb-1">{gettext('Result')}</h4>
+                <OrgUsersSearchUsersResult
+                  toggleDelete={this.deleteUser}
+                  orgUsers={this.state.orgUsers}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default OrgUsersSearchUsers;

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

@@ -9,9 +9,58 @@ import InviteUserDialog from '../../components/dialog/org-admin-invite-user-dial
 import toaster from '../../components/toast';
 import { seafileAPI } from '../../utils/seafile-api';
 import OrgUserInfo from '../../models/org-user';
-import { gettext, invitationLink, orgID } from '../../utils/constants';
+import { gettext, invitationLink, orgID, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
+class Search extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      value: e.target.value
+    });
+  }
+
+  handleKeyPress = (e) => {
+    if (e.key == 'Enter') {
+      e.preventDefault();
+      this.handleSubmit();
+    }
+  }
+
+  handleSubmit = () => {
+    const value = this.state.value.trim();
+    if (!value) {
+      return false;
+    }
+    this.props.submit(value);
+  }
+
+  render() {
+    return (
+      <div className="input-icon">
+        <i className="d-flex input-icon-addon fas fa-search"></i>
+        <input
+          type="text"
+          className="form-control search-input h-6 mr-1"
+          style={{width: '15rem'}}
+          placeholder={this.props.placeholder}
+          value={this.state.value}
+          onChange={this.handleInputChange}
+          onKeyPress={this.handleKeyPress}
+          autoComplete="off"
+        />
+      </div>
+    );
+  }
+}
+
 class OrgUsers extends Component {
 
   constructor(props) {
@@ -117,6 +166,17 @@ class OrgUsers extends Component {
     });
   }
 
+  searchItems = (keyword) => {
+    navigate(`${siteRoot}org/useradmin/search-users/?query=${encodeURIComponent(keyword)}`);
+  }
+
+  getSearch = () => {
+    return <Search
+      placeholder={gettext('Search users')}
+      submit={this.searchItems}
+    />;
+  }
+
   render() {
     const topBtn = 'btn btn-secondary operation-item';
     let topbarChildren;
@@ -143,7 +203,7 @@ class OrgUsers extends Component {
 
     return (
       <Fragment>
-        <MainPanelTopbar children={topbarChildren}/>
+        <MainPanelTopbar children={topbarChildren} search={this.getSearch()}/>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <Nav currentItem="all" />