From e090047a6f075a3eec22f21c2aa58885ae2d6557 Mon Sep 17 00:00:00 2001 From: "DIR\\niccolo.valente" Date: Fri, 1 Jul 2022 12:19:41 +0200 Subject: [PATCH] feat(fe-piattaforma): fix and improvements on programs and projects sections --- fe-piattaforma/mock/listaQuestionari.json | 2 +- .../components/EmptySection/emptySection.tsx | 9 +- .../components/Table/view/tableDesktop.tsx | 2 +- .../Entities/Authorities/authorities.tsx | 2 +- .../Entities/Programs/programs.tsx | 15 +- .../Entities/Programs/programsDetails.tsx | 357 +++++++++++++----- .../Entities/Projects/projects.tsx | 2 +- .../Entities/Projects/projectsDetails.tsx | 340 +++++++++++------ .../Entities/Services/services.tsx | 2 +- .../Entities/Users/users.tsx | 2 +- .../AdministrativeArea/Entities/utils.ts | 9 +- .../pages/administrator/CitizensArea/utils.ts | 2 + .../administrator/Dashboard/dashboard.scss | 2 +- .../src/pages/forms/formAuthorities.tsx | 32 +- .../forms/formPrograms/formGeneralInfo.tsx | 32 +- .../formPrograms/targetDateFormPrograms.tsx | 2 +- fe-piattaforma/src/utils/mockHelper.ts | 12 +- 17 files changed, 560 insertions(+), 264 deletions(-) diff --git a/fe-piattaforma/mock/listaQuestionari.json b/fe-piattaforma/mock/listaQuestionari.json index f5adee44f..fe3948a3d 100644 --- a/fe-piattaforma/mock/listaQuestionari.json +++ b/fe-piattaforma/mock/listaQuestionari.json @@ -8,7 +8,7 @@ "descrizione": "Descrizione 1", "id": "1", "nome": "Questionario 1", - "stato": "ATTIVO" + "stato": "NON ATTIVO" }, { "dataUltimaModifica": "2022-06-27T12:49:26.762Z", diff --git a/fe-piattaforma/src/components/EmptySection/emptySection.tsx b/fe-piattaforma/src/components/EmptySection/emptySection.tsx index efb26b31e..8af6cfcef 100644 --- a/fe-piattaforma/src/components/EmptySection/emptySection.tsx +++ b/fe-piattaforma/src/components/EmptySection/emptySection.tsx @@ -28,9 +28,12 @@ const EmptySection: React.FC = ({ 'w-100' )} > - -

{title || 'Questa sezione è ancora vuota'}

- {subtitle &&

{subtitle}

} + +

{title || 'Questa sezione è ancora vuota'}

+ {subtitle &&

{subtitle}

} {buttons && } ); diff --git a/fe-piattaforma/src/components/Table/view/tableDesktop.tsx b/fe-piattaforma/src/components/Table/view/tableDesktop.tsx index 92d9d31d2..e7fcfbeb2 100644 --- a/fe-piattaforma/src/components/Table/view/tableDesktop.tsx +++ b/fe-piattaforma/src/components/Table/view/tableDesktop.tsx @@ -103,7 +103,7 @@ const TableDesktop: React.FC = (props) => { ))} {onActionClick ? ( - +
{ /* {...ctaProgetti} cta={newGestoreProgetto} */ > -
+
{ const { pageNumber } = pagination; const getAllFilters = () => { - dispatch( - GetEntityFilterValues({ entity, dropdownType: 'stati' }) - ); - dispatch( - GetEntityFilterValues({ entity, dropdownType: 'policies' }) - ); + dispatch(GetEntityFilterValues({ entity, dropdownType: 'stati' })); + dispatch(GetEntityFilterValues({ entity, dropdownType: 'policies' })); }; useEffect(() => { @@ -134,16 +130,13 @@ const Programs = () => { ); }; - const handleDropdownFilters = ( - values: FilterI[], - filterKey: string, - ) => { + const handleDropdownFilters = (values: FilterI[], filterKey: string) => { dispatch(setEntityFilters({ [filterKey]: [...values] })); }; const handleOnSearchDropdownOptions = ( searchValue: formFieldI['value'], - filterId: string, + filterId: string ) => { const searchDropdownValues = [...searchDropdown]; if ( diff --git a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Programs/programsDetails.tsx b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Programs/programsDetails.tsx index ed119021a..5fa594e2a 100644 --- a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Programs/programsDetails.tsx +++ b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Programs/programsDetails.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; -import { Nav } from 'design-react-kit'; +import { Icon, Nav } from 'design-react-kit'; import { closeModal, openModal, @@ -27,13 +27,17 @@ import { import { selectAuthorities, selectPrograms, + selectSurveys, } from '../../../../../redux/features/administrativeArea/administrativeAreaSlice'; -import { NavLink } from '../../../../../components'; +import { EmptySection, NavLink } from '../../../../../components'; import ProgramlInfoAccordionForm from '../../../../forms/formPrograms/ProgramAccordionForm/ProgramInfoAccordionForm'; import FormAuthorities from '../../../../forms/formAuthorities'; import ManageDelegate from '../modals/manageDelegate'; import ManageReferal from '../modals/manageReferal'; +import { GetAllSurveys } from '../../../../../redux/features/administrativeArea/surveys/surveysThunk'; +import ManageProject from '../modals/manageProject'; import { DeleteEntity } from '../../../../../redux/features/administrativeArea/administrativeAreaThunk'; +import { GetProgramDetail } from '../../../../../redux/features/administrativeArea/programs/programsThunk'; const tabs = { INFO: 'info', @@ -45,12 +49,15 @@ const tabs = { const ProgramsDetails: React.FC = () => { const { mediaIsDesktop } = useAppSelector(selectDevice); const programma = useAppSelector(selectPrograms); + const surveyList = useAppSelector(selectSurveys).list; + const progettiList = programma.detail?.progetti; const authorityInfo = useAppSelector(selectAuthorities)?.detail || {}; const dispatch = useDispatch(); const [deleteText, setDeleteText] = useState(''); const [editItemModalTitle, setEditItemModalTitle] = useState(''); const [activeTab, setActiveTab] = useState(tabs.INFO); const [currentForm, setCurrentForm] = useState(); + const [emptySection, setEmptySection] = useState(); const [currentModal, setCorrectModal] = useState(); const [itemList, setItemList] = useState(); const [itemAccordionList, setItemAccordionList] = useState< @@ -77,11 +84,15 @@ const ProgramsDetails: React.FC = () => { */ const { entityId } = useParams(); // TODO remove mock - const { nomeBreve, stato = 'ATTIVO' } = - programma?.detail?.dettagliInfoProgramma || {}; + const programDetails = + useAppSelector(selectPrograms).detail?.dettagliInfoProgramma || {}; useEffect(() => { - if (entityId && nomeBreve) { + if (entityId) dispatch(GetProgramDetail(entityId)); + }, [entityId]); + + useEffect(() => { + if (entityId && programDetails) { dispatch( updateBreadcrumb([ { @@ -95,14 +106,14 @@ const ProgramsDetails: React.FC = () => { link: true, }, { - label: nomeBreve, + label: programDetails.nomeBreve, url: `/area-amministrativa/programmi/${entityId}`, link: false, }, ]) ); } - }, [entityId, nomeBreve]); + }, [entityId, programDetails]); const onActionClickReferenti: CRUDActionsI = { [CRUDActionTypes.VIEW]: (td: TableRowI | string) => { @@ -156,6 +167,178 @@ const ProgramsDetails: React.FC = () => { const projectRef = useRef(null); const infoRef = useRef(null); + const AuthoritySection = () => { + if (entityId) { + setModalIdToOpen(formTypes.ENTE_GESTORE_PROGRAMMA), + setDeleteText( + 'Confermi di voler eliminare questo gestore di programs?' + ), + setEditItemModalTitle('Modifica ente gestore programs'), + setCurrentForm( + + ), + setCorrectModal(), + setItemList(null), + setCorrectButtons([ + { + size: 'xs', + color: 'primary', + text: 'Elimina', + onClick: () => dispatch(openModal({ id: 'confirmDeleteModal' })), + }, + { + size: 'xs', + outline: true, + color: 'primary', + text: ' Modifica', + onClick: () => + dispatch( + openModal({ + id: formTypes.ENTE_GESTORE_PROGRAMMA, + payload: { title: 'Modifica ente gestore programma' }, + }) + ), + }, + ]), + setItemAccordionList([ + { + title: 'Referenti', + items: + authorityInfo?.referenti?.map( + (ref: { [key: string]: string }) => ({ + ...ref, + actions: onActionClickReferenti, + }) + ) || [], + }, + { + title: 'Delegati', + items: + authorityInfo?.delegati?.map( + (del: { [key: string]: string }) => ({ + ...del, + actions: onActionClickDelegati, + }) + ) || [], + }, + ]); + setEmptySection(undefined); + } else { + return ( + setCurrentForm(undefined), + setCorrectButtons([]), + setItemAccordionList([]), + setEmptySection( + + ) + ); + } + }; + + const getListaQuestionari = () => { + dispatch(GetAllSurveys()); + }; + + useEffect(() => { + getListaQuestionari(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeTab === tabs.QUESTIONARI]); + + const SurveyListSection = () => { + setCorrectModal(undefined); + setItemAccordionList(null); + setCurrentForm(undefined); + if (surveyList?.length) { + setItemList({ + items: [ + { + nome: 'Questionario 1', + stato: 'active', + actions: onActionClickQuestionari, + id: 'questionario', + }, + { + nome: 'Questionario 2', + stato: 'active', + actions: onActionClickQuestionari, + id: 'questionario2', + }, + ], + }), + setCorrectButtons([ + { + size: 'xs', + color: 'primary', + text: 'Elimina', + onClick: () => dispatch(openModal({ id: 'confirmDeleteModal' })), + }, + { + size: 'xs', + outline: true, + color: 'primary', + text: ' Modifica', + onClick: () => + dispatch( + openModal({ + id: formTypes.ENTE_GESTORE_PROGRAMMA, + payload: { title: 'Modifica ente gestore programma' }, + }) + ), + }, + ]); + setEmptySection(undefined); + } else { + setItemList(undefined), + setCorrectButtons([]), + setEmptySection( + + ); + } + }; + + const ProjectsSection = () => { + setCorrectModal(undefined); + setItemAccordionList(null); + setCurrentForm(undefined); + if (progettiList?.length) { + progettiList?.map( + (progetto: { id: string; nome: string; stato: string }) => ({ + ...progetto, + fullInfo: { id: progetto.id }, + actions: onActionClickProgetti, + }), + setItemList({ + items: [...progettiList], + }) + ); + setEmptySection(undefined); + } else { + setEmptySection( + + ), + setItemList({ + items: [], + }); + } + }; + useEffect(() => { scrollTo(0, 0); centerActiveItem(); @@ -278,6 +461,39 @@ const ProgramsDetails: React.FC = () => { } }, [location]); + const EmptySectionButtons: ButtonInButtonsBar[] = [ + { + size: 'xs', + color: 'primary', + text: 'Aggiungi un nuovo Questionario', + onClick: () => console.log('crea questionario'), + }, + { + size: 'xs', + color: 'primary', + text: 'Aggiungi Ente gestore di Programma', + onClick: () => + dispatch( + openModal({ + id: 'ente-gestore-programma', + payload: { title: 'Aggiungi Ente gestore Programma' }, + }) + ), + }, + { + size: 'xs', + color: 'primary', + text: 'Aggiungi un nuovo Progetto', + onClick: () => + dispatch( + openModal({ + id: formTypes.PROGETTO, + payload: { title: 'Aggiungi Progetto' }, + }) + ), + }, + ]; + useEffect(() => { switch (activeTab) { case tabs.INFO: @@ -290,94 +506,14 @@ const ProgramsDetails: React.FC = () => { setItemList(null); break; case tabs.ENTE: - setModalIdToOpen(formTypes.ENTE_GESTORE_PROGRAMMA); - setDeleteText( - 'Confermi di voler eliminare questo gestore di programs?' - ); - setEditItemModalTitle('Modifica ente gestore programs'); - setCurrentForm( - - ); - setCorrectModal(); - setItemList(null); - setCorrectButtons([ - { - size: 'xs', - outline: true, - color: 'primary', - text: 'Elimina', - onClick: () => dispatch(openModal({ id: 'confirmDeleteModal' })), - }, - { - size: 'xs', - outline: true, - color: 'primary', - text: ' Modifica', - onClick: () => - dispatch( - openModal({ - id: formTypes.ENTE_GESTORE_PROGRAMMA, - payload: { title: 'Modifica ente gestore programma' }, - }) - ), - }, - ]); - setItemAccordionList([ - { - title: 'Referenti', - items: - authorityInfo?.referenti?.map( - (ref: { [key: string]: string }) => ({ - ...ref, - actions: onActionClickReferenti, - }) - ) || [], - }, - { - title: 'Delegati', - items: - authorityInfo?.delegati?.map( - (del: { [key: string]: string }) => ({ - ...del, - actions: onActionClickDelegati, - }) - ) || [], - }, - ]); + AuthoritySection(); break; case tabs.QUESTIONARI: - // eslint-disable-next-line no-case-declarations - setCurrentForm(undefined); - setCorrectModal(undefined); - if (!radioButtonsSurveys) { - setSurveyDefault({ - items: itemMock.filter((item) => item.default === true), - }); - setItemList({ - items: itemMock.filter((item) => item.default === false), - }); - } - - setItemAccordionList(null); + SurveyListSection(); break; case tabs.PROGETTI: // eslint-disable-next-line no-case-declarations - const progettiList = programma.detail?.progetti?.map( - (progetto: { id: string; nome: string; stato: string }) => ({ - ...progetto, - fullInfo: { id: progetto.id }, - actions: onActionClickProgetti, - }) - ); - setCurrentForm(undefined); - setCorrectModal(undefined); - setItemList({ - items: [...(progettiList || [])], - }); - setItemAccordionList(null); + ProjectsSection(); break; default: return; @@ -386,7 +522,7 @@ const ProgramsDetails: React.FC = () => { }, [ activeTab, mediaIsDesktop, - programma, + programDetails, authorityInfo, surveyDefault?.items[0].id, ]); @@ -435,7 +571,14 @@ const ProgramsDetails: React.FC = () => { to={`/area-amministrativa/programmi/${entityId}/${tabs.ENTE}`} active={activeTab === tabs.ENTE} > - Ente gestore + {!entityId ? ( +
+ * Ente gestore + +
+ ) : ( + 'Ente gestore' + )}
  • @@ -443,7 +586,14 @@ const ProgramsDetails: React.FC = () => { to={`/area-amministrativa/programmi/${entityId}/${tabs.QUESTIONARI}`} active={activeTab === tabs.QUESTIONARI} > - Questionari + {!surveyList?.length ? ( +
    + * Questionari + +
    + ) : ( + 'Questionari' + )}
  • @@ -451,7 +601,14 @@ const ProgramsDetails: React.FC = () => { active={activeTab === tabs.PROGETTI} to={`/area-amministrativa/programmi/${entityId}/${tabs.PROGETTI}`} > - Progetti + {!progettiList?.length ? ( +
    + * Progetti + +
    + ) : ( + 'Progetti' + )}
    • @@ -485,8 +642,8 @@ const ProgramsDetails: React.FC = () => { { onChangeSurveyDefault(surveyCheckedId) } > - {currentForm} + <> + {currentForm} + {emptySection} + {currentModal ? currentModal : null} { }} text={deleteText} /> + + + ); }; diff --git a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Projects/projects.tsx b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Projects/projects.tsx index fbfe2371c..8fc222add 100644 --- a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Projects/projects.tsx +++ b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Projects/projects.tsx @@ -225,7 +225,7 @@ const Projects: React.FC = () => { dropdowns={dropdowns} filtersList={filtersList} > -
    +
    { const { mediaIsDesktop, mediaIsPhone } = useAppSelector(selectDevice); const progetti = useAppSelector(selectProjects); + const managingAuthorityID = progetti.detail?.idEnteGestoreProgetto; + const PartnerAuthorityList = progetti.detail?.entiPartner; + const headquarterList = progetti.detail?.sedi; const [deleteText, setDeleteText] = useState(''); const [activeTab, setActiveTab] = useState(tabs.INFO); const [currentForm, setCurrentForm] = useState(); const [currentModal, setCorrectModal] = useState(); + const [emptySection, setEmptySection] = useState(); const [itemList, setItemList] = useState(); const [itemAccordionList, setItemAccordionList] = useState< ItemsListI[] | null @@ -145,6 +149,196 @@ const ProjectsDetails = () => { } }, [location]); + const EmptySectionButtons: ButtonInButtonsBar[] = [ + { + size: 'xs', + color: 'primary', + text: 'Aggiungi un nuovo Ente gestore Progetto', + onClick: () => + dispatch( + openModal({ + id: 'ente-gestore-progetto', + payload: { title: 'Aggiungi Ente gestore Progetto' }, + }) + ), + }, + { + size: 'xs', + color: 'primary', + text: 'Aggiungi un nuovo Ente Partner', + onClick: () => + dispatch( + openModal({ + id: 'ente-gestore-progetto', + payload: { title: 'Aggiungi Ente partner' }, + }) + ), + }, + { + size: 'xs', + color: 'primary', + text: 'Aggiungi una nuova Sede', + onClick: () => + dispatch( + openModal({ + id: formTypes.SEDE, + payload: { title: 'Aggiungi Sede' }, + }) + ), + }, + ]; + + const AuthoritySection = () => { + if (managingAuthorityID) { + setButtonsPosition('TOP'); + setDeleteText('Confermi di voler eliminare questo gestore di progetto?'); + setCurrentForm( + + ); + setCorrectModal(); + setItemList(null); + setCorrectButtons([ + { + size: 'xs', + color: 'primary', + text: 'Elimina', + onClick: () => dispatch(openModal({ id: 'confirmDeleteModal' })), + }, + { + size: 'xs', + outline: true, + color: 'primary', + text: ' Modifica', + onClick: () => + dispatch( + openModal({ + id: formTypes.ENTE_GESTORE_PROGETTO, + payload: { title: 'Modifica ente gestore progetto' }, + }) + ), + }, + ]); + setEmptySection(undefined); + } else { + setItemList(null); + setCorrectButtons([]); + setCurrentForm(undefined); + setEmptySection( + + ); + } + }; + + const PartnerAuthoritySection = () => { + if (PartnerAuthorityList?.length) { + PartnerAuthorityList?.map( + (ente: { id: string; nome: string; ref: string; stato: string }) => ({ + ...ente, + fullInfo: { ref: ente.ref }, + actions: onActionClickEntiPartner, + }) + ), + setButtonsPosition('BOTTOM'); + setCurrentForm(undefined); + setCorrectModal(); + setItemList({ + items: [...PartnerAuthorityList], + }); + setItemAccordionList(null); + setCorrectButtons([ + { + size: 'xs', + color: 'primary', + text: 'Carica lista enti partner', + onClick: () => console.log('carica lista enti partner'), + }, + { + size: 'xs', + outline: true, + color: 'primary', + + text: ' Aggiungi Ente partner', + onClick: () => + dispatch( + openModal({ + id: formTypes.ENTE_PARTNER, + payload: { title: 'Aggiungi ente partner' }, + }) + ), + }, + ]); + setEmptySection(undefined); + } else { + setItemAccordionList(null); + setCurrentForm(undefined); + setItemList(null); + setCorrectButtons([]); + setEmptySection( + + ); + } + }; + + const HeadquartersSection = () => { + if (headquarterList?.length) { + headquarterList?.map( + (sede: { id: string; nome: string; stato: string }) => ({ + ...sede, + actions: onActionClickSede, + }) + ); + setButtonsPosition('BOTTOM'); + setCurrentForm(undefined); + setCorrectModal(); + setItemList({ + items: [...headquarterList], + }); + setItemAccordionList(null); + setCorrectButtons([ + { + size: 'xs', + outline: true, + color: 'primary', + + text: ' Aggiungi sede', + onClick: () => + dispatch( + openModal({ + id: formTypes.SEDE, + payload: { title: 'Sede' }, + }) + ), + }, + ]); + setEmptySection(undefined); + } else { + setItemAccordionList(null); + setCurrentForm(undefined); + setItemList(null); + setCorrectButtons([]); + setEmptySection( + + ); + } + }; + const replaceLastUrlSection = (tab: string): string => { const { pathname } = location; const splitLocation = pathname.split('/'); @@ -168,7 +362,14 @@ const ProjectsDetails = () => { to={replaceLastUrlSection(tabs.ENTE_GESTORE)} active={activeTab === tabs.ENTE_GESTORE} > - Ente gestore + {!managingAuthorityID ? ( +
    + * Ente gestore + +
    + ) : ( + 'Ente gestore' + )}
  • @@ -176,7 +377,14 @@ const ProjectsDetails = () => { to={replaceLastUrlSection(tabs.ENTI_PARTNER)} active={activeTab === tabs.ENTI_PARTNER} > - Enti partner + {!PartnerAuthorityList?.length ? ( +
    + * Enti Partner + +
    + ) : ( + 'Enti Partner' + )}
  • @@ -184,7 +392,14 @@ const ProjectsDetails = () => { to={replaceLastUrlSection(tabs.SEDI)} active={activeTab === tabs.SEDI} > - Sedi + {!headquarterList?.length ? ( +
    + * Sedi + +
    + ) : ( + 'Sedi' + )}
    • @@ -279,117 +494,13 @@ const ProjectsDetails = () => { ]); break; case tabs.ENTE_GESTORE: - setButtonsPosition('TOP'); - setDeleteText( - 'Confermi di voler eliminare questo gestore di progetto?' - ); - setCurrentForm( - - ); - setCorrectModal(); - setItemList(null); - setCorrectButtons([ - { - size: 'xs', - color: 'primary', - text: 'Elimina', - onClick: () => dispatch(openModal({ id: 'confirmDeleteModal' })), - }, - { - size: 'xs', - outline: true, - color: 'primary', - text: ' Modifica', - onClick: () => - dispatch( - openModal({ - id: formTypes.ENTE_GESTORE_PROGETTO, - payload: { title: 'Modifica ente gestore progetto' }, - }) - ), - }, - ]); + AuthoritySection(); break; case tabs.ENTI_PARTNER: - // eslint-disable-next-line no-case-declarations - const entiPartnerList = - progetti.detail?.entiPartner?.map( - (ente: { - id: string; - nome: string; - ref: string; - stato: string; - }) => ({ - ...ente, - fullInfo: { ref: ente.ref }, - actions: onActionClickEntiPartner, - }) - ) || []; - setButtonsPosition('BOTTOM'); - setCurrentForm(undefined); - setCorrectModal(); - setItemList({ - items: [...entiPartnerList] || [], - }); - setItemAccordionList(null); - setCorrectButtons([ - { - size: 'xs', - color: 'primary', - text: 'Carica lista enti partner', - onClick: () => console.log('carica lista enti partner'), - }, - { - size: 'xs', - outline: true, - color: 'primary', - - text: ' Aggiungi Ente partner', - onClick: () => - dispatch( - openModal({ - id: formTypes.ENTE_PARTNER, - payload: { title: 'Aggiungi ente partner' }, - }) - ), - }, - ]); + PartnerAuthoritySection(); break; case tabs.SEDI: - // eslint-disable-next-line no-case-declarations - const sediList = - progetti.detail?.sedi?.map( - (sede: { id: string; nome: string; stato: string }) => ({ - ...sede, - actions: onActionClickSede, - }) - ) || []; - setButtonsPosition('BOTTOM'); - setCurrentForm(undefined); - setCorrectModal(); - setItemList({ - items: [...sediList], - }); - setItemAccordionList(null); - setCorrectButtons([ - { - size: 'xs', - outline: true, - color: 'primary', - - text: ' Aggiungi sede', - onClick: () => - dispatch( - openModal({ - id: formTypes.SEDE, - payload: { title: 'Sede' }, - }) - ), - }, - ]); + HeadquartersSection(); break; default: return; @@ -420,7 +531,10 @@ const ProjectsDetails = () => { buttonsPosition={buttonsPosition} goBackTitle='Elenco progetti' > - {currentForm} + <> + {currentForm} + {emptySection} + {currentModal ? currentModal : null} { {...servicesCta} cta={newService} > -
    +
    { {...programCta} cta={newProgram} > -
    +
    = ( const formDisabled = !!props.formDisabled; + const newGestoreProgetto = () => { + dispatch( + openModal({ + id: formTypes.ENTE_GESTORE_PROGRAMMA, + payload: { + title: 'Aggiungi Ente gestore di Programma', + }, + }) + ); + }; + + const EmptySectionButton: ButtonInButtonsBar[] = [ + { + size: 'xs', + color: 'primary', + text: 'Aggiungi Ente gestore di Programma', + onClick: () => newGestoreProgetto(), + }, + ]; + const formData: { [key: string]: formFieldI['value'] } | undefined = useAppSelector(selectAuthorities).detail?.info; const dispatch = useDispatch(); + if (formData && !creation) { + ; + } + useEffect(() => { if (!creation) { switch (enteType) { diff --git a/fe-piattaforma/src/pages/forms/formPrograms/formGeneralInfo.tsx b/fe-piattaforma/src/pages/forms/formPrograms/formGeneralInfo.tsx index 53e7d6e22..9821feff4 100644 --- a/fe-piattaforma/src/pages/forms/formPrograms/formGeneralInfo.tsx +++ b/fe-piattaforma/src/pages/forms/formPrograms/formGeneralInfo.tsx @@ -1,13 +1,10 @@ import clsx from 'clsx'; import React, { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { useParams } from 'react-router-dom'; import { Form, Input, Select } from '../../../components'; import withFormHandler, { withFormHandlerProps, } from '../../../hoc/withFormHandler'; import { selectPrograms } from '../../../redux/features/administrativeArea/administrativeAreaSlice'; -import { GetProgramDetail } from '../../../redux/features/administrativeArea/programs/programsThunk'; import { useAppSelector } from '../../../redux/hooks'; import { formFieldI, newForm, newFormField } from '../../../utils/formHelper'; import { RegexpType } from '../../../utils/validator'; @@ -39,20 +36,17 @@ const FormGeneralInfo: React.FC = ( creation = false, intoModal = false, } = props; - const { entityId } = useParams(); + const programDetails: { [key: string]: string } | undefined = + useAppSelector(selectPrograms).detail.dettagliInfoProgramma; const formDisabled = !!props.formDisabled; - const formData: { [key: string]: string } | undefined = - useAppSelector(selectPrograms).detail?.dettagliInfoProgramma; - const dispatch = useDispatch(); - - useEffect(() => { - if (!creation) { - dispatch(GetProgramDetail(entityId || '')); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [creation]); + // useEffect(() => { + // if (!creation) { + // dispatch(GetProgramDetail(entityId || '')); + // } + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [creation]); /* @@ -70,19 +64,17 @@ const FormGeneralInfo: React.FC = ( }, [form]); useEffect(() => { - if (formData && !creation) { - console.log(formData); - + if (programDetails && !creation) { setFormValues( Object.fromEntries( - Object.entries(formData).filter( - ([key, _val]) => !key.includes('Target') + Object.entries(programDetails).filter( + ([key, _val]) => !key.includes('Target') && !key.includes('stato') ) ) ); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formData]); + }, [programDetails]); const onInputDataChange = ( value: formFieldI['value'], diff --git a/fe-piattaforma/src/pages/forms/formPrograms/targetDateFormPrograms.tsx b/fe-piattaforma/src/pages/forms/formPrograms/targetDateFormPrograms.tsx index 52ee6a490..7bb114b26 100644 --- a/fe-piattaforma/src/pages/forms/formPrograms/targetDateFormPrograms.tsx +++ b/fe-piattaforma/src/pages/forms/formPrograms/targetDateFormPrograms.tsx @@ -276,7 +276,7 @@ const TargetDateFormPrograms: React.FC = (props) => { }} col='col-12 col-lg-5' className='pl-lg-3' - key={index} + key={`Data-${index}`} aria-label={`${form?.[row[1]].field}`} /> diff --git a/fe-piattaforma/src/utils/mockHelper.ts b/fe-piattaforma/src/utils/mockHelper.ts index 68215f823..ebfd1b369 100644 --- a/fe-piattaforma/src/utils/mockHelper.ts +++ b/fe-piattaforma/src/utils/mockHelper.ts @@ -26,11 +26,11 @@ export const initMock = (apiInstance: AxiosInstance) => { return [200, response]; });*/ - /*mockInstance.onPost('/progetto/all').reply(async () => { + /* mockInstance.onPost('/progetto/all').reply(async () => { // @ts-ignore const response = await import('/mock/listaProgetti.json'); return [200, response]; - });*/ + }); */ mockInstance.onGet('/ente/all').reply(async () => { // @ts-ignore @@ -56,13 +56,7 @@ export const initMock = (apiInstance: AxiosInstance) => { return [200, response]; }); - mockInstance.onGet('/questionari/all').reply(async () => { - // @ts-ignore - const response = await import('/mock/listaQuestionari.json'); - return [200, response]; - }); - - mockInstance.onPost('/questionari/all').reply(async () => { + mockInstance.onPost('/questionarioTemplate/all').reply(async () => { // @ts-ignore const response = await import('/mock/listaQuestionari.json'); return [200, response];