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

Skip to content

Commit d4ac9e3

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1800 from kamalqureshi/search_potential_group_members
Adds search bar in "Add Members" for groups
2 parents a9ec34f + 28161b0 commit d4ac9e3

File tree

6 files changed

+74
-6
lines changed

6 files changed

+74
-6
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: 38 additions & 5 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";
5-
import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
4+
import { CheckBox, CustomModal, Search } from "lowcoder-design";
5+
import { CSSProperties, ReactNode, useEffect, useRef, useState, useCallback } 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";
@@ -14,6 +17,7 @@ import { isGroupAdmin } from "util/permissionUtils";
1417
import { SuperUserIcon } from "lowcoder-design";
1518
import { EmptyContent } from "pages/common/styledComponent";
1619
import { trans } from "i18n";
20+
import { debounce } from "lodash";
1721

1822
const TableWrapper = styled.div`
1923
margin-right: -16px;
@@ -40,7 +44,25 @@ function AddGroupUserDialog(props: {
4044
const addableUsers = orgUsers.filter((user) => !groupUserIdMap.has(user.userId));
4145
const toAddUserIdRecord = useRef<Record<string, boolean>>({});
4246
const [confirmLoading, setConfirmLoading] = useState(false);
47+
const [searchValue, setSearchValue] = useState("")
4348
const dispatch = useDispatch();
49+
50+
const debouncedFetchPotentialMembers = useCallback(
51+
debounce((searchVal: string) => {
52+
dispatch(fetchGroupPotentialMembersAction(searchVal, groupId));
53+
}, 500),
54+
[dispatch, groupId]
55+
);
56+
57+
useEffect(() => {
58+
if (searchValue.length > 2 || searchValue === "") {
59+
debouncedFetchPotentialMembers(searchValue);
60+
}
61+
return () => {
62+
debouncedFetchPotentialMembers.cancel();
63+
};
64+
}, [searchValue, debouncedFetchPotentialMembers]);
65+
4466
useEffect(() => {
4567
if (dialogVisible) {
4668
dispatch(fetchOrgUsersAction(orgId));
@@ -92,7 +114,18 @@ function AddGroupUserDialog(props: {
92114
setDialogVisible(false);
93115
}}
94116
>
95-
{!addableUsers || addableUsers.length === 0 ? (
117+
<Search
118+
placeholder={trans("memberSettings.searchMember")}
119+
value={searchValue}
120+
onChange={(e) => setSearchValue(e.target.value)}
121+
style={{
122+
width: "100%",
123+
height: "32px",
124+
paddingRight: "20px",
125+
marginBottom: "10px"
126+
}}
127+
/>
128+
{(!addableUsers || addableUsers.length === 0) ? (
96129
<EmptyContent />
97130
) : (
98131
<TableWrapper>
@@ -106,7 +139,7 @@ function AddGroupUserDialog(props: {
106139
scroll={{ y: 309 }}
107140
>
108141
<Column
109-
width="170px"
142+
width="200px"
110143
title={trans("memberSettings.nameColumn")}
111144
dataIndex="name"
112145
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)