legger til en komponent som skal vise og tilby redigering av skoleårs…

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>;
 

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skoleårsperioder.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Skoleårsperioder: React.FC = () => {
+    return <></>;
+};
+
+export default Skoleårsperioder;

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>

src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkoleårsperioder.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;