Skal også ta fet skrift og vise alder på barn med beboer-knappen på p…

…ersonopplysning.
navikt · Nov 12, 2024 · 1aa2164 · 1aa2164
1 parent 0e755f1
commit 1aa2164
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/src/frontend/Felles/Personopplysninger/Adressehistorikk.tsx b/src/frontend/Felles/Personopplysninger/Adressehistorikk.tsx
@@ -122,6 +122,7 @@ const Adresser: React.FC<{ adresser: IAdresse[]; fagsakPersonId: string; type?:
         type === AdresseType.BOSTEDADRESSE ? 'Angitt flyttedato' : 'Type',
         'Fra og med',
         'Til og med',
+        '',
     ];
 
     return (
@@ -145,6 +146,7 @@ const Innhold: React.FC<{ adresser: IAdresse[]; fagsakPersonId: string }> = ({
     fagsakPersonId,
 }) => {
     const [beboereAdresseIModal, settBeboereAdresseIModal] = useState<IAdresse>();
+    const [laster, settLaster] = useState<boolean>(false);
     return (
         <>
             <Table.Body>
@@ -172,17 +174,20 @@ const Innhold: React.FC<{ adresser: IAdresse[]; fagsakPersonId: string }> = ({
                             <Table.DataCell>
                                 {formaterNullableIsoDato(adresse.gyldigTilOgMed)}
                             </Table.DataCell>
-
-                            {adresse.type === AdresseType.BOSTEDADRESSE && adresse.erGjeldende && (
-                                <Knapp
-                                    onClick={() => settBeboereAdresseIModal(adresse)}
-                                    variant={'secondary'}
-                                    size={'xsmall'}
-                                    type={'button'}
-                                >
-                                    Se Beboere
-                                </Knapp>
-                            )}
+                            <Table.DataCell>
+                                {adresse.type === AdresseType.BOSTEDADRESSE &&
+                                    adresse.erGjeldende && (
+                                        <Knapp
+                                            onClick={() => settBeboereAdresseIModal(adresse)}
+                                            variant={'secondary'}
+                                            size={'xsmall'}
+                                            type={'button'}
+                                            disabled={laster}
+                                        >
+                                            {laster ? 'Laster...' : 'Se Beboere'}
+                                        </Knapp>
+                                    )}
+                            </Table.DataCell>
                         </Table.Row>
                     );
                 })}
@@ -193,7 +198,7 @@ const Innhold: React.FC<{ adresser: IAdresse[]; fagsakPersonId: string }> = ({
                 onClose={() => settBeboereAdresseIModal(undefined)}
                 ariaLabel={'Tabell over beboere på bostedsadresse.'}
             >
-                <Beboere fagsakPersonId={fagsakPersonId} />
+                <Beboere fagsakPersonId={fagsakPersonId} settLaster={settLaster} />
             </ModalWrapper>
         </>
     );

diff --git a/src/frontend/Felles/Personopplysninger/Beboere.tsx b/src/frontend/Felles/Personopplysninger/Beboere.tsx
@@ -1,25 +1,36 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { ISøkeresultatPerson } from '../../App/typer/personopplysninger';
+import { IPersonFraSøk, ISøkeresultatPerson } from '../../App/typer/personopplysninger';
 import { useApp } from '../../App/context/AppContext';
 import { byggTomRessurs, Ressurs, RessursFeilet, RessursStatus } from '../../App/typer/ressurs';
 import DataViewer from '../DataViewer/DataViewer';
 import SystemetLaster from '../SystemetLaster/SystemetLaster';
 import { Table } from '@navikt/ds-react';
+import { styled } from 'styled-components';
+import { nullableDatoTilAlder } from '../../App/utils/dato';
 
-const Beboere: React.FC<{ fagsakPersonId: string }> = ({ fagsakPersonId }) => {
+const StyledDataCell = styled(Table.DataCell)<{ person: IPersonFraSøk }>`
+    font-weight: ${(props) => (props.person.erSøker || props.person.erBarn ? 'bold' : 'normal')};
+`;
+
+const Beboere: React.FC<{
+    fagsakPersonId: string;
+    settLaster: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ fagsakPersonId, settLaster }) => {
     const { axiosRequest } = useApp();
     const [søkResultat, settSøkResultat] = useState<Ressurs<ISøkeresultatPerson>>(byggTomRessurs());
 
     const søkPerson = useCallback(
         (fagsakPersonId: string) => {
+            settLaster(true);
             axiosRequest<ISøkeresultatPerson, null>({
                 method: 'GET',
                 url: `/familie-ef-sak/api/sok/fagsak-person/${fagsakPersonId}/samme-adresse`,
             }).then((respons: Ressurs<ISøkeresultatPerson> | RessursFeilet) => {
                 settSøkResultat(respons);
+                settLaster(false);
             });
         },
-        [axiosRequest]
+        [axiosRequest, settLaster]
     );
 
     useEffect(() => {
@@ -48,9 +59,9 @@ const Beboere: React.FC<{ fagsakPersonId: string }> = ({ fagsakPersonId }) => {
                                 {søkResultat.personer.map((beboer) => {
                                     return (
                                         <Table.Row key={beboer.personIdent}>
-                                            <Table.DataCell textSize={'small'}>
-                                                {beboer.visningsnavn}
-                                            </Table.DataCell>
+                                            <StyledDataCell person={beboer} textSize={'small'}>
+                                                {`${beboer.visningsnavn} ${beboer.fødselsdato ? `(${nullableDatoTilAlder(beboer.fødselsdato)})` : ''}`}
+                                            </StyledDataCell>
                                             <Table.DataCell textSize={'small'}>
                                                 {beboer.personIdent}
                                             </Table.DataCell>