diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss index 81c872d62..87d366d82 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss @@ -246,4 +246,9 @@ input#dateInputDataFine { #dateInputDataFineDescription { color: red !important; +} + +.clearAllChips{ + color: #0066CC !important; + text-decoration: underline !important; } \ No newline at end of file diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx index 88c7ed8c8..2e906625f 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx @@ -21,7 +21,7 @@ import MonitoringSearchFilters, { initialFormValues } from './monitoringSearchFi import './monitoring.scss'; import { withFormHandlerProps } from '../../../hoc/withFormHandler'; import { - setHeadquarterDetails,resetProjectDetails + setHeadquarterDetails, resetProjectDetails } from '../../../redux/features/administrativeArea/administrativeAreaSlice'; import { Button, Chip, ChipLabel, Icon } from 'design-react-kit'; interface MonitoringFormI { @@ -29,7 +29,7 @@ interface MonitoringFormI { creation?: boolean; } -interface MonitoringI extends withFormHandlerProps, MonitoringFormI {} +interface MonitoringI extends withFormHandlerProps, MonitoringFormI { } // interface CaricamentiResponse { // cittadiniCaricati: number; @@ -52,9 +52,10 @@ const Monitoring: React.FC = ({ const [statisticheElaborate, setStatisticheElaborate] = useState([]); const [formValues, setFormValues] = useState(initialFormValues); const [chips, setChips] = useState([]); + const [areChipsVisible, setChipsVisible] = useState(false); useEffect(() => { - dispatch(setEntityPagination({ pageSize: 10})); + dispatch(setEntityPagination({ pageSize: 10 })); }, []); useEffect(() => { @@ -62,7 +63,6 @@ const Monitoring: React.FC = ({ }, [dispatch]); const removeChip = (chip: string) => { - console.log("Sono in removeChip"); // Identifica quale valore deve essere cancellato in base al chip selezionato const newFormValues = { ...formValues }; @@ -84,10 +84,33 @@ const Monitoring: React.FC = ({ // Rimuove la chip e aggiorna lo stato setChips((prevChips) => prevChips.filter((c) => c !== chip)); + + + //Aspette 1ms e clicca il bottone #applicaFiltri + setTimeout(() => { + handleSingleChipRemoveClick(); + }, 1); + }; + + const handleClearAllClick = () => { + const targetElement = document.querySelector('#cancellaFiltri') as HTMLButtonElement; + if (targetElement) { + targetElement.click(); + } + setChipsVisible(false); }; + const handleSingleChipRemoveClick = () => { + const targetElement = document.querySelector('#applicaFiltri') as HTMLButtonElement; + if (targetElement) { + targetElement.click(); + } + }; + + + + const fetchData = async (currPage: number = 1, orderBy: string = "data_caricamenti", direction: string = "desc") => { - const fetchData = async (currPage: number = 1, orderBy: string = "data_caricamenti", direction: string = "desc" ) => { try { const payload: any = { ...(Number(formValues.programma.value) !== 0 && { idProgramma: Number(formValues.programma.value) }), @@ -102,7 +125,7 @@ const Monitoring: React.FC = ({ direction }; const newTableValues = await GetMonitoraggioCaricamentiValues(payload)(dispatch); - + setCaricamentiList(newTableValues.monitoraggioCaricamentiEntity); setNumeroRisultati(newTableValues.numeroTotaleElementi); setStatistiche([newTableValues.numeroEnti, newTableValues.numeroCaricamenti, newTableValues.serviziCaricati, newTableValues.cittadiniCaricati]); @@ -120,37 +143,37 @@ const Monitoring: React.FC = ({ const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }; return new Date(dateString).toLocaleDateString('it-IT', options); }; - + const updateTableValues = () => { let table; - if(caricamentiList.length > 0) { + if (caricamentiList.length > 0) { table = newTable( TableHeading, caricamentiList.map((td: any) => { - return { - idProgetto: td.idProgetto, - data: {formatDate(td.dataCaricamenti)}, - ente: {td.nomeEnte}, - intervento: {td.intervento}, - progetto: {td.nomeProgetto}, - programma: {td.nomeProgramma}, - caricamenti: {td.numCaricamenti}, - serviziCaricati: {td.serviziAggiunti}, - cittadiniCaricati: {td.cittadiniAssociati} - }; + return { + idProgetto: td.idProgetto, + data: {formatDate(td.dataCaricamenti)}, + ente: {td.nomeEnte}, + intervento: {td.intervento}, + progetto: {td.nomeProgetto}, + programma: {td.nomeProgramma}, + caricamenti: {td.numCaricamenti}, + serviziCaricati: {td.serviziAggiunti}, + cittadiniCaricati: {td.cittadiniAssociati} + }; }) ); - }else - table = newTable(TableHeading,[]); - + } else + table = newTable(TableHeading, []); + return table; }; const [tableValues, setTableValues] = useState(updateTableValues()); const [numeroRisultati, setNumeroRisultati] = useState(0); - - - + + + useEffect(() => { if (Array.isArray(caricamentiList) && caricamentiList.length) @@ -187,7 +210,7 @@ const Monitoring: React.FC = ({ }, }; - const setFormValuesFunction = (formValues : any) => { + const setFormValuesFunction = (formValues: any) => { setFormValues(formValues); } @@ -195,6 +218,10 @@ const Monitoring: React.FC = ({ setChips(chips); } + const setChipVisibility = (value: boolean) => { + setChipsVisible(value); + } + return (
Monitora l'avanzamento dei caricamenti massivi dei dati degli enti. La visualizzazione di base รจ preimpostata in
@@ -202,26 +229,37 @@ const Monitoring: React.FC = ({
- + -
- {chips.map((chip, index) => ( - - ))} +
+ {areChipsVisible && ( + <> + {chips.map((chip, index) => ( + + ))} + {chips.length > 0 && ( + + )} + + )}
+ + Risultati ({numeroRisultati})
diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx index 8a1c3586f..2e392472c 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx @@ -21,6 +21,8 @@ interface MonitoringSearchFilterI { setFormValues: (formValues: any) => void; chips: string[]; setChips: (chips: string[]) => void; + areChipsVisible?: boolean; + setChipsVisible: (areChipVisible: boolean) => void; } type DateField = { @@ -58,14 +60,13 @@ export const initialFormValues = { } as DateField, }; -const MonitoringSearchFilters: React.FC = ({ formValues, setFormValues, onSearch, chips, setChips }) => { +const MonitoringSearchFilters: React.FC = ({ formValues, setFormValues, onSearch, chips, setChips, areChipsVisible, setChipsVisible}) => { const [isDateValid, setIsDateValid] = useState<{ dataInizio?: boolean; dataFine?: boolean }>({ dataInizio: true, dataFine: true }); const dispatch = useDispatch(); const dropdownFilterOptions = useSelector(selectEntityFiltersOptions); const entiList = useAppSelector(selectEntityList); - const [programTypes, setProgramTypes] = useState(); const [projectTypes, setProjectTypes] = useState(); @@ -211,6 +212,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues dispatch(retriveProgramma); dispatch(retriveProgetto); dispatch(GetEntitySearchValues({ entity: 'ente', criterioRicerca: "%" })); + setChipsVisible(false); }; const [enteInputValue, setEnteInputValue] = useState(''); @@ -307,6 +309,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues function handleSubmitFiltri(): void { onSearch(); + setChipsVisible(true); } return ( @@ -361,10 +364,10 @@ const MonitoringSearchFilters: React.FC = ({ formValues - -