Skip to content

Commit 4f889e0

Browse files
amitamrutiyaamitamrutiya
committed
fix: pagination in designs and views table
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent 08b124b commit 4f889e0

3 files changed

Lines changed: 94 additions & 17 deletions

File tree

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Lock, Public } from '@mui/icons-material';
12
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
23
import { Theme } from '@mui/material';
34
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
@@ -42,12 +43,15 @@ interface ColumnConfigProps {
4243
isRemoveAllowed?: boolean;
4344
theme?: Theme;
4445
showPlaygroundActions: boolean;
46+
handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
47+
currentUserId?: string;
48+
refetchWorkspaceDesigns: () => void;
4549
}
4650

4751
export const colViews: ColView[] = [
4852
['id', 'na'],
4953
['name', 'xs'],
50-
['first_name', 'xs'],
54+
['user', 'xs'],
5155
['created_at', 'na'],
5256
['updated_at', 'l'],
5357
['visibility', 'l'],
@@ -73,7 +77,10 @@ export const createDesignsColumnsConfig = ({
7377
theme,
7478
handleOpenInDesigner,
7579
showPlaygroundActions = true,
76-
isFromWorkspaceTable = false
80+
isFromWorkspaceTable = false,
81+
currentUserId,
82+
handleVisibilityChange,
83+
refetchWorkspaceDesigns
7784
}: ColumnConfigProps): MUIDataTableColumn[] => {
7885
return [
7986
{
@@ -100,7 +107,7 @@ export const createDesignsColumnsConfig = ({
100107
}
101108
},
102109
{
103-
name: 'first_name',
110+
name: 'user',
104111
label: 'Author',
105112
options: {
106113
filter: false,
@@ -154,8 +161,29 @@ export const createDesignsColumnsConfig = ({
154161
filter: false,
155162
sort: false,
156163
searchable: true,
157-
customBodyRender: (value: VIEW_VISIBILITY) => {
158-
return <VisibilityChipMenu value={value} enabled={false} />;
164+
customBodyRender: (value: VIEW_VISIBILITY, tableMeta) => {
165+
const rowIndex = (tableMeta as TableMeta).rowIndex;
166+
const designId = (tableMeta as TableMeta).tableData[rowIndex]?.id;
167+
const designVisibility = (tableMeta as TableMeta).tableData[rowIndex]?.visibility;
168+
const ownerId = (tableMeta as TableMeta).tableData[rowIndex]?.user_id;
169+
const isOwner = ownerId === currentUserId;
170+
const isEnabled = designVisibility !== VIEW_VISIBILITY.PUBLISHED && isOwner;
171+
return (
172+
<VisibilityChipMenu
173+
value={value as VIEW_VISIBILITY}
174+
onChange={(value) => {
175+
if (handleVisibilityChange) {
176+
handleVisibilityChange(designId, value as VIEW_VISIBILITY);
177+
refetchWorkspaceDesigns();
178+
}
179+
}}
180+
enabled={isEnabled}
181+
options={[
182+
[VIEW_VISIBILITY.PUBLIC, Public],
183+
[VIEW_VISIBILITY.PRIVATE, Lock]
184+
]}
185+
/>
186+
);
159187
}
160188
}
161189
},

‎src/custom/Workspaces/DesignTable.tsx‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { useWindowDimensions } from '../Helpers/Dimension';
1616
import { updateVisibleColumns } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
1717
import PromptComponent from '../Prompt';
1818
import SearchBar from '../SearchBar';
19+
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
1920
import AssignmentModal from './AssignmentModal';
2021
import useDesignAssignment from './hooks/useDesignAssignment';
2122
import { L5EditIcon, TableHeader, TableRightActionHeader } from './styles';
@@ -59,6 +60,8 @@ export interface DesignTableProps {
5960
setDesignSearch: (value: string) => void;
6061
handleOpenInDesigner?: (designId: string, designName: string) => void;
6162
showPlaygroundActions?: boolean;
63+
handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
64+
currentUserId?: string;
6265
}
6366

6467
export interface PublishModalState {
@@ -75,7 +78,6 @@ export interface TableColumn {
7578
const DesignTable: React.FC<DesignTableProps> = ({
7679
workspaceId,
7780
workspaceName,
78-
designsOfWorkspace,
7981
meshModelModelsData,
8082
handleBulkUnpublishModal,
8183
handleBulkWorkspaceDesignDeleteModal,
@@ -99,20 +101,37 @@ const DesignTable: React.FC<DesignTableProps> = ({
99101
isAssignAllowed,
100102
isRemoveAllowed,
101103
useGetWorkspaceDesignsQuery,
102-
setDesignSearch,
103104
handleOpenInDesigner,
104-
showPlaygroundActions = true
105+
showPlaygroundActions = true,
106+
handleVisibilityChange,
107+
currentUserId
105108
}) => {
106109
const [publishModal, setPublishModal] = useState<PublishModalState>({
107110
open: false,
108111
pattern: {}
109112
});
113+
110114
const modalRef = useRef(null);
115+
const [search, setSearch] = useState('');
111116
const [page, setPage] = useState<number>(0);
112117
const [pageSize, setPageSize] = useState<number>(10);
113118
const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
114119
const [isSearchExpanded, setIsSearchExpanded] = useState(false);
115120

121+
const { data: designsOfWorkspace, refetch: refetchWorkspaceDesigns } =
122+
useGetWorkspaceDesignsQuery(
123+
{
124+
workspaceId,
125+
page: page,
126+
pagesize: pageSize,
127+
search: search,
128+
order: sortOrder,
129+
expandUser: true
130+
},
131+
{
132+
skip: !workspaceId
133+
}
134+
);
116135
const handlePublishModal = (pattern: Pattern): void => {
117136
const result = publishModalHandler(pattern);
118137
setPublishModal({
@@ -139,7 +158,10 @@ const DesignTable: React.FC<DesignTableProps> = ({
139158
isRemoveAllowed,
140159
theme,
141160
handleOpenInDesigner,
142-
showPlaygroundActions
161+
showPlaygroundActions,
162+
handleVisibilityChange,
163+
currentUserId,
164+
refetchWorkspaceDesigns
143165
});
144166

145167
const [publishSchema, setPublishSchema] = useState<{
@@ -197,10 +219,10 @@ const DesignTable: React.FC<DesignTableProps> = ({
197219
<TableRightActionHeader style={{ marginRight: '0rem' }}>
198220
<SearchBar
199221
onSearch={(value) => {
200-
setDesignSearch(value);
222+
setSearch(value);
201223
}}
202224
onClear={() => {
203-
setDesignSearch('');
225+
setSearch('');
204226
}}
205227
expanded={isSearchExpanded}
206228
setExpanded={setIsSearchExpanded}
@@ -243,7 +265,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
243265
handleBulkWorkspaceDesignDeleteModal(designs, modalRef, workspaceName, workspaceId)
244266
}
245267
filter={'my-designs'}
246-
setSearch={setDesignSearch}
268+
setSearch={setSearch}
247269
/>
248270
<AssignmentModal
249271
open={designAssignment.assignModal}

‎src/custom/Workspaces/WorkspaceViewsTable.tsx‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { Lock, Public } from '@mui/icons-material';
23
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
34
import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables';
45
import React, { useState } from 'react';
@@ -41,6 +42,8 @@ interface ViewsTableProps {
4142
handleShowDetails: (viewId: string, viewName: string, filterType: string) => void;
4243
handleOpenInOperator?: (designId: string, viewName: string, filterType: string) => void;
4344
showPlaygroundActions?: boolean;
45+
handleVisibilityChange?: (id: string, visibility: VIEW_VISIBILITY) => void;
46+
currentUserId?: string;
4447
}
4548

4649
const colViews: ColView[] = [
@@ -77,7 +80,9 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
7780
useUnassignViewFromWorkspaceMutation,
7881
useAssignViewToWorkspaceMutation,
7982
isAssignAllowed,
80-
handleShowDetails
83+
handleShowDetails,
84+
handleVisibilityChange,
85+
currentUserId
8186
}) => {
8287
const theme = useTheme();
8388

@@ -86,11 +91,11 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
8691
const [page, setPage] = useState<number>(0);
8792
const [pageSize, setPageSize] = useState<number>(10);
8893
const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
89-
const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery(
94+
const { data: viewsOfWorkspace, refetch } = useGetViewsOfWorkspaceQuery(
9095
{
9196
workspaceId,
9297
page: page,
93-
pageSize: pageSize,
98+
pagesize: pageSize,
9499
search: search,
95100
order: sortOrder,
96101
expandUser: true
@@ -215,8 +220,29 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
215220
filter: false,
216221
sort: false,
217222
searchable: true,
218-
customBodyRender: (value: VIEW_VISIBILITY) => {
219-
return <VisibilityChipMenu value={value} enabled={false} />;
223+
customBodyRender: (value: VIEW_VISIBILITY, tableMeta) => {
224+
const rowIndex = tableMeta.rowIndex;
225+
const viewId = tableMeta.tableData[rowIndex]?.id;
226+
const viewVisibility = tableMeta.tableData[rowIndex]?.visibility;
227+
const ownerId = tableMeta.tableData[rowIndex]?.user_id;
228+
const isOwner = ownerId === currentUserId;
229+
const isEnabled = viewVisibility !== VIEW_VISIBILITY.PUBLISHED && isOwner;
230+
return (
231+
<VisibilityChipMenu
232+
value={value as VIEW_VISIBILITY}
233+
onChange={(value) => {
234+
if (handleVisibilityChange) {
235+
handleVisibilityChange(viewId, value as VIEW_VISIBILITY);
236+
refetch();
237+
}
238+
}}
239+
enabled={isEnabled}
240+
options={[
241+
[VIEW_VISIBILITY.PUBLIC, Public],
242+
[VIEW_VISIBILITY.PRIVATE, Lock]
243+
]}
244+
/>
245+
);
220246
}
221247
}
222248
},
@@ -272,6 +298,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
272298
selectableRows: 'none',
273299
count: viewsOfWorkspace?.total_count,
274300
rowsPerPage: pageSize,
301+
serverSide: true,
275302
page,
276303
elevation: 0,
277304
sortOrder: {

0 commit comments

Comments
 (0)