From 5bf0ebcee76bab6febc2c98e7052e2a2f7c9affc Mon Sep 17 00:00:00 2001 From: lcucuzzella Date: Wed, 30 Oct 2024 11:31:28 +0100 Subject: [PATCH] fix(monitoraggio-caricamenti): aggiornato comportamento sezione filtri 20241030 --- .../MonitoraggioCaricamenti/monitoring.scss | 4 + .../MonitoraggioCaricamenti/monitoring.tsx | 8 +- .../monitoringSearchFilters.tsx | 105 +++++++++--------- 3 files changed, 65 insertions(+), 52 deletions(-) diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss index 0f421b507..840ccd6d4 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss @@ -304,3 +304,7 @@ input[id^="react-select-"] { opacity: 0; } } + +.bootstrap-select__single-value{ + color:#0066CC !important +} diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx index ee47b6160..ad8e146b2 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx @@ -52,6 +52,7 @@ const Monitoring: React.FC = ({ const [statisticheElaborate, setStatisticheElaborate] = useState([]); const [formValues, setFormValues] = useState(initialFormValues); const [chips, setChips] = useState([]); + const [isDisabled, setIsDisabled] = useState(true); useEffect(() => { dispatch(setEntityPagination({ pageSize: 10 })); @@ -88,9 +89,14 @@ const Monitoring: React.FC = ({ //Aspette 1ms e clicca il bottone #applicaFiltri setTimeout(() => { handleSearchAfterSingleChipRemoveClick(); + setIsDisabled(true); }, 1); }; + const changeIsDisabled = (value: boolean) => { + setIsDisabled(value); + } + const handleClearAllClick = () => { const targetElement = document.querySelector('#cancellaFiltri') as HTMLButtonElement; if (targetElement) { @@ -227,7 +233,7 @@ const Monitoring: React.FC = ({
- +
diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx index da40d1f7c..4599bdc60 100644 --- a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx +++ b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx @@ -23,6 +23,8 @@ interface MonitoringSearchFilterI { setFormValues: (formValues: any) => void; chips: string[]; setChips: (chips: string[]) => void; + isDisabled: boolean; + setIsDisabled: (isDisabled: boolean) => void; } type DateField = { @@ -60,14 +62,13 @@ export const initialFormValues = { } as DateField, }; -const MonitoringSearchFilters: React.FC = ({ formValues, setFormValues, onSearch, chips, setChips }) => { +const MonitoringSearchFilters: React.FC = ({ formValues, setFormValues, onSearch, chips, setChips, isDisabled, setIsDisabled }) => { const [isDateValid, setIsDateValid] = useState<{ dataInizio?: boolean; dataFine?: boolean }>({ dataInizio: true, dataFine: true }); - const [isFiltersChanged, setIsFiltersChanged] = useState(false); // Nuovo stato per monitorare le modifiche const [shouldSearch, setShouldSearch] = useState(false); const isCrossButtonClickedRef = useRef(false); const dispatch = useDispatch(); const dropdownFilterOptions = useSelector(selectEntityFiltersOptions); - + const [programTypes, setProgramTypes] = useState(); const [projectTypes, setProjectTypes] = useState(); @@ -114,7 +115,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues } } try { - const response = await GetProgrammiDropdownList(payload)(dispatch); + const response = await GetProgrammiDropdownList(payload)(dispatch); const mappedProgramTypes = response.map((program: any) => ({ value: program.id, label: program.nome, @@ -149,27 +150,27 @@ const MonitoringSearchFilters: React.FC = ({ formValues } }; - const retrieveEnte = async () => { + const retrieveEnte = async () => { const payload = { filtroRequest: { - ...(formValues.intervento.value != '' && { filtroPolicies: [formValues.intervento.value] }), - ...(formValues.programma.value != '' && { idsProgrammi: [formValues.programma.value] }), - ...(formValues.progetto.value != '' && { idsProgetti: [formValues.progetto.value] }), + ...(formValues.intervento.value != '' && { filtroPolicies: [formValues.intervento.value] }), + ...(formValues.programma.value != '' && { idsProgrammi: [formValues.programma.value] }), + ...(formValues.progetto.value != '' && { idsProgetti: [formValues.progetto.value] }), } } - try{ - const response = await GetAllEntityValues(payload)(dispatch); - if(response != undefined){ + try { + const response = await GetAllEntityValues(payload)(dispatch); + if (response != undefined) { const mappedEnteOptions = response.map((ente: any) => ({ value: ente.id.toString(), label: ente.nome, - })); + })); setEnteMultiOptions(mappedEnteOptions); } - }catch(error){ + } catch (error) { console.error("Error:", error); } - + } useEffect(() => { @@ -180,7 +181,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues dataFine: { value: today, minimum: today }, })); }, []); - + const handleDateInputChange = (value: any, field: string) => { const formattedDate = typeof value === 'string' ? value : new Date(value).toISOString().split('T')[0]; @@ -213,7 +214,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues dataInizio: { ...formValues.dataInizio, maximum: formattedDate }, }; } - setIsFiltersChanged(true); // Imposta a true quando l'utente cambia i filtri + setIsDisabled(false); // Imposta a true quando l'utente cambia i filtri return newForm; }); }; @@ -228,29 +229,31 @@ const MonitoringSearchFilters: React.FC = ({ formValues const handleSelectChange = (option: OptionType, name: any) => { setFormValues(() => ({ ...formValues, [name?.name]: option })); - setIsFiltersChanged(true); + 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 })); } 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" } })); + setFormValues(() => ({ ...formValues, progetto: { value: '', label: 'Seleziona' }, programma: option, intervento: { value: option.policy === RFD ? "RFD" : "SCD", label: option.policy === RFD ? "RFD" : "SCD" } })); if (formValues.intervento.value.length > 0) retrieveProgetto(formValues.intervento.value, Number(option.value), formValues.ente.value !== '' ? formValues.ente.value : undefined); else retrieveProgetto('', Number(option.value), formValues.ente.value !== '' ? formValues.ente.value : undefined); } - if(name?.name === 'progetto'){ + if (name?.name === 'progetto') { const programLabel = option.idProgramma ? getProgramLabelById(option.idProgramma) : '-'; - if(programLabel !== '-'){ - setFormValues(() => ({ ...formValues, progetto: option, intervento: { value: option.policy, label: option.policy}, - programma: { value: option.idProgramma, label: programLabel } })); + if (programLabel !== '-') { + setFormValues(() => ({ + ...formValues, progetto: option, intervento: { value: option.policy, label: option.policy }, + programma: { value: option.idProgramma, label: programLabel } + })); } } - if(name?.name === 'ente'){ + if (name?.name === 'ente') { retrieveProgramma(formValues.intervento.value, option.value); - retrieveProgetto(formValues.intervento.value, 0, option.value); + retrieveProgetto(formValues.intervento.value, 0, option.value); } }; @@ -263,8 +266,8 @@ const MonitoringSearchFilters: React.FC = ({ formValues })); interventi = interventi.concat( policiesProgetti.map((policy) => ({ - value: policy || '', - label: policy || '', + value: policy || '', + label: policy || '', })) ); @@ -277,7 +280,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues useEffect(() => { getPolicyProgrammi(); - },[programTypes, projectTypes]); + }, [programTypes, projectTypes]); useEffect(() => { retrieveEnte(); @@ -285,7 +288,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues // useEffect(() => { // const updatedFormValues = { ...formValues }; - + // if (isCrossButtonClickedRef.current) { // isCrossButtonClickedRef.current = false; // return; @@ -302,7 +305,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues // updatedFormValues.intervento = interventoTypes[0]; // } // } - + // setFormValues(updatedFormValues); // }, [programTypes, projectTypes, interventoTypes]); @@ -310,7 +313,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues setFormValues(initialFormValues); setIsDateValid({ dataInizio: true, dataFine: true }); setChips([]); - setIsFiltersChanged(false); + setIsDisabled(true); dispatch(retrieveProgramma); dispatch(retrieveProgetto); dispatch(retrieveEnte); @@ -327,7 +330,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues const [enteInputValue, setEnteInputValue] = useState(''); const handleCrossButtonClick = () => { - if(formValues.ente.value !== ''){ + 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); @@ -385,8 +388,8 @@ const MonitoringSearchFilters: React.FC = ({ formValues { 'deleteArrowInSelect': isDisabled || isSearchable || !isSearchable, 'customArrowSelect': !isSearchable && !isDisabled, - 'customCrossSelect': isSearchable, - 'customCrossSelectDisabled': isSearchable && isDisabled + 'customCrossSelect': isSearchable && formValues.ente.value !== '', + 'customCrossSelectDisabled': isSearchable && formValues.ente.value === '' }, 'col-12 pl-0' )} @@ -398,11 +401,11 @@ const MonitoringSearchFilters: React.FC = ({ formValues isSearchable={isSearchable} openMenuOnClick={!isSearchable} {...(isSearchable && { menuIsOpen: enteInputValue.length > 3 })} - {...(isSearchable && { noOptionsMessage: () => 'Non ci sono opzioni per questo filtro'})} + {...(isSearchable && { noOptionsMessage: () => 'Non ci sono opzioni per questo filtro' })} onInputChange={(value) => setEnteInputValue(value)} /> - {isSearchable && ( -
@@ -420,7 +423,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues setChips([]); } }, [formValues.dataInizio.value, formValues.dataFine.value]); - + function handleSubmitFiltri(): void { const newChips: string[] = []; @@ -441,12 +444,12 @@ const MonitoringSearchFilters: React.FC = ({ formValues if (formValues.ente.value) { newChips.push(`Ente: ${formValues.ente.label}`); } - console.log("formValues", formValues); - + console.log("formValues", formValues); + setChips(newChips); onSearch(); } - + return (
@@ -458,7 +461,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues - {renderSelect('programma', 'Programma', (programTypes || []).map((type: any) => ({ + {renderSelect('programma', 'Programma', (programTypes || []).map((type: any) => ({ value: type.value, label: type.label, policy: type.policy, @@ -482,10 +485,10 @@ const MonitoringSearchFilters: React.FC = ({ formValues maximum={formValues.dataInizio.maximum} id='dateInputDataInizio' className={ - isDateValid.dataInizio === false - ? 'dateInputDataInizio--isNotValid' - : formValues.dataInizio.value !== '' - ? 'dateInputDataInizio' + isDateValid.dataInizio === false + ? 'dateInputDataInizio--isNotValid' + : formValues.dataInizio.value !== '' + ? 'dateInputDataInizio' : 'dateInputDataInizio--empty' } invalid={isDateValid.dataInizio === false} @@ -500,12 +503,12 @@ const MonitoringSearchFilters: React.FC = ({ formValues maximum={formValues.dataFine.maximum} id='dateInputDataFine' className={ - isDateValid.dataFine === false - ? 'dateInputDataFine--isNotValid' - : formValues.dataFine.value !== '' - ? 'dateInputDataFine' + isDateValid.dataFine === false + ? 'dateInputDataFine--isNotValid' + : formValues.dataFine.value !== '' + ? 'dateInputDataFine' : 'dateInputDataFine--empty' - } + } invalid={isDateValid.dataFine === false} validationText={formValues.dataFine.value !== '' && formValues.dataFine.value < formValues.dataInizio.value ? 'La data di fine non può essere antecedente alla data di inizio' : ''} /> @@ -516,7 +519,7 @@ const MonitoringSearchFilters: React.FC = ({ formValues -