1
- import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles } from "constants/orgConstants";
1
+ import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles, RoleIdType } from "constants/orgConstants";
2
2
import { 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";
4
4
import { trans } from "i18n";
5
5
import ProfileImage from "pages/common/profileImage";
6
6
import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -84,6 +84,7 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
84
84
setElements
85
85
} = props;
86
86
const [searchValue, setSearchValue] = useState("")
87
+ const [roleFilter, setRoleFilter] = useState<RoleIdType | "">("")
87
88
const dispatch = useDispatch();
88
89
89
90
const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
@@ -99,9 +100,20 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
99
100
});
100
101
}, [groupUsers]);
101
102
103
+ const roleFilterOptions = useMemo(() => [
104
+ ...TacoRoles.map(role => ({
105
+ label: GroupRoleInfo[role].name,
106
+ value: role as RoleIdType | ""
107
+ })),
108
+ {
109
+ label: "All",
110
+ value: "" as RoleIdType | ""
111
+ }
112
+ ], []);
113
+
102
114
const debouncedFetchPotentialMembers = useCallback(
103
- debounce((searchVal: string) => {
104
- fetchGroupUsrPagination({groupId: group.groupId, search: searchVal})
115
+ debounce((searchVal: string, roleFilter: string ) => {
116
+ fetchGroupUsrPagination({groupId: group.groupId, search: searchVal, role: roleFilter })
105
117
.then(result => {
106
118
if (result.success) {
107
119
setElements({
@@ -115,13 +127,13 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
115
127
);
116
128
117
129
useEffect(() => {
118
- if (searchValue.length > 2 || searchValue === "") {
119
- debouncedFetchPotentialMembers(searchValue);
130
+ if (searchValue.length > 2 || searchValue === "" || roleFilter ) {
131
+ debouncedFetchPotentialMembers(searchValue, roleFilter );
120
132
}
121
133
return () => {
122
134
debouncedFetchPotentialMembers.cancel();
123
135
};
124
- }, [searchValue, debouncedFetchPotentialMembers]);
136
+ }, [searchValue, roleFilter, debouncedFetchPotentialMembers]);
125
137
126
138
return (
127
139
<>
@@ -137,6 +149,17 @@ const GroupUsersPermission: React.FC<GroupPermissionProp> = (props) => {
137
149
</HeaderBack>
138
150
{isGroupAdmin(currentUserGroupRole) && !group.syncGroup && (
139
151
<OptionsHeader>
152
+ <Dropdown
153
+ options={roleFilterOptions}
154
+ value={roleFilter || ""}
155
+ onChange={(value) => {
156
+ setRoleFilter(value);
157
+ }}
158
+ style={{
159
+ minWidth: "100px"
160
+ }}
161
+ placeholder={trans("memberSettings.filterByRole")}
162
+ />
140
163
<Search
141
164
placeholder={trans("memberSettings.searchMember")}
142
165
value={searchValue}
0 commit comments