admin add ilter api for users

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

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import { gettext } from '../../utils/constants';
+import PropTypes from 'prop-types';
+const { availableRoles } = window.sysadmin.pageOptions;
+
+class DropdownComponent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  handleStatusChange = (event) => {
+    this.props.handleFilterActive(event.target.value);
+  };
+
+  handleRoleChange = (event) => {
+    this.props.handleFilterRole(event.target.value);
+  };
+
+  translateRole = (role) => {
+    switch (role) {
+      case 'default':
+        return gettext('Default');
+      case 'guest':
+        return gettext('Guest');
+      default:
+        return role;
+    }
+  };
+
+  render() {
+    const styles = {
+      filterBar: {
+        marginTop: '16px',
+        marginBottom: '8px',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      filterContainer: {
+        marginRight: '20px',
+      },
+      filterLabel: {
+        marginRight: '8px',
+        fontSize: '14px',
+        color: '#000'
+      },
+      filterSelect: {
+        height: '30px',
+        backgroundColor: '#F5F5F5',
+        border: '1px solid #ddd',
+        color: '#333',
+        fontSize: '14px'
+      }
+    };
+    return (
+      <div style={styles.filterBar}>
+        <div style={styles.filterContainer}>
+          <label style={styles.filterLabel}>{gettext('Status')}</label>
+          <select style={styles.filterSelect} onChange={this.handleStatusChange} value={this.props.isActive}>
+            <option value="">{gettext('all')}</option>
+            <option value={1}>{gettext('Active')}</option>
+            <option value={0}>{gettext('Inactive')}</option>
+          </select>
+        </div>
+        <div style={styles.filterContainer}>
+          <label style={styles.filterLabel}>Role</label>
+          <select style={styles.filterSelect} onChange={this.handleRoleChange} value={this.props.role}>
+              <option value=''>{gettext('all')}</option>
+              {availableRoles.map((item, index) => {
+                return (<option value={item}>{this.translateRole(item)}</option>)
+              })
+            }
+
+          </select>
+        </div>
+      </div>
+    );
+  }
+}
+
+DropdownComponent.propTypes = {
+  loading: PropTypes.bool,
+  curPerPage: PropTypes.number,
+  sortBy: PropTypes.string,
+  currentPage: PropTypes.number,
+  sortOrder: PropTypes.string,
+  handleFilterActive: PropTypes.func,
+  handleFilterRole: PropTypes.func,
+  role: PropTypes.string,
+  isActive: PropTypes.string,
+  availableRoles: PropTypes.array,
+};
+export default DropdownComponent;

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

@@ -14,18 +14,21 @@ import OpMenu from '../../../components/dialog/op-menu';
 import SysAdminUserSetQuotaDialog from '../../../components/dialog/sysadmin-dialog/set-quota';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';
-
+import DropdownComponent from '../../../components/dialog/dropdown-dialog';
 const { availableRoles, availableAdminRoles, institutions } = window.sysadmin.pageOptions;
 
+
+
 class Content extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isItemFreezed: false
+      isItemFreezed: false,
     };
   }
 
+
   toggleItemFreezed = (isFreezed) => {
     this.setState({ isItemFreezed: isFreezed });
   };
@@ -39,33 +42,47 @@ class Content extends Component {
   };
 
   getPreviousPage = () => {
-    this.props.getListByPage(this.props.currentPage - 1);
+    this.props.getListByPage(this.props.currentPage - 1, this.props.is_active, this.props.role);
   };
 
   getNextPage = () => {
-    this.props.getListByPage(this.props.currentPage + 1);
+    this.props.getListByPage(this.props.currentPage + 1, this.props.is_active, this.props.role);
   };
 
   sortByQuotaUsage = (e) => {
     e.preventDefault();
     this.props.sortByQuotaUsage();
   };
-
   render() {
     const {
       isAdmin, loading, errorMsg, items, isAllUsersSelected,
       curPerPage, hasNextPage, currentPage,
       sortBy, sortOrder
     } = 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 users')}</h2>
-        </EmptyTip>
+        <div>
+          {this.props.currentItem == 'database' &&
+            <DropdownComponent
+              isActive={this.props.is_active}
+              role={this.props.role}
+              handleFilterActive={this.props.handleFilterActive}
+              handleFilterRole={this.props.handleFilterRole}
+              availableRoles={availableRoles}
+            />
+
+          }
+
+          <EmptyTip>
+            <h2>{gettext('No users')}</h2>
+          </EmptyTip>
+        </div>
+
       );
 
 
@@ -116,6 +133,14 @@ class Content extends Component {
 
       const table = (
         <Fragment>
+          {this.props.currentItem=='database' &&
+            <DropdownComponent
+              isActive={this.props.is_active}
+              role={this.props.role}
+              handleFilterActive={this.props.handleFilterActive}
+              handleFilterRole={this.props.handleFilterRole}/>
+          }
+
           <table>
             <thead>
               <tr>
@@ -129,21 +154,24 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
-                  key={index}
-                  item={item}
-                  isItemFreezed={this.state.isItemFreezed}
-                  onFreezedItem={this.onFreezedItem}
-                  onUnfreezedItem={this.onUnfreezedItem}
-                  toggleItemFreezed={this.toggleItemFreezed}
-                  updateUser={this.props.updateUser}
-                  deleteUser={this.props.deleteUser}
-                  updateAdminRole={this.props.updateAdminRole}
-                  revokeAdmin={this.props.revokeAdmin}
-                  onUserSelected={this.props.onUserSelected}
-                  isAdmin={this.props.isAdmin}
-                  isLDAPImported={this.props.isLDAPImported}
-                />);
+                if (index < this.props.curPerPage) {
+                  return (<Item
+                    key={index}
+                    item={item}
+                    isItemFreezed={this.state.isItemFreezed}
+                    onFreezedItem={this.onFreezedItem}
+                    onUnfreezedItem={this.onUnfreezedItem}
+                    toggleItemFreezed={this.toggleItemFreezed}
+                    updateUser={this.props.updateUser}
+                    deleteUser={this.props.deleteUser}
+                    updateAdminRole={this.props.updateAdminRole}
+                    revokeAdmin={this.props.revokeAdmin}
+                    onUserSelected={this.props.onUserSelected}
+                    isAdmin={this.props.isAdmin}
+                    isLDAPImported={this.props.isLDAPImported}
+                  />);
+                }
+                return null;
               })}
             </tbody>
           </table>
@@ -188,6 +216,11 @@ Content.propTypes = {
   curPerPage: PropTypes.number,
   hasNextPage: PropTypes.bool,
   sortOrder: PropTypes.string,
+  is_active: PropTypes.string,
+  role: PropTypes.string,
+  currentItem: PropTypes.string,
+  handleFilterActive: PropTypes.func,
+  handleFilterRole: PropTypes.func
 };
 
 class Item extends Component {

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

@@ -43,7 +43,9 @@ class Users extends Component {
       isAddUserDialogOpen: false,
       isBatchSetQuotaDialogOpen: false,
       isBatchDeleteUserDialogOpen: false,
-      isBatchAddAdminDialogOpen: false
+      isBatchAddAdminDialogOpen: false,
+      is_active: null,
+      role: null,
     };
   }
 
@@ -55,15 +57,16 @@ class Users extends Component {
       const {
         currentPage, perPage,
         sortBy = '',
-        sortOrder = 'asc'
+        sortOrder = 'asc',
+        is_active, role
       } = this.state;
       this.setState({
         perPage: parseInt(urlParams.get('per_page') || perPage),
         currentPage: parseInt(urlParams.get('page') || currentPage),
         sortBy: urlParams.get('order_by') || sortBy,
-        sortOrder: urlParams.get('direction') || sortOrder
+        sortOrder: urlParams.get('direction') || sortOrder,
       }, () => {
-        this.getUsersListByPage(this.state.currentPage);
+        this.getUsersListByPage(this.state.currentPage, is_active, role);
       });
     }
   }
@@ -160,10 +163,10 @@ class Users extends Component {
     });
   };
 
-  getUsersListByPage = (page) => {
+  getUsersListByPage = (page, is_active, role) => {
     const { perPage, sortBy, sortOrder } = this.state;
     const { isLDAPImported } = this.props;
-    seafileAPI.sysAdminListUsers(page, perPage, isLDAPImported, sortBy, sortOrder).then(res => {
+    seafileAPI.sysAdminListUsers(page, perPage, isLDAPImported, sortBy, sortOrder, is_active, role).then(res => {
       let users = res.data.data.map(user => {return new SysAdminUser(user);});
       this.setState({
         userList: users,
@@ -179,6 +182,47 @@ class Users extends Component {
     });
   };
 
+  handleUserListSelect = (users, page, hasNextPage) => {
+    this.setState({
+      userList: users,
+      loading: false,
+      hasNextPage: hasNextPage,
+      currentPage: page
+    });
+  };
+
+
+  updateURL = (page, perPage) => {
+    let url = new URL(location.href);
+    let searchParams = new URLSearchParams(url.search);
+    searchParams.set('page', page);
+    searchParams.set('per_page', perPage);
+    url.search = searchParams.toString();
+    navigate(url.toString());
+  };
+
+  handleFilterActive = (is_active) => {
+    this.setState({
+      is_active: is_active,
+      currentPage: 1
+    }, ()=>{
+      const { currentPage, perPage, is_active, role } = this.state;
+      this.updateURL(currentPage, perPage);
+      this.getUsersListByPage(currentPage, is_active, role);
+    });
+  };
+
+  handleFilterRole = (role) => {
+    this.setState({
+      role: role,
+      currentPage: 1
+    }, ()=>{
+      const { currentPage,perPage, is_active, role } = this.state;
+      this.updateURL(currentPage, perPage);
+      this.getUsersListByPage(currentPage, is_active, role);
+    });
+  };
+
   sortByQuotaUsage = () => {
     this.setState({
       sortBy: 'quota_usage',
@@ -187,13 +231,13 @@ class Users extends Component {
     }, () => {
       let url = new URL(location.href);
       let searchParams = new URLSearchParams(url.search);
-      const { currentPage, sortBy, sortOrder } = this.state;
+      const { currentPage, sortBy, sortOrder, is_active, role } = this.state;
       searchParams.set('page', currentPage);
       searchParams.set('order_by', sortBy);
       searchParams.set('direction', sortOrder);
       url.search = searchParams.toString();
       navigate(url.toString());
-      this.getUsersListByPage(currentPage);
+      this.getUsersListByPage(currentPage, is_active, role);
     });
   };
 
@@ -309,7 +353,7 @@ class Users extends Component {
     this.setState({
       perPage: perPage
     }, () => {
-      this.getUsersListByPage(1);
+      this.getUsersListByPage(1, this.state.is_active, this.state.role);
     });
   };
 
@@ -468,6 +512,8 @@ class Users extends Component {
                 currentPage={this.state.currentPage}
                 hasNextPage={this.state.hasNextPage}
                 curPerPage={this.state.perPage}
+                is_active={this.state.is_active}
+                role={this.state.role}
                 resetPerPage={this.resetPerPage}
                 getListByPage={this.getUsersListByPage}
                 updateUser={this.updateUser}
@@ -477,6 +523,10 @@ class Users extends Component {
                 onUserSelected={this.onUserSelected}
                 isAllUsersSelected={this.isAllUsersSelected}
                 toggleSelectAllUsers={this.toggleSelectAllUsers}
+                handleUserListSelect={this.handleUserListSelect}
+                handleFilterRole={this.handleFilterRole}
+                handleFilterActive={this.handleFilterActive}
+                currentItem={this.getCurrentNavItem()}
               />
             </div>
           </div>