Skip to content

Commit 7531f7c

Browse files
MCatherine1994MCatherine1994
authored
fix: #2264 UI improvement in test search result table (#2290)
1 parent 3fa0081 commit 7531f7c

File tree

13 files changed

+308
-263
lines changed

13 files changed

+308
-263
lines changed

‎frontend/src/components/GenericTable/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Props<T extends Record<string, any>> = {
3333
enableFullScreenToggle?: boolean;
3434
enableColumnActions?: boolean;
3535
enableColumnPinning?: boolean;
36+
enableColumnResizing?: boolean;
3637
enableEditing?: boolean;
3738
enableStickyHeader?: boolean;
3839
isCompacted?: boolean;
@@ -88,6 +89,7 @@ const GenericTable = <T extends Record<string, any>>({
8889
enableFullScreenToggle = false,
8990
enableColumnActions = false,
9091
enableColumnPinning = false,
92+
enableColumnResizing = false,
9193
enableEditing = true,
9294
enableStickyHeader = false,
9395
isCompacted = false,
@@ -211,6 +213,7 @@ const GenericTable = <T extends Record<string, any>>({
211213
enableFullScreenToggle,
212214
enableColumnActions,
213215
enableColumnPinning,
216+
enableColumnResizing,
214217
enableEditing,
215218
enableStickyHeader,
216219
createDisplayMode: 'row',

‎frontend/src/types/consep/TestingSearchType.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export type PaginationInfoType = {
3838

3939
export type PaginatedTestingSearchResponseType = {
4040
content: TestingSearchResponseType[];
41+
missingLotNumbers?: string[];
4142
} & PaginationInfoType;
4243

4344
export type TestCodeType = {

‎frontend/src/views/CONSEP/TestingActivities/TestSearch/TablePlaceholder/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
justify-content: center;
1111
align-items: center;
1212
flex-grow: 1;
13-
height: calc(100vh - 20.5rem);
13+
height: calc(100vh - 25.5rem);
1414
}

‎frontend/src/views/CONSEP/TestingActivities/TestSearch/TestListTable.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ const TestListTable = ({
122122
onPaginationChange={onPageChange}
123123
enableRowSelection
124124
enableColumnPinning
125+
enableColumnResizing
125126
enableSorting
126127
manualSorting
127128
enableStickyHeader

‎frontend/src/views/CONSEP/TestingActivities/TestSearch/constants.tsx‎

Lines changed: 41 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export const SAFE_MARGIN = 16;
1111
export const DATE_FORMAT = 'Y/m/d';
1212
export const minStartDate = '1900-01-01';
1313
export const maxEndDate = '9999-12-31';
14-
const COLOR_GREY_20 = '#DFDFE1'; // light theme token: layer-selected-01
1514

1615
export const formatDateCell = (value: string | null) => {
1716
if (!value) return '';
@@ -56,7 +55,7 @@ export const errorMessages = {
5655
};
5756

5857
export const iniActSearchValidation: ActivitySearchValidation = {
59-
lotNumbers: initialErrorValue,
58+
lotNumbers: Array.from({ length: 5 }, () => ({ ...initialErrorValue })),
6059
germinatorTray: initialErrorValue,
6160
requestId: initialErrorValue,
6261
requestYear: initialErrorValue,
@@ -101,52 +100,12 @@ const getResultValue = (
101100
}
102101
};
103102

104-
const tableCellProps = (size?: number, alignment: 'left' | 'right' | 'center' = 'right') => ({
103+
const tableCellProps = (alignment: 'left' | 'right' | 'center' = 'right') => ({
105104
muiTableHeadCellProps: {
106-
align: alignment,
107-
...(size
108-
? {
109-
sx: {
110-
width: size,
111-
minWidth: size,
112-
maxWidth: size,
113-
// keep the header style aligned with the style in
114-
// frontend/src/components/GenericTable/index.tsx,
115-
// otherwise the header style inside GenericTable will be overridden
116-
'& .Mui-TableHeadCell-Content-Labels': {
117-
display: 'flex',
118-
flexDirection: 'row',
119-
alignItems: 'center',
120-
gap: '0.25rem',
121-
122-
'& .Mui-TableHeadCell-Content-Wrapper': {
123-
order: 1
124-
},
125-
'& .MuiBadge-root': {
126-
order: 2
127-
}
128-
},
129-
padding: '0.6rem'
130-
}
131-
}
132-
: {})
105+
align: alignment
133106
},
134107
muiTableBodyCellProps: {
135-
align: alignment,
136-
...(size
137-
? {
138-
sx: {
139-
width: size,
140-
minWidth: size,
141-
maxWidth: size,
142-
padding: '0.6rem',
143-
'&:hover': {
144-
outline: 'none',
145-
backgroundColor: COLOR_GREY_20
146-
}
147-
}
148-
}
149-
: {})
108+
align: alignment
150109
}
151110
});
152111

@@ -155,56 +114,64 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
155114
accessorKey: 'seedlotDisplay',
156115
header: 'Lot #',
157116
enableEditing: false,
158-
size: 125,
159-
...tableCellProps(125, 'left')
117+
size: 80,
118+
...tableCellProps('left')
160119
},
161120
{
162121
accessorKey: 'requestItem',
163122
header: 'Request ID',
164123
enableEditing: false,
165-
size: 130
124+
size: 120,
125+
...tableCellProps('left')
166126
},
167127
{
168128
accessorKey: 'species',
169129
header: 'Sp',
170130
enableEditing: false,
171-
...tableCellProps(70, 'left')
131+
size: 90,
132+
...tableCellProps('left')
172133
},
173134
{
174135
accessorKey: 'testRank',
175-
header: 'Rank',
136+
header: 'Rnk',
176137
enableEditing: false,
177-
...tableCellProps(90, 'left')
138+
size: 70,
139+
...tableCellProps('left')
178140
},
179141
{
180142
accessorKey: 'testCategoryCd',
181-
header: 'Category',
143+
header: 'Cat',
182144
enableEditing: false,
183-
...tableCellProps(110, 'left')
145+
size: 70,
146+
...tableCellProps('left')
184147
},
185148
{
186149
accessorKey: 'activityId',
187-
header: 'Activity',
150+
header: 'Act',
188151
enableEditing: false,
189-
...tableCellProps(100, 'left')
152+
size: 70,
153+
...tableCellProps('left')
190154
},
191155
{
192156
header: 'Result',
193157
accessorFn: (row) => getResultValue(row),
194158
enableEditing: false,
195-
...tableCellProps(92)
159+
size: 90,
160+
...tableCellProps()
196161
},
197162
{
198163
accessorKey: 'pv',
199164
header: 'PV',
200165
enableEditing: false,
201-
...tableCellProps(80)
166+
size: 70,
167+
...tableCellProps()
202168
},
203169
{
204170
accessorKey: 'currentTestInd',
205171
header: 'Curr',
206172
enableEditing: false,
207-
...tableCellProps(80, 'left'),
173+
size: 70,
174+
...tableCellProps('left'),
208175
Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
209176
const value = cell.getValue();
210177
return value === -1 ? (
@@ -218,7 +185,8 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
218185
accessorKey: 'testCompleteInd',
219186
header: 'Com',
220187
enableEditing: false,
221-
...tableCellProps(80, 'left'),
188+
size: 75,
189+
...tableCellProps('left'),
222190
Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
223191
const value = cell.getValue();
224192
return value === -1 ? (
@@ -232,7 +200,8 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
232200
accessorKey: 'acceptResultInd',
233201
header: 'Acc',
234202
enableEditing: false,
235-
...tableCellProps(75, 'left'),
203+
size: 70,
204+
...tableCellProps('left'),
236205
Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
237206
const value = cell.getValue();
238207
return value === -1 ? (
@@ -246,7 +215,8 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
246215
accessorKey: 'significntStsInd',
247216
header: 'Sig',
248217
enableEditing: false,
249-
...tableCellProps(70, 'left'),
218+
size: 70,
219+
...tableCellProps('left'),
250220
Cell: ({ cell }: { cell: MRT_Cell<TestingSearchResponseType> }) => {
251221
const value = cell.getValue();
252222
return value === -1 ? (
@@ -260,36 +230,41 @@ export const getTestingActivityListColumns = (): MRT_ColumnDef<TestingSearchResp
260230
accessorKey: 'seedWithdrawalDate',
261231
header: 'Wdrwl Date',
262232
enableEditing: false,
263-
...tableCellProps(125, 'left'),
233+
size: 120,
234+
...tableCellProps('left'),
264235
Cell: ({ cell }) => formatDateCell(cell.getValue<string | null>())
265236
},
266237
{
267238
accessorKey: 'revisedEndDt',
268239
header: 'Sch End Date',
269240
enableEditing: false,
270-
...tableCellProps(140, 'left'),
241+
size: 135,
242+
...tableCellProps('left'),
271243
Cell: ({ cell }) => formatDateCell(cell.getValue<string | null>())
272244
},
273245
{
274246
accessorKey: 'actualBeginDtTm',
275247
header: 'Start Date',
276248
enableEditing: false,
277-
...tableCellProps(115, 'left'),
249+
size: 110,
250+
...tableCellProps('left'),
278251
Cell: ({ cell }) => formatDateCell(cell.getValue<string | null>())
279252
},
280253
{
281254
accessorKey: 'actualEndDtTm',
282255
header: 'End Date',
283256
enableEditing: false,
284-
...tableCellProps(110, 'left'),
257+
size: 105,
258+
...tableCellProps('left'),
285259
Cell: ({ cell }) => formatDateCell(cell.getValue<string | null>())
286260
},
287261

288262
{
289263
accessorKey: 'riaComment',
290264
header: 'Comments',
291265
enableEditing: false,
292-
...tableCellProps(800, 'left')
266+
size: 1200,
267+
...tableCellProps('left')
293268
}
294269
];
295270

‎frontend/src/views/CONSEP/TestingActivities/TestSearch/definitions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export type ValidationErrorType = {
3535
}
3636

3737
export type ActivitySearchValidation = {
38-
lotNumbers: ValidationErrorType;
38+
lotNumbers: ValidationErrorType[];
3939
germinatorTray: ValidationErrorType;
4040
requestId: ValidationErrorType;
4141
requestYear: ValidationErrorType;

0 commit comments

Comments
 (0)