1- import { GroupRoleInfo , GroupUser , OrgGroup , TacoRoles } from "constants/orgConstants" ;
1+ import { GroupRoleInfo , GroupUser , OrgGroup , TacoRoles , RoleIdType } from "constants/orgConstants" ;
22import { User } from "constants/userConstants" ;
3- import { AddIcon , ArrowIcon , CustomSelect , PackUpIcon , Search , SuperUserIcon } from "lowcoder-design" ;
3+ import { AddIcon , ArrowIcon , CustomSelect , Dropdown , PackUpIcon , Search , SuperUserIcon } from "lowcoder-design" ;
44import { trans } from "i18n" ;
55import ProfileImage from "pages/common/profileImage" ;
66import React , { useCallback , useEffect , useMemo , useState } from "react" ;
@@ -84,6 +84,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
8484 setElements
8585} = props ;
8686const [ searchValue , setSearchValue ] = useState ( "" )
87+ const [ roleFilter , setRoleFilter ] = useState < RoleIdType | "" > ( "" )
8788const dispatch = useDispatch ( ) ;
8889
8990const adminCount = groupUsers . filter ( ( user ) => isGroupAdmin ( user . role ) ) . length ;
@@ -99,9 +100,23 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
99100} ) ;
100101} , [ groupUsers ] ) ;
101102
103+ const roleFilterOptions = useCallback ( ( ) => {
104+ const filterOptions = [
105+ ...TacoRoles . map ( role => ( {
106+ label :GroupRoleInfo [ role ] . name ,
107+ value :role as RoleIdType | ""
108+ } ) ) ,
109+ {
110+ label :"All" ,
111+ value :"" as RoleIdType | ""
112+ }
113+ ]
114+ return filterOptions ;
115+ } , [ ] )
116+
102117const debouncedFetchPotentialMembers = useCallback (
103- debounce ( ( searchVal :string ) => {
104- fetchGroupUsrPagination ( { groupId :group . groupId , search :searchVal } )
118+ debounce ( ( searchVal :string , roleFilter : string ) => {
119+ fetchGroupUsrPagination ( { groupId :group . groupId , search :searchVal , role : roleFilter } )
105120. then ( result => {
106121if ( result . success ) {
107122setElements ( {
@@ -115,13 +130,13 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
115130) ;
116131
117132useEffect ( ( ) => {
118- if ( searchValue . length > 2 || searchValue === "" ) {
119- debouncedFetchPotentialMembers ( searchValue ) ;
133+ if ( searchValue . length > 2 || searchValue === "" || roleFilter ) {
134+ debouncedFetchPotentialMembers ( searchValue , roleFilter ) ;
120135}
121136return ( ) => {
122137debouncedFetchPotentialMembers . cancel ( ) ;
123138} ;
124- } , [ searchValue , debouncedFetchPotentialMembers ] ) ;
139+ } , [ searchValue , roleFilter , debouncedFetchPotentialMembers ] ) ;
125140
126141return (
127142< >
@@ -137,6 +152,17 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
137152</ HeaderBack >
138153{ isGroupAdmin ( currentUserGroupRole ) && ! group . syncGroup && (
139154< OptionsHeader >
155+ < Dropdown
156+ options = { roleFilterOptions ( ) }
157+ value = { roleFilter || "" }
158+ onChange = { ( value ) => {
159+ setRoleFilter ( value ) ;
160+ } }
161+ style = { {
162+ minWidth :"100px"
163+ } }
164+ placeholder = { trans ( "memberSettings.filterByRole" ) }
165+ />
140166< Search
141167placeholder = { trans ( "memberSettings.searchMember" ) }
142168value = { searchValue }