From e42ba36e1028a96c132b663b69f5cc53cafabbbb Mon Sep 17 00:00:00 2001
From: Viktor <viktor.grondalen.solberg@nav.no>
Date: Wed, 28 Jun 2023 14:12:28 +0200
Subject: [PATCH] =?UTF-8?q?legger=20til=20en=20komponent=20som=20skal=20vi?=
 =?UTF-8?q?se=20og=20tilby=20redigering=20av=20skole=C3=A5rsperioder=20med?=
 =?UTF-8?q?=20det=20nye=20designet.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/App/hooks/felles/useFormState.ts |  2 +-
 .../Skole\303\245rsperioder.tsx"              |  7 ++
 .../InnvilgetSkolepenger/Vedtaksform.tsx      | 25 ++++---
 .../VisEllerEndreSkole\303\245rsperioder.tsx" | 66 ++++++++++++++++++-
 4 files changed, 88 insertions(+), 12 deletions(-)
 create mode 100644 "src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"

diff --git a/src/frontend/App/hooks/felles/useFormState.ts b/src/frontend/App/hooks/felles/useFormState.ts
index 569f95640..f9d2bf9c9 100644
--- a/src/frontend/App/hooks/felles/useFormState.ts
+++ b/src/frontend/App/hooks/felles/useFormState.ts
@@ -22,7 +22,7 @@ export type FormErrors<T extends Record<string, any | undefined>> = {
         : FormErrors<T[P]>;
 };
 
-type Valideringsfunksjon<T extends Record<string, any | undefined>> = (
+export type Valideringsfunksjon<T extends Record<string, any | undefined>> = (
     state: FormState<T>
 ) => FormErrors<T>;
 
diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"
new file mode 100644
index 000000000..f7604a1cd
--- /dev/null
+++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Skoleårsperioder: React.FC = () => {
+    return <></>;
+};
+
+export default Skoleårsperioder;
diff --git a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Vedtaksform.tsx b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Vedtaksform.tsx
index b985c3168..54d5667d3 100644
--- a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Vedtaksform.tsx
+++ b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Vedtaksform.tsx
@@ -9,8 +9,10 @@ import {
 } from '../../../../../App/typer/vedtak';
 import { Behandling } from '../../../../../App/typer/fagsak';
 import React, { useEffect, useState } from 'react';
-import useFormState, { FormState } from '../../../../../App/hooks/felles/useFormState';
-// import { Valideringsfunksjon } from '../../../../../App/hooks/felles/useFormState';
+import useFormState, {
+    FormState,
+    Valideringsfunksjon,
+} from '../../../../../App/hooks/felles/useFormState';
 import { ListState } from '../../../../../App/hooks/felles/useListState';
 import { useBehandling } from '../../../../../App/context/BehandlingContext';
 import styled from 'styled-components';
@@ -99,9 +101,9 @@ export const Vedtaksform: React.FC<{
     ) as ListState<ISkoleårsperiodeSkolepenger>;
     // const begrunnelseState = formState.getProps('begrunnelse') as FieldState;
 
-    // const utgiftIderForrigeBehandling = forrigeVedtak
-    //     ? forrigeVedtak.skoleårsperioder.flatMap((p) => p.utgiftsperioder.map((u) => u.id))
-    //     : [];
+    const utgiftIderForrigeBehandling = forrigeVedtak
+        ? forrigeVedtak.skoleårsperioder.flatMap((p) => p.utgiftsperioder.map((u) => u.id))
+        : [];
 
     const lagreVedtak = (vedtaksRequest: IVedtakForSkolepenger) => {
         settLaster(true);
@@ -171,8 +173,8 @@ export const Vedtaksform: React.FC<{
         }
     };
 
-    // const customValidate = (fn: Valideringsfunksjon<InnvilgeVedtakForm>) =>
-    //     formState.customValidate(fn);
+    const customValidate = (fn: Valideringsfunksjon<InnvilgeVedtakForm>) =>
+        formState.customValidate(fn);
 
     useEffect(() => {
         if (!behandlingErRedigerbar) {
@@ -185,7 +187,14 @@ export const Vedtaksform: React.FC<{
 
     return (
         <Form onSubmit={formState.onSubmit(handleSubmit)}>
-            <VisEllerEndreSkoleårsperioder />
+            <VisEllerEndreSkoleårsperioder
+                customValidate={customValidate}
+                låsteUtgiftIder={utgiftIderForrigeBehandling}
+                oppdaterHarUtførtBeregning={settHarUtførtBeregning}
+                settValideringsFeil={formState.setErrors}
+                skoleårsperioder={skoleårsPerioderState}
+                valideringsfeil={formState.errors.skoleårsperioder}
+            />
             {feilmelding && <AlertError>{feilmelding}</AlertError>}
             {behandlingErRedigerbar && (
                 <div>
diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
index 7f2664992..09edc2437 100644
--- "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
+++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
@@ -1,7 +1,67 @@
-import React from 'react';
+import { ISkoleårsperiodeSkolepenger } from '../../../../../App/typer/vedtak';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useBehandling } from '../../../../../App/context/BehandlingContext';
+import { ListState } from '../../../../../App/hooks/felles/useListState';
+import { FormErrors, Valideringsfunksjon } from '../../../../../App/hooks/felles/useFormState';
+import { InnvilgeVedtakForm } from './VedtaksformSkolepenger';
+import { tomSkoleårsperiodeSkolepenger } from '../typer';
+import LeggTilKnapp from '../../../../../Felles/Knapper/LeggTilKnapp';
+import { BodyShort } from '@navikt/ds-react';
+import Skoleårsperioder from './Skoleårsperioder';
 
-const VisEllerEndreSkoleårsperioder: React.FC = () => {
-    return <></>;
+const Container = styled.div`
+    padding: 1rem;
+`;
+
+enum Visningsmodus {
+    INITIELL = 'INITIELL',
+    VISNING = 'VISNING',
+}
+
+const utledVisningmodus = (behandlingErRedigerbar: boolean, antallSkoleårsperioder: number) => {
+    if (!behandlingErRedigerbar || antallSkoleårsperioder > 0) {
+        return Visningsmodus.VISNING;
+    }
+    return Visningsmodus.INITIELL;
+};
+
+interface Props {
+    customValidate: (fn: Valideringsfunksjon<InnvilgeVedtakForm>) => boolean;
+    skoleårsperioder: ListState<ISkoleårsperiodeSkolepenger>;
+    låsteUtgiftIder: string[];
+    valideringsfeil?: FormErrors<InnvilgeVedtakForm>['skoleårsperioder'];
+    settValideringsFeil: Dispatch<SetStateAction<FormErrors<InnvilgeVedtakForm>>>;
+    oppdaterHarUtførtBeregning: (beregningUtført: boolean) => void;
+}
+
+const VisEllerEndreSkoleårsperioder: React.FC<Props> = ({ skoleårsperioder }) => {
+    const { behandlingErRedigerbar } = useBehandling();
+    const antallSkoleår = skoleårsperioder.value.length;
+
+    const [visningsmodus, settVisninsmodus] = useState<Visningsmodus>(
+        utledVisningmodus(behandlingErRedigerbar, antallSkoleår)
+    );
+
+    useEffect(() => {
+        settVisninsmodus(utledVisningmodus(behandlingErRedigerbar, antallSkoleår));
+    }, [antallSkoleår, behandlingErRedigerbar]);
+
+    switch (visningsmodus) {
+        case Visningsmodus.INITIELL:
+            return (
+                <Container>
+                    <BodyShort>Bruker har ingen tidligere skoleårsperioder registrert.</BodyShort>
+                    <LeggTilKnapp
+                        knappetekst="Legg til nytt skoleår"
+                        onClick={() => skoleårsperioder.push(tomSkoleårsperiodeSkolepenger())}
+                        variant="tertiary"
+                    />
+                </Container>
+            );
+        case Visningsmodus.VISNING:
+            return <Skoleårsperioder />;
+    }
 };
 
 export default VisEllerEndreSkoleårsperioder;