Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitddd9fe1

Browse files
committed
Search bar for User group members
1 parent48d6d7b commitddd9fe1

File tree

3 files changed

+116
-76
lines changed

3 files changed

+116
-76
lines changed

‎client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx

Lines changed: 90 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import{GroupRoleInfo,GroupUser,OrgGroup,TacoRoles}from"constants/orgConstants";
22
import{User}from"constants/userConstants";
3-
import{AddIcon,ArrowIcon,CustomSelect,PackUpIcon,SuperUserIcon}from"lowcoder-design";
3+
import{AddIcon,ArrowIcon,CustomSelect,PackUpIcon,Search,SuperUserIcon}from"lowcoder-design";
44
import{trans}from"i18n";
55
importProfileImagefrom"pages/common/profileImage";
6-
importReact,{useMemo}from"react";
6+
importReact,{useCallback,useEffect,useMemo,useState}from"react";
77
import{useDispatch}from"react-redux";
88
import{
99
deleteGroupUserAction,
@@ -20,7 +20,6 @@ import {
2020
GroupNameView,
2121
HeaderBack,
2222
LAST_ADMIN_QUIT,
23-
PermissionHeaderWrapper,
2423
QuestionTooltip,
2524
RoleSelectSubTitle,
2625
RoleSelectTitle,
@@ -31,13 +30,35 @@ import {
3130
importhistoryfrom"util/history";
3231
import{PERMISSION_SETTING}from"constants/routesURL";
3332
importColumnfrom"antd/es/table/Column";
33+
import{debounce}from"lodash";
34+
import{fetchGroupUsrPagination}from"@lowcoder-ee/util/pagination/axios";
3435

3536
constStyledAddIcon=styled(AddIcon)`
3637
g path {
3738
fill: #ffffff;
3839
}
3940
`;
4041

42+
constPermissionHeaderWrapper=styled.div`
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
width: 100%;
47+
margin-bottom: 16px;
48+
`;
49+
50+
constOptionsHeader=styled.div`
51+
display: flex;
52+
align-items: center;
53+
gap: 12px;
54+
`;
55+
56+
typeElementsState={
57+
elements:any[];
58+
total:number;
59+
role:string;
60+
};
61+
4162
typeGroupPermissionProp={
4263
group:OrgGroup;
4364
orgId:string;
@@ -47,11 +68,24 @@ type GroupPermissionProp = {
4768
setModify?:any;
4869
modify?:boolean;
4970
loading?:boolean;
71+
setElements:React.Dispatch<React.SetStateAction<ElementsState>>;
5072
};
5173

52-
functionGroupUsersPermission(props:GroupPermissionProp){
53-
// const { Column } = TableStyled;
54-
const{ group, orgId, groupUsers, currentUserGroupRole, currentUser, setModify, modify, loading}=props;
74+
constGroupUsersPermission:React.FC<GroupPermissionProp>=(props)=>{
75+
const{
76+
group,
77+
orgId,
78+
groupUsers,
79+
currentUserGroupRole,
80+
currentUser,
81+
setModify,
82+
modify,
83+
loading,
84+
setElements
85+
}=props;
86+
const[searchValue,setSearchValue]=useState("")
87+
constdispatch=useDispatch();
88+
5589
constadminCount=groupUsers.filter((user)=>isGroupAdmin(user.role)).length;
5690
constsortedGroupUsers=useMemo(()=>{
5791
return[...groupUsers].sort((a,b)=>{
@@ -64,7 +98,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
6498
}
6599
});
66100
},[groupUsers]);
67-
constdispatch=useDispatch();
101+
102+
constdebouncedFetchPotentialMembers=useCallback(
103+
debounce((searchVal:string)=>{
104+
fetchGroupUsrPagination({groupId:group.groupId,search:searchVal})
105+
.then(result=>{
106+
if(result.success){
107+
setElements({
108+
elements:result.data||[],
109+
total:result.total||0,
110+
role:result.visitorRole||""
111+
});
112+
}
113+
})
114+
},500),[dispatch]
115+
);
116+
117+
useEffect(()=>{
118+
if(searchValue.length>2||searchValue===""){
119+
debouncedFetchPotentialMembers(searchValue);
120+
}
121+
return()=>{
122+
debouncedFetchPotentialMembers.cancel();
123+
};
124+
},[searchValue,debouncedFetchPotentialMembers]);
125+
68126
return(
69127
<>
70128
<PermissionHeaderWrapper>
@@ -78,19 +136,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
78136
)}
79137
</HeaderBack>
80138
{isGroupAdmin(currentUserGroupRole)&&!group.syncGroup&&(
81-
<AddGroupUserDialog
82-
groupUsers={groupUsers}
83-
orgId={orgId}
84-
groupId={group.groupId}
85-
setModify={setModify}
86-
modify={modify}
87-
trigger={
88-
<AddMemberButtonbuttonType="primary"icon={<StyledAddIcon/>}>
89-
{trans("memberSettings.addMember")}
90-
</AddMemberButton>
91-
}
92-
style={{marginLeft:"auto"}}
93-
/>
139+
<OptionsHeader>
140+
<Search
141+
placeholder={trans("memberSettings.searchMember")}
142+
value={searchValue}
143+
onChange={(e)=>setSearchValue(e.target.value)}
144+
style={{
145+
width:"20%",
146+
minWidth:"160px",
147+
height:"32px",
148+
marginTop:'auto'
149+
}}
150+
/>
151+
<AddGroupUserDialog
152+
groupUsers={groupUsers}
153+
orgId={orgId}
154+
groupId={group.groupId}
155+
setModify={setModify}
156+
modify={modify}
157+
trigger={
158+
<AddMemberButtonbuttonType="primary"icon={<StyledAddIcon/>}>
159+
{trans("memberSettings.addMember")}
160+
</AddMemberButton>
161+
}
162+
/>
163+
</OptionsHeader>
94164
)}
95165
</PermissionHeaderWrapper>
96166
<TableStyled

‎client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import { useSelector } from "react-redux";
33
import{getUser}from"redux/selectors/usersSelectors";
44
importstyledfrom"styled-components";
55
importGroupPermissionfrom"./groupUsersPermission";
6-
importUsersPermissionfrom"./orgUsersPermission";
76
import{useParams}from"react-router-dom";
8-
import{fetchGroupUsrPagination,fetchOrgGroups,fetchOrgUsrPagination}from"@lowcoder-ee/util/pagination/axios";
7+
import{fetchGroupUsrPagination,fetchOrgGroups}from"@lowcoder-ee/util/pagination/axios";
98
importPaginationCompfrom"@lowcoder-ee/util/pagination/Pagination";
109
import{OrgGroup}from"@lowcoder-ee/constants/orgConstants";
1110

@@ -19,13 +18,17 @@ const PermissionContent = styled.div`
1918
width: 100%;
2019
`;
2120

21+
exportenumGroupUserKey{
22+
USERS="users",
23+
ALL_USERS="All Users"
24+
}
25+
2226
exportdefaultfunctionPermissionSetting(props:{currentPageProp:number,pageSizeProp:number}){
2327

2428
const{currentPageProp, pageSizeProp}=props;
2529
constuser=useSelector(getUser);
2630
const[elements,setElements]=useState<any>({elements:[],total:0,role:""});
27-
const[group,setGrouop]=useState<OrgGroup>();
28-
const[orgMemberElements,setOrgMemberElements]=useState<any>({elements:[],total:0})
31+
const[group,setGroup]=useState<OrgGroup>();
2932
const[currentPage,setCurrentPage]=useState(1);
3033
const[pageSize,setPageSize]=useState(10);
3134
const[modify,setModify]=useState(false);
@@ -44,7 +47,11 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
4447
}
4548
).then(result=>{
4649
if(result.success&&!!result.data){
47-
setGrouop(result.data.find(group=>group.groupId===selectKey))
50+
if(selectKey===GroupUserKey.USERS){
51+
setGroup(result.data.find(group=>group.groupName==GroupUserKey.ALL_USERS))
52+
}else{
53+
setGroup(result.data.find(group=>group.groupId===selectKey))
54+
}
4855
}
4956
else
5057
console.error("ERROR: fetchFolderElements",result.error)
@@ -53,13 +60,13 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
5360
)
5461

5562
useEffect(()=>{
56-
if(selectKey!=="users"&&selectKey){
63+
if(selectKey&&group){
5764
setLoading(true);
5865
setError(null);
5966

6067
fetchGroupUsrPagination(
6168
{
62-
groupId:selectKey,
69+
groupId:selectKey===GroupUserKey.USERS ?group.groupId :selectKey,
6370
pageNum:currentPage,
6471
pageSize:pageSize,
6572
}
@@ -79,33 +86,8 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
7986
setLoading(false);
8087
setError("Failed to load group users. Please try again.");
8188
});
82-
}else{
83-
setLoading(true);
84-
setError(null);
85-
86-
fetchOrgUsrPagination(
87-
{
88-
orgId:orgId,
89-
pageNum:currentPage,
90-
pageSize:pageSize,
91-
}
92-
).then(result=>{
93-
setLoading(false);
94-
if(result.success){
95-
setOrgMemberElements({
96-
elements:result.data||[],
97-
total:result.total||0
98-
});
99-
}
100-
else{
101-
setError("Failed to load organization users. Please try again.");
102-
}
103-
}).catch(err=>{
104-
setLoading(false);
105-
setError("Failed to load organization users. Please try again.");
106-
});
107-
}
108-
},[currentPage,pageSize,modify,selectKey,orgId]);
89+
}
90+
},[currentPage,pageSize,modify,selectKey,orgId,group]);
10991

11092
if(!orgId){
11193
returnnull;
@@ -118,36 +100,23 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
118100
{error}
119101
</div>
120102
)}
121-
122-
{selectKey==="users" ?(
103+
{elements&&
104+
group&&(
123105
<>
124-
<UsersPermission
106+
<GroupPermission
107+
group={group}
125108
orgId={orgId}
126-
orgUsers={orgMemberElements.elements}
109+
groupUsers={elements.elements}
110+
currentUserGroupRole={elements.role}
127111
currentUser={currentUser}
128112
setModify={setModify}
129113
modify={modify}
130114
loading={loading}
115+
setElements={setElements}
131116
/>
132-
<PaginationCompsetCurrentPage={setCurrentPage}setPageSize={setPageSize}currentPage={currentPage}pageSize={pageSize}total={orgMemberElements.total}/>
117+
<PaginationCompsetCurrentPage={setCurrentPage}setPageSize={setPageSize}currentPage={currentPage}pageSize={pageSize}total={elements.total}/>
133118
</>
134-
) :(
135-
group&&(
136-
<>
137-
<GroupPermission
138-
group={group}
139-
orgId={orgId}
140-
groupUsers={elements.elements}
141-
currentUserGroupRole={elements.role}
142-
currentUser={currentUser}
143-
setModify={setModify}
144-
modify={modify}
145-
loading={loading}
146-
/>
147-
<PaginationCompsetCurrentPage={setCurrentPage}setPageSize={setPageSize}currentPage={currentPage}pageSize={pageSize}total={elements.total}/>
148-
</>
149-
)
150-
)}
119+
)}
151120
</PermissionContent>
152121
);
153122
}

‎client/packages/lowcoder/src/util/pagination/type.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export interface fetchGroupUserRequestType {
8787
groupId:string;
8888
pageNum?:number;
8989
pageSize?:number;
90+
search?:string
9091
}
9192

9293
exportinterfacefetchQueryLibraryPaginationRequestType{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp