Visning av barnebrille-saker fra direkteoppgjørsløsningen i hotsak (#422

)

* Visning av barnebrille-saker fra direkteoppgjørsløsningen i hotsak

* Dev deploy from feature branch

* Ikke krev at saksbehandling-db er oppdatert med støtte for barnebrille-saker

* Øk bredden på "Saksbehandler"-kolonnen i saksoversikten med 10px for å få plass til mer tekst

* Vis alert-stripe hvis baksystemet til direkteoppgjørsløsningen er nede

* Fiks dobbelt ikon i dev

* Designiterasjoner med Martine: flytting og omgjøring av Alerts, fiksing av marginer/paddings, osv.

* Bruk styled-komponent ikke inline style

.github/workflows/deploy-dev.yml

@@ -9,6 +9,7 @@ on:
     branches:
       - main
       - bosted
+      - barnebrille-saker-direkteoppgjorslosningen
 
 env:
   IMAGE: ghcr.io/${{ github.repository }}:${{ github.sha }}

client/src/mocks/data/SaksoversiktStore.ts

@@ -36,6 +36,7 @@ const saksoversikt: Saksoversikt[] = [
         sakId: '1002',
       },
     ],
+    barnebrilleSaker: [],
   },
   {
     hotsakSaker: [
@@ -83,6 +84,7 @@ const saksoversikt: Saksoversikt[] = [
         sakId: '1006',
       },
     ],
+    barnebrilleSaker: [],
   },
   {
     hotsakSaker: [
@@ -140,6 +142,23 @@ const saksoversikt: Saksoversikt[] = [
         sakId: '1111',
       },
     ],
+    barnebrilleSaker: [
+      {
+        sak: {
+          sakstype: Oppgavetype.TILSKUDD,
+          mottattDato: '2023-09-12',
+          område: ['syn'],
+          søknadGjelder: 'Briller til barn',
+          status: OppgaveStatusType.INNVILGET,
+          statusEndretDato: '2023-09-12',
+          saksbehandler: 'Maskinelt behandlet',
+          fagsystem: 'BARNEBRILLER',
+          sakId: '2222',
+        },
+        journalpostId: 1000,
+        dokumentId: '2000',
+      },
+    ],
   },
 ]
 

client/src/personoversikt/Personoversikt.tsx

@@ -30,7 +30,7 @@ const Container = styled(Flex)`
 `
 
 const Content = styled.div`
-  padding: 0 1.4rem;
+  padding: 0 2rem;
   padding-top: 1rem;
   flex: 2;
   box-sizing: border-box;
@@ -57,7 +57,10 @@ const PersonoversiktContent: React.FC = () => {
     }
   }
 
-  const saker = saksoversikt?.hotsakSaker.sort((a, b) => sorterKronologisk(a.mottattDato, b.mottattDato)) || []
+  const hotsakSaker = saksoversikt?.hotsakSaker.sort((a, b) => sorterKronologisk(a.mottattDato, b.mottattDato)) || []
+  const barnebrilleSaker = saksoversikt?.barnebrilleSaker?.sort((a, b) =>
+    sorterKronologisk(a.sak.mottattDato, b.sak.mottattDato)
+  )
   const hjelpemidler = hjelpemiddelArtikler?.sort((a, b) => sorterKronologisk(a.datoUtsendelse, b.datoUtsendelse)) || []
   const antallUtlånteHjelpemidler = hjelpemidler?.reduce((antall, artikkel) => {
     return (antall += artikkel.antall)
@@ -71,10 +74,10 @@ const PersonoversiktContent: React.FC = () => {
       ) : (
         <>
           <Personlinje loading={personInfoLoading} person={personInfo} />
-          <Alert size="small" variant="info">
-            Her ser du saker på bruker i HOTSAK. Vi kan foreløpig ikke vise saker fra Infotrygd
-          </Alert>
-          <SaksoversiktLinje sakerCount={saker.length} hjelpemidlerCount={antallUtlånteHjelpemidler} />
+          <SaksoversiktLinje
+            sakerCount={hotsakSaker.length + (barnebrilleSaker?.length || 0)}
+            hjelpemidlerCount={antallUtlånteHjelpemidler}
+          />
           <Container>
             <Content>
               <Routes>
@@ -84,7 +87,11 @@ const PersonoversiktContent: React.FC = () => {
                     isError ? (
                       <Feilmelding>Teknisk feil ved henting av saksoversikt</Feilmelding>
                     ) : (
-                      <Saksoversikt saker={saker} henterSaker={isLoading} />
+                      <Saksoversikt
+                        hotsakSaker={hotsakSaker}
+                        barnebrilleSaker={barnebrilleSaker}
+                        henterSaker={isLoading}
+                      />
                     )
                   }
                 />

client/src/personoversikt/Saksoversikt.tsx

@@ -1,18 +1,30 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { Table } from '@navikt/ds-react'
+import { FileIcon } from '@navikt/aksel-icons'
+import { Alert, Table } from '@navikt/ds-react'
 
 import { DataCelle, EllipsisCell, TekstCell } from '../felleskomponenter/table/Celle'
 import { KolonneHeader } from '../felleskomponenter/table/KolonneHeader'
-import { formaterDato } from '../utils/date'
+import { formaterDato, sorterKronologisk } from '../utils/date'
 import { capitalize } from '../utils/stringFormating'
 
 import { IngentingFunnet } from '../felleskomponenter/IngenOppgaver'
 import { Oppgaveetikett } from '../felleskomponenter/Oppgaveetikett'
 import { Toast } from '../felleskomponenter/Toast'
 import { Skjermlesertittel } from '../felleskomponenter/typografi'
-import { OppgaveStatusLabel, OppgaveStatusType, Oppgavetype, Saksoversikt_Sak } from '../types/types.internal'
+import ByggDummyDataUrl from '../mocks/mockDokument'
+import {
+  OppgaveStatusLabel,
+  OppgaveStatusType,
+  Oppgavetype,
+  Saksoversikt_Barnebrille_Sak,
+  Saksoversikt_Sak,
+  Saksoversikt_Sak_Felles_Type,
+} from '../types/types.internal'
+
+const erLokaltEllerLabs = window.appSettings.USE_MSW === true
 
 const Container = styled.div`
   min-height: 300px;
@@ -25,23 +37,26 @@ const ScrollWrapper = styled.div`
 `
 
 interface SaksoversiktProps {
-  saker: Saksoversikt_Sak[]
+  hotsakSaker: Saksoversikt_Sak[]
+  barnebrilleSaker?: Saksoversikt_Barnebrille_Sak[]
   henterSaker: boolean
 }
 
-export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }) => {
+export const Saksoversikt: React.FC<SaksoversiktProps> = ({ hotsakSaker, barnebrilleSaker, henterSaker }) => {
   const kolonner = [
     {
       key: 'MOTTATT',
       name: 'Mottatt dato',
       width: 110,
-      render: (sak: Saksoversikt_Sak) => <TekstCell value={formaterDato(sak.mottattDato)} />,
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
+        <TekstCell value={formaterDato(sak.mottattDato)} />
+      ),
     },
     {
       key: 'OMRÅDE',
       name: 'Område',
       width: 152,
-      render: (sak: Saksoversikt_Sak) => (
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
         <EllipsisCell
           value={capitalize(sak.område.join(', '))}
           id={`funksjonsnedsettelse-${sak.sakId}`}
@@ -53,7 +68,7 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
       key: 'SØKNAD_OM',
       name: 'Beskrivelse',
       width: 192,
-      render: (sak: Saksoversikt_Sak) => (
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
         <EllipsisCell
           value={capitalize(sak.søknadGjelder.replace('Søknad om:', '').replace('Bestilling av:', '').trim())}
           id={`kategori-${sak.sakId}`}
@@ -65,12 +80,12 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
       key: 'SAKSTYPE',
       name: 'Sakstype',
       width: 100,
-      render: (sak: Saksoversikt_Sak) => (
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
         <div style={{ display: 'flex' }}>
           <Oppgaveetikett
             type={sak.sakstype ? sak.sakstype : Oppgavetype.SØKNAD}
             showLabel={true}
-            labelLinkTo={`/sak/${sak.sakId}/hjelpemidler`}
+            labelLinkTo={barnebrilleSak ? undefined : `/sak/${sak.sakId}/hjelpemidler`}
           />
         </div>
       ),
@@ -79,18 +94,41 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
       key: 'STATUS',
       name: 'Status',
       width: 140,
-      render: (sak: Saksoversikt_Sak) => <TekstCell value={OppgaveStatusLabel.get(sak.status) || 'Ikke vurdert'} />,
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => {
+        const tittel = OppgaveStatusLabel.get(sak.status) || 'Ikke vurdert'
+        const tittelWithIcon = (
+          <>
+            <FileIcon title="a11y-title" fontSize="1.2rem" style={{ marginRight: '0.2rem', marginBottom: '-0.2rem' }} />
+            {tittel}
+          </>
+        )
+        return barnebrilleSak && !!barnebrilleSak.journalpostId && !!barnebrilleSak.dokumentId ? (
+          erLokaltEllerLabs ? (
+            <ByggDummyDataUrl tittel={tittelWithIcon} type={'barnebrilleSak'} />
+          ) : (
+            <Link
+              to={`/api/journalpost/${barnebrilleSak.journalpostId}/${barnebrilleSak.dokumentId}`}
+              target={'_blank'}
+            >
+              {tittelWithIcon}
+            </Link>
+          )
+        ) : (
+          <TekstCell value={tittel} />
+        )
+      },
     },
     {
       key: 'BEHANDLET_DATO',
       name: 'Behandlet dato',
       width: 130,
-      render: (sak: Saksoversikt_Sak) => (
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
         <TekstCell
           value={
             sak.status === OppgaveStatusType.FERDIGSTILT ||
             sak.status === OppgaveStatusType.AVVIST ||
-            sak.status === OppgaveStatusType.VEDTAK_FATTET
+            sak.status === OppgaveStatusType.VEDTAK_FATTET ||
+            sak.status === OppgaveStatusType.INNVILGET
               ? formaterDato(sak.statusEndretDato)
               : ''
           }
@@ -100,20 +138,28 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
     {
       key: 'SAKSBEHANDLER',
       name: 'Saksbehandler',
-      width: 160,
-      render: (sak: Saksoversikt_Sak) => (
+      width: 170,
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
         <EllipsisCell value={sak.saksbehandler || ''} id={`tildelt-${sak.sakId}`} minLength={20} />
       ),
     },
     {
       key: 'FAGSYSTEM',
       name: 'Fagsystem',
       width: 120,
-      render: (sak: Saksoversikt_Sak) => <TekstCell value={sak.fagsystem} />,
+      render: (sak: Saksoversikt_Sak, barnebrilleSak?: Saksoversikt_Barnebrille_Sak) => (
+        <TekstCell value={sak.fagsystem} />
+      ),
     },
     { key: 'SAKSID', name: 'Saksid', width: 100, render: (sak: Saksoversikt_Sak) => <TekstCell value={sak.sakId} /> },
   ]
 
+  const saker: Saksoversikt_Sak_Felles_Type[] =
+    hotsakSaker
+      .map((a): Saksoversikt_Sak_Felles_Type => ({ sak: a, barnebrilleSak: undefined }))
+      .concat(barnebrilleSaker?.map((a): Saksoversikt_Sak_Felles_Type => ({ sak: a.sak, barnebrilleSak: a })) || [])
+      .sort((a, b) => sorterKronologisk(a.sak.mottattDato, b.sak.mottattDato)) || []
+
   const hasData = saker && saker.length > 0
 
   return (
@@ -123,6 +169,16 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
         <Toast>Henter saksoversikt</Toast>
       ) : (
         <Container>
+          {!barnebrilleSaker && (
+            <Alert size="small" variant="warning" style={{ margin: '0.2rem 0 1rem 0', width: 'fit-content' }}>
+              Vi kan for øyeblikket ikke vise barnebrillesaker fra direkteoppgjørsløsningen for optikere.
+            </Alert>
+          )}
+          <div>
+            <Alert size="small" variant="info" inline={true} style={{ margin: '0 0 1rem 0' }}>
+              Her ser du saker for brukeren i HOTSAK. Vi kan foreløpig ikke vise saker fra Infotrygd.
+            </Alert>
+          </div>
           {hasData ? (
             <ScrollWrapper>
               <Table style={{ width: 'initial' }} zebraStripes size="small">
@@ -136,15 +192,17 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ saker, henterSaker }
                   </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                  {saker.map((sak) => (
-                    <Table.Row key={sak.sakId}>
-                      {kolonner.map(({ render, width, key }) => (
-                        <DataCelle key={key} width={width}>
-                          {render(sak)}
-                        </DataCelle>
-                      ))}
-                    </Table.Row>
-                  ))}
+                  {saker.map((sak) => {
+                    return (
+                      <Table.Row key={sak.sak.sakId}>
+                        {kolonner.map(({ render, width, key }) => (
+                          <DataCelle key={key} width={width}>
+                            {render(sak.sak, sak.barnebrilleSak)}
+                          </DataCelle>
+                        ))}
+                      </Table.Row>
+                    )
+                  })}
                 </Table.Body>
               </Table>
             </ScrollWrapper>

client/src/personoversikt/SaksoversiktLinje.tsx

@@ -10,14 +10,11 @@ const Container = styled.div`
   justify-content: space-between;
   height: 48px;
   box-sizing: border-box;
+  margin-top: 1rem;
   border-bottom: 1px solid var(--a-border-default);
   padding: 0 0 0 2rem;
   min-width: ${hotsakTotalMinWidth};
   white-space: nowrap;
-
-  > div:last-of-type {
-    margin-left: 1rem;
-  }
 `
 
 const TabList = styled.span`

client/src/types/types.internal.ts

@@ -801,6 +801,7 @@ export interface Person {
 
 export interface Saksoversikt {
   hotsakSaker: Saksoversikt_Sak[]
+  barnebrilleSaker?: Saksoversikt_Barnebrille_Sak[]
 }
 
 export interface Saksoversikt_Sak {
@@ -815,6 +816,17 @@ export interface Saksoversikt_Sak {
   fagsystem: string
 }
 
+export interface Saksoversikt_Barnebrille_Sak {
+  sak: Saksoversikt_Sak
+  journalpostId?: number
+  dokumentId?: string
+}
+
+export interface Saksoversikt_Sak_Felles_Type {
+  sak: Saksoversikt_Sak
+  barnebrilleSak?: Saksoversikt_Barnebrille_Sak
+}
+
 export interface EndreHjelpemiddelRequest {
   hjelpemiddelId: number
   hmsNr: string