Skip to content

Commit

Permalink
feat(monitoraggio-caricamenti): cambiato comportamento chip 20241021
Browse files Browse the repository at this point in the history
  • Loading branch information
@lcucuzzella
lcucuzzella committed Oct 21, 2024
1 parent d3869a4 commit eb4d8a0
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 46 deletions.
5 changes: 5 additions & 0 deletions fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,9 @@ input#dateInputDataFine {

#dateInputDataFineDescription {
color: red !important;
}

.clearAllChips{
color: #0066CC !important;
text-decoration: underline !important;
}
122 changes: 80 additions & 42 deletions fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ 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 {
formDisabled?: boolean;
creation?: boolean;
}

interface MonitoringI extends withFormHandlerProps, MonitoringFormI {}
interface MonitoringI extends withFormHandlerProps, MonitoringFormI { }

// interface CaricamentiResponse {
// cittadiniCaricati: number;
Expand All @@ -52,17 +52,17 @@ 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(() => {
fetchData();
}, [dispatch]);

const removeChip = (chip: string) => {
console.log("Sono in removeChip");
// Identifica quale valore deve essere cancellato in base al chip selezionato
const newFormValues = { ...formValues };

Expand All @@ -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) }),
Expand All @@ -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]);
Expand All @@ -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)
Expand Down Expand Up @@ -187,41 +210,56 @@ const Monitoring: React.FC<MonitoringI> = ({
},
};

const setFormValuesFunction = (formValues : any) => {
const setFormValuesFunction = (formValues: any) => {
setFormValues(formValues);
}

const setChipsFunction = (chips: string[]) => {
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 />
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} 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">
Expand Down
11 changes: 7 additions & 4 deletions fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ interface MonitoringSearchFilterI {
setFormValues: (formValues: any) => void;
chips: string[];
setChips: (chips: string[]) => void;
areChipsVisible?: boolean;
setChipsVisible: (areChipVisible: boolean) => void;
}

type DateField = {
Expand Down Expand Up @@ -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[]>();

Expand Down Expand Up @@ -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('');
Expand Down Expand Up @@ -307,6 +309,7 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues

function handleSubmitFiltri(): void {
onSearch();
setChipsVisible(true);
}

return (
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit eb4d8a0

Please sign in to comment.