Skip to content

Commit a3e66fd

Browse files
danialraza03danialraza03
authored
Merge pull request #119 from zenml-io/QA-Fixes
Qa fixes
2 parents 5604374 + 678bd87 commit a3e66fd

File tree

1 file changed

+88
-61
lines changed

1 file changed

+88
-61
lines changed

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 88 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,10 @@ export const Table: React.FC<TableProps> = ({
8181
const columns = createHeaders(headerCols);
8282

8383
useEffect(() => {
84-
console.log(tableElement.current.style.gridTemplateColumns, 'offsetHeight');
85-
setTableHeight(tableElement.current.offsetHeight as any);
84+
// console.log(tableElement.current.style.gridTemplateColumns, 'offsetHeight');
85+
setTableHeight(tableElement?.current?.offsetHeight as any);
8686

87-
// eslint-disable-next-line
87+
// eslint-disable-next-line
8888
}, [tableElement.current]);
8989

9090
const mouseDown = (index: any) => {
@@ -136,10 +136,10 @@ export const Table: React.FC<TableProps> = ({
136136
}, [activeIndex, mouseMove, mouseUp, removeListeners]);
137137

138138
// Demo only
139-
const resetTableCells = () => {
140-
debugger;
141-
tableElement.current.style.gridTemplateColumns = '';
142-
};
139+
// const resetTableCells = () => {
140+
// debugger;
141+
// tableElement.current.style.gridTemplateColumns = '';
142+
// };
143143

144144
const [showItems, setShowItems] = useState(false);
145145
const [fetchingMembers, setFetchingMembers] = useState(false);
@@ -164,7 +164,14 @@ export const Table: React.FC<TableProps> = ({
164164
// itemsPerPage: itemPerPage,
165165
// items: tableRows,
166166
// });
167-
const isValidFilter = filters?.map((f) => f.value).join('');
167+
const validFilters = filters?.filter((item) => item.value);
168+
console.log('checkFilter', validFilters, filters);
169+
170+
const isValidFilterFroValue: any = filters?.map((f) => f.value).join('');
171+
const isValidFilterForCategory: any = filters
172+
?.map((f) => f.value && f.type.value)
173+
.join('');
174+
const checkValidFilter = isValidFilterFroValue + isValidFilterForCategory;
168175

169176
const { dispatchStackData } = callActionForStacksForPagination();
170177
const {
@@ -187,7 +194,7 @@ export const Table: React.FC<TableProps> = ({
187194
componentName === 'components'
188195
? locationPath.pathname.split('/')[5]
189196
: locationPath.pathname.split('/')[4];
190-
// console.log(check, '333');
197+
const checkForLocationPath = locationPath.pathname.split('/')[4];
191198
useEffect(() => {
192199
// console.log(locationPath.pathname.split('/')[4], 'locationPath1');
193200
setItemPerPage(itemPerPage);
@@ -201,12 +208,17 @@ export const Table: React.FC<TableProps> = ({
201208
id,
202209
1,
203210
itemPerPage,
204-
filters as any,
211+
checkValidFilter.length ? (validFilters as any) : [],
205212
activeSorting,
206213
);
207214
break;
208215
} else {
209-
dispatchStackData(1, itemPerPage, filters as any, activeSorting);
216+
dispatchStackData(
217+
1,
218+
itemPerPage,
219+
checkValidFilter.length ? (validFilters as any) : [],
220+
activeSorting,
221+
);
210222
break;
211223
}
212224
case 'components':
@@ -215,15 +227,15 @@ export const Table: React.FC<TableProps> = ({
215227
id,
216228
1,
217229
itemPerPage,
218-
filters as any,
230+
checkValidFilter.length ? (validFilters as any) : [],
219231
activeSorting,
220232
);
221233
break;
222234
} else {
223235
dispatchStackComponentsData(
224236
1,
225237
itemPerPage,
226-
filters as any,
238+
checkValidFilter.length ? (validFilters as any) : [],
227239
activeSorting,
228240
);
229241
break;
@@ -234,19 +246,29 @@ export const Table: React.FC<TableProps> = ({
234246
id,
235247
1,
236248
itemPerPage,
237-
filters as any,
249+
checkValidFilter.length ? (validFilters as any) : [],
238250
activeSorting,
239251
);
240252
break;
241253
} else {
242-
console.log(itemPerPage, 'itemPerPage');
254+
// console.log(checkValidFilter, 'checkValidFilter');
243255
if (!renderAfterRow) break;
244-
dispatchPipelineData(1, itemPerPage, filters as any, activeSorting);
256+
dispatchPipelineData(
257+
1,
258+
itemPerPage,
259+
checkValidFilter.length ? (validFilters as any) : [],
260+
activeSorting,
261+
);
245262
break;
246263
}
247264

248265
case 'all-runs':
249-
dispatchAllrunsData(1, itemPerPage, filters as any, activeSorting);
266+
dispatchAllrunsData(
267+
1,
268+
itemPerPage,
269+
checkValidFilter.length ? (validFilters as any) : [],
270+
activeSorting,
271+
);
250272
break;
251273

252274
default:
@@ -267,7 +289,7 @@ export const Table: React.FC<TableProps> = ({
267289
}
268290

269291
// eslint-disable-next-line react-hooks/exhaustive-deps
270-
}, [locationPath.pathname.split('/')[4], isValidFilter, activeSorting]);
292+
}, [checkForLocationPath, checkValidFilter, activeSorting]);
271293
let rowsToDisplay = tableRows;
272294

273295
// function getFetchedState(state: any) {
@@ -298,7 +320,14 @@ export const Table: React.FC<TableProps> = ({
298320
<>
299321
<div>
300322
<div>
301-
<table ref={tableElement as any} style={{ gridTemplateColumns: `minmax(50px, 2fr)`.repeat(columns?.length) }} >
323+
<table
324+
ref={tableElement as any}
325+
style={{
326+
gridTemplateColumns: `minmax(50px, 2fr)`.repeat(
327+
columns?.length,
328+
),
329+
}}
330+
>
302331
<thead>
303332
<tr style={{ backgroundColor: '#F5F3F9' }}>
304333
{console.log(columns, 'columns')}
@@ -321,7 +350,7 @@ export const Table: React.FC<TableProps> = ({
321350
>
322351
{text.render && text.render()}
323352
</Box>
324-
353+
325354
<div
326355
style={{ height: tableHeight }}
327356
onMouseDown={() => i !== 0 && mouseDown(i)}
@@ -336,49 +365,47 @@ export const Table: React.FC<TableProps> = ({
336365

337366
{rowsToDisplay.map((headerRow: any, index: number) => (
338367
<>
339-
<tbody>
340-
<tr
341-
onClick={() => trOnClick && trOnClick(headerRow)}
342-
className={cn(
343-
styles.tableRow,
344-
trOnClick && styles.clickableTableRow,
345-
)}
346-
style={{
347-
backgroundColor:
348-
index % 2 !== 0 ? '#F5F3F9' : 'white',
349-
}}
350-
key={index}
351-
>
352-
{columns.map(({ ref, text }, i) => (
353-
<td
354-
className={styles.tableTd}
355-
style={{
356-
backgroundColor:
357-
index % 2 !== 0 ? '#F5F3F9' : 'white',
358-
}}
359-
key={i}
360-
>
361-
<Box paddingVertical="sm" paddingLeft="lg">
362-
<Truncate maxLines={1}>
363-
{text.renderRow(headerRow)}
364-
</Truncate>
365-
</Box>
366-
</td>
367-
))}
368-
</tr>
369-
{/* <table className={styles.collapseTable}> */}
370368
<tbody>
371-
{renderAfterRow && renderAfterRow(headerRow)}
369+
<tr
370+
onClick={() => trOnClick && trOnClick(headerRow)}
371+
className={cn(
372+
styles.tableRow,
373+
trOnClick && styles.clickableTableRow,
374+
)}
375+
style={{
376+
backgroundColor:
377+
index % 2 !== 0 ? '#F5F3F9' : 'white',
378+
}}
379+
key={index}
380+
>
381+
{columns.map(({ ref, text }, i) => (
382+
<td
383+
className={styles.tableTd}
384+
style={{
385+
backgroundColor:
386+
index % 2 !== 0 ? '#F5F3F9' : 'white',
387+
}}
388+
key={i}
389+
>
390+
<Box paddingVertical="sm" paddingLeft="lg">
391+
<Truncate maxLines={1}>
392+
{text.renderRow(headerRow)}
393+
</Truncate>
394+
</Box>
395+
</td>
396+
))}
397+
</tr>
398+
{/* <table className={styles.collapseTable}> */}
399+
<tbody>
400+
{renderAfterRow && renderAfterRow(headerRow)}
401+
</tbody>
402+
{/* </table> */}
372403
</tbody>
373-
{/* </table> */}
374-
</tbody>
375-
</>
404+
</>
376405
))}
377406
</table>
378-
379-
380407
</div>
381-
<button onClick={resetTableCells}>Reset</button>
408+
{/* <button onClick={resetTableCells}>Reset</button> */}
382409
</div>
383410

384411
{/* <table className={styles.table} ref={tableElement}>
@@ -467,7 +494,7 @@ export const Table: React.FC<TableProps> = ({
467494
ref={childRef}
468495
// getFetchedState={getFetchedState}
469496
activeSorting={activeSorting}
470-
filters={filters}
497+
filters={validFilters}
471498
itemPerPage={itemPerPage}
472499
pageIndex={pageIndex}
473500
setPageIndex={setPageIndex}
@@ -548,7 +575,7 @@ export const Table: React.FC<TableProps> = ({
548575
childRef?.current?.callOnChange(
549576
1,
550577
parseInt(`${option}`),
551-
filters,
578+
validFilters,
552579
activeSorting,
553580
);
554581
setShowItems(false);
@@ -598,4 +625,4 @@ export const Table: React.FC<TableProps> = ({
598625
/>
599626
</FlexBox.Column>
600627
);
601-
};
628+
};

0 commit comments

Comments
 (0)