diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx index 2bcd007048a11926af2a37375e377bf6d0e36045..044bd815e8aad89b0559937a1ee84034e80d8929 100644 --- a/src/components/Consents/Consents.tsx +++ b/src/components/Consents/Consents.tsx @@ -153,25 +153,26 @@ const Consents: React.FC = () => { } }, [gridApi, selectedNodes]) - const handleSearchChange = useCallback( - async (newSearch: string) => { - setSearch(newSearch) - if (user) { - const consentPagination = await consentService.searchConsents( - newSearch, - rowsPerPage, - page, - getAxiosXSRFHeader(user.xsrftoken) - ) - if (consentPagination) { - setConsents(consentPagination.rows) - checkSelectedNodes() - setTotalRows(consentPagination.totalRows) - } + const searchConsents = async () => { + if (user) { + const consentPagination = await consentService.searchConsents( + search, + rowsPerPage, + page, + getAxiosXSRFHeader(user.xsrftoken) + ) + if (consentPagination) { + setConsents(consentPagination.rows) + checkSelectedNodes() + setTotalRows(consentPagination.totalRows) } - }, - [user, consentService, rowsPerPage, page, checkSelectedNodes] - ) + } + } + + const handleSearchChange = (newSearch: string) => { + setSearch(newSearch) + setPage(0) + } const resetSelection = useCallback(() => { if (gridApi) { @@ -252,12 +253,12 @@ const Consents: React.FC = () => { } }, [gridApi]) - /** Trigger search when page loads or when admin changes pagination */ + /** Trigger search when page loads or when admin changes input or pagination */ useEffect(() => { - handleSearchChange(search) + searchConsents() // /!\ Do not change dependencies or effect will not trigger when pagination changes // eslint-disable-next-line react-hooks/exhaustive-deps - }, [rowsPerPage, page]) + }, [rowsPerPage, page, search]) return ( <> @@ -299,6 +300,9 @@ const Consents: React.FC = () => { rowMultiSelectWithClick={true} pagination={false} suppressCellFocus={true} + rowClassRules={{ + expired: (params) => params.data.endDate < DateTime.now(), + }} ></AgGridReact> {!isShowingSelection && ( <TablePagination diff --git a/src/components/Consents/agGridOverrides.scss b/src/components/Consents/agGridOverrides.scss index 94e9eae67cfdd11944446525935208e4a44e4646..b4964697a34c98f051138992eb8b058cceb62d3c 100644 --- a/src/components/Consents/agGridOverrides.scss +++ b/src/components/Consents/agGridOverrides.scss @@ -10,10 +10,14 @@ .ag-header-cell-text { color: $gold; } -.ag-row-odd, -.ag-row-even { +.ag-row { background: transparent !important; transition: all 300ms ease !important; + &.expired { + * { + color: $text-chart; + } + } } .ag-cell-focus { outline: none !important;