Vurder overlappende sak yup (#7012)

* Bump generert typescript klient. * Tilpasning feltdefinisjon endra til nullable. Var ved ein feil satt til NotNull i backend definisjon. * Legger til yup for validering til korrekt skjema type. Proof of Concept av å validere og samtidig konvertere form input til korrekt typescript dto type. Mangler handtering av valideringsfeil ved skjema submit. * Fiks siste validering/typeproblem i VurderOverlappendeSak.tsx * Forbedre valideringsfeilmeldinger * Fjern undefined frå søkersUttaksgrad i post body * Validering satt på komponenter fungerte ikkje sammen med yup skjema resolver. Bruker vanlege aksel inputs med yup validering istadenfor ft-form-hooks inputs med validering på komponentnivå. Unngår samtidig ein del avhengigheter med dette. * Fiks story test etter omskriving. * Fjern debug logging. --------- Co-authored-by: Hallvard Andreas Stark <[email protected]>
navikt · Jan 24, 2025 · 4a6243f · 4a6243f
1 parent c40f31d
commit 4a6243f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 45 deletions.
diff --git a/packages/v2/backend/package.json b/packages/v2/backend/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@navikt/k9-klage-typescript-client": "1.0.20241206133624",
-    "@navikt/k9-sak-typescript-client": "1.0.20250102132051"
+    "@navikt/k9-sak-typescript-client": "1.0.20250117142601"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.64.2"

diff --git a/packages/v2/gui/package.json b/packages/v2/gui/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^3.10.0",
     "@k9-sak-web/backend": "workspace:^",
     "@k9-sak-web/lib": "1.0.0",
     "@navikt/ft-form-hooks": "^6.0.3-react19beta.0",
@@ -26,6 +27,7 @@
     "axios": "1.7.9",
     "object-hash": "^3.0.0",
     "react": "19.0.0",
-    "react-hook-form": "7.53.2"
+    "react-hook-form": "7.53.2",
+    "yup": "^1.6.1"
   }
 }
diff --git a/packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.stories.tsx b/packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.stories.tsx
@@ -73,12 +73,12 @@ const bekreftAksjonspunktRequest: BekreftVurderOverlappendeSakerAksjonspunktRequ
           // k9-sak påkrever begrunnelse i hver periode, og det kan ikke være en tom streng
           begrunnelse: 'Dette er en grundig begrunnelse',
           periode: { fom: fom1.toISOString(), tom: tom1.toISOString() },
-          søkersUttaksgrad: '40',
+          søkersUttaksgrad: 40,
         },
         {
           begrunnelse: 'Dette er en grundig begrunnelse',
           periode: { fom: fom2.toISOString(), tom: tom2.toISOString() },
-          søkersUttaksgrad: '60',
+          søkersUttaksgrad: 60,
         },
       ],
     },
@@ -229,9 +229,9 @@ export const LøstAksjonspunktKanRedigeres: Story = {
 
       await expect(knapp).toHaveTextContent('Rediger');
       await userEvent.click(knapp);
-      await expect(feltEn.getAttribute('readonly')).toEqual('');
-      await expect(feltTo.getAttribute('readonly')).toEqual('');
-      await expect(begrunnelseFelt.getAttribute('readonly')).toEqual('');
+      await expect(feltEn).not.toHaveAttribute('readonly');
+      await expect(feltTo).not.toHaveAttribute('readonly');
+      await expect(begrunnelseFelt).not.toHaveAttribute('readonly');
 
       await userEvent.click(await canvas.getByRole('button', { name: /Avbryt/i }));
       await expect(feltTo).toHaveAttribute('readonly');

diff --git a/packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.tsx b/packages/v2/gui/src/prosess/uttak/vurder-overlappende-sak/VurderOverlappendeSak.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState, type FC } from 'react';
+import * as yup from 'yup';
 import { useQuery } from '@tanstack/react-query';
 import { useFieldArray, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
 import {
   Alert,
   BodyShort,
@@ -14,9 +16,8 @@ import {
   TextField,
   VStack,
 } from '@navikt/ds-react';
-import { Form, NumberField, TextAreaField } from '@navikt/ft-form-hooks';
+import { Form } from '@navikt/ft-form-hooks';
 import { AssessedBy } from '@navikt/ft-plattform-komponenter';
-import { hasValidInteger, maxLength, minLength, required } from '@navikt/ft-form-validators';
 import { formatPeriod } from '@k9-sak-web/lib/dateUtils/dateUtils.js';
 import type {
   AksjonspunktDto,
@@ -28,6 +29,7 @@ import type { BehandlingUttakBackendApiType } from '../BehandlingUttakBackendApi
 import { erAksjonspunktReadOnly, kanAksjonspunktRedigeres } from '../../../utils/aksjonspunkt';
 
 import styles from './VurderOverlappendeSak.module.css';
+import type { ObjectSchema } from 'yup';
 
 interface Props {
   behandling: Pick<BehandlingDto, 'uuid' | 'id' | 'versjon' | 'status'>;
@@ -52,7 +54,7 @@ export type BekreftVurderOverlappendeSakerAksjonspunktRequest = BekreftData['req
     perioder: Array<{
       begrunnelse: string;
       periode: { fom: string; tom: string };
-      søkersUttaksgrad: number | string;
+      søkersUttaksgrad: number;
     }>;
   }>;
 };
@@ -64,7 +66,7 @@ const VurderOverlappendeSak: FC<Props> = ({ behandling, aksjonspunkt, api, oppda
   const [rediger, setRediger] = useState<boolean>(false);
   const sakAvsluttet = status === 'AVSLU';
 
-  const buildInitialValues = (data: EgneOverlappendeSakerDto | undefined): VurderOverlappendeSakFormData => {
+  const buildInitialValues = (data: EgneOverlappendeSakerDto | undefined) => {
     return {
       begrunnelse: aksjonspunkt?.begrunnelse || '',
       perioder:
@@ -86,13 +88,46 @@ const VurderOverlappendeSak: FC<Props> = ({ behandling, aksjonspunkt, api, oppda
     queryFn: async () => await api.getEgneOverlappendeSaker(uuid),
   });
 
+  const vurderOverlappendeSakFormSchema: ObjectSchema<VurderOverlappendeSakFormData> = yup.object({
+    begrunnelse: yup
+      .string()
+      .min(3, 'Du må skrive minst tre tegn')
+      .max(2000, 'Maks 2000 tegn tillatt.')
+      .required('Begrunnelse må fylles ut'),
+    perioder: yup
+      .array(
+        yup.object({
+          periode: yup.object({ fom: yup.string().required(), tom: yup.string().required() }),
+          søkersUttaksgrad: yup
+            .number()
+            // Handter tal tasta inn med , som desimalteikn:
+            .transform((v, origV) =>
+              Number.isNaN(v) && typeof origV === 'string' ? Number(origV.replace(',', '.')) : v,
+            )
+            // Vi vil ha undefined istadenfor NaN
+            .transform(v => (Number.isNaN(v) ? undefined : v))
+            .required('Søkers uttaksgrad må fylles ut')
+            .min(0, 'Minimum 0%')
+            .max(100, 'Maks 100%'),
+          saksnummer: yup.array(yup.string().required()).required(),
+        }),
+      )
+      .required(),
+  });
+
   const formMethods = useForm<VurderOverlappendeSakFormData>({
+    resolver: yupResolver(vurderOverlappendeSakFormSchema),
     defaultValues: {
       perioder: [],
     },
   });
 
-  const { reset, control, register } = formMethods;
+  const {
+    reset,
+    control,
+    register,
+    formState: { errors },
+  } = formMethods;
   const { fields } = useFieldArray({ control, name: 'perioder' });
 
   useEffect(() => {
@@ -195,36 +230,24 @@ const VurderOverlappendeSak: FC<Props> = ({ behandling, aksjonspunkt, api, oppda
                   } = field;
                   return (
                     <div key={`${fom}-${tom}-${saksnummer}`}>
-                      {readOnly ? (
-                        <TextField
-                          label={`Sett uttaksgrad i prosent for perioden ${formatPeriod(fom || '', tom || '')}`}
-                          size="small"
-                          className={styles['uttaksgradField']}
-                          readOnly
-                          {...register(`perioder.${index}.søkersUttaksgrad`)}
-                        />
-                      ) : (
-                        <NumberField
-                          label={`Sett uttaksgrad i prosent for perioden ${formatPeriod(fom || '', tom || '')}`}
-                          name={`perioder.${index}.søkersUttaksgrad`}
-                          validate={[required, hasValidInteger, minLength(1), maxLength(3)]}
-                          className={styles['uttaksgradField']}
-                          readOnly={readOnly}
-                        />
-                      )}
+                      <TextField
+                        label={`Sett uttaksgrad i prosent for perioden ${formatPeriod(fom || '', tom || '')}`}
+                        inputMode="numeric"
+                        size="small"
+                        className={styles['uttaksgradField']}
+                        readOnly={readOnly}
+                        {...register(`perioder.${index}.søkersUttaksgrad`)}
+                        error={errors.perioder?.[index]?.søkersUttaksgrad?.message}
+                      />
                     </div>
                   );
                 })}
-                {readOnly ? (
-                  <Textarea label="Begrunnelse" readOnly {...register('begrunnelse')} />
-                ) : (
-                  <TextAreaField
-                    name="begrunnelse"
-                    label="Begrunnelse"
-                    validate={[required, maxLength(2000), minLength(3)]}
-                    readOnly={readOnly}
-                  />
-                )}
+                <Textarea
+                  label="Begrunnelse"
+                  readOnly={readOnly}
+                  {...register('begrunnelse')}
+                  error={errors.begrunnelse?.message}
+                />
 
                 {saksbehandler && <AssessedBy ident={saksbehandler} date={vurdertTidspunkt} />}
 

diff --git a/yarn.lock b/yarn.lock
@@ -3880,7 +3880,7 @@ __metadata:
   resolution: "@k9-sak-web/backend@workspace:packages/v2/backend"
   dependencies:
     "@navikt/k9-klage-typescript-client": 1.0.20241206133624
-    "@navikt/k9-sak-typescript-client": 1.0.20250102132051
+    "@navikt/k9-sak-typescript-client": 1.0.20250117142601
     "@tanstack/eslint-plugin-query": ^5.64.2
   languageName: unknown
   linkType: soft
@@ -4419,6 +4419,7 @@ __metadata:
   resolution: "@k9-sak-web/gui@workspace:packages/v2/gui"
   dependencies:
     "@hookform/error-message": ^2.0.1
+    "@hookform/resolvers": ^3.10.0
     "@k9-sak-web/backend": "workspace:^"
     "@k9-sak-web/lib": 1.0.0
     "@navikt/ft-form-hooks": ^6.0.3-react19beta.0
@@ -4430,6 +4431,7 @@ __metadata:
     object-hash: ^3.0.0
     react: 19.0.0
     react-hook-form: 7.53.2
+    yup: ^1.6.1
   languageName: unknown
   linkType: soft
 
@@ -5218,10 +5220,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/k9-sak-typescript-client@npm:1.0.20250102132051":
-  version: 1.0.20250102132051
-  resolution: "@navikt/k9-sak-typescript-client@npm:1.0.20250102132051::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-sak-typescript-client%2F1.0.20250102132051%2F4e479eb94a99316d0d63abb6640787cf4a663f8d"
-  checksum: 2d2adb83d6894bb543788d2a72fc571f207f152d6297f1cd6366f9d298b72d720fbae0c408ca38f66539fe1c6d8dbcc5901be438ffe7405b66ff019a04e661ca
+"@navikt/k9-sak-typescript-client@npm:1.0.20250117142601":
+  version: 1.0.20250117142601
+  resolution: "@navikt/k9-sak-typescript-client@npm:1.0.20250117142601::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-sak-typescript-client%2F1.0.20250117142601%2F30277ac79c5450c19cb50545e9225ddaac4f3030"
+  checksum: e94a579efa2e8739a10cc503128aa868fbdaf2fe5be34b0f4f6f2806c377745928ed6fa73dd2d427a33fc542e5a4a2c7b0503dd02dc5a2d0db848c6354855d46
   languageName: node
   linkType: hard
 
@@ -18996,7 +18998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yup@npm:1.6.1":
+"yup@npm:1.6.1, yup@npm:^1.6.1":
   version: 1.6.1
   resolution: "yup@npm:1.6.1"
   dependencies: