From 569a59a161b066b7ca165e0c8810bae70062b963 Mon Sep 17 00:00:00 2001
From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:10:59 +0200
Subject: [PATCH] Kommentarer frontend (#26)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Laget mulighet for å skrive inn og submitte kommentar

* 💄 Gjorde kommentar til en "notat-klistrelapp"

* 🚑 Frontend bruker oppdaterkommentar endepunktet
---
 frontend/src/components/FeilKort.tsx          |  6 +-
 .../src/components/FeilmeldingsInnhold.tsx    | 95 ++++++++++++++++++-
 frontend/src/interface.ts                     |  1 +
 3 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FeilKort.tsx b/frontend/src/components/FeilKort.tsx
index 447fd6b..4059d68 100644
--- a/frontend/src/components/FeilKort.tsx
+++ b/frontend/src/components/FeilKort.tsx
@@ -47,7 +47,10 @@ const FeilKort = (props: IFeilKort) => {
                     kommentar={props.kommentar}
                 />
             </div>
-            <FeilModal open={visModal} setOpen={setVisModal} >
+            <FeilModal 
+                open={visModal} 
+                setOpen={setVisModal} 
+            >
                 {redigeringsmodus ? 
                     <RedigeringsVerktoy 
                         id={props.id}
@@ -70,6 +73,7 @@ const FeilKort = (props: IFeilKort) => {
                         arbeidsstatus={props.arbeidsstatus}
                         setVisModal={setVisModal}
                         setRedigeringsmodus={setRedigeringsmodus}
+                        reset={props.reset}
                     >
                         <p>Her kommer det content</p>
                     </FeilmeldingsInnhold>
diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx
index 8750851..caa3c6d 100644
--- a/frontend/src/components/FeilmeldingsInnhold.tsx
+++ b/frontend/src/components/FeilmeldingsInnhold.tsx
@@ -1,9 +1,37 @@
-import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
-import { Button } from "@navikt/ds-react"
+import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { Button, Heading, TextField } from "@navikt/ds-react"
 import { FeilmeldingsInnholdInterface } from "../interface"
 import FeilkortHeader from "./FeilkortHeader"
+import { useState } from "react"
+import Skillelinje from "./Skillelinje"
+import axios from "axios"
+
 
 const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
+    const [kommentar, setKommentar] = useState("") 
+    const [kommentarfelt, setKommentarfelt] = useState("")
+
+    const oppdaterkommentar = async() => {
+        setKommentar(kommentarfelt)
+
+        const payload = {
+            id: props.id,
+            tittel: kommentar,
+        }
+
+        await axios.put("/api/oppdaterkommentar", payload, {
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((response) => {
+            console.log(response);
+        }).catch((error) => {
+            console.log(error);
+        })
+
+        props.reset()
+    }
+
     return(
         <div>
             <div className="flex justify-between">
@@ -16,7 +44,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
                     arbeidsstatus={props.arbeidsstatus} />
                 <div className="flex gap-4 items-start">
                     <Button
-                        variant="secondary"
+                        variant="tertiary"
                         icon={<PencilIcon />}
                         onClick={() => props.setRedigeringsmodus(true)}
                     >
@@ -33,10 +61,67 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
                     </Button>
                 </div>
             </div>
-            <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+            <Skillelinje/>
             {props.children}
-            Test: {props.kommentar ? props.kommentar : "null"}
+            {kommentar.length === 0 ? 
+                <KommentarTekstfelt
+                    kommentarfelt={kommentarfelt} 
+                    setKommentarfelt={setKommentarfelt}
+                    oppdaterKommentar={() => oppdaterkommentar()}
+                /> 
+                    : 
+                <Kommentar 
+                    tekst={kommentar}
+                />
+            }
         </div>
     )
 }
 export default FeilmeldingsInnhold;
+
+
+interface Ikommentar {
+    setKommentarfelt: (val: string) => void
+    oppdaterKommentar: () => void
+}
+
+interface kommentarTekstfeltInterface extends Ikommentar{
+    kommentarfelt: string,
+}
+interface kommentarInterface {
+    tekst: string
+}
+
+
+const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
+    return(
+        <div className="flex items-end gap-12 w-full mt-4 h-fit">
+            <TextField
+                className="grow"
+                label="Skriv inn din kommentar til feilen"
+                value={props.kommentarfelt}
+                onChange={e => props.setKommentarfelt(e.target.value)}
+            >
+            </TextField>
+            <Button
+                variant="secondary"
+                icon={<ChatElipsisIcon/>}
+                onClick={() => props.oppdaterKommentar()}
+            >
+                Legg til kommentar
+            </Button>
+        </div>
+    )
+}
+
+const Kommentar = (props: kommentarInterface) => {
+    return(
+        <>
+            <Skillelinje/>
+            <div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
+                <Heading size="medium">Notat</Heading>
+                <p className="break-words">{props.tekst}</p>
+            </div> 
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/interface.ts b/frontend/src/interface.ts
index 055b45e..ef749bd 100644
--- a/frontend/src/interface.ts
+++ b/frontend/src/interface.ts
@@ -17,6 +17,7 @@ export interface FeilmeldingsInnholdInterface extends IFeilmelding {
     children?: React.ReactNode
     setRedigeringsmodus: (redigeringsmodus: boolean) => void
     setVisModal: (visModal: boolean) => void
+    reset: () => void
 }
 
 export class Feilmelding implements IFeilmelding {