Skip to content

Commit 01248f4

Browse files
amitamrutiyaamitamrutiya
committed
feat: add support for views to workspace
Signed-off-by: Amit Amrutiya <[email protected]>
1 parent 93cf965 commit 01248f4

File tree

7 files changed

+229
-4
lines changed

7 files changed

+229
-4
lines changed

‎src/custom/TransferModal/TransferList/TransferList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme
2929
}
3030

3131
export interface TransferListProps {
32-
name: string;
32+
name?: string;
3333
assignableData: ListItemType[];
3434
assignedData: (data: ListItemType[]) => void;
3535
originalAssignedData: ListItemType[];

‎src/custom/Workspaces/AssignmentModal.tsx

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { Divider } from '../../base';
23
import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
34
import { TransferList } from '../TransferModal/TransferList';
45
import { ModalActionDiv } from './styles';
@@ -22,6 +23,21 @@ interface AssignmentModalProps {
2223
isAssignAllowed: boolean;
2324
isRemoveAllowed: boolean;
2425
helpText: string;
26+
showViews?: boolean;
27+
nameViews?: string;
28+
assignableViewsData?: any[];
29+
handleAssignedViewsData?: (data: any) => void;
30+
originalAssignedViewsData?: any[];
31+
32+
emptyStateViewsIcon?: JSX.Element;
33+
handleAssignableViewsPage?: () => void;
34+
handleAssignedViewsPage?: () => void;
35+
originalLeftViewsCount?: number;
36+
originalRightViewsCount?: number;
37+
onAssignViews?: () => void;
38+
disableTransferViews?: boolean;
39+
isAssignAllowedViews?: boolean;
40+
isRemoveAllowedViews?: boolean;
2541
}
2642

2743
const AssignmentModal: React.FC<AssignmentModalProps> = ({
@@ -42,7 +58,19 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
4258
disableTransfer,
4359
isAssignAllowed,
4460
isRemoveAllowed,
45-
helpText
61+
helpText,
62+
showViews,
63+
nameViews,
64+
assignableViewsData,
65+
handleAssignedViewsData,
66+
originalAssignedViewsData,
67+
emptyStateViewsIcon,
68+
handleAssignableViewsPage,
69+
handleAssignedViewsPage,
70+
originalLeftViewsCount,
71+
originalRightViewsCount,
72+
isAssignAllowedViews = false,
73+
isRemoveAllowedViews = false
4674
}) => {
4775
return (
4876
<Modal
@@ -71,11 +99,38 @@ const AssignmentModal: React.FC<AssignmentModalProps> = ({
7199
rightPermission={isRemoveAllowed}
72100
transferComponentType={''}
73101
/>
102+
<Divider
103+
style={{
104+
margin: 'auto',
105+
width: '80%',
106+
marginTop: '22px',
107+
marginBottom: '22px'
108+
}}
109+
/>
110+
{showViews && (
111+
<TransferList
112+
name={nameViews}
113+
assignableData={assignableViewsData || []}
114+
assignedData={handleAssignedViewsData || (() => {})}
115+
originalAssignedData={originalAssignedViewsData || []}
116+
emptyStateIconLeft={emptyStateViewsIcon || <></>}
117+
emtyStateMessageLeft={`No views available`}
118+
emptyStateIconRight={emptyStateViewsIcon || <></>}
119+
emtyStateMessageRight={`No views assigned`}
120+
assignablePage={handleAssignableViewsPage || (() => {})}
121+
assignedPage={handleAssignedViewsPage || (() => {})}
122+
originalLeftCount={originalLeftViewsCount ?? 0}
123+
originalRightCount={originalRightViewsCount ?? 0}
124+
leftPermission={isAssignAllowedViews}
125+
rightPermission={isRemoveAllowedViews}
126+
transferComponentType={''}
127+
/>
128+
)}
74129
</ModalBody>
75130
<ModalFooter variant="filled" helpText={helpText}>
76131
<ModalActionDiv>
77132
<ModalButtonSecondary onClick={onClose}>Cancel</ModalButtonSecondary>
78-
<ModalButtonPrimary onClick={onAssign} disabled={disableTransfer}>
133+
<ModalButtonPrimary onClick={onAssign} disabled={disableTransfer || disableTransferViews}>
79134
Save
80135
</ModalButtonPrimary>
81136
</ModalActionDiv>

‎src/custom/Workspaces/DesignTable.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
264264
helpText={`Assign Designs to ${workspaceName}`}
265265
isAssignAllowed={isAssignAllowed}
266266
isRemoveAllowed={isRemoveAllowed}
267+
showViews={false}
267268
/>
268269
<GenericRJSFModal
269270
open={publishModal.open}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,11 @@ const useDesignAssignment = ({
104104
return { addedDesignsIds, removedDesignsIds };
105105
};
106106

107+
const isDesignsActivityOccurred = (allAssignedDesigns: Pattern[]): boolean => {
108+
const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(allAssignedDesigns);
109+
return addedDesignsIds.length > 0 || removedDesignsIds.length > 0;
110+
};
111+
107112
const handleAssignDesigns = async (): Promise<void> => {
108113
const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(assignedDesigns);
109114

@@ -144,6 +149,7 @@ const useDesignAssignment = ({
144149
handleAssignedPage: handleAssignedPageDesign,
145150
handleAssign: handleAssignDesigns,
146151
handleAssignData: handleAssignDesignsData,
152+
isActivityOccurred: isDesignsActivityOccurred,
147153
disableTransferButton,
148154
assignedItems: assignedDesigns
149155
};

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { useEffect, useState } from 'react';
3+
import { Pattern } from '../../CustomCatalog/CustomCard';
4+
import { withDefaultPageArgs } from '../../PerformersSection/PerformersSection';
5+
import { AssignmentHookResult } from '../types';
6+
7+
interface AddedAndRemovedViews {
8+
addedviewsIds: string[];
9+
removedviewsIds: string[];
10+
}
11+
12+
interface useViewAssignmentProps {
13+
workspaceId: string;
14+
useGetViewsOfWorkspaceQuery: any;
15+
useAssignViewToWorkspaceMutation: any;
16+
useUnassignViewFromWorkspaceMutation: any;
17+
}
18+
19+
const useViewAssignment = ({
20+
workspaceId,
21+
useGetViewsOfWorkspaceQuery,
22+
useAssignViewToWorkspaceMutation,
23+
useUnassignViewFromWorkspaceMutation
24+
}: useViewAssignmentProps): AssignmentHookResult<Pattern> => {
25+
const [viewsPage, setviewsPage] = useState<number>(0);
26+
const [viewsData, setviewsData] = useState<Pattern[]>([]);
27+
const viewsPageSize = 25;
28+
const [viewsOfWorkspacePage, setviewsOfWorkspacePage] = useState<number>(0);
29+
const [workspaceviewsData, setWorkspaceviewsData] = useState<Pattern[]>([]);
30+
const [assignviewModal, setAssignviewModal] = useState<boolean>(false);
31+
const [skipviews, setSkipviews] = useState<boolean>(true);
32+
const [disableTransferButton, setDisableTransferButton] = useState<boolean>(true);
33+
const [assignedviews, setAssignedviews] = useState<Pattern[]>([]);
34+
35+
const { data: views } = useGetViewsOfWorkspaceQuery(
36+
withDefaultPageArgs({
37+
workspaceId,
38+
page: viewsPage,
39+
pagesize: viewsPageSize,
40+
filter: '{"assigned":false}'
41+
}),
42+
{
43+
skip: skipviews
44+
}
45+
);
46+
47+
const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery(
48+
withDefaultPageArgs({
49+
workspaceId,
50+
page: viewsOfWorkspacePage,
51+
pagesize: viewsPageSize
52+
}),
53+
{
54+
skip: skipviews
55+
}
56+
);
57+
58+
const [assignviewToWorkspace] = useAssignViewToWorkspaceMutation();
59+
const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation();
60+
61+
useEffect(() => {
62+
const viewsDataRtk = views?.views ? views.views : [];
63+
setviewsData((prevData) => [...prevData, ...viewsDataRtk]);
64+
}, [views]);
65+
66+
useEffect(() => {
67+
const viewsOfWorkspaceDataRtk = viewsOfWorkspace?.views ? viewsOfWorkspace.views : [];
68+
setWorkspaceviewsData((prevData) => [...prevData, ...viewsOfWorkspaceDataRtk]);
69+
}, [viewsOfWorkspace]);
70+
71+
const handleAssignviewModal = (e?: React.MouseEvent): void => {
72+
e?.stopPropagation();
73+
setAssignviewModal(true);
74+
setSkipviews(false);
75+
};
76+
77+
const handleAssignviewModalClose = (e?: React.MouseEvent): void => {
78+
e?.stopPropagation();
79+
setAssignviewModal(false);
80+
setSkipviews(true);
81+
};
82+
83+
const handleAssignablePageview = (): void => {
84+
const pagesCount = Math.ceil(Number(views?.total_count) / viewsPageSize);
85+
if (viewsPage < pagesCount - 1) {
86+
setviewsPage((prevviewsPage) => prevviewsPage + 1);
87+
}
88+
};
89+
90+
const handleAssignedPageview = (): void => {
91+
const pagesCount = Math.ceil(Number(viewsOfWorkspace?.total_count) / viewsPageSize);
92+
if (viewsOfWorkspacePage < pagesCount - 1) {
93+
setviewsOfWorkspacePage((prevPage) => prevPage + 1);
94+
}
95+
};
96+
97+
const getAddedAndRemovedviews = (allAssignedviews: Pattern[]): AddedAndRemovedViews => {
98+
const originalviewsIds = workspaceviewsData.map((view) => view.id);
99+
const updatedviewsIds = allAssignedviews.map((view) => view.id);
100+
101+
const addedviewsIds = updatedviewsIds.filter((id) => !originalviewsIds.includes(id));
102+
const removedviewsIds = originalviewsIds.filter((id) => !updatedviewsIds.includes(id));
103+
104+
return { addedviewsIds, removedviewsIds };
105+
};
106+
107+
const isViewsActivityOccurred = (allViews: Pattern[]): boolean => {
108+
const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(allViews);
109+
return addedviewsIds.length > 0 || removedviewsIds.length > 0;
110+
};
111+
112+
const handleAssignviews = async (): Promise<void> => {
113+
const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(assignedviews);
114+
115+
addedviewsIds.map((id) =>
116+
assignviewToWorkspace({
117+
workspaceId,
118+
viewId: id
119+
}).unwrap()
120+
);
121+
122+
removedviewsIds.map((id) =>
123+
unassignviewFromWorkspace({
124+
workspaceId,
125+
viewId: id
126+
}).unwrap()
127+
);
128+
129+
setviewsData([]);
130+
setWorkspaceviewsData([]);
131+
setviewsPage(0);
132+
setviewsOfWorkspacePage(0);
133+
handleAssignviewModalClose();
134+
};
135+
136+
const handleAssignviewsData = (updatedAssignedData: Pattern[]): void => {
137+
const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(updatedAssignedData);
138+
setDisableTransferButton(!(addedviewsIds.length > 0 || removedviewsIds.length > 0));
139+
setAssignedviews(updatedAssignedData);
140+
};
141+
142+
return {
143+
data: viewsData,
144+
workspaceData: workspaceviewsData,
145+
assignModal: assignviewModal,
146+
handleAssignModal: handleAssignviewModal,
147+
handleAssignModalClose: handleAssignviewModalClose,
148+
handleAssignablePage: handleAssignablePageview,
149+
handleAssignedPage: handleAssignedPageview,
150+
handleAssign: handleAssignviews,
151+
isActivityOccurred: isViewsActivityOccurred,
152+
handleAssignData: handleAssignviewsData,
153+
disableTransferButton,
154+
assignedItems: assignedviews
155+
};
156+
};
157+
158+
export default useViewAssignment;

‎src/custom/Workspaces/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@ import AssignmentModal from './AssignmentModal';
22
import DesignTable from './DesignTable';
33
import EnvironmentTable from './EnvironmentTable';
44
import WorkspaceTeamsTable from './WorkspaceTeamsTable';
5+
import WorkspaceViewsTable from './WorkspaceViewsTable';
56
import useDesignAssignment from './hooks/useDesignAssignment';
67
import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
78
import useTeamAssignment from './hooks/useTeamAssignment';
9+
import useViewAssignment from './hooks/useViewsAssignment';
810

911
export {
1012
AssignmentModal,
1113
DesignTable,
1214
EnvironmentTable,
1315
WorkspaceTeamsTable,
16+
WorkspaceViewsTable,
1417
useDesignAssignment,
1518
useEnvironmentAssignment,
16-
useTeamAssignment
19+
useTeamAssignment,
20+
useViewAssignment
1721
};

‎src/custom/Workspaces/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface AssignmentHookResult<T> {
88
handleAssignedPage: () => void;
99
handleAssign: () => void;
1010
handleAssignData: (data: T[]) => void;
11+
isActivityOccurred?: (allItems: T[]) => boolean;
1112
disableTransferButton: boolean;
1213
assignedItems: T[];
1314
}

0 commit comments

Comments
 (0)