diff --git a/package.json b/package.json index edba570ea..ec331be12 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", "react-select": "^5.7.2", - "swr": "^1.1.1", + "swr": "^2.2.4", "typescript": "^4.4.2", "url-search-params-polyfill": "^8.1.1", "web-vitals": "^2.1.0" diff --git a/src/BeslutterSide/BeslutterSide.tsx b/src/BeslutterSide/BeslutterSide.tsx index c4652f839..e90337b26 100644 --- a/src/BeslutterSide/BeslutterSide.tsx +++ b/src/BeslutterSide/BeslutterSide.tsx @@ -22,10 +22,10 @@ const cls = BEMHelper('beslutter-side'); export interface Periode { visAvslag: boolean; setVisAvslag: Dispatch>; - enhet: string; - setEnhet: Dispatch>; - enhetFeil: string | undefined; - setEnhetFeil: Dispatch>; + enhet?: string; + setEnhet: Dispatch>; + visEnhetFeil: boolean; + setVisEnhetFeil: Dispatch>; } export const TilskuddsperiodeContext = React.createContext({} as Periode); @@ -36,12 +36,12 @@ const BeslutterSide: FunctionComponent = () => { const { gjeldendeTilskuddsperiode, enhetOppfolging, enhetGeografisk } = avtale; const [visAvslag, setVisAvslag] = useState(false); const defaultEnhet = gjeldendeTilskuddsperiode?.enhet || enhetOppfolging || enhetGeografisk || ''; - const [enhet, setEnhet] = useState( + const [enhet, setEnhet] = useState( gjeldendeTilskuddsperiode && gjeldendeTilskuddsperiode?.løpenummer > 1 ? avtale.tilskuddPeriode[gjeldendeTilskuddsperiode?.løpenummer - 1].enhet ?? defaultEnhet : defaultEnhet ); - const [enhetFeil, setEnhetFeil] = useState(undefined); + const [visEnhetFeil, setVisEnhetFeil] = useState(false); const [, setClsName] = useState(); const [visVersjon, setVisVersjon] = useState(false); @@ -53,12 +53,12 @@ const BeslutterSide: FunctionComponent = () => { }; const context: Periode = { - visAvslag: visAvslag, - setVisAvslag: setVisAvslag, - enhet: enhet, - setEnhet: setEnhet, - enhetFeil: enhetFeil, - setEnhetFeil: setEnhetFeil, + visAvslag, + setVisAvslag, + enhet, + setEnhet, + visEnhetFeil, + setVisEnhetFeil, }; const oppsummeringType: { [key in TiltaksType]: JSX.Element } = { diff --git a/src/BeslutterSide/beslutterPanel/InfoRadBesluttervisning.tsx b/src/BeslutterSide/beslutterPanel/InfoRadBesluttervisning.tsx index a5e691430..f5ef76f8b 100644 --- a/src/BeslutterSide/beslutterPanel/InfoRadBesluttervisning.tsx +++ b/src/BeslutterSide/beslutterPanel/InfoRadBesluttervisning.tsx @@ -13,7 +13,7 @@ const InfoRadBesluttervisning: FunctionComponent = ({ metadata, info, sty return (
- + {info}
diff --git a/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx b/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx index 9e45e194d..ecb52598c 100644 --- a/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx +++ b/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx @@ -55,7 +55,7 @@ const InfoVisningTilskuddsperiode: FunctionComponent = () => { /> } /> -
+
diff --git a/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx b/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx index 6ab44f70a..eda8317d0 100644 --- a/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx +++ b/src/BeslutterSide/beslutterPanel/TilskuddsperiodeEndreKostnadssted.tsx @@ -1,30 +1,62 @@ -import React, { FunctionComponent, useContext } from 'react'; -import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput'; -import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; +import React, { FunctionComponent, useContext, useState, useEffect } from 'react'; +import Skeleton from 'react-loading-skeleton'; -import { AvtaleContext } from '@/AvtaleProvider'; import BEMHelper from '@/utils/bem'; +import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput'; +import { AvtaleContext } from '@/AvtaleProvider'; import { TilskuddsperiodeContext } from '@/BeslutterSide/BeslutterSide'; +import { useHentEnhet } from '@/services/use-rest'; + +const getFeilmelding = (verdi?: string, enhet?: string) => { + if (!verdi?.match(/^\d{4}$/)) { + return 'Enhet må bestå av 4 siffer'; + } + if (!enhet) { + return "Ukjent enhet"; + } + return "En feil oppstod"; +} const TilskuddsperiodeEndreKostnadssted: FunctionComponent = () => { const { avtale } = useContext(AvtaleContext); - const { enhet, setEnhet, enhetFeil } = useContext(TilskuddsperiodeContext); const { gjeldendeTilskuddsperiode } = avtale; + const { enhet, visEnhetFeil, setVisEnhetFeil, setEnhet } = useContext(TilskuddsperiodeContext); + + const [ verdi, setVerdi ] = useState(enhet); const cls = BEMHelper('beslutter-panel'); + + const { data, error, isValidating } = useHentEnhet(verdi?.match(/^\d{4}$/) ? verdi : undefined); + + useEffect(() => { + if (isValidating || error) { + setEnhet(undefined); + } else { + setEnhet(data?.enhetNr); + } + }, [setEnhet, data, error, isValidating]); - if (gjeldendeTilskuddsperiode && gjeldendeTilskuddsperiode.status !== 'UBEHANDLET') return null; + if (gjeldendeTilskuddsperiode && gjeldendeTilskuddsperiode.status !== 'UBEHANDLET') { + return null; + } return ( <>
setEnhet(verdi)} - error={enhetFeil} + verdi={verdi} + feilmelding={visEnhetFeil ? getFeilmelding(verdi, enhet) : undefined} + settVerdi={(nyVerdi) => { + setVerdi(nyVerdi); + setVisEnhetFeil(false); + }} /> - + + {isValidating && ()} + {!isValidating && data && !error && data.navn} +
); diff --git a/src/BeslutterSide/beslutterPanel/beslutterPanel.less b/src/BeslutterSide/beslutterPanel/beslutterPanel.less index bdb6902df..1bc2bcf21 100644 --- a/src/BeslutterSide/beslutterPanel/beslutterPanel.less +++ b/src/BeslutterSide/beslutterPanel/beslutterPanel.less @@ -26,6 +26,12 @@ display: flex; align-items: center; margin-top: 1rem; + flex-wrap: wrap; + + & > .navds-label { + flex-shrink: 0; + margin-right: 0.5rem; + } & > p:nth-child(1) { min-width: 9rem; @@ -35,6 +41,12 @@ } } + &__infovisning-rad--input { + display: flex; + flex-direction: column; + align-items: flex-start; + } + &__avslagtext-subingress { text-align: center; } @@ -61,7 +73,14 @@ &__input-wrapper { display: flex; - margin-left: 1rem; + } + + &__input-meta { + margin-left: 0.5rem; + align-self: center; + } + + &__input input { width: 5rem; } @@ -70,17 +89,35 @@ margin-bottom: 0; } + &__infovisning-rad { + flex-wrap: nowrap; + } + &__grid-container { flex-direction: row; grid-gap: 7rem; } + &__input-wrapper { + align-items: flex-start; + } + &__infovisning-rad { flex-direction: row; + .navds-form-field { gap: 0; grid-gap: 0; } } + + &__infovisning-rad--input { + flex-direction: row; + min-height: 3.5rem; + + > .navds-label:first-of-type { + margin-top: 0.25rem; + } + } } -} \ No newline at end of file +} diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx index 4b211856a..414dce4e8 100644 --- a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx +++ b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx @@ -20,7 +20,7 @@ interface Props { const BeslutterTilskuddsPerioder: FunctionComponent = (props) => { const { avtale, godkjennTilskudd } = useContext(AvtaleContext); - const { enhet, setEnhetFeil, setVisAvslag } = useContext(TilskuddsperiodeContext); + const { enhet, setVisEnhetFeil, setVisAvslag } = useContext(TilskuddsperiodeContext); const { gjeldendeTilskuddsperiode } = avtale; const [godkjennModalÅpen, setGodkjennModalÅpen] = useState(false); const gjeldendeTilskuddsperiodeRef = useRef(null); @@ -137,11 +137,11 @@ const BeslutterTilskuddsPerioder: FunctionComponent = (props) => { <>