feat. Validere enhet ved godkjenning av tilskuddsperiode (#1191)

* feat. Validere enhet ved godkjenning av tilskuddsperiode * fix. Fikset styling for å bedre tilpasse enhetsnavnet
navikt · Feb 1, 2024 · b7c3e82 · b7c3e82
1 parent 66368bd
commit b7c3e82
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 43 deletions.
diff --git 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
@@ -22,10 +22,10 @@ const cls = BEMHelper('beslutter-side');
 export interface Periode {
     visAvslag: boolean;
     setVisAvslag: Dispatch<SetStateAction<boolean>>;
-    enhet: string;
-    setEnhet: Dispatch<SetStateAction<string>>;
-    enhetFeil: string | undefined;
-    setEnhetFeil: Dispatch<SetStateAction<string | undefined>>;
+    enhet?: string;
+    setEnhet: Dispatch<SetStateAction<string | undefined>>;
+    visEnhetFeil: boolean;
+    setVisEnhetFeil: Dispatch<SetStateAction<boolean>>;
 }
 
 export const TilskuddsperiodeContext = React.createContext<Periode>({} 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<string | undefined>(
         gjeldendeTilskuddsperiode && gjeldendeTilskuddsperiode?.løpenummer > 1
             ? avtale.tilskuddPeriode[gjeldendeTilskuddsperiode?.løpenummer - 1].enhet ?? defaultEnhet
             : defaultEnhet
     );
-    const [enhetFeil, setEnhetFeil] = useState<string | undefined>(undefined);
+    const [visEnhetFeil, setVisEnhetFeil] = useState<boolean>(false);
     const [, setClsName] = useState<string>();
     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
@@ -13,7 +13,7 @@ const InfoRadBesluttervisning: FunctionComponent<Props> = ({ metadata, info, sty
     return (
         <div className={cls.element('infovisning-rad')} style={style}>
             <Label>{metadata}</Label>
-            <BodyShort size="small" style={{ marginLeft: '0.5rem' }}>
+            <BodyShort size="small">
                 {info}
             </BodyShort>
         </div>

diff --git a/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx b/src/BeslutterSide/beslutterPanel/InfoVisningTilskuddsperiode.tsx
@@ -55,7 +55,7 @@ const InfoVisningTilskuddsperiode: FunctionComponent = () => {
                             />
                         }
                     />
-                    <div className={cls.element('infovisning-rad')}>
+                    <div className={cls.element('infovisning-rad', 'input')}>
                         <Label>Endre kostnadssted</Label>
                         <TilskuddsperiodeEndreKostnadssted />
                     </div>

diff --git 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 (
         <>
             <div className={cls.element('input-wrapper')}>
                 <PakrevdInput
+                    className={cls.element('input')}
                     size="small"
                     label=""
-                    verdi={enhet}
-                    settVerdi={(verdi) => setEnhet(verdi)}
-                    error={enhetFeil}
+                    verdi={verdi}
+                    feilmelding={visEnhetFeil ? getFeilmelding(verdi, enhet) : undefined}
+                    settVerdi={(nyVerdi) => {
+                        setVerdi(nyVerdi);
+                        setVisEnhetFeil(false);
+                    }}
                 />
-                <VerticalSpacer rem={1} />
+                <span className={cls.element('input-meta')} title={data?.navn}>
+                    {isValidating && (<Skeleton width="5rem" />)}
+                    {!isValidating && data && !error && data.navn}
+                </span>
             </div>
         </>
     );

diff --git 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;
+      }
+    }
   }
-}
+}
diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
     const { avtale, godkjennTilskudd } = useContext<Context>(AvtaleContext);
-    const { enhet, setEnhetFeil, setVisAvslag } = useContext<Periode>(TilskuddsperiodeContext);
+    const { enhet, setVisEnhetFeil, setVisAvslag } = useContext<Periode>(TilskuddsperiodeContext);
     const { gjeldendeTilskuddsperiode } = avtale;
     const [godkjennModalÅpen, setGodkjennModalÅpen] = useState<boolean>(false);
     const gjeldendeTilskuddsperiodeRef = useRef<HTMLTableRowElement | null>(null);
@@ -137,11 +137,11 @@ const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
                                                         <>
                                                             <Button
                                                                 onClick={() => {
-                                                                    if (!enhet.match(/\d{4}/)) {
-                                                                        setEnhetFeil('Enhet må bestå av 4 siffer');
-                                                                        return;
+                                                                    if (enhet) {
+                                                                        setGodkjennModalÅpen(true);
+                                                                    } else {
+                                                                        setVisEnhetFeil(true);
                                                                     }
-                                                                    setGodkjennModalÅpen(true);
                                                                 }}
                                                             >
                                                                 Godkjenn tilskuddsperiode
@@ -168,8 +168,10 @@ const BeslutterTilskuddsPerioder: FunctionComponent<Props> = (props) => {
             <TilskuddsperiodeVisAvslag />
             <BekreftelseModal
                 bekreftOnClick={async () => {
-                    await godkjennTilskudd(enhet);
-                    setGodkjennModalÅpen(false);
+                    if (enhet) {
+                        await godkjennTilskudd(enhet);
+                        setGodkjennModalÅpen(false);
+                    }
                 }}
                 modalIsOpen={godkjennModalÅpen}
                 oversiktTekst="Godkjenn tilskuddsperiode"

diff --git a/src/komponenter/PakrevdInput/PakrevdInput.tsx b/src/komponenter/PakrevdInput/PakrevdInput.tsx
@@ -11,21 +11,22 @@ interface Props extends TextFieldProps {
 }
 
 const PakrevdInput: React.FunctionComponent<Props> = (props: PropsWithChildren<Props>) => {
-    const { verdi, label, feilmelding, settVerdi, type, size } = props;
+    const { verdi, label, feilmelding, settVerdi, type, size, ...restProps } = props;
     const [feil, setFeil, sjekkInputfelt] = usePaakrevd(verdi ? verdi.toString() : '', label, feilmelding);
 
     return (
         <TextField
             size={size}
             label={label}
             value={props.verdi || ''}
-            error={feil}
+            error={feil || feilmelding}
             onChange={(event) => {
                 settVerdi(event.target.value);
                 setFeil(undefined);
             }}
             onBlur={sjekkInputfelt}
             type={type || 'text'}
+            {...restProps}
         />
     );
 };

diff --git a/src/services/use-rest.ts b/src/services/use-rest.ts
@@ -1,10 +1,12 @@
 import axios from 'axios';
 import axiosRetry from 'axios-retry';
-import { SIDE_FOER_INNLOGGING } from '@/RedirectEtterLogin';
-import { basename } from '@/paths';
+import useSWR from 'swr';
+
 import { ApiError, AutentiseringError, FeilkodeError } from '@/types/errors';
 import { AvtaleVersjon } from '@/types/avtale';
-import useSWR from 'swr';
+import { Enhet } from '@/types/enhet';
+import { SIDE_FOER_INNLOGGING } from '@/RedirectEtterLogin';
+import { basename } from '@/paths';
 
 const api = axios.create({
     baseURL: '/tiltaksgjennomforing/api',
@@ -42,3 +44,7 @@ export const useHentVersjoner = (avtaleId: string) => {
     const { data } = useSWR<AvtaleVersjon[]>(`/avtaler/${avtaleId}/versjoner`, swrConfig);
     return data!; // nosonar
 };
+
+export const useHentEnhet = (enhetsnummer?: string) => {
+    return useSWR<Enhet>(enhetsnummer ? `/enheter/${enhetsnummer}` : undefined, { ...swrConfig,  suspense: false, shouldRetryOnError: false });
+}
diff --git a/src/types/enhet.ts b/src/types/enhet.ts
@@ -0,0 +1,4 @@
+export interface Enhet {
+    enhetNr: string;
+    navn: string;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -4525,6 +4525,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -11166,10 +11171,13 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-swr@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
-  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+swr@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
+  dependencies:
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
 
 symbol-observable@^4.0.0:
   version "4.0.0"
@@ -11654,6 +11662,11 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"