[system admin] groups: added 'search groups' (#4246)

frontend/src/pages/sys-admin/groups/groups-content.js

@@ -0,0 +1,220 @@
+import React, { Component, Fragment } from 'react';
+import { Link } from '@reach/router';
+import moment from 'moment';
+import { Utils } from '../../../utils/utils';
+import { siteRoot, gettext } from '../../../utils/constants';
+import Loading from '../../../components/loading';
+import EmptyTip from '../../../components/empty-tip';
+import Paginator from '../../../components/paginator';
+import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import SysAdminTransferGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog';
+import UserLink from '../user-link';
+import OpMenu from './op-menu';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { 
+      isItemFreezed: false
+    };  
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  getPreviousPage = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page - 1);
+  }
+
+  getNextPage = () => {
+    this.props.getListByPage(this.props.pageInfo.current_page + 1);
+  }
+
+  render() {
+    const { loading, errorMsg, items, pageInfo } = this.props;
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center mt-4">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <EmptyTip>
+          <h2>{gettext('No groups')}</h2>
+        </EmptyTip>
+      );
+      const table = (
+        <Fragment>
+          <table>
+            <thead>
+              <tr>
+                <th width="35%">{gettext('Name')}</th>
+                <th width="40%">{gettext('Owner')}</th>
+                <th width="20%">{gettext('Created At')}</th>
+                <th width="5%">{/* operation */}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, index) => {
+                return (<Item
+                  key={index}
+                  item={item}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  deleteGroup={this.props.deleteGroup}
+                  transferGroup={this.props.transferGroup}
+                />);
+              })}
+            </tbody>
+          </table>
+          {pageInfo &&
+          <Paginator
+            gotoPreviousPage={this.getPreviousPage}
+            gotoNextPage={this.getNextPage}
+            currentPage={pageInfo.current_page}
+            hasNextPage={pageInfo.has_next_page}
+            canResetPerPage={false}
+          />
+          }
+        </Fragment>
+      );
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      highlight: false,
+      isDeleteDialogOpen: false,
+      isTransferDialogOpen: false
+    };
+  }
+
+  handleMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: true,
+        highlight: true
+      });
+    }
+  }
+
+  handleMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        isOpIconShown: false,
+        highlight: false
+      });
+    }
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({
+      highlight: false,
+      isOpIconShow: false
+    });
+    this.props.onUnfreezedItem();
+  }
+
+  onMenuItemClick = (operation) => {
+    switch(operation) {
+      case 'Delete':
+        this.toggleDeleteDialog();
+        break;
+      case 'Transfer':
+        this.toggleTransferDialog();
+        break;
+      default:
+        break;
+    }
+  }
+
+  toggleDeleteDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+  }
+
+  toggleTransferDialog = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
+  }
+
+  deleteGroup = () => {
+    this.props.deleteGroup(this.props.item.id);
+  }
+
+  transferGroup = (receiver) => {
+    this.props.transferGroup(this.props.item.id, receiver);
+  }
+
+  render() {
+    const { isOpIconShown, isDeleteDialogOpen, isTransferDialogOpen } = this.state;
+    const { item } = this.props;
+
+    let groupName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
+    let deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', groupName);
+
+    const groupUrl = item.parent_group_id == 0 ?
+      `${siteRoot}sys/groups/${item.id}/libraries/` :
+      `${siteRoot}sys/departments/${item.id}/`;
+
+    return (
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <td><Link to={groupUrl}>{item.name}</Link></td>
+          <td>
+            {item.owner == 'system admin' ?
+              '--' :
+              <UserLink email={item.owner} name={item.owner_name} />
+            }
+          </td>
+          <td>
+            <span title={moment(item.created_at).format('llll')}>{moment(item.created_at).fromNow()}</span>
+          </td>
+          <td>
+            {(isOpIconShown && item.owner != 'system admin') &&
+            <OpMenu
+              onMenuItemClick={this.onMenuItemClick}
+              onFreezedItem={this.props.onFreezedItem}
+              onUnfreezedItem={this.onUnfreezedItem}
+            />
+            }
+          </td>
+        </tr>
+        {isDeleteDialogOpen &&
+          <CommonOperationConfirmationDialog 
+            title={gettext('Delete Group')}
+            message={deleteDialogMsg}
+            executeOperation={this.deleteGroup}
+            confirmBtnText={gettext('Delete')}
+            toggleDialog={this.toggleDeleteDialog}
+          />
+        }
+        {isTransferDialogOpen &&
+          <SysAdminTransferGroupDialog
+            groupName={item.name}
+            transferGroup={this.transferGroup}
+            toggleDialog={this.toggleTransferDialog}
+          />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default Content;

frontend/src/pages/sys-admin/groups/groups.js

@@ -1,224 +1,14 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from '@reach/router';
+import { navigate } from '@reach/router';
 import { Button } from 'reactstrap';
-import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { siteRoot, loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
-import Loading from '../../../components/loading';
-import EmptyTip from '../../../components/empty-tip';
-import Paginator from '../../../components/paginator';
-import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import SysAdminCreateGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-create-group-dialog';
-import SysAdminTransferGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
-import UserLink from '../user-link';
+import Search from '../search';
-import OpMenu from './op-menu';
+import Content from './groups-content';
-
-class Content extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = { 
-      isItemFreezed: false
-    };  
-  }
-
-  onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
-  }
-
-  onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
-  }
-
-  getPreviousPage = () => {
-    this.props.getListByPage(this.props.pageInfo.current_page - 1);
-  }
-
-  getNextPage = () => {
-    this.props.getListByPage(this.props.pageInfo.current_page + 1);
-  }
-
-  render() {
-    const { loading, errorMsg, items, pageInfo } = this.props;
-    if (loading) {
-      return <Loading />;
-    } else if (errorMsg) {
-      return <p className="error text-center mt-4">{errorMsg}</p>;
-    } else {
-      const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No groups')}</h2>
-        </EmptyTip>
-      );
-      const table = (
-        <Fragment>
-          <table>
-            <thead>
-              <tr>
-                <th width="35%">{gettext('Name')}</th>
-                <th width="40%">{gettext('Owner')}</th>
-                <th width="20%">{gettext('Created At')}</th>
-                <th width="5%">{/* operation */}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {items.map((item, index) => {
-                return (<Item
-                  key={index}
-                  item={item}
-                  isItemFreezed={this.state.isItemFreezed}
-                  onFreezedItem={this.onFreezedItem}
-                  onUnfreezedItem={this.onUnfreezedItem}
-                  deleteGroup={this.props.deleteGroup}
-                  transferGroup={this.props.transferGroup}
-                />);
-              })}
-            </tbody>
-          </table>
-          <Paginator
-            gotoPreviousPage={this.getPreviousPage}
-            gotoNextPage={this.getNextPage}
-            currentPage={pageInfo.current_page}
-            hasNextPage={pageInfo.has_next_page}
-            canResetPerPage={false}
-          />
-        </Fragment>
-      );
-      return items.length ? table : emptyTip; 
-    }
-  }
-}
-
-class Item extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpIconShown: false,
-      highlight: false,
-      isDeleteDialogOpen: false,
-      isTransferDialogOpen: false
-    };
-  }
-
-  handleMouseEnter = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        isOpIconShown: true,
-        highlight: true
-      });
-    }
-  }
-
-  handleMouseLeave = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        isOpIconShown: false,
-        highlight: false
-      });
-    }
-  }
-
-  onUnfreezedItem = () => {
-    this.setState({
-      highlight: false,
-      isOpIconShow: false
-    });
-    this.props.onUnfreezedItem();
-  }
-
-  onMenuItemClick = (operation) => {
-    switch(operation) {
-      case 'Delete':
-        this.toggleDeleteDialog();
-        break;
-      case 'Transfer':
-        this.toggleTransferDialog();
-        break;
-      default:
-        break;
-    }
-  }
-
-  toggleDeleteDialog = (e) => {
-    if (e) {
-      e.preventDefault();
-    }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
-  }
-
-  toggleTransferDialog = (e) => {
-    if (e) {
-      e.preventDefault();
-    }
-    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
-  }
-
-  deleteGroup = () => {
-    this.props.deleteGroup(this.props.item.id);
-  }
-
-  transferGroup = (receiver) => {
-    this.props.transferGroup(this.props.item.id, receiver);
-  }
-
-  render() {
-    const { isOpIconShown, isDeleteDialogOpen, isTransferDialogOpen } = this.state;
-    const { item } = this.props;
-
-    let groupName = '<span class="op-target">' + Utils.HTMLescape(item.name) + '</span>';
-    let deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', groupName);
-
-    const groupUrl = item.parent_group_id == 0 ?
-      `${siteRoot}sys/groups/${item.id}/libraries/` :
-      `${siteRoot}sys/departments/${item.id}/`;
-
-    return (
-      <Fragment>
-        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <td><Link to={groupUrl}>{item.name}</Link></td>
-          <td>
-            {item.owner == 'system admin' ?
-              '--' :
-              <UserLink email={item.owner} name={item.owner_name} />
-            }
-          </td>
-          <td>
-            <span title={moment(item.created_at).format('llll')}>{moment(item.created_at).fromNow()}</span>
-          </td>
-          <td>
-            {(isOpIconShown && item.owner != 'system admin') &&
-            <OpMenu
-              onMenuItemClick={this.onMenuItemClick}
-              onFreezedItem={this.props.onFreezedItem}
-              onUnfreezedItem={this.onUnfreezedItem}
-            />
-            }
-          </td>
-        </tr>
-        {isDeleteDialogOpen &&
-          <CommonOperationConfirmationDialog 
-            title={gettext('Delete Group')}
-            message={deleteDialogMsg}
-            executeOperation={this.deleteGroup}
-            confirmBtnText={gettext('Delete')}
-            toggleDialog={this.toggleDeleteDialog}
-          />
-        }
-        {isTransferDialogOpen &&
-          <SysAdminTransferGroupDialog
-            groupName={item.name}
-            transferGroup={this.transferGroup}
-            toggleDialog={this.toggleTransferDialog}
-          />
-        }
-      </Fragment>
-    );
-  }
-}
 
 class Groups extends Component {
 
@@ -312,18 +102,30 @@ class Groups extends Component {
       this.setState({
         groupList: newGroupList
       });
+      toaster.success(gettext('Successfully transferred the group.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   }
 
+  getSearch = () => {
+    return <Search
+      placeholder={gettext('Search groups by name')}
+      submit={this.searchGroups}
+    />; 
+  }
+
+  searchGroups = (name) => {
+    navigate(`${siteRoot}sys/search-groups/?name=${encodeURIComponent(name)}`);
+  }
+
   render() {
     let { isCreateGroupDialogOpen } = this.state;
 
     return (
       <Fragment>
-        <MainPanelTopbar>
+        <MainPanelTopbar search={this.getSearch()}>
           <Fragment>
             <Button className="operation-item" onClick={this.toggleCreateGroupDialog}>{gettext('New Group')}</Button>
             <a className="btn btn-secondary operation-item" href={`${siteRoot}sys/groupadmin/export-excel/`}>{gettext('Export Excel')}</a>

frontend/src/pages/sys-admin/groups/search-groups.js

@@ -0,0 +1,154 @@
+import React, { Component, Fragment } from 'react';
+import { Form, FormGroup, Input, Label, Col } from 'reactstrap';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { loginUrl, gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import MainPanelTopbar from '../main-panel-topbar';
+import Content from './groups-content';
+
+class SearchGroups extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '', 
+      isSubmitBtnActive: false, 
+      loading: true,
+      errorMsg: '',
+      groupList: [],
+      pageInfo: null
+    };
+  }
+
+  componentDidMount () {
+    let params = (new URL(document.location)).searchParams;
+    this.setState({
+      name: params.get('name') || ''
+    }, this.getGroups);
+  }
+
+  getGroups = () => {
+    const { name } = this.state;
+    seafileAPI.sysAdminSearchGroups(name).then((res) => {
+      this.setState({
+        loading: false,
+        groupList: res.data.groups
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  deleteGroup = (groupID) => {
+    seafileAPI.sysAdminDismissGroupByID(groupID).then(res => {
+      let newGroupList = this.state.groupList.filter(item => {
+        return item.id != groupID;
+      });
+      this.setState({
+        groupList: newGroupList
+      });
+      toaster.success(gettext('Successfully deleted 1 item.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  transferGroup = (groupID, receiverEmail) => {
+    seafileAPI.sysAdminTransferGroup(receiverEmail, groupID).then(res => {
+      let newGroupList = this.state.groupList.map(item => {
+        if (item.id == groupID) {
+          item = res.data;
+        }
+        return item;
+      });
+      this.setState({
+        groupList: newGroupList
+      });
+      toaster.success(gettext('Successfully transferred the group.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleNameInputChange = (e) => {
+    this.setState({
+      name: e.target.value
+    }, this.checkSubmitBtnActive);
+  }
+
+  checkSubmitBtnActive = () => {
+    const { name } = this.state;
+    this.setState({
+      isSubmitBtnActive: name.trim()
+    });
+  }
+
+  render() {
+    const { name, isSubmitBtnActive } = this.state;
+
+    return (
+      <Fragment>
+        <MainPanelTopbar />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Groups')}</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 Groups')}</h4>
+                <p className="text-secondary small">{gettext('Tip: you can search by keyword in name.')}</p>
+                <Form>
+                  <FormGroup row>
+                    <Label for="name" sm={1}>{gettext('Name')}</Label>
+                    <Col sm={5}>
+                      <Input type="text" name="name" id="name" value={name} onChange={this.handleNameInputChange} />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm={{size: 5, offset: 1}}>
+                      <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getGroups}>{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>
+                <Content
+                  loading={this.state.loading}
+                  errorMsg={this.state.errorMsg}
+                  items={this.state.groupList}
+                  deleteGroup={this.deleteGroup}
+                  transferGroup={this.transferGroup}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default SearchGroups;

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

@@ -29,6 +29,7 @@ import SearchRepos from './repos/search-repos';
 import DirView from './repos/dir-view';
 
 import Groups from './groups/groups';
+import SearchGroups from './groups/search-groups';
 import GroupRepos from './groups/group-repos';
 import GroupMembers from './groups/group-members';
 
@@ -100,7 +101,7 @@ class SysAdmin extends React.Component {
       },
       {
         tab: 'groups',
-        urlPartList: ['groups/']
+        urlPartList: ['groups/', 'search-groups/']
       },
       {
         tab: 'organizations',
@@ -160,6 +161,7 @@ class SysAdmin extends React.Component {
             <WebSettings path={siteRoot + 'sys/web-settings'} />
             <Notifications path={siteRoot + 'sys/notifications'} />
             <Groups path={siteRoot + 'sys/groups'} />
+            <SearchGroups path={siteRoot + 'sys/search-groups'} />
             <GroupRepos path={siteRoot + 'sys/groups/:groupID/libraries'} />
             <GroupMembers path={siteRoot + 'sys/groups/:groupID/members'} />
             <Departments path={siteRoot + 'sys/departments'}>

seahub/urls.py

@@ -704,6 +704,7 @@ urlpatterns = [
     url(r'^sys/libraries/(?P<repo_id>[-0-9a-f]{36})/$', sysadmin_react_fake_view, name="sys_libraries_template"),
     url(r'^sys/libraries/(?P<repo_id>[-0-9a-f]{36})/(?P<repo_name>[^/]+)/(?P<path>.*)$', sysadmin_react_fake_view, name="sys_libraries_template_dirent"),
     url(r'^sys/groups/$', sysadmin_react_fake_view, name="sys_groups"),
+    url(r'^sys/search-groups/$', sysadmin_react_fake_view, name="sys_search_groups"),
     url(r'^sys/groups/(?P<group_id>\d+)/libraries/$', sysadmin_react_fake_view, name="sys_group_libraries"),
     url(r'^sys/groups/(?P<group_id>\d+)/members/$', sysadmin_react_fake_view, name="sys_group_members"),
     url(r'^sys/departments/$', sysadmin_react_fake_view, name="sys_departments"),