feat(fe-piattaforma): fe updates 07132022 2

fe-piattaforma/mock/userContext.json

@@ -0,0 +1,41 @@
+{
+  "nome": "Mario",
+  "cognome": "Rossi",
+  "email": "mario.rossi@prova.com",
+  "telefono": "333444555",
+  "codiceFiscale": "UTENTE2",
+  "ruoli": [
+    {
+      "codiceRuolo": "DEG",
+      "nomeRuolo": "DELEGATO ENTE GESTORE PROGRAMMA",
+      "gruppiPermessi": []
+    },
+    {
+      "codiceRuolo": "DEPP",
+      "nomeRuolo": "DELEGATO ENTE PARTNER GESTORE PROGETTO",
+      "gruppiPermessi": []
+    },
+    {
+      "codiceRuolo": "REG",
+      "nomeRuolo": "REFERENTE ENTE GESTORE PROGRAMMA",
+      "gruppiPermessi": []
+    },
+    {
+      "codiceRuolo": "VOL",
+      "nomeRuolo": "VOLONTARIO",
+      "gruppiPermessi": []
+    }
+  ],
+  "stato": "ATTIVO",
+  "profiliUtente": [
+    {
+      "codiceRuolo": "VOL",
+      "descrizioneRuolo": "VOLONTARIO",
+      "idProgramma": "104",
+      "nomeProgramma": "Programma Rho",
+      "idProgetto": "254",
+      "nomeEnte": "Regione Molise SSC"
+    }
+  ],
+  "integrazione": true
+}

fe-piattaforma/mock/userMock.json

@@ -8,7 +8,8 @@
       "email": "mail@mail.com",
       "phone": "338390458305",
       "authorityRef": "Comune di Milano",
-      "bio": "Descrizione Bio"
+      "bio": "Descrizione Bio",
+      "status": "ATTIVO"
     },
     "roles": [
       { "name": "Simone Viola", "status": "Active" },

fe-piattaforma/src/components/CardProfile/cardProfile.tsx

@@ -9,17 +9,19 @@ import AvatarInitials, {
   AvatarTextSizes,
 } from '../AvatarInitials/avatarInitials';
 import './cardProfile.scss';
+import { UserStateI } from '../../redux/features/user/userSlice';
 
 interface CardProfileI extends CardProps {
-  name?: string;
-  program?: string;
   className?: string;
   activeProfile?: boolean;
-  user: { name: string; surname: string; role?: string };
+  user: UserStateI['user'];
+  profile?: any;
 }
 
 const CardProfile: React.FC<CardProfileI> = (props) => {
-  const { program, className, activeProfile, user } = props;
+  const {
+    className, activeProfile, user = {}, profile = {}
+  } = props;
 
   const device = useAppSelector(selectDevice);
 
@@ -60,7 +62,7 @@ const CardProfile: React.FC<CardProfileI> = (props) => {
               )}
             >
               <AvatarInitials
-                user={{ uName: user?.name, uSurname: user?.surname }}
+                user={{ uName: user?.nome, uSurname: user?.cognome }}
                 size={device.mediaIsPhone ? AvatarSizes.Big : AvatarSizes.Small}
                 font={
                   device.mediaIsPhone
@@ -73,29 +75,24 @@ const CardProfile: React.FC<CardProfileI> = (props) => {
           ) : null}
           <div>
             <CardTitle className='mb-1 primary-color-a12'>
-              {activeProfile ? (
-                <span>
-                  <strong>Delegato </strong>
-                  <em>
-                    <strong>{user.name}</strong>
-                  </em>
-                </span>
-              ) : (
-                <span>
-                  <strong>Referente </strong>
-                  <em>
-                    <strong>{user.name}</strong>
-                  </em>
-                </span>
-              )}
+              <span>
+                <strong>
+                  {profile?.descrizioneRuolo}
+                  {profile?.nomeEnte ? (
+                    <>
+                      &nbsp;&ldquo;<i>{profile?.nomeEnte}</i>&ldquo;
+                    </>
+                  ) : null}
+                </strong>
+              </span>
             </CardTitle>
             <CardText
               className={clsx(
                 activeProfile && 'primary-color-a12',
                 !activeProfile && 'neutral-2-color-a3'
               )}
             >
-              {program}
+              {profile?.nomeProgramma}
             </CardText>
           </div>
         </div>

fe-piattaforma/src/components/CardStatusAction/cardStatusAction.tsx

@@ -41,7 +41,6 @@ const CardStatusAction: React.FC<CardStatusActionI> = (props) => {
     status,
     actionView,
     fullInfo,
-
     onActionClick,
     id,
     moreThanOneSurvey = false,
@@ -131,6 +130,7 @@ const CardStatusAction: React.FC<CardStatusActionI> = (props) => {
                   device.mediaIsPhone ? 'mx-0 ml-2' : 'mx-3'
                 )}
                 status={status}
+                rowTableId={id}
                 chipWidth
               />
             )}

fe-piattaforma/src/components/CardStatusAction/cardStatusActionHeadquarters.tsx

@@ -90,6 +90,7 @@ const CardStatusActionHeadquarters: React.FC<CardStatusActionI> = (props) => {
                   device.mediaIsPhone ? 'mx-0 ml-2' : 'mx-3'
                 )}
                 status={status}
+                rowTableId={id}
                 chipWidth
               />
             )}

fe-piattaforma/src/components/CardStatusAction/cardStatusActionPartnerAuthority.tsx

@@ -113,6 +113,7 @@ const CardStatusActionPartnerAuthority: React.FC<CardStatusActionI> = (
                 device.mediaIsPhone ? 'mx-0 ml-2' : 'mx-3'
               )}
               status={status}
+              rowTableId={id}
               chipWidth
             />
           )}

fe-piattaforma/src/components/CardStatusAction/cardStatusActionProject.tsx

@@ -111,6 +111,7 @@ const CardStatusActionProject: React.FC<CardStatusActionI> = (props) => {
                 device.mediaIsPhone ? 'mx-0 ml-2' : 'mx-3'
               )}
               status={status}
+              rowTableId={id}
               chipWidth
             />
           )}

fe-piattaforma/src/components/CardStatusAction/cardStatusActionSurveys.tsx

@@ -150,6 +150,7 @@ const CardStatusActionSurveys: React.FC<CardStatusActionI> = (props) => {
                 device.mediaIsPhone ? 'mx-0 ml-2 my-4' : 'mx-3'
               )}
               status={status}
+              rowTableId={id}
               chipWidth
             />
           )}

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

@@ -160,7 +160,9 @@ const DetailLayout: React.FC<DetailLayoutI> = ({
                 )}
             </div>
           )}
-        {showItemsList && itemsList?.items?.length ? (
+        {showItemsList &&
+        itemsList?.items?.length &&
+        currentTab === 'questionari' ? (
           <>
             {itemsList.title && (
               <h2 className='h4 neutral-1-color-a7'>{itemsList.title}</h2>
@@ -247,6 +249,7 @@ const DetailLayout: React.FC<DetailLayoutI> = ({
           </>
         ) : null}
       </div>
+
       {buttonsPosition === 'TOP' && formButtons && formButtons.length !== 0 ? (
         <>
           <div aria-hidden='true' className='mt-5 w-100'>

fe-piattaforma/src/components/Form/input.tsx

@@ -37,7 +37,7 @@ const Input: React.FC<InputI> = (props) => {
     type = 'text',
     valid,
     value = '',
-    withLabel = props.type === 'radio' ? false : true,
+    withLabel = props.type !== 'radio',
   } = props;
 
   const [val, setVal] = useState<formFieldI['value']>(value);

fe-piattaforma/src/components/Header/header.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { useAppSelector } from '../../redux/hooks';
 import {
   selectUserNotification,
-  selectUser,
+  selectUser, UserStateI,
 } from '../../redux/features/user/userSlice';
 import { useDispatch } from 'react-redux';
 import { selectDevice } from '../../redux/features/app/appSlice';
@@ -13,7 +13,7 @@ import { isEmpty } from 'lodash';
 export interface HeaderI {
   isHeaderFull?: boolean | undefined;
   dispatch: (payload: unknown) => void;
-  user: { name: string; surname: string; role: string } | undefined;
+  user: UserStateI['user'];
   isLogged: boolean;
   notification?: [] | undefined;
 }

fe-piattaforma/src/components/Header/view/headerDesktop.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useState } from 'react';
 import clsx from 'clsx';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import {
   Badge,
   Button,
@@ -39,15 +39,12 @@ const HeaderDesktop: React.FC<HeaderI> = ({
   //const [language, setLanguage] = useState(languages[0]);
   const { t } = useTranslation();
   const [openUser, setOpenUser] = useState<boolean>(false);
+  const navigate = useNavigate();
 
   const userDropdownOptions = [
     {
       optionName: 'Il mio profilo',
-      action: () => console.log('il mio profilo'),
-    },
-    {
-      optionName: 'Cambia ruolo',
-      action: () => dispatch(openModal({ id: 'switchProfileModal' })),
+      action: () => navigate('/area-personale'),
     },
   ];
 
@@ -69,14 +66,14 @@ const HeaderDesktop: React.FC<HeaderI> = ({
         >
           <div>
             <AvatarInitials
-              user={{ uName: user?.name, uSurname: user?.surname }}
+              user={{ uName: user?.nome, uSurname: user?.cognome }}
               size={AvatarSizes.Small}
               font={AvatarTextSizes.Small}
             />
           </div>
           <div className='d-flex flex-column align-items-start'>
             <h6 className='m-0 text-sans-serif'>
-              {user?.name}&nbsp;{user?.surname}
+              {user?.nome}&nbsp;{user?.cognome}
             </h6>
             <h6 className='font-weight-light text-nowrap'>
               <em>{getRoleLabel(user?.role)}</em>
@@ -87,7 +84,12 @@ const HeaderDesktop: React.FC<HeaderI> = ({
       <DropdownMenu role='menu' tag='ul'>
         <LinkList role='none'>
           {userDropdownOptions.map((item, index) => (
-            <li key={index} role='none' className='px-4'>
+            <li
+              key={index}
+              role='none'
+              className='px-4'
+              onClick={() => setOpenUser(!openUser)}
+            >
               <Button
                 className={clsx(
                   'primary-color-b1',
@@ -103,6 +105,23 @@ const HeaderDesktop: React.FC<HeaderI> = ({
               </Button>
             </li>
           ))}
+          {user?.profiliUtente?.length > 1 ? (
+            <li role='none' className='px-4'>
+              <Button
+                className={clsx(
+                  'primary-color-b1',
+                  'py-2',
+                  'w-100',
+                  'd-flex',
+                  'justify-content-between'
+                )}
+                role='menuitem'
+                onClick={() => dispatch(openModal({ id: 'switchProfileModal' }))}
+              >
+                Cambia ruolo
+              </Button>
+            </li>
+          ) : null}
           <LinkListItem divider role='menuitem' aria-hidden={true} />
           <li role='none' className='px-4'>
             <Button
@@ -366,16 +385,7 @@ const HeaderDesktop: React.FC<HeaderI> = ({
           <HeaderMenu isHeaderFull={isHeaderFull} />
         </div>
       ) : null}
-      <SwitchProfileModal
-        profiles={[
-          { name: ' "ente partner"', programName: 'Programma 1' },
-          {
-            name: ' "ente gestore di progetto"',
-            programName: 'Programma 2',
-          },
-        ]}
-        currentProfile=' "ente partner"'
-      />
+      <SwitchProfileModal />
     </header>
   );
 };