Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4a9d292

Browse files
kamal-qureshikamal-qureshi
committed
Adds search bar in "Add Members" for groups
1 parent a9ec34f commit 4a9d292

File tree

6 files changed

+65
-5
lines changed

6 files changed

+65
-5
lines changed

‎client/packages/lowcoder/src/api/orgApi.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export class OrgApi extends Api {
6262
static updateOrgURL = (orgId: string) => `/organizations/${orgId}/update`;
6363
static fetchUsage = (orgId: string) => `/organizations/${orgId}/api-usage`;
6464
static fetchOrgsByEmailURL = (email: string) => `organizations/byuser/${email}`;
65+
static fetchGroupPotentialMembersURL = (groupId: string) => `/groups/${groupId}/potential-members`;
6566

6667
static createGroup(request: { name: string }): AxiosPromise<GenericApiResponse<OrgGroup>> {
6768
return Api.post(OrgApi.createGroupURL, request);
@@ -110,6 +111,10 @@ export class OrgApi extends Api {
110111
return Api.get(OrgApi.fetchGroupUsersURL(groupId));
111112
}
112113

114+
static fetchGroupPotentialMembers(searchName: string, groupId: string): AxiosPromise<OrgUsersResponse> {
115+
return Api.get(OrgApi.fetchGroupPotentialMembersURL(groupId), {searchName})
116+
}
117+
113118
static fetchGroupUsersPagination(request: fetchGroupUserRequestType): AxiosPromise<GroupUsersPaginationResponse> {
114119
const {groupId, ...res} = request;
115120
return Api.get(OrgApi.fetchGroupUsersURL(groupId), {...res});

‎client/packages/lowcoder/src/constants/reduxActionConstants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const ReduxActionTypes = {
8686
UPDATE_USER_ORG_ROLE: "UPDATE_USER_ORG_ROLE",
8787
UPDATE_USER_GROUP_ROLE: "UPDATE_USER_GROUP_ROLE",
8888
FETCH_ORG_ALL_USERS: "FETCH_ORG_ALL_USERS",
89+
FETCH_GROUP_POTENTIAL_MEMBERS: "FETCH_ORG_ALL_GROUP_MEMBERS",
8990
FETCH_ORG_ALL_USERS_SUCCESS: "FETCH_ORG_ALL_USERS_SUCCESS",
9091
FETCH_GROUP_USERS: "FETCH_GROUP_USERS",
9192
FETCH_GROUP_USERS_SUCCESS: "FETCH_GROUP_USERS_SUCCESS",

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3008,6 +3008,7 @@ export const en = {
30083008
"deleteModalTitle": "Delete This Group",
30093009
"deleteModalContent": "The Deleted Group Cannot Be Restored. Are You Sure to Delete the Group?",
30103010
"addMember": "Add Members",
3011+
"searchMember": "Search Members",
30113012
"nameColumn": "User Name",
30123013
"joinTimeColumn": "Joining Time",
30133014
"actionColumn": "Operation",

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

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import Column from "antd/es/table/Column";
22
import OrgApi from "api/orgApi";
33
import { GroupUser, MEMBER_ROLE, OrgUser } from "constants/orgConstants";
4-
import { CheckBox, CustomModal } from "lowcoder-design";
4+
import { CheckBox, CustomModal, Search } from "lowcoder-design";
55
import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
66
import { connect, useDispatch } from "react-redux";
77
import { AppState } from "redux/reducers";
8-
import { fetchGroupUsersAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
8+
import { fetchGroupUsersAction,
9+
fetchOrgUsersAction,
10+
fetchGroupPotentialMembersAction
11+
} from "redux/reduxActions/orgActions";
912
import styled from "styled-components";
1013
import { StyledTable, UserTableCellWrapper } from "./styledComponents";
1114
import { formatTimestamp } from "util/dateTimeUtils";
@@ -40,7 +43,18 @@ function AddGroupUserDialog(props: {
4043
const addableUsers = orgUsers.filter((user) => !groupUserIdMap.has(user.userId));
4144
const toAddUserIdRecord = useRef<Record<string, boolean>>({});
4245
const [confirmLoading, setConfirmLoading] = useState(false);
46+
const [searchValue, setSearchValue] = useState("")
4347
const dispatch = useDispatch();
48+
49+
useEffect(() => {
50+
const timer = setTimeout(() => {
51+
if (searchValue.length > 2 || searchValue === "")
52+
dispatch(fetchGroupPotentialMembersAction(searchValue, groupId));
53+
return
54+
}, 500);
55+
return () => clearTimeout(timer);
56+
}, [searchValue])
57+
4458
useEffect(() => {
4559
if (dialogVisible) {
4660
dispatch(fetchOrgUsersAction(orgId));
@@ -92,7 +106,18 @@ function AddGroupUserDialog(props: {
92106
setDialogVisible(false);
93107
}}
94108
>
95-
{!addableUsers || addableUsers.length === 0 ? (
109+
<Search
110+
placeholder={trans("memberSettings.searchMember")}
111+
value={searchValue}
112+
onChange={(e) => setSearchValue(e.target.value)}
113+
style={{
114+
width: "100%",
115+
height: "32px",
116+
paddingRight: "20px",
117+
marginBottom: "10px"
118+
}}
119+
/>
120+
{(!addableUsers || addableUsers.length === 0) ? (
96121
<EmptyContent />
97122
) : (
98123
<TableWrapper>
@@ -106,7 +131,7 @@ function AddGroupUserDialog(props: {
106131
scroll={{ y: 309 }}
107132
>
108133
<Column
109-
width="170px"
134+
width="200px"
110135
title={trans("memberSettings.nameColumn")}
111136
dataIndex="name"
112137
key="name"

‎client/packages/lowcoder/src/redux/reduxActions/orgActions.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,14 @@ export const deleteGroupUserAction = (payload: RemoveGroupUserPayload) => ({
8181
payload: payload,
8282
});
8383

84+
export const fetchGroupPotentialMembersAction = (searchName: string, groupId: string) => ({
85+
type: ReduxActionTypes.FETCH_GROUP_POTENTIAL_MEMBERS,
86+
payload: {
87+
searchName,
88+
groupId
89+
},
90+
});
91+
8492
export type AddGroupUserPayload = {
8593
role: string;
8694
groupId: string;

‎client/packages/lowcoder/src/redux/sagas/orgSagas.ts

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,30 @@ export function* updateUserGroupRoleSaga(action: ReduxAction<UpdateUserGroupRole
107107
}
108108
}
109109

110+
export function* fetchGroupPotentialMembersSaga(action: ReduxAction<{ searchName: string, groupId: string }>) {
111+
try {
112+
const response: AxiosResponse<OrgUsersResponse> = yield call(
113+
OrgApi.fetchGroupPotentialMembers,
114+
action.payload.searchName,
115+
action.payload.groupId
116+
);
117+
const isValidResponse: boolean = validateResponse(response);
118+
if (isValidResponse) {
119+
yield put({
120+
type: ReduxActionTypes.FETCH_ORG_ALL_USERS_SUCCESS,
121+
payload: response.data.data,
122+
});
123+
}
124+
} catch (error) {
125+
log.error(error);
126+
}
127+
}
128+
110129
export function* fetchOrgUsersSaga(action: ReduxAction<{ orgId: string }>) {
111130
try {
112131
const response: AxiosResponse<OrgUsersResponse> = yield call(
113132
OrgApi.fetchOrgUsers,
114-
action.payload.orgId
133+
action.payload.orgId,
115134
);
116135
const isValidResponse: boolean = validateResponse(response);
117136
if (isValidResponse) {
@@ -377,6 +396,7 @@ export default function* orgSagas() {
377396
takeLatest(ReduxActionTypes.UPDATE_USER_ORG_ROLE, updateUserOrgRoleSaga),
378397
takeLatest(ReduxActionTypes.UPDATE_USER_GROUP_ROLE, updateUserGroupRoleSaga),
379398
takeLatest(ReduxActionTypes.FETCH_ORG_ALL_USERS, fetchOrgUsersSaga),
399+
takeLatest(ReduxActionTypes.FETCH_GROUP_POTENTIAL_MEMBERS, fetchGroupPotentialMembersSaga),
380400
takeLatest(ReduxActionTypes.DELETE_ORG_USER, deleteOrgUserSaga),
381401
takeLatest(ReduxActionTypes.QUIT_GROUP, quitGroupSaga),
382402
takeLatest(ReduxActionTypes.QUIT_ORG, quitOrgSaga),

0 commit comments

Comments
 (0)