Content-Length: 869905 | pFad | http://github.com/lowcoder-org/lowcoder/commit/ddd9fe19161c46ce49fede1b04d203bbbf48feb9

DE Search bar for User group members · lowcoder-org/lowcoder@ddd9fe1 · GitHub
Skip to content

Commit ddd9fe1

Browse files
kamalqureshikamalqureshi
committed
Search bar for User group members
1 parent 48d6d7b commit ddd9fe1

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
import ProfileImage from "pages/common/profileImage";
6-
import React, { useMemo } from "react";
6+
import React, { 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
import history from "util/history";
3231
import { PERMISSION_SETTING } from "constants/routesURL";
3332
import Column from "antd/es/table/Column";
33+
import { debounce } from "lodash";
34+
import { fetchGroupUsrPagination } from "@lowcoder-ee/util/pagination/axios";
3435

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

42+
const PermissionHeaderWrapper = styled.div`
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
width: 100%;
47+
margin-bottom: 16px;
48+
`;
49+
50+
const OptionsHeader = styled.div`
51+
display: flex;
52+
align-items: center;
53+
gap: 12px;
54+
`;
55+
56+
type ElementsState = {
57+
elements: any[];
58+
total: number;
59+
role: string;
60+
};
61+
4162
type GroupPermissionProp = {
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-
function GroupUsersPermission(props: GroupPermissionProp) {
53-
// const { Column } = TableStyled;
54-
const { group, orgId, groupUsers, currentUserGroupRole, currentUser, setModify, modify, loading } = props;
74+
const GroupUsersPermission: 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+
const dispatch = useDispatch();
88+
5589
const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
5690
const sortedGroupUsers = useMemo(() => {
5791
return [...groupUsers].sort((a, b) => {
@@ -64,7 +98,31 @@ function GroupUsersPermission(props: GroupPermissionProp) {
6498
}
6599
});
66100
}, [groupUsers]);
67-
const dispatch = useDispatch();
101+
102+
const debouncedFetchPotentialMembers = 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-
<AddMemberButton buttonType="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+
<AddMemberButton buttonType="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
import styled from "styled-components";
55
import GroupPermission from "./groupUsersPermission";
6-
import UsersPermission from "./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
import PaginationComp from "@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+
export enum GroupUserKey {
22+
USERS = "users",
23+
ALL_USERS = "All Users"
24+
}
25+
2226
export default function PermissionSetting(props: {currentPageProp: number, pageSizeProp: number}) {
2327

2428
const {currentPageProp, pageSizeProp} = props;
2529
const user = 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
return null;
@@ -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-
<PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={orgMemberElements.total} />
117+
<PaginationComp setCurrentPage={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-
<PaginationComp setCurrentPage={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
export interface fetchQueryLibraryPaginationRequestType {

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/lowcoder-org/lowcoder/commit/ddd9fe19161c46ce49fede1b04d203bbbf48feb9

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy