feat(fe-piattaforma): fe updates 07272022 1

fe-piattaforma/mock/listaRuoli.json

@@ -1,22 +1,40 @@
 {
-  "data": {
-    "list": [
-      {
-        "id": 1,
-        "name": "DTD Amministratore"
-      },
-      {
-        "id": 2,
-        "name": "DSCU Referente"
-      },
-      {
-        "id": 3,
-        "name": "DSCU Delegato"
-      },
-      {
-        "id": 4,
-        "name": "Referente ente gestore di programma"
-      }
-    ]
-  }
+  "data": [
+    {
+      "codiceRuolo": "DEG",
+      "nomeRuolo": "DELEGATO ENTE GESTORE PROGRAMMA"
+    },
+    {
+      "codiceRuolo": "DEGP",
+      "nomeRuolo": "DELEGATO ENTE GESTORE PROGETTO"
+    },
+    {
+      "codiceRuolo": "DEPP",
+      "nomeRuolo": "DELEGATO ENTE PARTNER"
+    },
+    {
+      "codiceRuolo": "DSCU",
+      "nomeRuolo": "DSCU"
+    },
+    {
+      "codiceRuolo": "FAC",
+      "nomeRuolo": "FACILITATORE"
+    },
+    {
+      "codiceRuolo": "REG",
+      "nomeRuolo": "REFERENTE ENTE GESTORE PROGRAMMA"
+    },
+    {
+      "codiceRuolo": "REGP",
+      "nomeRuolo": "REFERENTE ENTE GESTORE PROGETTO"
+    },
+    {
+      "codiceRuolo": "REPP",
+      "nomeRuolo": "REFERENTE ENTE PARTNER"
+    },
+    {
+      "codiceRuolo": "VOL",
+      "nomeRuolo": "VOLONTARIO"
+    }
+  ]
 }

fe-piattaforma/src/components/Breadcrumb/breadCrumb.tsx

@@ -40,8 +40,8 @@ const Breadcrumb = () => {
   };
 
   const getLabelBreadcrumb = (pathElem: string) => {
-    if (idsBreadcrumb.filter((x) => x.id.toString() === pathElem)[0]) {
-      return idsBreadcrumb.filter((x) => x.id.toString() === pathElem)[0].nome;
+    if (idsBreadcrumb.filter((x) => x?.id?.toString() === pathElem)[0]) {
+      return idsBreadcrumb.filter((x) => x?.id?.toString() === pathElem)[0].nome;
     } else {
       switch (pathElem) {
         case 'area-amministrativa':

fe-piattaforma/src/components/DetailLayout/detailLayout.tsx

@@ -245,7 +245,7 @@ const DetailLayout: React.FC<DetailLayoutI> = ({
             })
           : null}
 
-        {buttonsPosition === 'BOTTOM' &&
+        {buttonsPosition === 'TOP' &&
         formButtons &&
         formButtons.length !== 0 ? (
           <>
@@ -261,7 +261,9 @@ const DetailLayout: React.FC<DetailLayoutI> = ({
         ) : null}
       </div>
 
-      {buttonsPosition === 'TOP' && formButtons && formButtons.length !== 0 ? (
+      {buttonsPosition === 'BOTTOM' &&
+      formButtons &&
+      formButtons.length !== 0 ? (
         <>
           <div aria-hidden='true' className='mt-5 w-100'>
             <Sticky mode='bottom' stickyClassName='sticky bg-white container'>

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Authorities/authoritiesDetails.tsx

@@ -280,7 +280,7 @@ const AuthoritiesDetails = () => {
             formButtons={buttons}
             itemsList={itemsList}
             itemsAccordionList={itemAccordionList}
-            buttonsPosition='TOP'
+            buttonsPosition='BOTTOM'
             goBackPath={
               projectId
                 ? `/area-amministrativa/progetti/${projectId}/enti-partner`

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Headquarters/HeadquartersDetail/headquartersDetails.tsx

@@ -187,7 +187,7 @@ const HeadquartersDetails = () => {
             }}
             formButtons={buttons}
             itemsAccordionList={itemAccordionList}
-            buttonsPosition='TOP'
+            buttonsPosition='BOTTOM'
           >
             <HeadquarterDetailsContent />
           </DetailLayout>

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Programs/programsDetails.tsx

@@ -282,7 +282,7 @@ const ProgramsDetails: React.FC = () => {
                   // TODO: check when BE add codiceFiscale
                   ...ref,
                   id: ref?.codiceFiscale,
-                  actions: onActionClickReferenti,
+                  actions: ref?.stato === 'ATTIVO' ? { [CRUDActionTypes.VIEW]: onActionClickReferenti[CRUDActionTypes.VIEW] }:onActionClickReferenti,
                 })
               ) || [],
           },
@@ -294,7 +294,7 @@ const ProgramsDetails: React.FC = () => {
                   // TODO: check when BE add codiceFiscale
                   ...del,
                   id: del?.codiceFiscale,
-                  actions: onActionClickDelegati,
+                  actions: del?.stato === 'ATTIVO' ? { [CRUDActionTypes.VIEW]: onActionClickDelegati[CRUDActionTypes.VIEW] }:onActionClickDelegati,
                 })
               ) || [],
           },
@@ -395,7 +395,7 @@ const ProgramsDetails: React.FC = () => {
     setCorrectModal(undefined);
     setItemAccordionList(null);
     setCurrentForm(undefined);
-    setButtonsPosition('TOP');
+    setButtonsPosition('BOTTOM');
     if (surveyList?.length) {
       setSurveyDefault({
         items: [
@@ -479,17 +479,12 @@ const ProgramsDetails: React.FC = () => {
               ...progetto,
               fullInfo: { id: progetto.id },
               actions:
-                progetto?.stato !== 'ATTIVO'
+                progetto?.stato === 'ATTIVO'
                   ? {
                       [CRUDActionTypes.VIEW]:
                         onActionClickProgetti[CRUDActionTypes.VIEW],
-                      [CRUDActionTypes.DELETE]:
-                        onActionClickProgetti[CRUDActionTypes.DELETE],
                     }
-                  : {
-                      [CRUDActionTypes.VIEW]:
-                        onActionClickProgetti[CRUDActionTypes.VIEW],
-                    },
+                  : onActionClickProgetti,
             })
           ),
         });
@@ -729,6 +724,7 @@ const ProgramsDetails: React.FC = () => {
         setCurrentForm(<ProgramlInfoAccordionForm />);
         setCorrectModal(<ManageProgram edit={edit} />);
         setItemAccordionList([]);
+        setButtonsPosition('BOTTOM');
         setItemList(null);
         setCorrectButtons(programInfoButtons());
         setEmptySection(undefined);

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Projects/projectsDetails.tsx

@@ -293,7 +293,7 @@ const ProjectsDetails = () => {
 
   const AuthoritySection = () => {
     if (managingAuthorityID) {
-      setButtonsPosition('TOP');
+      setButtonsPosition('BOTTOM');
       setCurrentForm(
         <FormAuthorities
           formDisabled
@@ -341,7 +341,7 @@ const ProjectsDetails = () => {
                 // TODO: check when BE add codiceFiscale
                 ...ref,
                 id: ref.codiceFiscale,
-                actions: onActionClickReferenti,
+                actions: ref?.stato === 'ATTIVO' ? { [CRUDActionTypes.VIEW]: onActionClickReferenti[CRUDActionTypes.VIEW] }:onActionClickReferenti,
               })
             ) || [],
         },
@@ -353,7 +353,7 @@ const ProjectsDetails = () => {
                 // TODO: check when BE add codiceFiscale
                 ...del,
                 id: del.codiceFiscale,
-                actions: onActionClickDelegati,
+                actions: del?.stato === 'ATTIVO' ? { [CRUDActionTypes.VIEW]: onActionClickDelegati[CRUDActionTypes.VIEW] }:onActionClickDelegati,
               })
             ) || [],
         },
@@ -363,7 +363,7 @@ const ProjectsDetails = () => {
             authorityInfo?.sediGestoreProgetto?.map(
               (sedi: { [key: string]: string }) => ({
                 ...sedi,
-                actions: onActionClickSede,
+                actions: sedi?.stato === 'ATTIVO' ? { [CRUDActionTypes.VIEW]: onActionClickSede[CRUDActionTypes.VIEW] }:onActionClickSede,
               })
             ) || [],
         },
@@ -425,7 +425,7 @@ const ProjectsDetails = () => {
 
   const HeadquartersSection = () => {
     if (headquarterList?.length) {
-      setButtonsPosition('TOP');
+      setButtonsPosition('BOTTOM');
       setCurrentForm(undefined);
       setCorrectModal(<ManageHeadquarter creation />);
       setItemList({
@@ -710,7 +710,7 @@ const ProjectsDetails = () => {
   useEffect(() => {
     switch (activeTab) {
       case tabs.INFO:
-        setButtonsPosition('TOP');
+        setButtonsPosition('BOTTOM');
         setCurrentForm(<ProjectAccordionForm />);
         setCorrectModal(<ManageProject />);
         setItemAccordionList([]);

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Services/servicesDetails.tsx

@@ -243,7 +243,7 @@ const ServicesDetails = () => {
             status: serviceDetails.dettaglioServizio.stato,
             upperTitle: { icon: 'it-calendar', text: 'Servizio' },
           }}
-          buttonsPosition='TOP'
+          buttonsPosition='BOTTOM'
           itemsList={itemList}
           showItemsList={activeTab === tabs.INFO}
           nav={nav}

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Surveys/surveyDetailsEdit/surveyDetailsEdit.tsx

@@ -169,7 +169,7 @@ const SurveyDetailsEdit: React.FC<SurveyDetailsEditI> = ({
           upperTitle: { icon: 'it-file', text: 'Questionario' },
         }}
         formButtons={[]} // TODO?
-        buttonsPosition='TOP'
+        buttonsPosition='BOTTOM'
         goBackTitle='Elenco questionari'
         goBackPath='/area-amministrativa/questionari'
       />

fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/Users/usersDetails.tsx

@@ -52,7 +52,8 @@ const UsersDetails = () => {
         setInfoIdsBreadcrumb({
           id: entityId,
           nome: userRoles?.filter(
-            (rol: { [key: string]: formFieldI['value'] }) => rol.id?.toString() === entityId
+            (rol: { [key: string]: formFieldI['value'] }) =>
+              rol.id?.toString() === entityId
           )[0]?.nome,
         })
       );
@@ -212,7 +213,7 @@ const UsersDetails = () => {
             }}
             formButtons={correctButtons}
             itemsList={itemList}
-            buttonsPosition={'TOP'}
+            buttonsPosition={'BOTTOM'}
             goBackPath='/area-amministrativa/utenti'
           >
             {currentForm}

fe-piattaforma/src/pages/administrator/CitizensArea/Entities/Citizens/citizensDetail.tsx

@@ -79,7 +79,7 @@ const CitizensDetail: React.FC = () => {
           status: '',
           upperTitle: { icon: 'it-user', text: 'Cittadino' },
         }}
-        buttonsPosition='TOP'
+        buttonsPosition='BOTTOM'
         goBackTitle='I miei cittadini'
         goBackPath='/area-cittadini'
         formButtons={citizenButtons}

fe-piattaforma/src/pages/common/RoleManagement/RoleManagementDetails/roleManagementDetails.tsx

@@ -99,7 +99,7 @@ const RolesManagementDetails: React.FC<RoleDetailsI> = (props) => {
             upperTitle: { icon: 'it-settings', text: 'Ruolo' },
           }}
           formButtons={[]}
-          buttonsPosition='TOP'
+          buttonsPosition='BOTTOM'
           goBackTitle='Vai alla Lista Ruoli'
         />
         <Form className='mt-4'>

fe-piattaforma/src/pages/common/RoleManagement/roleManagement.tsx

@@ -1,6 +1,7 @@
 import { Container } from 'design-react-kit';
 import React, { memo, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 import { Table } from '../../../components';
 import GenericSearchFilterTableLayout, {
   SearchInformationI,
@@ -14,12 +15,10 @@ import {
 import { setEntityFilters } from '../../../redux/features/administrativeArea/administrativeAreaSlice';
 import {
   selectRolesList,
-  selectRolesPagination,
 } from '../../../redux/features/roles/rolesSlice';
 import { GetRolesListValues } from '../../../redux/features/roles/rolesThunk';
 import { useAppSelector } from '../../../redux/hooks';
 import { CRUDActionsI, CRUDActionTypes } from '../../../utils/common';
-import { useNavigate } from 'react-router-dom';
 import {
   selectDevice,
   updateBreadcrumb,
@@ -38,26 +37,15 @@ const arrayBreadcrumb = [
 const RoleManagement = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const device = useAppSelector(selectDevice);
   const ruoliList = useAppSelector(selectRolesList);
-  const pagination = useAppSelector(selectRolesPagination);
+
   const handleOnSearch = (searchValue: string) => {
     dispatch(
       setEntityFilters({ nomeLike: { label: searchValue, value: searchValue } })
     );
   };
 
-  useEffect(() => {
-    dispatch(
-      updateBreadcrumb([
-        {
-          label: 'Gestione ruoli',
-          url: '/gestione-ruoli',
-          link: false,
-        },
-      ])
-    );
-  }, []);
-
   const searchInformation: SearchInformationI = {
     autocomplete: false,
     onHandleSearch: handleOnSearch,
@@ -75,36 +63,41 @@ const RoleManagement = () => {
   ];
 
   const updateTableValues = () => {
+
     const table = newTable(
       TableHeading,
       (ruoliList || []).map((td) => ({
-        id: td.id,
-        name: td.name,
+        id: td.codiceRuolo,
+        name: td.nomeRuolo,
       }))
     );
-    return {
-      ...table,
-      // TODO remove slice after BE integration
-      values: table.values.slice(
-        pagination?.pageNumber * pagination?.pageSize - pagination?.pageSize,
-        pagination?.pageNumber * pagination?.pageSize
-      ),
-    };
+    return table;
   };
 
   const [tableValues, setTableValues] = useState(updateTableValues());
 
   useEffect(() => {
-    setTableValues(updateTableValues());
+    if (Array.isArray(ruoliList) && ruoliList.length)
+      setTableValues(updateTableValues());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ruoliList]);
 
   const getRolesList = () => {
-    dispatch(GetRolesListValues('test'));
+    dispatch(GetRolesListValues());
   };
 
   useEffect(() => {
     getRolesList();
+    dispatch(
+      updateBreadcrumb([
+        {
+          label: 'Gestione ruoli',
+          url: '/gestione-ruoli',
+          link: false,
+        },
+      ])
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onActionClick: CRUDActionsI = {
@@ -123,8 +116,6 @@ const RoleManagement = () => {
     console.log('aggiungi ruolo');
   };
 
-  const device = useAppSelector(selectDevice);
-
   return (
     <>
       <PageTitle title='Elenco Ruoli' breadcrumb={arrayBreadcrumb} />

fe-piattaforma/src/pages/common/UserProfile/userProfile.tsx

@@ -62,7 +62,7 @@ const UserProfile = () => {
           headingRole: false,
         }}
         goBackPath='/'
-        buttonsPosition='TOP'
+        buttonsPosition='BOTTOM'
         formButtons={correctButtons}
       >
         {currentForm}