From 49c6991e631956ade91193d4d2807dbfee4eb13a Mon Sep 17 00:00:00 2001
From: ebelegu <egzon.belegu@nav.no>
Date: Wed, 14 Aug 2024 13:58:31 +0200
Subject: [PATCH] =?UTF-8?q?Testprodusent-=20OppdaterKalenderavtale=20st?=
 =?UTF-8?q?=C3=B8tter=20tilstand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Komponenter/KalenderAvtale.tsx        | 374 ++++++++++--------
 1 file changed, 218 insertions(+), 156 deletions(-)

diff --git a/test-produsent/src/Komponenter/KalenderAvtale.tsx b/test-produsent/src/Komponenter/KalenderAvtale.tsx
index 424d11180..3414d6386 100644
--- a/test-produsent/src/Komponenter/KalenderAvtale.tsx
+++ b/test-produsent/src/Komponenter/KalenderAvtale.tsx
@@ -1,5 +1,5 @@
-import {gql, useMutation} from "@apollo/client";
-import {print} from "graphql/language";
+import { gql, useMutation } from '@apollo/client';
+import { print } from 'graphql/language';
 import React, {
     useContext,
     useState,
@@ -7,14 +7,14 @@ import React, {
     useEffect,
     forwardRef,
     useImperativeHandle,
-} from "react";
-import {Mutation} from "../api/graphql-types.ts";
-import {Button, Checkbox, Heading, TextField, ToggleGroup} from "@navikt/ds-react";
-import cssClasses from "./KalenderAvtale.module.css";
-import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
-import {darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';
-import {GrupperingsidContext} from "../App.tsx";
-import {EksternVarsel, formateEksternVarsel, formaterPåminnelse} from "./EksternVarsling.tsx";
+} from 'react';
+import { KalenderavtaleTilstand, Mutation } from '../api/graphql-types.ts';
+import { Button, Checkbox, Heading, Select, TextField, ToggleGroup } from '@navikt/ds-react';
+import cssClasses from './KalenderAvtale.module.css';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { GrupperingsidContext } from '../App.tsx';
+import { EksternVarsel, formateEksternVarsel, formaterPåminnelse } from './EksternVarsling.tsx';
 
 const NY_KALENDERAVTALE = gql`
     mutation (
@@ -31,13 +31,8 @@ const NY_KALENDERAVTALE = gql`
         $erDigitalt: Boolean
     ) {
         nyKalenderavtale(
-            mottakere: [{
-                altinn: {
-                    serviceCode: "4936"
-                    serviceEdition: "1"
-                }
-            }]
-            virksomhetsnummer: $virksomhetsnummer,
+            mottakere: [{ altinn: { serviceCode: "4936", serviceEdition: "1" } }]
+            virksomhetsnummer: $virksomhetsnummer
             grupperingsid: $grupperingsid
             eksternId: $eksternId
             startTidspunkt: $startTidspunkt
@@ -59,41 +54,36 @@ const NY_KALENDERAVTALE = gql`
             }
         }
     }
-`
-const nullIfEmpty = (s: string | undefined) => s === "" || s === undefined ? null : s
-
+`;
+const nullIfEmpty = (s: string | undefined) => (s === '' || s === undefined ? null : s);
 
 const datePlus = (days: number = 0, hours: number = 0) => {
     const date = new Date();
-    date.setDate(date.getDate() + days)
-    date.setHours(date.getHours() + hours)
-    return date
-}
+    date.setDate(date.getDate() + days);
+    date.setHours(date.getHours() + hours);
+    return date;
+};
 
 export const NyKalenderAvtale: FunctionComponent = () => {
-    const [nyKalenderavtale, {
-        data,
-        loading,
-        error
-    }] = useMutation<Pick<Mutation, "nyKalenderavtale">>(NY_KALENDERAVTALE)
+    const [nyKalenderavtale, { data, loading, error }] =
+        useMutation<Pick<Mutation, 'nyKalenderavtale'>>(NY_KALENDERAVTALE);
 
-    const [påminnelse, setPåminnelse] = useState<boolean>(false)
+    const [påminnelse, setPåminnelse] = useState<boolean>(false);
 
-    const grupperingsid = useContext(GrupperingsidContext)
+    const grupperingsid = useContext(GrupperingsidContext);
 
     const grupperingsidRef = React.useRef<HTMLInputElement>(null);
-    const virksomhetsnummerRef = React.useRef<HTMLInputElement>(null)
-    const tekstRef = React.useRef<HTMLInputElement>(null)
-    const startTidspunktRef = React.useRef<HTMLInputElement>(null)
-    const sluttTidspunktRef = React.useRef<HTMLInputElement>(null)
-    const eksternIdRef = React.useRef<HTMLInputElement>(null)
-    const lokasjonRef = React.useRef<Lokasjon>(null)
-    const lenkeRef = React.useRef<HTMLInputElement>(null)
+    const virksomhetsnummerRef = React.useRef<HTMLInputElement>(null);
+    const tekstRef = React.useRef<HTMLInputElement>(null);
+    const startTidspunktRef = React.useRef<HTMLInputElement>(null);
+    const sluttTidspunktRef = React.useRef<HTMLInputElement>(null);
+    const eksternIdRef = React.useRef<HTMLInputElement>(null);
+    const lokasjonRef = React.useRef<Lokasjon>(null);
+    const lenkeRef = React.useRef<HTMLInputElement>(null);
     const merkelappRef = React.useRef<HTMLInputElement>(null);
 
     const eksternVarselRef = React.useRef<EksternVarsel>(null);
 
-
     const handleSend = () => {
         nyKalenderavtale({
             variables: {
@@ -108,114 +98,163 @@ export const NyKalenderAvtale: FunctionComponent = () => {
                 lokasjon: lokasjonRef.current?.hentLokasjon(),
                 merkelapp: nullIfEmpty(merkelappRef.current?.value),
                 eksterneVarsler: formateEksternVarsel(eksternVarselRef),
-                erDigitalt: lokasjonRef.current?.hentDigitalt()
-            }
-        })
-    }
+                erDigitalt: lokasjonRef.current?.hentDigitalt(),
+            },
+        });
+    };
 
     useEffect(() => {
         if (grupperingsidRef.current !== null) {
-            grupperingsidRef.current.value = grupperingsid
+            grupperingsidRef.current.value = grupperingsid;
         }
     }, [grupperingsid]);
 
-    return <div className={cssClasses.kalenderavtale}>
-        <SyntaxHighlighter language="graphql" style={darcula}>
-            {print(NY_KALENDERAVTALE)}
-        </SyntaxHighlighter>
-
-        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", width: "105rem", gap: "32px"}}>
-            <div style={{display: "flex", flexDirection: "column", gap: "4px"}}>
-                <TextField label={"Grupperingsid*"} ref={grupperingsidRef}/>
-                <TextField label={"Virksomhetsnummer*"} ref={virksomhetsnummerRef} defaultValue="910825526"/>
-                <TextField label={"Tekst*"} ref={tekstRef} defaultValue="Dette er en kalenderhendelse"/>
-                <TextField label={"Starttidspunkt*"} ref={startTidspunktRef}
-                           defaultValue={datePlus(1).toISOString().replace('Z', '')}/>
-                <TextField label={"Sluttidspunkt"} ref={sluttTidspunktRef}
-                           defaultValue={datePlus(1, 1).toISOString().replace('Z', '')}/>
-                <TextField label={"Merkelapp*"} ref={merkelappRef} defaultValue="fager"/>
-                <TextField label={"Lenke"} ref={lenkeRef}/>
-                <TextField label={"EksternId*"} ref={eksternIdRef} defaultValue={crypto.randomUUID().toString()}/>
-                <Button variant="primary" onClick={handleSend}>Opprett en ny kalenderavtale</Button>
-            </div>
-            <div>
-                <EksternVarsel ref={eksternVarselRef}/>
-                <hr/>
-                <Lokasjon ref={lokasjonRef}/>
-                <hr/>
-                <ToggleGroup defaultValue="Ingen" onChange={(v) => setPåminnelse(v === "Send påminnelse")}
-                             label="Påminnelse">
-                    <ToggleGroup.Item value={"Ingen"}>Ingen</ToggleGroup.Item>
-                    <ToggleGroup.Item value={"Send påminnelse"}>Send påminnelse</ToggleGroup.Item>
-                </ToggleGroup>
+    return (
+        <div className={cssClasses.kalenderavtale}>
+            <SyntaxHighlighter language="graphql" style={darcula}>
+                {print(NY_KALENDERAVTALE)}
+            </SyntaxHighlighter>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr 1fr',
+                    width: '105rem',
+                    gap: '32px',
+                }}
+            >
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                    <TextField label={'Grupperingsid*'} ref={grupperingsidRef} />
+                    <TextField
+                        label={'Virksomhetsnummer*'}
+                        ref={virksomhetsnummerRef}
+                        defaultValue="910825526"
+                    />
+                    <TextField
+                        label={'Tekst*'}
+                        ref={tekstRef}
+                        defaultValue="Dette er en kalenderhendelse"
+                    />
+                    <TextField
+                        label={'Starttidspunkt*'}
+                        ref={startTidspunktRef}
+                        defaultValue={datePlus(1).toISOString().replace('Z', '')}
+                    />
+                    <TextField
+                        label={'Sluttidspunkt'}
+                        ref={sluttTidspunktRef}
+                        defaultValue={datePlus(1, 1).toISOString().replace('Z', '')}
+                    />
+                    <TextField label={'Merkelapp*'} ref={merkelappRef} defaultValue="fager" />
+                    <TextField label={'Lenke'} ref={lenkeRef} />
+                    <TextField
+                        label={'EksternId*'}
+                        ref={eksternIdRef}
+                        defaultValue={crypto.randomUUID().toString()}
+                    />
+                    <Button variant="primary" onClick={handleSend}>
+                        Opprett en ny kalenderavtale
+                    </Button>
+                </div>
+                <div>
+                    <EksternVarsel ref={eksternVarselRef} />
+                    <hr />
+                    <Lokasjon ref={lokasjonRef} />
+                    <hr />
+                    <ToggleGroup
+                        defaultValue="Ingen"
+                        onChange={(v) => setPåminnelse(v === 'Send påminnelse')}
+                        label="Påminnelse"
+                    >
+                        <ToggleGroup.Item value={'Ingen'}>Ingen</ToggleGroup.Item>
+                        <ToggleGroup.Item value={'Send påminnelse'}>
+                            Send påminnelse
+                        </ToggleGroup.Item>
+                    </ToggleGroup>
+                </div>
             </div>
-        </div>
-
 
-        {loading && <p>Laster...</p>}
-        {error &&
-            <SyntaxHighlighter language="json" style={darcula}>{JSON.stringify(error, null, 2)}</SyntaxHighlighter>}
-        {data &&
-            <SyntaxHighlighter language="json" style={darcula}>{JSON.stringify(data, null, 2)}</SyntaxHighlighter>}
-    </div>
-}
+            {loading && <p>Laster...</p>}
+            {error && (
+                <SyntaxHighlighter language="json" style={darcula}>
+                    {JSON.stringify(error, null, 2)}
+                </SyntaxHighlighter>
+            )}
+            {data && (
+                <SyntaxHighlighter language="json" style={darcula}>
+                    {JSON.stringify(data, null, 2)}
+                </SyntaxHighlighter>
+            )}
+        </div>
+    );
+};
 
 type Lokasjon = {
-    hentLokasjon: () =>
-        {
-            adresse: string,
-            postnummer: string,
-            poststed: string
-        },
-    hentDigitalt: () => boolean
-}
+    hentLokasjon: () => {
+        adresse: string;
+        postnummer: string;
+        poststed: string;
+    };
+    hentDigitalt: () => boolean;
+};
 
 const Lokasjon = forwardRef((_props, ref) => {
     const adresseRef = React.useRef<HTMLInputElement>(null);
     const postnummerRef = React.useRef<HTMLInputElement>(null);
     const poststedRef = React.useRef<HTMLInputElement>(null);
 
-    const [kunDigitalt, setKunDigitalt] = useState(true)
-    const [erDigitalt, setErDigitalt] = useState(false)
+    const [kunDigitalt, setKunDigitalt] = useState(true);
+    const [erDigitalt, setErDigitalt] = useState(false);
 
     useImperativeHandle(ref, () => ({
         hentLokasjon: () => {
-            const adresse = nullIfEmpty(adresseRef.current?.value)
-            const postnummer = nullIfEmpty(postnummerRef.current?.value)
-            const poststed = nullIfEmpty(poststedRef.current?.value)
+            const adresse = nullIfEmpty(adresseRef.current?.value);
+            const postnummer = nullIfEmpty(postnummerRef.current?.value);
+            const poststed = nullIfEmpty(poststedRef.current?.value);
 
             if (adresse === null || postnummer === null || poststed === null) {
-                return null
+                return null;
             }
             return {
                 adresse: adresse,
                 postnummer: postnummer,
-                poststed: poststed
-            }
+                poststed: poststed,
+            };
         },
-        hentDigitalt: () => erDigitalt || kunDigitalt
-    }))
-
-    return <div>
-        <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
-            <Heading size="small" level={"3"}>Lokasjon</Heading>
-            <Checkbox onChange={() => setKunDigitalt(!kunDigitalt)} checked={kunDigitalt}> Kun digitalt </Checkbox>
+        hentDigitalt: () => erDigitalt || kunDigitalt,
+    }));
+
+    return (
+        <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Heading size="small" level={'3'}>
+                    Lokasjon
+                </Heading>
+                <Checkbox onChange={() => setKunDigitalt(!kunDigitalt)} checked={kunDigitalt}>
+                    {' '}
+                    Kun digitalt{' '}
+                </Checkbox>
+            </div>
+            {kunDigitalt ? null : (
+                <>
+                    <TextField label={'Adresse'} ref={adresseRef} defaultValue="Gategata 0" />
+                    <TextField label={'Postnummer'} ref={postnummerRef} defaultValue="$$$$" />
+                    <TextField label={'Poststed'} ref={poststedRef} defaultValue="Østre vestre" />
+                    <Checkbox onChange={() => setErDigitalt(!erDigitalt)} checked={erDigitalt}>
+                        {' '}
+                        Digitalt{' '}
+                    </Checkbox>
+                </>
+            )}
         </div>
-        {kunDigitalt ? null : <>
-            <TextField label={"Adresse"} ref={adresseRef} defaultValue="Gategata 0"/>
-            <TextField label={"Postnummer"} ref={postnummerRef} defaultValue="$$$$"/>
-            <TextField label={"Poststed"} ref={poststedRef} defaultValue="Østre vestre"/>
-            <Checkbox onChange={() => setErDigitalt(!erDigitalt)} checked={erDigitalt}> Digitalt </Checkbox>
-        </>
-        }
-    </div>
-})
-
+    );
+});
 
 const OPPDATER_KALENDERAVTALE_MED_VARSLING = gql`
     mutation (
         $id: ID!
         $lenke: String
+        $nyTilstand: KalenderavtaleTilstand
         $tekst: String
         $idempotenceKey: String
         $eksterneVarsler: [EksterntVarselInput!]! = []
@@ -225,6 +264,7 @@ const OPPDATER_KALENDERAVTALE_MED_VARSLING = gql`
             id: $id
             idempotencyKey: $idempotenceKey
             nyLenke: $lenke
+            nyTilstand: $nyTilstand
             nyTekst: $tekst
             nyLokasjon: $lokasjon
             eksterneVarsler: $eksterneVarsler
@@ -238,16 +278,15 @@ const OPPDATER_KALENDERAVTALE_MED_VARSLING = gql`
             }
         }
     }
-`
+`;
 
 export const OppdaterKalenderAvtale: FunctionComponent = () => {
-    const [oppdaterKalenderavtale, {
-        data,
-        loading,
-        error
-    }] = useMutation<Pick<Mutation, "oppdaterKalenderavtale">>(OPPDATER_KALENDERAVTALE_MED_VARSLING)
+    const [oppdaterKalenderavtale, { data, loading, error }] = useMutation<
+        Pick<Mutation, 'oppdaterKalenderavtale'>
+    >(OPPDATER_KALENDERAVTALE_MED_VARSLING);
 
     const notifikasjonIdRef = React.useRef<HTMLInputElement>(null);
+    const nyTilstand = React.useRef<HTMLSelectElement>(null);
     const lenkeRef = React.useRef<HTMLInputElement>(null);
     const tekstRef = React.useRef<HTMLInputElement>(null);
     const eksternVarselRef = React.useRef<EksternVarsel>(null);
@@ -256,41 +295,64 @@ export const OppdaterKalenderAvtale: FunctionComponent = () => {
     const handleSend = () => {
         oppdaterKalenderavtale({
             variables: {
-                id: nullIfEmpty(notifikasjonIdRef.current?.value ?? ""),
-                lenke: nullIfEmpty(lenkeRef.current?.value ?? ""),
-                tekst: nullIfEmpty(tekstRef.current?.value ?? ""),
+                id: nullIfEmpty(notifikasjonIdRef.current?.value ?? ''),
+                lenke: nullIfEmpty(lenkeRef.current?.value ?? ''),
+                nyTilstand: nullIfEmpty(nyTilstand.current?.value ?? ''),
+                tekst: nullIfEmpty(tekstRef.current?.value ?? ''),
                 eksterneVarsler: formateEksternVarsel(eksternVarselRef),
-                lokasjon: lokasjonRef.current?.hentLokasjon()
-            }
-        })
-    }
-
-
-    return <div className={cssClasses.kalenderavtale}>
-
-        <SyntaxHighlighter language="graphql" style={darcula}>
-            {print(OPPDATER_KALENDERAVTALE_MED_VARSLING)}
-        </SyntaxHighlighter>
-
-        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", width: "105rem", gap: "32px"}}>
-            <div style={{display: "flex", flexDirection: "column", gap: "4px"}}>
-                <TextField label={"KalenderavtaleID *"} ref={notifikasjonIdRef}/>
-                <TextField label={"Lenke"} ref={lenkeRef}/>
-                <TextField label={"Tekst"} ref={tekstRef}/>
-
-                <Button variant="primary"
-                        onClick={() => handleSend()}>Oppdater kalenderavtale</Button>
-            </div>
-            <div>
-                <EksternVarsel ref={eksternVarselRef}/>
-                <hr/>
-                <Lokasjon ref={lokasjonRef}/>
+                lokasjon: lokasjonRef.current?.hentLokasjon(),
+            },
+        });
+    };
+
+    return (
+        <div className={cssClasses.kalenderavtale}>
+            <SyntaxHighlighter language="graphql" style={darcula}>
+                {print(OPPDATER_KALENDERAVTALE_MED_VARSLING)}
+            </SyntaxHighlighter>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr 1fr',
+                    width: '105rem',
+                    gap: '32px',
+                }}
+            >
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                    <TextField label={'KalenderavtaleID *'} ref={notifikasjonIdRef} />
+                    <TextField label={'Lenke'} ref={lenkeRef} />
+                    <TextField label={'Tekst'} ref={tekstRef} />
+                    <Select defaultValue={''} ref={nyTilstand} label="Ny tilstand">
+                        <option>""</option>
+                        {Object.keys(KalenderavtaleTilstand).map((tilstand) => (
+                            <option key={tilstand} value={tilstand}>
+                                {tilstand}
+                            </option>
+                        ))}
+                    </Select>
+
+                    <Button variant="primary" onClick={() => handleSend()}>
+                        Oppdater kalenderavtale
+                    </Button>
+                </div>
+                <div>
+                    <EksternVarsel ref={eksternVarselRef} />
+                    <hr />
+                    <Lokasjon ref={lokasjonRef} />
+                </div>
             </div>
+            {loading && <p>Laster...</p>}
+            {error && (
+                <SyntaxHighlighter language="json" style={darcula}>
+                    {JSON.stringify(error, null, 2)}
+                </SyntaxHighlighter>
+            )}
+            {data && (
+                <SyntaxHighlighter language="json" style={darcula}>
+                    {JSON.stringify(data, null, 2)}
+                </SyntaxHighlighter>
+            )}
         </div>
-        {loading && <p>Laster...</p>}
-        {error &&
-            <SyntaxHighlighter language="json" style={darcula}>{JSON.stringify(error, null, 2)}</SyntaxHighlighter>}
-        {data && <SyntaxHighlighter language="json" style={darcula}>{JSON.stringify(data, null, 2)}</SyntaxHighlighter>}
-
-    </div>
-}
\ No newline at end of file
+    );
+};