From 5fcac8924696370a7b881045fe6888f26555da28 Mon Sep 17 00:00:00 2001 From: federico-tocci-dxc Date: Wed, 30 Oct 2024 11:49:14 +0100 Subject: [PATCH] fix(monitoraggio-caricamenti): recupero intervento BE con autoselezionamento e modifiche comportamento chips 20241030 --- .../MonitoraggioCaricamenti/monitoring.tsx | 10 +- .../monitoringSearchFilters.tsx | 127 ++++++++++-------- .../administrativeAreaThunk.ts | 21 +++ fe-piattaforma/src/styles/main.scss | 1 + 4 files changed, 101 insertions(+), 58 deletions(-) diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx index ad8e146b2..c57c7ab4f 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx @@ -106,12 +106,14 @@ const Monitoring: React.FC = ({ handleSearchAfterSingleChipRemoveClick(); }, 1); }; + + const [removeChipCount, setRemoveChipCount] = useState(0); + useEffect(() => { + fetchData(); + }, [removeChipCount]); const handleSearchAfterSingleChipRemoveClick = () => { - const targetElement = document.querySelector('#applicaFiltri') as HTMLButtonElement; - if (targetElement) { - targetElement.click(); - } + setRemoveChipCount(removeChipCount + 1); }; diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx index 278371a99..351f96c78 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx @@ -5,7 +5,7 @@ import { Select as SelectKit } from 'design-react-kit'; import clsx from 'clsx'; import { useDispatch, useSelector } from 'react-redux'; import { selectEntityFiltersOptions } from '../../../redux/features/administrativeArea/administrativeAreaSlice'; -import { GetAllEntityValues, GetProgettiDropdownList, GetProgrammiDropdownList } from '../../../redux/features/administrativeArea/administrativeAreaThunk'; +import { GetAllEntityValues, GetInterventiDropdownList, GetProgettiDropdownList, GetProgrammiDropdownList } from '../../../redux/features/administrativeArea/administrativeAreaThunk'; import './monitoring.scss'; export type OptionType = { @@ -64,7 +64,6 @@ export const initialFormValues = { const MonitoringSearchFilters: React.FC = ({ formValues, setFormValues, onSearch, chips, setChips, isDisabled, setIsDisabled }) => { const [isDateValid, setIsDateValid] = useState<{ dataInizio?: boolean; dataFine?: boolean }>({ dataInizio: true, dataFine: true }); const [shouldSearch, setShouldSearch] = useState(false); - const isCrossButtonClickedRef = useRef(false); const dispatch = useDispatch(); const dropdownFilterOptions = useSelector(selectEntityFiltersOptions); @@ -80,6 +79,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues dispatch(retrieveProgramma); dispatch(retrieveProgetto); dispatch(retrieveEnte); + dispatch(retrieveIntervento); }, [dispatch]); @@ -105,6 +105,24 @@ const MonitoringSearchFilters: React.FC = ({ formValues const [enteMultiOptions, setEnteMultiOptions] = useState([]); + const retrieveIntervento = async (idEnte?: string, idProgramma?: string) => { + const payload = { + filtroRequest: { + ...(idEnte != '' && { idEnte: idEnte }), + ...(idProgramma != '' && { filtroIdsProgrammi: [idProgramma] }), + } + } + try { + const response = await GetInterventiDropdownList(payload)(dispatch); + const mappedInterventoTypes = response.map((intervento: any) => ({ + value: intervento, + label: intervento, + })); + setInterventoTypes(mappedInterventoTypes); + } catch (error) { + console.error("Network error:", error); + } + } const retrieveProgramma = async (policy?: string, idEnte?: string) => { const payload = { @@ -230,9 +248,9 @@ const MonitoringSearchFilters: React.FC = ({ formValues setFormValues(() => ({ ...formValues, [name?.name]: option })); setIsDisabled(false); if (name?.name === 'intervento') { - retrieveProgramma(option.value, formValues.ente.value !== '' ? formValues.ente.value : undefined); - retrieveProgetto(option.value, 0, formValues.ente.value !== '' ? formValues.ente.value : undefined); setFormValues(() => ({ ...formValues, programma: { value: '' }, progetto: { value: '' }, intervento: option })); + retrieveProgramma(option.value, formValues.ente.value !== '' ? formValues.ente.value : undefined); + retrieveProgetto(option.value, Number(formValues.programma.value), formValues.ente.value !== '' ? formValues.ente.value : undefined); } if (name?.name === 'programma') { setFormValues(() => ({ ...formValues, progetto: { value: '', label: 'Seleziona' }, programma: option, intervento: { value: option.policy === RFD ? "RFD" : "SCD", label: option.policy === RFD ? "RFD" : "SCD" } })); @@ -252,61 +270,63 @@ const MonitoringSearchFilters: React.FC = ({ formValues } if (name?.name === 'ente') { retrieveProgramma(formValues.intervento.value, option.value); - retrieveProgetto(formValues.intervento.value, Number(formValues.programma.value), option.value); + retrieveProgetto(formValues.intervento.value, Number(formValues.programma.value), option.value); + retrieveIntervento(option.value, formValues.programma.value); } }; - const getPolicyProgrammi = () => { - const policiesProgrammi = Array.from(new Set(programTypes?.map((program: OptionType) => program.policy))); - const policiesProgetti = Array.from(new Set(projectTypes?.map((project: OptionType) => project.policy))); - let interventi = policiesProgrammi.map((policy) => ({ - value: policy === "Rete dei servizi di Facilitazione Digitale" ? "RFD" : policy === "Servizio Civile Digitale" ? "SCD" : policy || '', - label: policy === "Rete dei servizi di Facilitazione Digitale" ? "RFD" : policy === "Servizio Civile Digitale" ? "SCD" : policy || '', - })); - interventi = interventi.concat( - policiesProgetti.map((policy) => ({ - value: policy || '', - label: policy || '', - })) - ); - - // Remove duplicates - interventi = interventi.filter((intervento, index, self) => - index === self.findIndex((i) => i.value === intervento.value) - ); - setInterventoTypes(interventi); - }; - - useEffect(() => { - getPolicyProgrammi(); - }, [programTypes, projectTypes]); + // const getPolicyProgrammi = () => { + // const policiesProgrammi = Array.from(new Set(programTypes?.map((program: OptionType) => program.policy))); + // const policiesProgetti = Array.from(new Set(projectTypes?.map((project: OptionType) => project.policy))); + // let interventi = policiesProgrammi.map((policy) => ({ + // value: policy === "Rete dei servizi di Facilitazione Digitale" ? "RFD" : policy === "Servizio Civile Digitale" ? "SCD" : policy || '', + // label: policy === "Rete dei servizi di Facilitazione Digitale" ? "RFD" : policy === "Servizio Civile Digitale" ? "SCD" : policy || '', + // })); + // interventi = interventi.concat( + // policiesProgetti.map((policy) => ({ + // value: policy || '', + // label: policy || '', + // })) + // ); + + // // Remove duplicates + // interventi = interventi.filter((intervento, index, self) => + // index === self.findIndex((i) => i.value === intervento.value) + // ); + // setInterventoTypes(interventi); + // }; + + // useEffect(() => { + // getPolicyProgrammi(); + // },[programTypes, projectTypes]); useEffect(() => { retrieveEnte(); }, [formValues.intervento, formValues.programma, formValues.progetto]); - // useEffect(() => { - // const updatedFormValues = { ...formValues }; - - // if (isCrossButtonClickedRef.current) { - // isCrossButtonClickedRef.current = false; - // return; - // } - - // if(isFiltersChanged){ - // if (programTypes?.length === 1) { - // updatedFormValues.programma = programTypes[0]; - // } - // if (projectTypes?.length === 1) { - // updatedFormValues.progetto = projectTypes[0]; - // } - // if (interventoTypes?.length === 1) { - // updatedFormValues.intervento = interventoTypes[0]; - // } - // } - - // setFormValues(updatedFormValues); - // }, [programTypes, projectTypes, interventoTypes]); + useEffect(() => { + const updatedFormValues = { ...formValues }; + if (programTypes?.length === 1) { + updatedFormValues.programma = programTypes[0]; + } + setFormValues(updatedFormValues); + }, [programTypes]); + + useEffect(() => { + const updatedFormValues = { ...formValues }; + if (projectTypes?.length === 1) { + updatedFormValues.progetto = projectTypes[0]; + } + setFormValues(updatedFormValues); + }, [projectTypes]); + + useEffect(() => { + const updatedFormValues = { ...formValues }; + if (interventoTypes?.length === 1) { + updatedFormValues.intervento = interventoTypes[0]; + } + setFormValues(updatedFormValues); + }, [interventoTypes]); const handleClearForm = () => { setFormValues(initialFormValues); @@ -316,6 +336,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues dispatch(retrieveProgramma); dispatch(retrieveProgetto); dispatch(retrieveEnte); + dispatch(retrieveIntervento) setShouldSearch(true); }; @@ -329,13 +350,11 @@ const MonitoringSearchFilters: React.FC = ({ formValues const [enteInputValue, setEnteInputValue] = useState(''); const handleCrossButtonClick = () => { - if (formValues.ente.value !== '') { setFormValues(() => ({ ...formValues, ente: { value: '', label: 'Inizia a scrivere il nome dell\'ente' }, intervento: { value: '', label: 'Seleziona' }, programma: { value: '', label: 'Seleziona' }, progetto: { value: '', label: 'Seleziona' } })); setEnteInputValue(''); dispatch(retrieveProgramma); dispatch(retrieveProgetto); - isCrossButtonClickedRef.current = true; - } + dispatch(retrieveIntervento); }; const renderSelect = ( diff --git a/fe-piattaforma/src/redux/features/administrativeArea/administrativeAreaThunk.ts b/fe-piattaforma/src/redux/features/administrativeArea/administrativeAreaThunk.ts index 937907d9d..3f3e19e73 100644 --- a/fe-piattaforma/src/redux/features/administrativeArea/administrativeAreaThunk.ts +++ b/fe-piattaforma/src/redux/features/administrativeArea/administrativeAreaThunk.ts @@ -165,6 +165,27 @@ export const GetEntityValues = } }; + export const GetInterventiDropdownList = + (payload?: any) => async (dispatch: Dispatch) => { + try { + //dispatch(showLoader()); + dispatch({ ...GetValuesAction, payload }); + const endpoint = `/progetto/policies/programmi/dropdown`; + const res = await API.post(endpoint, payload, { + headers: { + 'Content-Type': 'application/json', + }, + }); + if (res?.data) { + return res.data; + } + } catch (error) { + console.log('GetInterventiDropdownList error', error); + } finally { + //dispatch(hideLoader()); + } + }; + export const GetProgrammiDropdownList = (payload?: any) => async (dispatch: Dispatch) => { diff --git a/fe-piattaforma/src/styles/main.scss b/fe-piattaforma/src/styles/main.scss index 08eb53340..703c68ed4 100644 --- a/fe-piattaforma/src/styles/main.scss +++ b/fe-piattaforma/src/styles/main.scss @@ -68,5 +68,6 @@ select:-webkit-autofill:focus { input[type="date"]::-webkit-calendar-picker-indicator { content: url('../../public/assets/img/it-calendar-primary.png'); background: none; + margin-right: -13px; transform: scale(1.2); } \ No newline at end of file