Skip to content

Commit 3e5764e

Browse files
amitamrutiyaamitamrutiya
committed
feat: add DesignTable component for managing workspace designs
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent eb5108b commit 3e5764e

4 files changed

Lines changed: 329 additions & 1 deletion

File tree

‎src/custom/Workspaces/designs-table.tsx‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
3+
import _ from 'lodash';
4+
import React, { useEffect, useRef, useState } from 'react';
5+
import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base';
6+
import { DesignIcon } from '../../icons';
7+
import { publishCatalogItemSchema } from '../../schemas';
8+
import { SistentThemeProvider } from '../../theme';
9+
import {
10+
CatalogDesignsTable,
11+
createDesignsColumnsConfig,
12+
designColumnsColViews
13+
} from '../CatalogDesignTable';
14+
import { Pattern } from '../CustomCatalog/CustomCard';
15+
import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
16+
import { useWindowDimensions } from '../Helpers/Dimension';
17+
import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
18+
import PromptComponent from '../Prompt';
19+
import AssignmentModal from './AssignmentModal';
20+
import EditButton from './EditButton';
21+
import useDesignAssignment from './hooks/useDesignAssignment';
22+
import { TableHeader, TableRightActionHeader } from './styles';
23+
24+
export interface DesignTableProps {
25+
workspaceId: string;
26+
workspaceName: string;
27+
designsOfWorkspace: any;
28+
meshModelModelsData: any;
29+
useGetWorkspaceDesignsQuery: any;
30+
useAssignDesignToWorkspaceMutation: any;
31+
useUnassignDesignFromWorkspaceMutation: any;
32+
handleCopyUrl: (type: string, name: string, id: string) => void;
33+
handleClone: (name: string, id: string) => void;
34+
handleWorkspaceDesignDeleteModal: (designId: string, workspaceId: string) => void;
35+
handleBulkWorkspaceDesignDeleteModal: (
36+
designs: Pattern[],
37+
modalRef: React.RefObject<any>,
38+
workspaceName: string,
39+
workspaceId: string
40+
) => void;
41+
handlePublish: (publishModal: PublishModalState, data: any) => void;
42+
publishModalHandler: any;
43+
handleUnpublishModal: (design: Pattern, modalRef: React.RefObject<any>) => void;
44+
handleBulkUnpublishModal: (
45+
selected: any,
46+
designs: Pattern[],
47+
modalRef: React.RefObject<any>
48+
) => void;
49+
handleShowDetails: (designId: string, designName: string) => void;
50+
isDownloadDisabled: boolean;
51+
isCopyLinkDisabled: boolean;
52+
isDeleteDisabled: boolean;
53+
isPublishDisabled: boolean;
54+
isUnpublishDisabled: boolean;
55+
GenericRJSFModal: any;
56+
isAssignDisabled: boolean;
57+
isRemoveDisabled: boolean;
58+
}
59+
60+
export interface PublishModalState {
61+
open: boolean;
62+
pattern: Partial<Pattern>;
63+
}
64+
65+
export interface ColumnVisibility {
66+
[key: string]: boolean;
67+
}
68+
export interface TableColumn {
69+
name: string;
70+
label: string;
71+
[key: string]: any;
72+
}
73+
74+
const DesignTable: React.FC<DesignTableProps> = ({
75+
workspaceId,
76+
workspaceName,
77+
designsOfWorkspace,
78+
meshModelModelsData,
79+
handleBulkUnpublishModal,
80+
handleBulkWorkspaceDesignDeleteModal,
81+
handleClone,
82+
handleCopyUrl,
83+
handlePublish,
84+
handleShowDetails,
85+
handleUnpublishModal,
86+
handleWorkspaceDesignDeleteModal,
87+
publishModalHandler,
88+
isCopyLinkDisabled,
89+
isDeleteDisabled,
90+
isDownloadDisabled,
91+
isPublishDisabled,
92+
isUnpublishDisabled,
93+
useAssignDesignToWorkspaceMutation,
94+
useUnassignDesignFromWorkspaceMutation,
95+
GenericRJSFModal,
96+
isAssignDisabled,
97+
isRemoveDisabled,
98+
useGetWorkspaceDesignsQuery
99+
}) => {
100+
const [publishModal, setPublishModal] = useState<PublishModalState>({
101+
open: false,
102+
pattern: {}
103+
});
104+
const modalRef = useRef(null);
105+
const [page, setPage] = useState<number>(0);
106+
const [pageSize, setPageSize] = useState<number>(10);
107+
const [sortOrder, setSortOrder] = useState<string>('');
108+
109+
const handlePublishModal = (pattern: Pattern): void => {
110+
const result = publishModalHandler(pattern);
111+
setPublishModal({
112+
open: true,
113+
pattern: result
114+
});
115+
};
116+
117+
const columns = createDesignsColumnsConfig({
118+
handleDeleteModal: (design) => () => handleWorkspaceDesignDeleteModal(design.id, workspaceId),
119+
handlePublishModal,
120+
handleUnpublishModal: (design) => () => handleUnpublishModal(design, modalRef),
121+
handleCopyUrl,
122+
handleClone,
123+
handleShowDetails,
124+
isDownloadDisabled,
125+
isCopyLinkDisabled,
126+
isDeleteDisabled,
127+
isPublishDisabled,
128+
isUnpublishDisabled
129+
});
130+
131+
const [publishSchema, setPublishSchema] = useState<{
132+
rjsfSchema: any;
133+
uiSchema: any;
134+
}>({
135+
rjsfSchema: {},
136+
uiSchema: {}
137+
});
138+
139+
const { width } = useWindowDimensions();
140+
const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(() => {
141+
const showCols = updateVisibleColumns(designColumnsColViews, width);
142+
const initialVisibility: ColumnVisibility = {};
143+
columns.forEach((col) => {
144+
initialVisibility[col.name] = showCols[col.name];
145+
});
146+
return initialVisibility;
147+
});
148+
149+
const [expanded, setExpanded] = useState<boolean>(true);
150+
const handleAccordionChange = () => {
151+
setExpanded(!expanded);
152+
};
153+
154+
useEffect(() => {
155+
const fetchSchema = async () => {
156+
const modelNames = _.uniq(
157+
meshModelModelsData?.models?.map((model: any) => model.display_name)
158+
);
159+
const modifiedSchema = _.set(
160+
_.cloneDeep(publishCatalogItemSchema),
161+
'properties.compatibility.items.enum',
162+
modelNames
163+
);
164+
setPublishSchema({
165+
rjsfSchema: modifiedSchema,
166+
uiSchema: publishCatalogItemSchema
167+
});
168+
};
169+
fetchSchema();
170+
}, [meshModelModelsData]);
171+
172+
const {
173+
disableTransferButton,
174+
assignModal,
175+
handleAssignModalClose,
176+
handleAssignModal,
177+
assignedItems,
178+
data,
179+
workspaceData,
180+
handleAssignablePage,
181+
handleAssignedPage,
182+
handleAssign,
183+
handleAssignData
184+
} = useDesignAssignment({
185+
workspaceId,
186+
useAssignDesignToWorkspaceMutation,
187+
useUnassignDesignFromWorkspaceMutation,
188+
useGetDesignsOfWorkspaceQuery: useGetWorkspaceDesignsQuery
189+
});
190+
191+
const tableHeaderContent = (
192+
<TableHeader>
193+
<Typography variant="h6" fontWeight={'bold'}>
194+
Assigned Designs
195+
</Typography>
196+
<TableRightActionHeader>
197+
<CustomColumnVisibilityControl
198+
columns={columns}
199+
customToolsProps={{
200+
columnVisibility,
201+
setColumnVisibility
202+
}}
203+
id={'catalog-table'}
204+
/>
205+
<EditButton onClick={handleAssignModal} disabled={!isAssignDisabled} />
206+
</TableRightActionHeader>
207+
</TableHeader>
208+
);
209+
210+
return (
211+
<SistentThemeProvider>
212+
<Accordion expanded={expanded} onChange={handleAccordionChange} style={{ margin: 0 }}>
213+
<AccordionSummary
214+
expandIcon={<ExpandMoreIcon />}
215+
sx={{
216+
backgroundColor: 'background.paper'
217+
}}
218+
>
219+
{tableHeaderContent}
220+
</AccordionSummary>
221+
<AccordionDetails style={{ padding: 0 }}>
222+
<CatalogDesignsTable
223+
patterns={designsOfWorkspace?.designs || []}
224+
totalCount={designsOfWorkspace?.total_count}
225+
sortOrder={sortOrder}
226+
setSortOrder={setSortOrder}
227+
pageSize={pageSize}
228+
setPageSize={setPageSize}
229+
page={page}
230+
setPage={setPage}
231+
columnVisibility={columnVisibility}
232+
colViews={designColumnsColViews}
233+
columns={columns}
234+
handleBulkpatternsDataUnpublishModal={handleBulkUnpublishModal}
235+
handleBulkDeleteModal={(designs, modalRef) =>
236+
handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
237+
}
238+
filter={'my-designs'}
239+
/>
240+
</AccordionDetails>
241+
</Accordion>
242+
<AssignmentModal
243+
open={assignModal}
244+
onClose={handleAssignModalClose}
245+
title={`Assign Designs to ${workspaceName}`}
246+
headerIcon={<DesignIcon height="40" width="40" secondaryFill="white" />}
247+
name="Designs"
248+
assignableData={data}
249+
handleAssignedData={handleAssignData}
250+
originalAssignedData={workspaceData}
251+
emptyStateIcon={<DesignIcon height="5rem" width="5rem" secondaryFill={'#808080'} />}
252+
handleAssignablePage={handleAssignablePage}
253+
handleAssignedPage={handleAssignedPage}
254+
originalLeftCount={data?.length}
255+
originalRightCount={assignedItems?.length}
256+
onAssign={handleAssign}
257+
disableTransfer={disableTransferButton}
258+
helpText={`Assign Designs to ${workspaceName}`}
259+
isAssignDisabled={isAssignDisabled}
260+
isRemoveDisabled={isRemoveDisabled}
261+
/>
262+
<GenericRJSFModal
263+
open={publishModal.open}
264+
handleClose={() => setPublishModal({ open: false, pattern: {} })}
265+
schema={publishSchema?.rjsfSchema}
266+
uiSchema={publishSchema?.uiSchema}
267+
handleSubmit={(data: any) => handlePublish(publishModal, data)}
268+
title={`Publish ${publishModal?.pattern?.name}`}
269+
buttonTitle="Publish"
270+
/>
271+
<PromptComponent ref={modalRef} />
272+
</SistentThemeProvider>
273+
);
274+
};
275+
276+
export default DesignTable;

‎src/custom/Workspaces/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import AssignmentModal from './AssignmentModal';
2+
import DesignTable from './designs-table';
23

3-
export { AssignmentModal };
4+
export { AssignmentModal, DesignTable };

‎src/custom/Workspaces/styles.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,16 @@ export const L5EditIcon = styled(EditIcon)<ExtendedEditIconProps>(
3232
...style
3333
})
3434
);
35+
36+
export const TableHeader = styled('div')({
37+
display: 'flex',
38+
justifyContent: 'space-between',
39+
width: '100%',
40+
alignItems: 'center'
41+
});
42+
43+
export const TableRightActionHeader = styled('div')({
44+
display: 'flex',
45+
alignItems: 'center',
46+
marginRight: '1rem'
47+
});

‎src/custom/Workspaces/types.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export interface AssignmentHookResult<T> {
2+
data: T[];
3+
workspaceData: T[];
4+
assignModal: boolean;
5+
handleAssignModal: (e?: React.MouseEvent) => void;
6+
handleAssignModalClose: (e?: React.MouseEvent) => void;
7+
handleAssignablePage: () => void;
8+
handleAssignedPage: () => void;
9+
handleAssign: () => void;
10+
handleAssignData: (data: T[]) => void;
11+
disableTransferButton: boolean;
12+
assignedItems: T[];
13+
}
14+
15+
export interface Workspace {
16+
id: string;
17+
name: string;
18+
description?: string;
19+
created_at: string;
20+
updated_at: string;
21+
deleted_at: {
22+
Valid: boolean;
23+
};
24+
}
25+
26+
export interface Environment {
27+
id: string;
28+
name: string;
29+
description?: string;
30+
organization_id: string;
31+
created_at: string;
32+
updated_at: string;
33+
}
34+
35+
export interface Team {
36+
id: string;
37+
name: string;
38+
}

0 commit comments

Comments
 (0)