skal markere om panel for avsender er ekspandert eller ikke ved visni…

…ng av fylt/tomt symbol. Skal kunne kopiere personident fra avsender panel dersom bruker er avsender
navikt · Oct 19, 2023 · 75f9872 · 75f9872
1 parent 4f4367d
commit 75f9872
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/src/frontend/Komponenter/Journalføring/Standard/AvsenderPanel.tsx b/src/frontend/Komponenter/Journalføring/Standard/AvsenderPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Checkbox, ExpansionCard, Label, TextField } from '@navikt/ds-react';
+import { Checkbox, CopyButton, ExpansionCard, Label, TextField } from '@navikt/ds-react';
 import styled from 'styled-components';
 import { IJournalpostResponse } from '../../../App/typer/journalføring';
 import { EnvelopeClosedFillIcon, EnvelopeClosedIcon } from '@navikt/aksel-icons';
@@ -12,7 +12,7 @@ const ExpansionCardHeader = styled(ExpansionCard.Header)`
 const ExpansionCardContent = styled.div`
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 1rem;
     padding-bottom: 1rem;
 `;
 
@@ -30,6 +30,10 @@ const Tittel = styled.div`
     align-items: center;
 `;
 
+const KopierPersonIdent = styled(CopyButton)`
+    z-index: 2;
+`;
+
 const utledAvsender = (
     erAvsenderBruker: boolean,
     harRedigertAvsender: boolean,
@@ -47,35 +51,42 @@ interface Props {
 }
 
 const AvsenderPanel: React.FC<Props> = ({ journalpostResponse }) => {
+    const { journalpost, navn, personIdent } = journalpostResponse;
+
+    const [erPanelEkspandert, settErPanelEkspandert] = useState<boolean>(false);
     const [erBrukerAvsender, settErBrukerAvsender] = useState<boolean>(false);
     const [harRedigertAvsender, settHarRedigertAvsender] = useState<boolean>(false);
     const [nyAvsender, settNyAvsender] = useState<string>('');
-    const valgt = false;
-    const avsender = utledAvsender(
-        erBrukerAvsender,
-        harRedigertAvsender,
-        nyAvsender,
-        journalpostResponse.navn
-    );
+
+    const avsender = utledAvsender(erBrukerAvsender, harRedigertAvsender, nyAvsender, navn);
+    const brukerErAvsender = erBrukerAvsender || avsender === navn;
 
     return (
         <ExpansionCard
-            id={journalpostResponse.journalpost.journalpostId}
+            id={journalpost.journalpostId}
             size="small"
             aria-label="journalpost"
             defaultOpen={avsender === 'Ukjent avsender'}
+            onToggle={() => settErPanelEkspandert((prevState) => !prevState)}
         >
             <ExpansionCardHeader>
                 <FlexRow>
                     <IconContainer>
-                        {valgt ? (
+                        {erPanelEkspandert ? (
                             <EnvelopeClosedFillIcon fontSize={'3.5rem'} />
                         ) : (
                             <EnvelopeClosedIcon fontSize={'3.5rem'} />
                         )}
                     </IconContainer>
                     <Tittel>
-                        <Label as={'p'}>{avsender}</Label>
+                        {brukerErAvsender ? (
+                            <>
+                                <Label as={'p'}>{`${avsender} - ${personIdent}`}</Label>
+                                <KopierPersonIdent copyText={personIdent} variant="action" />
+                            </>
+                        ) : (
+                            <Label as={'p'}>{avsender}</Label>
+                        )}
                     </Tittel>
                 </FlexRow>
             </ExpansionCardHeader>
@@ -97,6 +108,7 @@ const AvsenderPanel: React.FC<Props> = ({ journalpostResponse }) => {
                             settNyAvsender(event.target.value);
                             if (!harRedigertAvsender) settHarRedigertAvsender(true);
                         }}
+                        size={'small'}
                         value={avsender}
                     />
                 </ExpansionCardContent>

diff --git a/src/frontend/Komponenter/Journalføring/Standard/BrukerPanel.tsx b/src/frontend/Komponenter/Journalføring/Standard/BrukerPanel.tsx
@@ -8,12 +8,11 @@ interface Props {
 }
 
 const BrukerPanel: React.FC<Props> = ({ journalpostResponse }) => {
+    const { navn, personIdent } = journalpostResponse;
+
     return (
         <Panel border>
-            <BrukerPanelHeader
-                navn={journalpostResponse.navn}
-                personIdent={journalpostResponse.personIdent}
-            />
+            <BrukerPanelHeader navn={navn} personIdent={personIdent} />
         </Panel>
     );
 };

diff --git a/src/frontend/Komponenter/Journalføring/Standard/JournalføringAppNy.tsx b/src/frontend/Komponenter/Journalføring/Standard/JournalføringAppNy.tsx
@@ -22,9 +22,9 @@ import JournalføringWrapper, {
 } from '../Felles/JournalføringWrapper';
 import JournalføringPdfVisning from '../Felles/JournalføringPdfVisning';
 import JournalpostPanel from './JournalpostPanel';
-import Dokumenter from './Dokumenter';
 import BrukerPanel from './BrukerPanel';
 import AvsenderPanel from './AvsenderPanel';
+import Dokumenter from './Dokumenter';
 
 const InnerContainer = styled.div`
     display: flex;