WIP ny layout på hjelpemiddelsiden i saksbildet. Vises i nå i en egen…

… tab slik at man kan sammenlikne ny og gammel layout. Gamle komponenter er beholdt
navikt · Dec 23, 2024 · a0c63f8 · a0c63f8
1 parent 1c6fa7b
commit a0c63f8
Show file tree

Hide file tree

Showing 21 changed files with 587 additions and 53 deletions.
diff --git a/client/src/GlobalStyles.tsx b/client/src/GlobalStyles.tsx
@@ -3,14 +3,16 @@ import { createGlobalStyle } from 'styled-components'
 export const hotsakTotalMinWidth = '1200px'
 export const hotsakVenstremenyWidth = '340px'
 export const hotsakRegistrerSøknadKolonne = '520px'
+export const søknadsbildeHovedinnholdMaxWidth = '600px'
+export const hovedInnholdMaxWidth = '1600px'
 export const hotsakRegistrerSøknadHøyreKolonne = '300px'
 export const hotsakHistorikkWidth = '492px'
 export const brilleSidebarBredde = '320px'
 export const headerHøydeRem = '3'
 export const søknadslinjeHøyde = '48px'
 
 export const AppRoot = createGlobalStyle`
-  body {
+ body {
     font-family: 'Source Sans Pro', Helvetica, sans-serif;
     font-size: 1rem;
     color: var(--a-text-default)

diff --git a/client/src/felleskomponenter/Kopiknapp.tsx b/client/src/felleskomponenter/Kopiknapp.tsx
@@ -10,7 +10,7 @@ export function Kopiknapp(props: KopiknappProps) {
   const { tooltip, copyText, placement } = props
   return (
     <Tooltip content={tooltip} placement={placement}>
-      <CopyButton size="small" copyText={copyText} title="" />
+      <CopyButton size="small" copyText={copyText} />
     </Tooltip>
   )
 }
diff --git a/client/src/felleskomponenter/typografi.tsx b/client/src/felleskomponenter/typografi.tsx
@@ -1,11 +1,11 @@
 import { forwardRef, ReactNode } from 'react'
 import styled from 'styled-components'
 
-import { BodyLong, BodyShort, Detail, Heading, Label } from '@navikt/ds-react'
+import { BodyLong, BodyShort, BodyShortProps, Detail, Heading, Label } from '@navikt/ds-react'
 
-export function Tekst({ spacing, children }: { spacing?: boolean; children: ReactNode }) {
+export const Tekst = ({ children, ...rest }: BodyShortProps) => {
   return (
-    <BodyShort size="small" spacing={spacing}>
+    <BodyShort size="small" {...rest}>
       {children}
     </BodyShort>
   )

diff --git a/client/src/mocks/data/SakStore.ts b/client/src/mocks/data/SakStore.ts
@@ -294,7 +294,7 @@ export class SakStore extends Dexie {
       enhet: sak.enhet,
       saksbehandler: sak.saksbehandler,
       kanTildeles: true,
-      hast: sak.hast,
+      //hast: sak.hast,
     }))
   }
 

diff --git a/client/src/mocks/data/behovsmelding.json b/client/src/mocks/data/behovsmelding.json
@@ -69,12 +69,44 @@
           "sortimentkategori": "Ganghjelpemidler",
           "rangering": 1
         },
-        "tilbehør": [],
-        "bytter": [],
+        "tilbehør": [
+          {
+            "hmsArtNr": "014112",
+            "navn": "Kjørebøyle mrs Crissy Swing Away/Cross 6 3A rygg rb40 hreg kompl",
+            "antall": 1,
+            "begrunnelse": "Her er en begrunnelse fra formidler"
+          },
+          {
+            "hmsArtNr": "014113",
+            "navn": "Armlene mrs Cross 6/Cross 5XL Prio aktiv/Prio komfort teleskop l38 høyre",
+            "antall": 1,
+            "fritakFraBegrunnelseÅrsak": "ER_SELVFORKLARENDE_TILBEHØR"
+          },
+          {
+            "hmsArtNr": "014124",
+            "navn": "Polstring integrert sengegrind seng Opus 90EW/120EW +20cm",
+            "antall": 1,
+            "begrunnelse": "Her er en begrunnelse fra formidler"
+          }
+        ],
+        "bytter": [
+          {
+            "erTilsvarende": true,
+            "hmsnr": "123456",
+            "hjmNavn": "Hjelpemiddelnavn",
+            "serienr": "987654321"
+          },
+          {
+            "erTilsvarende": false,
+            "hmsnr": "678967",
+            "hjmNavn": "Nelpemiddelhjavn",
+            "årsak": "ENDRINGER_I_INNBYGGERS_FUNKSJON"
+          }
+        ],
         "bruksarenaer": ["EGET_HJEM"],
         "utlevertinfo": {
-          "alleredeUtlevertFraHjelpemiddelsentralen": false,
-          "utleverttype": null,
+          "alleredeUtlevertFraHjelpemiddelsentralen": true,
+          "utleverttype": "FREMSKUTT_LAGER",
           "overførtFraBruker": null,
           "annenKommentar": null
         },
@@ -149,7 +181,10 @@
       "telefon": "12312313"
     },
     "utleveringMerknad": "Tralala",
-    "hast": null,
+    "hast": {
+      "hasteårsaker": ["UTVIKLING_AV_TRYKKSÅR", "RASK_FORVERRING_AV_ALVORLIG_DIAGNOSE", "ANNET"],
+      "hastBegrunnelse": "En begrunnelse fra formidler om hvorfor det haster med denne saken."
+    },
     "automatiskUtledetTilleggsinfo": []
   },
   "innsender": {

diff --git a/client/src/saksbilde/SakLoader.tsx b/client/src/saksbilde/SakLoader.tsx
@@ -1,7 +1,7 @@
 import { Box, Skeleton } from '@navikt/ds-react'
 
 import { spacingVar } from '../felleskomponenter/Avstand.tsx'
-import { hotsakHistorikkWidth, hotsakVenstremenyWidth } from '../GlobalStyles'
+import { hotsakHistorikkWidth, hotsakVenstremenyWidth, søknadsbildeHovedinnholdMaxWidth } from '../GlobalStyles'
 import { Hovedinnhold, Saksinnhold } from './komponenter/Sakskomponenter'
 import { LasterPersonlinje } from './Personlinje'
 import { SaksbildeContainer } from './Saksbilde'
@@ -11,7 +11,7 @@ export function SakLoader() {
   return (
     <SaksbildeContainer>
       <LasterPersonlinje />
-      <Hovedinnhold columns={`auto ${hotsakHistorikkWidth}`}>
+      <Hovedinnhold columns={`auto ${hotsakHistorikkWidth}`} style={{ maxWidth: '1592px' }}>
         <section>
           <Box margin={spacing}>
             <Skeleton variant="rectangle" width="100%" height={30} />
@@ -20,12 +20,15 @@ export function SakLoader() {
             <div style={{ marginLeft: spacingVar(spacing) }}>
               <Skeleton variant="rectangle" width="100%" height={800} />
             </div>
-            <div style={{ marginRight: spacingVar(spacing) }}>
+            <div style={{ marginRight: spacingVar(spacing), maxWidth: `${søknadsbildeHovedinnholdMaxWidth}` }}>
               <Skeleton variant="rectangle" width="100%" height={800} />
             </div>
           </Saksinnhold>
         </section>
-        <Box padding={spacing} style={{ borderLeft: '1px solid var(--a-border-subtle)' }}>
+        <Box
+          padding={spacing}
+          style={{ borderLeft: '1px solid var(--a-border-subtle)', borderRight: '1px solid var(--a-border-subtle)' }}
+        >
           <Skeleton variant="rectangle" width="100%" height={845} />
         </Box>
       </Hovedinnhold>

diff --git a/client/src/saksbilde/Søknadsbilde.tsx b/client/src/saksbilde/Søknadsbilde.tsx
@@ -1,18 +1,19 @@
+import { HGrid } from '@navikt/ds-react'
 import { memo, Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Route, Routes } from 'react-router-dom'
-import { HGrid } from '@navikt/ds-react'
 
 import styled from 'styled-components'
 import { AlertError } from '../feilsider/AlertError'
-import { hotsakHistorikkWidth, hotsakVenstremenyWidth } from '../GlobalStyles'
+import { hotsakHistorikkWidth, hotsakVenstremenyWidth, hovedInnholdMaxWidth } from '../GlobalStyles'
 import { Sakstype } from '../types/types.internal'
 import { formaterAdresse } from '../utils/formater'
 import { BestillingCard } from './bestillingsordning/BestillingCard'
 import { Saksvarsler } from './bestillingsordning/Saksvarsler'
 import { Bruker } from './bruker/Bruker'
 import { Formidler } from './formidler/Formidler'
 import { HjelpemiddelListe } from './hjelpemidler/HjelpemiddelListe'
+import { HjelpemiddelListeNyLayout } from './hjelpemidlerNyLayout/HjelpemiddelListeNyLayout'
 import { useHjelpemiddeloversikt } from './høyrekolonne/hjelpemiddeloversikt/useHjelpemiddeloversikt'
 import { Høyrekolonne } from './høyrekolonne/Høyrekolonne'
 import { Hovedinnhold, Saksinnhold } from './komponenter/Sakskomponenter'
@@ -41,7 +42,7 @@ const SaksbildeContent = memo(() => {
   const formidler = levering.hjelpemiddelformidler
 
   return (
-    <Hovedinnhold columns={`auto ${hotsakHistorikkWidth}`}>
+    <Hovedinnhold columns={`auto ${hotsakHistorikkWidth}`} style={{ maxWidth: `${hovedInnholdMaxWidth}` }}>
       <section>
         <HGrid columns="auto">
           <Søknadslinje id={sak.data.sakId} type={sak.data.sakstype} />
@@ -80,10 +81,15 @@ const SaksbildeContent = memo(() => {
                 <Route
                   path="/hjelpemidler"
                   element={
-                    <HjelpemiddelListe
-                      tittel="Hjelpemidler"
+                    <HjelpemiddelListe sak={sak.data} forenkletVisning={erBestilling} behovsmelding={behovsmelding} />
+                  }
+                />
+                <Route
+                  path="/ny-layout"
+                  element={
+                    <HjelpemiddelListeNyLayout
                       sak={sak.data}
-                      forenkletVisning={erBestilling}
+                      //forenkletVisning={erBestilling}
                       behovsmelding={behovsmelding}
                     />
                   }

diff --git a/client/src/saksbilde/Søknadslinje.tsx b/client/src/saksbilde/Søknadslinje.tsx
@@ -23,6 +23,11 @@ export function Søknadslinje({ id, type }: SøknadslinjeProps) {
             <TabLink to={`/sak/${id}/hjelpemidler`} title="Hjelpemidler" icon={<HouseIcon />}>
               Hjelpemidler
             </TabLink>
+            <Eksperiment>
+              <TabLink to={`/sak/${id}/ny-layout`} title="Hjelpemidler (ny layout)">
+                Hjelpemidler (ny layout)
+              </TabLink>
+            </Eksperiment>
             <TabLink to={`/sak/${id}/bruker`} title="Bruker">
               Bruker
             </TabLink>

diff --git a/client/src/saksbilde/hjelpemidler/BrukersFunksjon.tsx b/client/src/saksbilde/hjelpemidler/BrukersFunksjon.tsx
@@ -6,7 +6,7 @@ export function BrukersFunksjon(props: { funksjonsbeskrivelse: Funksjonsbeskrive
   const { funksjonsbeskrivelse } = props
   const { beskrivelse } = funksjonsbeskrivelse
   return (
-    <Box paddingBlock="10" paddingInline={{ xs: '0 4', sm: '0 4' }} maxWidth={'800px'}>
+    <Box paddingBlock="10" paddingInline={{ xs: '0 4', sm: '0 4' }} maxWidth={'34em'}>
       <Heading level="1" size="small" spacing>
         Funksjonsvurdering
       </Heading>

diff --git a/client/src/saksbilde/hjelpemidler/Bytter.tsx b/client/src/saksbilde/hjelpemidler/Bytter.tsx
@@ -1,7 +1,7 @@
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'
 import { HStack, VStack } from '@navikt/ds-react'
 import { Fragment } from 'react'
-import { Etikett } from '../../felleskomponenter/typografi'
+import { Etikett, Tekst } from '../../felleskomponenter/typografi'
 import { Bytte, BytteÅrsak } from '../../types/BehovsmeldingTypes'
 import { Fremhevet } from './Fremhevet'
 import { Kopiknapp } from '../../felleskomponenter/Kopiknapp'
@@ -13,7 +13,7 @@ interface Props {
 
 const Bytter = ({ bytter, harVarsel }: Props) => {
   return (
-    <>
+    <HStack gap="2">
       {bytter.map((bytte, i) => (
         <Fragment key={i}>
           <VStack gap="2">
@@ -24,12 +24,7 @@ const Bytter = ({ bytter, harVarsel }: Props) => {
             <HStack align={'center'}>
               <strong>{bytte.hmsnr}</strong>
               <Kopiknapp tooltip="Kopier hmsnr" copyText={bytte.hmsnr} /> {bytte.hjmNavn}
-              {bytte.serienr && (
-                <>
-                  <br />
-                  Serienr: {bytte.serienr}
-                </>
-              )}
+              {bytte.serienr && <Tekst>Serienr: {bytte.serienr}</Tekst>}
             </HStack>
             {bytte.årsak && (
               <Fremhevet>
@@ -42,7 +37,7 @@ const Bytter = ({ bytter, harVarsel }: Props) => {
           </VStack>
         </Fragment>
       ))}
-    </>
+    </HStack>
   )
 }
 

diff --git a/client/src/saksbilde/hjelpemidler/Hastesak.tsx b/client/src/saksbilde/hjelpemidler/Hastesak.tsx
@@ -1,13 +1,13 @@
 import { Alert, Box, List } from '@navikt/ds-react'
 import { Etikett } from '../../felleskomponenter/typografi.tsx'
-import { Hast, Hasteårsak } from '../../types/types.internal.ts'
 import { Fremhevet } from './Fremhevet.tsx'
 import { HjelpemiddelGrid } from './HjelpemiddelGrid.tsx'
+import { Hast, Hasteårsak } from '../../types/BehovsmeldingTypes.ts'
 
 export function Hastesak(props: { hast?: Hast }) {
   const { hast } = props
   if (!hast) return null
-  const { årsaker, begrunnelse } = hast
+  const { hasteårsaker, hastBegrunnelse } = hast
   return (
     <>
       <Alert variant="warning" size="small" inline>
@@ -19,13 +19,13 @@ export function Hastesak(props: { hast?: Hast }) {
           <Fremhevet>
             <Etikett>Årsak til at det haster</Etikett>
             <List size="small" headingTag="h2">
-              {årsaker.map((årsak) => (
+              {hasteårsaker.map((årsak) => (
                 <List.Item key={årsak}>
                   {tekstByHasteårsak[årsak]}
-                  {årsak === Hasteårsak.ANNET && begrunnelse && (
+                  {årsak === Hasteårsak.ANNET && hastBegrunnelse && (
                     <>
                       <br />
-                      <>{begrunnelse}</>
+                      <>{hastBegrunnelse}</>
                     </>
                   )}
                 </List.Item>

diff --git a/client/src/saksbilde/hjelpemidler/HjelpemiddelListe.tsx b/client/src/saksbilde/hjelpemidler/HjelpemiddelListe.tsx
@@ -9,18 +9,16 @@ import { useArtiklerForSak } from './useArtiklerForSak'
 import { Hjelpemiddel } from './Hjelpemiddel.tsx'
 
 interface HjelpemiddelListeProps {
-  tittel: string
   forenkletVisning?: boolean
   sak: Sak
   behovsmelding: Innsenderbehovsmelding
 }
 
-export function HjelpemiddelListe({ tittel, forenkletVisning = false, sak, behovsmelding }: HjelpemiddelListeProps) {
-  const { hast } = sak
+export function HjelpemiddelListe({ forenkletVisning = false, sak, behovsmelding }: HjelpemiddelListeProps) {
   const { artikler } = useArtiklerForSak(sak.sakId)
 
   const artiklerSomIkkeFinnesIOebs = artikler.filter((artikkel) => !artikkel.finnesIOebs)
-  const { brukersituasjon } = behovsmelding
+  const { brukersituasjon, levering } = behovsmelding
   const hjelpemidler = behovsmelding.hjelpemidler.hjelpemidler
 
   const hjelpemidlerAlleredeUtlevert = hjelpemidler.filter(
@@ -30,10 +28,10 @@ export function HjelpemiddelListe({ tittel, forenkletVisning = false, sak, behov
 
   return (
     <>
-      {hast && <Hastesak hast={hast} />}
+      {levering.hast && <Hastesak hast={levering.hast} />}
 
       <Heading level="1" size="medium">
-        {tittel}
+        Hjelpemidler
       </Heading>
       {!forenkletVisning && artiklerSomIkkeFinnesIOebs.length > 0 && (
         <OebsAlert artikler={artiklerSomIkkeFinnesIOebs} />

diff --git a/client/src/saksbilde/hjelpemidler/Utlevert.tsx b/client/src/saksbilde/hjelpemidler/Utlevert.tsx
@@ -1,12 +1,15 @@
-import { Tekst } from '../../felleskomponenter/typografi'
+import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'
+import { HStack, VStack } from '@navikt/ds-react'
+import { Etikett, Tekst } from '../../felleskomponenter/typografi'
 import { Utlevertinfo, UtlevertType } from '../../types/BehovsmeldingTypes'
 
 interface UtlevertProps {
   alleredeUtlevert: boolean
   utlevertInfo: Utlevertinfo
+  harVarsel: boolean
 }
 
-export function Utlevert({ alleredeUtlevert, utlevertInfo }: UtlevertProps) {
+export function Utlevert({ alleredeUtlevert, utlevertInfo, harVarsel }: UtlevertProps) {
   if (!alleredeUtlevert) return null
 
   let utlevertTekst
@@ -25,10 +28,16 @@ export function Utlevert({ alleredeUtlevert, utlevertInfo }: UtlevertProps) {
       break
   }
 
+  {
+    /* TODO: Fix sånn at utlevert for reiktig ut på gammel hjelpemiddelside */
+  }
   return (
-    <>
-      &nbsp;
-      <Tekst>{utlevertTekst}</Tekst>
-    </>
+    <HStack gap="2">
+      {harVarsel && <ExclamationmarkTriangleFillIcon color="var(--a-icon-warning)" fontSize="1.25rem" />}
+      <VStack>
+        <Etikett>Utlevert</Etikett>
+        <Tekst>{utlevertTekst}</Tekst>
+      </VStack>
+    </HStack>
   )
 }