diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 1ff980d53..045518e1f 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -3034,6 +3034,7 @@ export const en = { "joinTimeColumn": "Joining Time", "actionColumn": "Operation", "roleColumn": "Role", + "filterByRole": "Filter by role", "exitGroup": "Exit Group", "moveOutGroup": "Remove from Group", "inviteUser": "Invite Members", diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx index 1ce015530..c2d260fe4 100644 --- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx +++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx @@ -1,6 +1,6 @@ -import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles } from "constants/orgConstants"; +import { GroupRoleInfo, GroupUser, OrgGroup, TacoRoles, RoleIdType } from "constants/orgConstants"; import { User } from "constants/userConstants"; -import { AddIcon, ArrowIcon, CustomSelect, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design"; +import { AddIcon, ArrowIcon, CustomSelect, Dropdown, PackUpIcon, Search, SuperUserIcon } from "lowcoder-design"; import { trans } from "i18n"; import ProfileImage from "pages/common/profileImage"; import React, { useCallback, useEffect, useMemo, useState } from "react"; @@ -84,6 +84,7 @@ const GroupUsersPermission: React.FC = (props) => { setElements } = props; const [searchValue, setSearchValue] = useState("") + const [roleFilter, setRoleFilter] = useState("") const dispatch = useDispatch(); const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length; @@ -99,9 +100,20 @@ const GroupUsersPermission: React.FC = (props) => { }); }, [groupUsers]); + const roleFilterOptions = useMemo(() => [ + ...TacoRoles.map(role => ({ + label: GroupRoleInfo[role].name, + value: role as RoleIdType | "" + })), + { + label: "All", + value: "" as RoleIdType | "" + } + ], []); + const debouncedFetchPotentialMembers = useCallback( - debounce((searchVal: string) => { - fetchGroupUsrPagination({groupId: group.groupId, search: searchVal}) + debounce((searchVal: string, roleFilter: string) => { + fetchGroupUsrPagination({groupId: group.groupId, search: searchVal, role: roleFilter}) .then(result => { if (result.success) { setElements({ @@ -115,13 +127,13 @@ const GroupUsersPermission: React.FC = (props) => { ); useEffect(() => { - if (searchValue.length > 2 || searchValue === "") { - debouncedFetchPotentialMembers(searchValue); + if (searchValue.length > 2 || searchValue === "" || roleFilter) { + debouncedFetchPotentialMembers(searchValue, roleFilter); } return () => { debouncedFetchPotentialMembers.cancel(); }; - }, [searchValue, debouncedFetchPotentialMembers]); + }, [searchValue, roleFilter, debouncedFetchPotentialMembers]); return ( <> @@ -137,6 +149,17 @@ const GroupUsersPermission: React.FC = (props) => { {isGroupAdmin(currentUserGroupRole) && !group.syncGroup && ( + { + setRoleFilter(value); + }} + style={{ + minWidth: "100px" + }} + placeholder={trans("memberSettings.filterByRole")} + />