diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx index 3e0c14017f86df2343b2cb23e784f9a131f82507..e8ca1577ceab22005373a6e5c0241984c7142614 100644 --- a/src/components/Consents/Consents.tsx +++ b/src/components/Consents/Consents.tsx @@ -15,6 +15,7 @@ import { IGrdfConsent, grdfColumnDef } from '../../models/grdfConsent' import { ISgeConsent, sgeColumnDefs } from '../../models/sgeConsent.model' import { GrdfConsentService } from '../../services/grdfConsent.service' import { SgeConsentService } from '../../services/sgeConsent.service' +import Loader from '../Loader/Loader' import DownloadModal from './DownloadModal' import './agGridOverrides.scss' import styles from './consents.module.scss' @@ -23,6 +24,7 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => { const isGRDF = type === 'grdf' const [gridApi, setGridApi] = useState<GridApi | null>(null) + const [isLoading, setIsLoading] = useState(false) const [search, setSearch] = useState<string>('') const [selectedNodes, setSelectedNodes] = useState<IRowNode[]>([]) const [isShowingSelection, setIsShowingSelection] = useState<boolean>(false) @@ -75,13 +77,14 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => { .filter(node => node.isSelected) .map(node => node.data.ID) - newNodes.forEach(node => { + newNodes?.forEach(node => { if (idsToCheck.includes(node.data.ID)) node.setSelected(true, false) }) } }, [gridApi, selectedNodes]) const searchConsents = async () => { + setIsLoading(true) if (user) { const consentPagination = await consentService.searchConsents( search, @@ -95,6 +98,7 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => { setTotalRows(consentPagination.totalRows) } } + setIsLoading(false) } const handleSearchChange = (newSearch: string) => { @@ -208,24 +212,27 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => { className="ag-theme-alpine-dark" style={{ width: '100%', height: '75vh' }} > - <AgGridReact - onGridReady={onGridReady} - defaultColDef={defaultColDef} - rowHeight={35} - rowData={consents} - columnDefs={columnDefs} - animateRows={true} - rowSelection="multiple" - allowDragFromColumnsToolPanel={false} - onRowSelected={onRowSelected} - sortingOrder={['asc', 'desc']} - rowMultiSelectWithClick={true} - pagination={false} - suppressCellFocus={true} - rowClassRules={{ - expired: params => params.data.endDate < DateTime.now(), - }} - /> + {isLoading && <Loader />} + {!isLoading && ( + <AgGridReact + onGridReady={onGridReady} + defaultColDef={defaultColDef} + rowHeight={35} + rowData={consents} + columnDefs={columnDefs} + animateRows={true} + rowSelection="multiple" + allowDragFromColumnsToolPanel={false} + onRowSelected={onRowSelected} + sortingOrder={['asc', 'desc']} + rowMultiSelectWithClick={true} + pagination={false} + suppressCellFocus={true} + rowClassRules={{ + expired: params => params.data.endDate < DateTime.now(), + }} + /> + )} {!isShowingSelection && ( <TablePagination labelRowsPerPage="Consentements par page"