From b3ce51ddcefc4212c5e19fe309765ae5e554734f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Tue, 28 Feb 2023 16:27:50 +0000
Subject: [PATCH] style: expired consents are now less visible
---
src/components/Consents/Consents.tsx | 46 +++++++++++---------
src/components/Consents/agGridOverrides.scss | 8 +++-
2 files changed, 31 insertions(+), 23 deletions(-)
diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx
index 2bcd0070..044bd815 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 94e9eae6..b4964697 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;
--
GitLab