Orkestrator barn opplysning

.github/workflows/deploy.yml

@@ -149,4 +149,3 @@ jobs:
           RESOURCE: .nais/nais.yaml,.nais/unleash-apitoken.yaml
           VARS: .nais/vars-prod.yaml
           PRINT_PAYLOAD: true
-

app/components/orkestrator-barn/OrkestratorBarn.module.css

@@ -0,0 +1,44 @@
+.orkestratorBarn {
+  margin-top: var(--a-spacing-8);
+}
+
+.opplysningBarnHeader {
+  margin-left: var(--a-spacing-3);
+}
+
+.orkestratorOpplysning {
+  padding: var(--a-spacing-2);
+}
+
+.orkestratorOpplysningsLinje {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-top: 1px solid var(--a-border-divider);
+  padding: var(--a-spacing-2);
+}
+
+.korrigering {
+  grid-template-columns: 1fr 0.1fr 1fr;
+}
+
+.bakgrunn:nth-child(odd) {
+  background-color: #f8f9fc;
+}
+
+.bakgrunn:nth-child(even) {
+  background-color: #ffffff;
+}
+
+.alightRight {
+  display: flex;
+  justify-content: end;
+  align-items: baseline;
+}
+
+.endreKnapp {
+  margin: var(--a-spacing-4) 0 0 var(--a-spacing-3);
+}
+
+.modal {
+  min-width: 600px;
+}

app/components/orkestrator-barn/OrkestratorBarn.tsx

@@ -0,0 +1,162 @@
+import { PencilWritingIcon } from "@navikt/aksel-icons";
+import { Button, Heading, Modal } from "@navikt/ds-react";
+import { useActionData, useNavigation } from "@remix-run/react";
+import { useForm } from "@rvf/remix";
+import { withZod } from "@rvf/zod";
+import classNames from "classnames";
+import { useEffect, useRef } from "react";
+import { z } from "zod";
+
+import { useTypedRouteLoaderData } from "~/hooks/useTypedRouteLoaderData";
+import { IOrkestratorBarn } from "~/models/orkestrator-opplysning.server";
+import { action } from "~/routes/oppgave.$oppgaveId.behandle";
+
+import styles from "./OrkestratorBarn.module.css";
+import { OrkestratorOpplysninLinje } from "./OrkestratorOpplysningLinje";
+
+interface IProps {
+  barnNummer: number;
+  barn: IOrkestratorBarn;
+}
+
+const validator = withZod(
+  z.object({
+    fornavnOgMellomnavn: z.string().min(1, { message: "Du må skrive fornavn" }),
+    etternavn: z.string().min(1, { message: "Du må skrive etternavn" }),
+    fødselsdato: z.string().regex(
+      new RegExp("^(0[1-9]|[12][0-9]|3[01])[\\.-](0[1-9]|1[012])[\\.-](19|20|)\\d\\d$"), // Regex for å matche norsk dato format, eks. 01.02.2023
+      "Ugyldig dato. Gylige datoformat er dd.mm.åååå",
+    ),
+    oppholdssted: z.string().min(1, { message: "Du må velge et land" }),
+    forsørgerBarnet: z.enum(["true", "false"], {
+      required_error: "Du må velge et svar",
+      invalid_type_error: "Ugyldig svar",
+    }),
+    kvalifisererTilBarnetillegg: z.enum(["true", "false"], {
+      required_error: "Du må velge et svar",
+      invalid_type_error: "Ugyldig svar",
+    }),
+    barnetilleggFom: z
+      .string()
+      .regex(
+        new RegExp("^(0[1-9]|[12][0-9]|3[01])[\\.-](0[1-9]|1[012])[\\.-](19|20|)\\d\\d$"),
+        "Ugyldig dato. Gylige datoformat er dd.mm.åååå",
+      ),
+    barnetilleggTom: z
+      .string()
+      .regex(
+        new RegExp("^(0[1-9]|[12][0-9]|3[01])[\\.-](0[1-9]|1[012])[\\.-](19|20|)\\d\\d$"),
+        "Ugyldig dato. Gylige datoformat er dd.mm.åååå",
+      ),
+    begrunnelse: z.string().min(1, { message: "Du må skrive begrunnelse" }),
+  }),
+);
+
+export function OrkestratorBarn({ barnNummer, barn }: IProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const actionData = useActionData<typeof action>();
+  const { state } = useNavigation();
+  const { oppgave } = useTypedRouteLoaderData("routes/oppgave.$oppgaveId");
+
+  useEffect(() => {
+    if (actionData) {
+      ref.current?.close();
+    }
+  }, [actionData]);
+
+  const defaultValues = barn.opplysninger.reduce(
+    (acc, { id, verdi }) => {
+      acc[id] = verdi;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+
+  const orkestratorBarnForm = useForm({
+    validator: validator,
+    method: "put",
+    defaultValues: defaultValues,
+  });
+
+  function avbryt() {
+    orkestratorBarnForm.resetForm();
+    ref.current?.close();
+  }
+
+  // Todo: Ikke lagre til backend dersom ingenting er endret i formen
+  return (
+    <div className={styles.orkestratorBarn}>
+      <>
+        <Heading level="4" size="xsmall" className={styles.opplysningBarnHeader} spacing>
+          Barn {barnNummer}
+        </Heading>
+        <div className={styles.orkestratorOpplysning}>
+          <>
+            {barn.opplysninger.map((opplysning, index) => (
+              <OrkestratorOpplysninLinje
+                key={index}
+                opplysning={opplysning}
+                formScope={orkestratorBarnForm.scope(opplysning.id)}
+                readOnly
+              />
+            ))}
+          </>
+        </div>
+      </>
+      <Button
+        variant="secondary"
+        size="small"
+        className={styles.endreKnapp}
+        icon={<PencilWritingIcon />}
+        onClick={() => ref.current?.showModal()}
+      >
+        Endre
+      </Button>
+
+      <Modal
+        ref={ref}
+        header={{ heading: `Barn ${barnNummer}` }}
+        closeOnBackdropClick
+        className={styles.modal}
+      >
+        <form {...orkestratorBarnForm.getFormProps()}>
+          <Modal.Body>
+            <div className={classNames(styles.orkestratorOpplysning)}>
+              <input
+                hidden={true}
+                readOnly={true}
+                name="_action"
+                value="oppdater-orkestrator-barn"
+              />
+              <input hidden={true} readOnly={true} name="soknadId" value={oppgave.soknadId} />
+              <input hidden={true} readOnly={true} name="barnId" value={barn.barnId} />
+              {barn.opplysninger.map((opplysning, index) => (
+                <OrkestratorOpplysninLinje
+                  key={index}
+                  opplysning={opplysning}
+                  formScope={orkestratorBarnForm.scope(opplysning.id as string)}
+                />
+              ))}
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              type="button"
+              variant="tertiary"
+              size="small"
+              onClick={() => ref.current?.close()}
+            >
+              Lukk
+            </Button>
+            <Button type="button" variant="secondary" size="small" onClick={avbryt}>
+              Avbryt
+            </Button>
+            <Button type="submit" size="small" loading={state !== "idle"}>
+              Lagre endringer
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal>
+    </div>
+  );
+}

app/components/orkestrator-barn/OrkestratorOpplysningLinje.tsx

@@ -0,0 +1,42 @@
+import { FormScope } from "@rvf/remix";
+import { IOrkestratorBarnOpplysning } from "~/models/orkestrator-opplysning.server";
+import {
+  formatterOrkestratorOpplysningVerdi,
+  hentOrkestratorBarnOpplysningLabel,
+} from "~/utils/orkestrator-opplysninger.utils";
+import { OrkestratorOpplysning } from "../orkestrator-opplysning/OrkestratorOpplysning";
+import styles from "./OrkestratorBarn.module.css";
+import { OrkestratorTag } from "./OrkestratorTag";
+import classNames from "classnames";
+
+interface IProps {
+  opplysning: IOrkestratorBarnOpplysning;
+  readOnly?: boolean;
+  formScope: FormScope<string>;
+}
+
+export function OrkestratorOpplysninLinje({ opplysning, readOnly, formScope }: IProps) {
+  if (readOnly) {
+    return (
+      <div className={classNames(styles.orkestratorOpplysningsLinje, styles.bakgrunn)}>
+        <div>{hentOrkestratorBarnOpplysningLabel(opplysning.id)}</div>
+        <div>{formatterOrkestratorOpplysningVerdi(opplysning)}</div>
+        <div className={styles.alightRight}>
+          <OrkestratorTag kilde={opplysning.kilde} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.orkestratorOpplysningsLinje, styles.korrigering)}>
+      <div>
+        <OrkestratorOpplysning opplysning={opplysning} formScope={formScope} />
+      </div>
+      <div />
+      <div className={styles.alightRight}>
+        <OrkestratorTag kilde={opplysning.kilde} />
+      </div>
+    </div>
+  );
+}

app/components/orkestrator-barn/OrkestratorTag.tsx

@@ -0,0 +1,18 @@
+import { Tag } from "@navikt/ds-react";
+import { IOrkestratorKilde } from "~/models/orkestrator-opplysning.server";
+
+interface IProps {
+  kilde?: IOrkestratorKilde;
+}
+
+export function OrkestratorTag({ kilde }: IProps) {
+  if (kilde === undefined) {
+    return null;
+  }
+
+  return (
+    <Tag variant={kilde === "register" ? "alt1" : "warning"} size="small">
+      {kilde === "register" ? "Register" : "Søknad"}
+    </Tag>
+  );
+}

app/components/orkestrator-opplysning/OrkestratorOpplysning.tsx

@@ -0,0 +1,37 @@
+import { IOrkestratorBarnOpplysning } from "~/models/orkestrator-opplysning.server";
+import { OrkestratorOpplysningTekst } from "./OrkestratorOpplysningTekst";
+import { OrkestratorOpplysningLand } from "./OrkestratorOpplysningLand";
+import { OrkestratorOpplysningBoolsk } from "./OrkestratorOpplysningBoolsk";
+import { OrkestratorOpplysningDato } from "./OrkestratorOpplysningDato";
+import { FormScope } from "@rvf/remix";
+import { logger } from "~/utils/logger.utils";
+
+interface IProps {
+  opplysning: IOrkestratorBarnOpplysning;
+  formScope: FormScope<string>;
+}
+
+export function OrkestratorOpplysning({ opplysning, formScope }: IProps) {
+  switch (opplysning.datatype) {
+    case "tekst":
+      return <OrkestratorOpplysningTekst opplysning={opplysning} formScope={formScope} />;
+
+    case "land":
+      return <OrkestratorOpplysningLand opplysning={opplysning} formScope={formScope} />;
+
+    case "boolsk":
+      return <OrkestratorOpplysningBoolsk opplysning={opplysning} formScope={formScope} />;
+
+    case "dato":
+      return <OrkestratorOpplysningDato opplysning={opplysning} formScope={formScope} />;
+
+    default:
+      logger.error(`Ukjent orkestrator datatype ${opplysning.datatype}`);
+
+      return (
+        <>
+          {opplysning.id}: {opplysning.verdi}
+        </>
+      );
+  }
+}

app/components/orkestrator-opplysning/OrkestratorOpplysningBoolsk.tsx

@@ -0,0 +1,28 @@
+import { Radio, RadioGroup, Stack } from "@navikt/ds-react";
+import { FormScope, useField } from "@rvf/remix";
+import { IOrkestratorBarnOpplysning } from "~/models/orkestrator-opplysning.server";
+import { hentOrkestratorBarnOpplysningLabel } from "~/utils/orkestrator-opplysninger.utils";
+
+interface IProps {
+  opplysning: IOrkestratorBarnOpplysning;
+  formScope: FormScope<string>;
+}
+
+export function OrkestratorOpplysningBoolsk({ opplysning, formScope }: IProps) {
+  const field = useField(formScope);
+
+  return (
+    <RadioGroup
+      {...field.getInputProps()}
+      legend={hentOrkestratorBarnOpplysningLabel(opplysning.id)}
+      size="small"
+      error={field.error()}
+      readOnly={opplysning.kilde === "register"}
+    >
+      <Stack gap="0 6" direction={{ xs: "column", sm: "row" }} wrap={false}>
+        <Radio value="true">Ja</Radio>
+        <Radio value="false">Nei</Radio>
+      </Stack>
+    </RadioGroup>
+  );
+}

app/components/orkestrator-opplysning/OrkestratorOpplysningDato.tsx

@@ -0,0 +1,51 @@
+import { DatePicker, useDatepicker } from "@navikt/ds-react";
+import { FormScope, useField } from "@rvf/remix";
+import { addYears, formatISO, subYears } from "date-fns";
+
+import { IOrkestratorBarnOpplysning } from "~/models/orkestrator-opplysning.server";
+import { formaterNorskDato } from "~/utils/dato.utils";
+import { hentOrkestratorBarnOpplysningLabel } from "~/utils/orkestrator-opplysninger.utils";
+
+interface IProps {
+  opplysning: IOrkestratorBarnOpplysning;
+  formScope: FormScope<string>;
+}
+
+export function OrkestratorOpplysningDato({ opplysning, formScope }: IProps) {
+  const field = useField(formScope);
+
+  const { datepickerProps, inputProps } = useDatepicker({
+    defaultSelected: new Date(opplysning.verdi),
+    toDate: addYears(new Date(), 100),
+    fromDate: subYears(new Date(), 100),
+    locale: "nb",
+    inputFormat: "dd.MM.yyyy",
+    onDateChange: (date) => {
+      if (date) {
+        field.clearError();
+
+        const datoBackendFormat = formatISO(date, { representation: "date" });
+        field.setValue(formaterNorskDato(datoBackendFormat));
+        if (datoBackendFormat !== opplysning.verdi) {
+          field.setDirty(true);
+        } else {
+          field.setDirty(false);
+        }
+      }
+    },
+  });
+
+  return (
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input
+        size="small"
+        {...inputProps}
+        label={hentOrkestratorBarnOpplysningLabel(opplysning.id)}
+        form={field.getInputProps().form}
+        name={field.getInputProps().name}
+        error={field.error()}
+        readOnly={opplysning.kilde === "register"}
+      />
+    </DatePicker>
+  );
+}