Skip to content

Commit 487e4fd

Browse files
amitamrutiyaamitamrutiya
committed
feat: implement useTeamAssignment hook for managing team assignments in workspaces
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 88ca492 commit 487e4fd

4 files changed

Lines changed: 379 additions & 32 deletions

File tree

‎src/custom/Workspaces/WorkspaceTeamsTable.tsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
3+
import { useState } from 'react';
4+
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
5+
import { TeamsIcon } from '../../icons';
6+
import { SistentThemeProvider } from '../../theme';
7+
import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
8+
import SearchBar from '../SearchBar';
9+
import { TeamTableConfiguration } from '../TeamTable';
10+
import TeamTable from '../TeamTable/TeamTable';
11+
import AssignmentModal from './AssignmentModal';
12+
import EditButton from './EditButton';
13+
import useTeamAssignment from './hooks/useTeamAssignment';
14+
import { TableHeader, TableRightActionHeader } from './styles';
15+
16+
export interface TeamsTableProps {
17+
workspaceId: string;
18+
workspaceName: string;
19+
useGetTeamsOfWorkspaceQuery: any;
20+
useUnassignTeamFromWorkspaceMutation: any;
21+
useAssignTeamToWorkspaceMutation: any;
22+
isEditTeamAllowed: boolean;
23+
isAssignTeamAllowed: boolean;
24+
isRemoveTeamFromWorkspaceAllowed: boolean;
25+
isDeleteTeamAllowed: boolean;
26+
isLeaveTeamAllowed: boolean;
27+
org_id: string;
28+
fetchTeamUsers: any;
29+
useGetUsersForOrgQuery: any;
30+
useNotificationHandlers: any;
31+
useRemoveUserFromTeamMutation: any;
32+
}
33+
34+
const TeamsTable: React.FC<TeamsTableProps> = ({
35+
workspaceId,
36+
workspaceName,
37+
useGetTeamsOfWorkspaceQuery,
38+
useAssignTeamToWorkspaceMutation,
39+
useUnassignTeamFromWorkspaceMutation,
40+
isEditTeamAllowed,
41+
isAssignTeamAllowed,
42+
isRemoveTeamFromWorkspaceAllowed,
43+
isLeaveTeamAllowed,
44+
isDeleteTeamAllowed,
45+
org_id,
46+
useGetUsersForOrgQuery,
47+
useNotificationHandlers,
48+
useRemoveUserFromTeamMutation
49+
}) => {
50+
const [page, setPage] = useState<number>(0);
51+
const [pageSize, setPageSize] = useState<number>(10);
52+
const [sortOrder, setSortOrder] = useState<string>('');
53+
const [bulkSelect, setBulkSelect] = useState<boolean>(false);
54+
const [expanded, setExpanded] = useState<boolean>(true);
55+
const handleAccordionChange = () => {
56+
setExpanded(!expanded);
57+
};
58+
const [search, setSearch] = useState<string>('');
59+
const [isSearchExpanded, setIsSearchExpanded] = useState<boolean>(false);
60+
61+
const { data: teamsOfWorkspace } = useGetTeamsOfWorkspaceQuery({
62+
workspaceId,
63+
page: page,
64+
pageSize: pageSize,
65+
order: sortOrder,
66+
search: search
67+
});
68+
const [unassignTeamFromWorkspace] = useUnassignTeamFromWorkspaceMutation();
69+
70+
const teamAssignment = useTeamAssignment({
71+
workspaceId,
72+
useGetTeamsOfWorkspaceQuery,
73+
useAssignTeamToWorkspaceMutation,
74+
useUnassignTeamFromWorkspaceMutation
75+
});
76+
77+
const handleRemoveTeamFromWorkspace = (teamId: string): void => {
78+
unassignTeamFromWorkspace({
79+
workspaceId,
80+
teamId
81+
}).unwrap();
82+
};
83+
84+
const tableProps = TeamTableConfiguration({
85+
teams: teamsOfWorkspace?.teams,
86+
count: teamsOfWorkspace?.total_count,
87+
page,
88+
pageSize,
89+
setPage,
90+
setPageSize,
91+
sortOrder,
92+
setSortOrder,
93+
bulkSelect,
94+
setBulkSelect,
95+
handleRemoveTeamFromWorkspace,
96+
handleTeamView: () => {},
97+
handleDeleteTeam: () => {},
98+
handleleaveTeam: () => {},
99+
teamId: '',
100+
workspace: true,
101+
isEditTeamAllowed,
102+
isLeaveTeamAllowed,
103+
isRemoveTeamFromWorkspaceAllowed,
104+
isDeleteTeamAllowed: isDeleteTeamAllowed,
105+
setSearch
106+
});
107+
108+
return (
109+
<SistentThemeProvider>
110+
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
111+
<AccordionSummary
112+
expandIcon={<ExpandMoreIcon />}
113+
sx={{ backgroundColor: 'background.paper' }}
114+
>
115+
<TableHeader>
116+
<Typography variant="h6" fontWeight={'bold'}>
117+
Assigned Teams
118+
</Typography>
119+
<TableRightActionHeader>
120+
<SearchBar
121+
onSearch={(value) => {
122+
setSearch(value);
123+
}}
124+
onClear={() => {
125+
setSearch('');
126+
}}
127+
expanded={isSearchExpanded}
128+
setExpanded={setIsSearchExpanded}
129+
placeholder="Search workspaces..."
130+
/>
131+
<CustomColumnVisibilityControl
132+
columns={tableProps.columns}
133+
customToolsProps={{
134+
columnVisibility: tableProps.columnVisibility,
135+
setColumnVisibility: tableProps.setColumnVisibility
136+
}}
137+
id={'teams-table'}
138+
/>
139+
<EditButton
140+
onClick={teamAssignment.handleAssignModal}
141+
disabled={!isAssignTeamAllowed}
142+
/>
143+
</TableRightActionHeader>
144+
</TableHeader>
145+
</AccordionSummary>
146+
<AccordionDetails style={{ padding: 0 }}>
147+
<TeamTable
148+
teams={teamsOfWorkspace?.teams}
149+
tableOptions={tableProps.tableOptions}
150+
columnVisibility={tableProps.columnVisibility}
151+
colViews={tableProps.colViews}
152+
tableCols={tableProps.tableCols}
153+
updateCols={tableProps.updateCols}
154+
columns={tableProps.columns}
155+
isRemoveFromTeamAllowed={isRemoveTeamFromWorkspaceAllowed}
156+
org_id={org_id}
157+
useGetUsersForOrgQuery={useGetUsersForOrgQuery}
158+
useNotificationHandlers={useNotificationHandlers}
159+
useRemoveUserFromTeamMutation={useRemoveUserFromTeamMutation}
160+
/>
161+
</AccordionDetails>
162+
</Accordion>
163+
164+
<AssignmentModal
165+
open={teamAssignment.assignModal}
166+
onClose={teamAssignment.handleAssignModalClose}
167+
title={`Assign Teams to ${workspaceName}`}
168+
headerIcon={<TeamsIcon height="40" width="40" primaryFill={'white'} fill={'gray'} />}
169+
name="Teams"
170+
assignableData={teamAssignment.data}
171+
handleAssignedData={teamAssignment.handleAssignData}
172+
originalAssignedData={teamAssignment.workspaceData}
173+
emptyStateIcon={
174+
<TeamsIcon
175+
height="5rem"
176+
width="5rem"
177+
primaryFill={'#808080'}
178+
secondaryFill={'gray'}
179+
fill={'#808080'}
180+
/>
181+
}
182+
handleAssignablePage={teamAssignment.handleAssignablePage}
183+
handleAssignedPage={teamAssignment.handleAssignedPage}
184+
originalLeftCount={teamAssignment.data?.length}
185+
originalRightCount={teamsOfWorkspace?.total_count}
186+
onAssign={teamAssignment.handleAssign}
187+
disableTransfer={teamAssignment.disableTransferButton}
188+
helpText={`Assign Teams to ${workspaceName}`}
189+
isAssignAllowed={isAssignTeamAllowed}
190+
isRemoveAllowed={isRemoveTeamFromWorkspaceAllowed}
191+
/>
192+
</SistentThemeProvider>
193+
);
194+
};
195+
196+
export default TeamsTable;

‎src/custom/Workspaces/hooks/useDesignAssignment.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -107,22 +107,24 @@ const useDesignAssignment = ({
107107
const handleAssignDesigns = async (): Promise<void> => {
108108
const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(assignedDesigns);
109109

110-
for (const id of addedDesignsIds) {
111-
await assignDesignToWorkspace({
110+
addedDesignsIds.map((id) =>
111+
assignDesignToWorkspace({
112112
workspaceId,
113113
designId: id
114-
}).unwrap();
115-
}
114+
}).unwrap()
115+
);
116116

117-
for (const id of removedDesignsIds) {
118-
await unassignDesignFromWorkspace({
117+
removedDesignsIds.map((id) =>
118+
unassignDesignFromWorkspace({
119119
workspaceId,
120120
designId: id
121-
}).unwrap();
122-
}
121+
}).unwrap()
122+
);
123123

124124
setDesignsData([]);
125125
setWorkspaceDesignsData([]);
126+
setDesignsPage(0);
127+
setDesignsOfWorkspacePage(0);
126128
handleAssignDesignModalClose();
127129
};
128130

‎src/custom/Workspaces/hooks/useEnvironmentAssignment.tsx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const useEnvironmentAssignment = ({
2323
const [workspaceEnvironmentsData, setWorkspaceEnvironmentsData] = useState<Environment[]>([]);
2424
const [assignEnvironmentModal, setAssignEnvironmentModal] = useState<boolean>(false);
2525
const [skipEnvironments, setSkipEnvironments] = useState<boolean>(true);
26+
const [disableTransferButton, setDisableTransferButton] = useState<boolean>(true);
27+
const [assignedEnvironments, setAssignedEnvironments] = useState<Environment[]>([]);
2628

2729
const { data: environments } = useGetEnvironmentsOfWorkspaceQuery(
2830
withDefaultPageArgs({
@@ -49,8 +51,6 @@ const useEnvironmentAssignment = ({
4951

5052
const [assignEnvironmentToWorkspace] = useAssignEnvironmentToWorkspaceMutation();
5153
const [unassignEnvironmentFromWorkspace] = useUnassignEnvironmentFromWorkspaceMutation();
52-
const [disableTransferButton, setDisableTransferButton] = useState<boolean>(true);
53-
const [assignedEnvironments, setAssignedEnvironments] = useState<Environment[]>([]);
5454

5555
useEffect(() => {
5656
const environmentsDataRtk = environments?.environments ? environments.environments : [];
@@ -92,49 +92,52 @@ const useEnvironmentAssignment = ({
9292
}
9393
};
9494

95+
const getAddedAndRemovedEnvironments = (allAssignedEnvironments: Environment[]) => {
96+
const originalEnvironmentsIds = workspaceEnvironmentsData.map((env) => env.id);
97+
const updatedEnvironmentsIds = allAssignedEnvironments.map((env) => env.id);
98+
99+
const addedEnvironmentsIds = updatedEnvironmentsIds.filter(
100+
(id) => !originalEnvironmentsIds.includes(id)
101+
);
102+
const removedEnvironmentsIds = originalEnvironmentsIds.filter(
103+
(id) => !updatedEnvironmentsIds.includes(id)
104+
);
105+
106+
return { addedEnvironmentsIds, removedEnvironmentsIds };
107+
};
108+
95109
const handleAssignEnvironments = async () => {
96110
const { addedEnvironmentsIds, removedEnvironmentsIds } =
97111
getAddedAndRemovedEnvironments(assignedEnvironments);
98112

99-
for (const id of addedEnvironmentsIds) {
100-
await assignEnvironmentToWorkspace({
113+
addedEnvironmentsIds.map((id) =>
114+
assignEnvironmentToWorkspace({
101115
workspaceId,
102116
environmentId: id
103-
}).unwrap();
104-
}
117+
}).unwrap()
118+
);
105119

106-
for (const id of removedEnvironmentsIds) {
107-
await unassignEnvironmentFromWorkspace({
120+
removedEnvironmentsIds.map((id) =>
121+
unassignEnvironmentFromWorkspace({
108122
workspaceId,
109123
environmentId: id
110-
}).unwrap();
111-
}
124+
}).unwrap()
125+
);
112126

113127
setEnvironmentsData([]);
114128
setWorkspaceEnvironmentsData([]);
129+
setEnvironmentsPage(0);
130+
setEnvironmentsOfWorkspacePage(0);
115131
handleAssignEnvironmentModalClose();
116132
};
117133

118-
const getAddedAndRemovedEnvironments = (allAssignedEnvironments: Environment[]) => {
119-
const originalEnvironmentsIds = workspaceEnvironmentsData.map((env) => env.id);
120-
const updatedEnvironmentsIds = allAssignedEnvironments.map((env) => env.id);
121-
122-
const addedEnvironmentsIds = updatedEnvironmentsIds.filter(
123-
(id) => !originalEnvironmentsIds.includes(id)
124-
);
125-
const removedEnvironmentsIds = originalEnvironmentsIds.filter(
126-
(id) => !updatedEnvironmentsIds.includes(id)
127-
);
128-
129-
return { addedEnvironmentsIds, removedEnvironmentsIds };
130-
};
131-
132134
const handleAssignEnvironmentsData = (updatedAssignedData: Environment[]) => {
133135
const { addedEnvironmentsIds, removedEnvironmentsIds } =
134136
getAddedAndRemovedEnvironments(updatedAssignedData);
135137
addedEnvironmentsIds.length > 0 || removedEnvironmentsIds.length > 0
136138
? setDisableTransferButton(false)
137139
: setDisableTransferButton(true);
140+
138141
setAssignedEnvironments(updatedAssignedData);
139142
};
140143

0 commit comments

Comments
 (0)