fix(monitoraggio-caricamenti): spostata sezione chips fuori sezione r…

…icerca 20241021
teamdigitale · Oct 21, 2024 · d3869a4 · d3869a4
1 parent 7139130
commit d3869a4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 50 deletions.
diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx
@@ -23,6 +23,7 @@ import { withFormHandlerProps } from '../../../hoc/withFormHandler';
 import {
   setHeadquarterDetails,resetProjectDetails
 } from '../../../redux/features/administrativeArea/administrativeAreaSlice';
+import { Button, Chip, ChipLabel, Icon } from 'design-react-kit';
 interface MonitoringFormI {
   formDisabled?: boolean;
   creation?: boolean;
@@ -50,6 +51,7 @@ const Monitoring: React.FC<MonitoringI> = ({
   // const { filtroCriterioRicerca, filtroPolicies, filtroStati } = filtersList;
   const [statisticheElaborate, setStatisticheElaborate] = useState<any[]>([]);
   const [formValues, setFormValues] = useState<typeof initialFormValues>(initialFormValues);
+  const [chips, setChips] = useState<string[]>([]);
 
   useEffect(() => {
     dispatch(setEntityPagination({ pageSize: 10}));
@@ -59,11 +61,30 @@ const Monitoring: React.FC<MonitoringI> = ({
     fetchData();
   }, [dispatch]);
 
-  // const handleTableValuesChange = (newTableValues: CaricamentiResponse) => {
-  //     setCaricamentiList(newTableValues.monitoraggioCaricamentiEntity);
-  //     setNumeroRisultati(newTableValues.numeroTotaleElementi);
-  //     setStatistiche([newTableValues.numeroEnti, newTableValues.numeroCaricamenti, newTableValues.serviziCaricati, newTableValues.cittadiniCaricati]);
-  // };
+  const removeChip = (chip: string) => {
+    console.log("Sono in removeChip");
+    // Identifica quale valore deve essere cancellato in base al chip selezionato
+    const newFormValues = { ...formValues };
+
+    if (chip.includes('Programma')) {
+      newFormValues.programma = initialFormValues.programma;
+    } else if (chip.includes('Intervento')) {
+      newFormValues.intervento = initialFormValues.intervento;
+    } else if (chip.includes('Progetto')) {
+      newFormValues.progetto = initialFormValues.progetto;
+    } else if (chip.includes('Periodo')) {
+      newFormValues.dataInizio = initialFormValues.dataInizio;
+      newFormValues.dataFine = initialFormValues.dataFine;
+    } else if (chip.includes('Ente')) {
+      newFormValues.ente = initialFormValues.ente;
+    }
+
+    // Aggiorna i valori del form
+    setFormValues(newFormValues);
+
+    // Rimuove la chip e aggiorna lo stato
+    setChips((prevChips) => prevChips.filter((c) => c !== chip));
+  };
 
 
   const fetchData = async (currPage: number = 1, orderBy: string = "data_caricamenti", direction: string = "desc" ) => { 
@@ -170,16 +191,36 @@ const Monitoring: React.FC<MonitoringI> = ({
     setFormValues(formValues);
   }
 
+  const setChipsFunction = (chips: string[]) => {
+    setChips(chips);
+  }
+
   return (
     <div>
       Monitora l'avanzamento dei caricamenti massivi dei dati degli enti. La visualizzazione di base è preimpostata in <br />
       automatico sulla data odierna. Utilizza i filtri per effettuare una ricerca avanzata.
 
       <div style={{ margin: '50px' }} />
       <Accordion title={'Ricerca avanzata'} className="custom-accordion" opened={true}>
-        <MonitoringSearchFilters onSearch={fetchData} formValues={formValues} setFormValues={setFormValuesFunction}/>
+        <MonitoringSearchFilters onSearch={fetchData} formValues={formValues} setFormValues={setFormValuesFunction} chips={chips} setChips={setChipsFunction}/>
       </Accordion>
-      <div style={{ margin: '50px'}} />
+      <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>
+
 
       <span className="results"><b>Risultati</b> ({numeroRisultati})</span>
 

diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx
@@ -19,6 +19,8 @@ interface MonitoringSearchFilterI {
   onSearch: () => void;
   formValues: { ente: OptionType; programma: OptionType; intervento: OptionType; progetto: OptionType; dataInizio: DateField; dataFine: DateField; };
   setFormValues: (formValues: any) => void;
+  chips: string[];
+  setChips: (chips: string[]) => void;
 }
 
 type DateField = {
@@ -56,8 +58,7 @@ export const initialFormValues = {
   } as DateField,
 };
 
-const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues, setFormValues, onSearch }) => {
-  const [chips, setChips] = useState<string[]>([]);
+const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues, setFormValues, onSearch, chips, setChips }) => {
   const [isDateValid, setIsDateValid] = useState<{ dataInizio?: boolean; dataFine?: boolean }>({ dataInizio: true, dataFine: true });
   const dispatch = useDispatch();
   const dropdownFilterOptions = useSelector(selectEntityFiltersOptions);
@@ -74,31 +75,6 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
     dispatch(GetEntitySearchValues({ entity: 'ente', criterioRicerca: "%" }));
   }, [dispatch]);
 
-  const removeChip = (chip: string) => {
-    console.log("Sono in removeChip");
-    // Identifica quale valore deve essere cancellato in base al chip selezionato
-    const newFormValues = { ...formValues };
-
-    if (chip.includes('Programma')) {
-      newFormValues.programma = initialFormValues.programma;
-    } else if (chip.includes('Intervento')) {
-      newFormValues.intervento = initialFormValues.intervento;
-    } else if (chip.includes('Progetto')) {
-      newFormValues.progetto = initialFormValues.progetto;
-    } else if (chip.includes('Periodo')) {
-      newFormValues.dataInizio = initialFormValues.dataInizio;
-      newFormValues.dataFine = initialFormValues.dataFine;
-    } else if (chip.includes('Ente')) {
-      newFormValues.ente = initialFormValues.ente;
-    }
-
-    // Aggiorna i valori del form
-    setFormValues(newFormValues);
-
-    // Rimuove la chip e aggiorna lo stato
-    setChips((prevChips) => prevChips.filter((c) => c !== chip));
-  };
-
 
   useEffect(() => {
     if (dropdownFilterOptions['programmi']) {
@@ -393,22 +369,6 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
         </Button>
       </Form.Row>
 
-      <Form.Row 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>
-        ))}
-      </Form.Row>
 
     </Form>
   );