From eb4d8a0e12dd2fc471a9d231384755bd6c1aa5e3 Mon Sep 17 00:00:00 2001
From: lcucuzzella <lorenzo.cucuzzella@dxc.com>
Date: Mon, 21 Oct 2024 14:55:44 +0200
Subject: [PATCH] feat(monitoraggio-caricamenti): cambiato comportamento chip
 20241021

---
 .../MonitoraggioCaricamenti/monitoring.scss   |   5 +
 .../MonitoraggioCaricamenti/monitoring.tsx    | 122 ++++++++++++------
 .../monitoringSearchFilters.tsx               |  11 +-
 3 files changed, 92 insertions(+), 46 deletions(-)

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<MonitoringI> = ({
   const [statisticheElaborate, setStatisticheElaborate] = useState<any[]>([]);
   const [formValues, setFormValues] = useState<typeof initialFormValues>(initialFormValues);
   const [chips, setChips] = useState<string[]>([]);
+  const [areChipsVisible, setChipsVisible] = useState(false);
 
   useEffect(() => {
-    dispatch(setEntityPagination({ pageSize: 10}));
+    dispatch(setEntityPagination({ pageSize: 10 }));
   }, []);
 
   useEffect(() => {
@@ -62,7 +63,6 @@ const Monitoring: React.FC<MonitoringI> = ({
   }, [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<MonitoringI> = ({
 
     // 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<MonitoringI> = ({
         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<MonitoringI> = ({
     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: <span id='dataColumn'><b>{formatDate(td.dataCaricamenti)}</b></span>,
-          ente: <span id='enteColumn'>{td.nomeEnte}</span>,
-          intervento: <span id='interventoColumn'>{td.intervento}</span>,
-          progetto: <span id='progettoColumn'>{td.nomeProgetto}</span>,
-          programma: <span id='programmaColumn'>{td.nomeProgramma}</span>,
-          caricamenti: <span id='caricamentiColumn'>{td.numCaricamenti}</span>,
-          serviziCaricati: <span id='serviziColumn'>{td.serviziAggiunti}</span>,
-          cittadiniCaricati: <span id='cittadiniColumn'>{td.cittadiniAssociati}</span>
-        };
+          return {
+            idProgetto: td.idProgetto,
+            data: <span id='dataColumn'><b>{formatDate(td.dataCaricamenti)}</b></span>,
+            ente: <span id='enteColumn'>{td.nomeEnte}</span>,
+            intervento: <span id='interventoColumn'>{td.intervento}</span>,
+            progetto: <span id='progettoColumn'>{td.nomeProgetto}</span>,
+            programma: <span id='programmaColumn'>{td.nomeProgramma}</span>,
+            caricamenti: <span id='caricamentiColumn'>{td.numCaricamenti}</span>,
+            serviziCaricati: <span id='serviziColumn'>{td.serviziAggiunti}</span>,
+            cittadiniCaricati: <span id='cittadiniColumn'>{td.cittadiniAssociati}</span>
+          };
         })
       );
-    }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<MonitoringI> = ({
     },
   };
 
-  const setFormValuesFunction = (formValues : any) => {
+  const setFormValuesFunction = (formValues: any) => {
     setFormValues(formValues);
   }
 
@@ -195,6 +218,10 @@ const Monitoring: React.FC<MonitoringI> = ({
     setChips(chips);
   }
 
+  const setChipVisibility = (value: boolean) => {
+    setChipsVisible(value);
+  }
+
   return (
     <div>
       Monitora l'avanzamento dei caricamenti massivi dei dati degli enti. La visualizzazione di base è preimpostata in <br />
@@ -202,26 +229,37 @@ const Monitoring: React.FC<MonitoringI> = ({
 
       <div style={{ margin: '50px' }} />
       <Accordion title={'Ricerca avanzata'} className="custom-accordion" opened={true}>
-        <MonitoringSearchFilters onSearch={fetchData} formValues={formValues} setFormValues={setFormValuesFunction} chips={chips} setChips={setChipsFunction}/>
+        <MonitoringSearchFilters onSearch={fetchData} formValues={formValues} setFormValues={setFormValuesFunction} chips={chips} setChips={setChipsFunction} setChipsVisible={setChipVisibility} />
       </Accordion>
-      <div style={{ marginBottom: '50px'}} className='justify-content-start mt-5 chipsRow'>
-        {chips.map((chip, index) => (
-            <Button className='chipRemove' onClick={() => removeChip(chip)}>
-              <Chip key={index} className='mr-1 ml-0 rounded-pill'>
-                <ChipLabel className='mx-1 my-1'>
-                  {chip}
-                </ChipLabel>
-                <Icon
-                  icon='it-close'
-                  className='ml-2 cursor-pointer clickable-area'
-                  aria-label='Remove filter'
-                />
-              </Chip>
-            </Button>
-          ))}
+      <div style={{ marginBottom: '50px' }} className='justify-content-start mt-5 chipsRow'>
+        {areChipsVisible && (
+          <>
+            {chips.map((chip, index) => (
+              <Button key={index} className='chipRemove' onClick={() => removeChip(chip)}>
+                <Chip className='mr-1 ml-0 rounded-pill'>
+                  <ChipLabel className='mx-1 my-1'>
+                    {chip}
+                  </ChipLabel>
+                  <Icon
+                    icon='it-close'
+                    className='ml-2 cursor-pointer clickable-area'
+                    aria-label='Remove filter'
+                  />
+                </Chip>
+              </Button>
+            ))}
+            {chips.length > 0 && (
+              <Button className='clearAllChips' onClick={handleClearAllClick}>
+                Cancella tutti
+              </Button>
+            )}
+          </>
+        )}
       </div>
 
 
+
+
       <span className="results"><b>Risultati</b> ({numeroRisultati})</span>
 
       <div className="square-container">
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<MonitoringSearchFilterI> = ({ formValues, setFormValues, onSearch, chips, setChips }) => {
+const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ 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<OptionType[]>();
   const [projectTypes, setProjectTypes] = useState<OptionType[]>();
 
@@ -211,6 +212,7 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
     dispatch(retriveProgramma);
     dispatch(retriveProgetto);
     dispatch(GetEntitySearchValues({ entity: 'ente', criterioRicerca: "%" }));
+    setChipsVisible(false);
   };
 
   const [enteInputValue, setEnteInputValue] = useState('');
@@ -307,6 +309,7 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
 
   function handleSubmitFiltri(): void {
     onSearch();
+    setChipsVisible(true);
   }
 
   return (
@@ -361,10 +364,10 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
       </Form.Row>
 
       <Form.Row className='justify-content-end'>
-        <Button color='secondary' className='mr-2' onClick={handleClearForm}>
+        <Button color='secondary' className='mr-2' id='cancellaFiltri' onClick={handleClearForm}>
           Cancella filtri
         </Button>
-        <Button color='primary' onClick={handleSubmitFiltri} disabled={!isDateValid.dataInizio || !isDateValid.dataFine}>
+        <Button color='primary' id='applicaFiltri' onClick={handleSubmitFiltri} disabled={!isDateValid.dataInizio || !isDateValid.dataFine}>
           Applica filtri
         </Button>
       </Form.Row>