From 2c1951e60b30fd3cb9b8fcdf2a6b386586867dc8 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Date: Tue, 1 Aug 2023 14:26:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B1=20frontend-api=20for=20oppdatering?=
 =?UTF-8?q?=20av=20feilmeldinger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
---
 frontend/src/components/CardsContainer.tsx |  1 +
 frontend/src/components/FeilCard.tsx       | 35 ++++++++++++++++++----
 frontend/src/interface.ts                  |  7 +++--
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx
index d51318d..5cf2400 100644
--- a/frontend/src/components/CardsContainer.tsx
+++ b/frontend/src/components/CardsContainer.tsx
@@ -16,6 +16,7 @@ const CardsContainer = (props: ICardsContainer) => {
         {props.feilmeldinger.map((feilMelding) => (
             <FeilKort
               key={props.feilmeldinger.indexOf(feilMelding)}
+              id={feilMelding.id}
               tittel={feilMelding.tittel}
               beskrivelse={feilMelding.beskrivelse}
               dato={new Date()}
diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilCard.tsx
index 9e08b4d..45c7970 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilCard.tsx
@@ -1,9 +1,10 @@
 import "@navikt/ds-css";
-import { Button, Checkbox, CheckboxGroup, Heading, Modal, Radio, RadioGroup, Tag, TextField } from "@navikt/ds-react";
-import { IFeilmelding } from "../interface";
+import { Button, Heading, Modal, Radio, RadioGroup, Tag, TextField, Textarea } from "@navikt/ds-react";
+import { Feilmelding, IFeilmelding } from "../interface";
 import FeilModal from "./FeilModal";
 import { useEffect, useState } from "react";
 import { FloppydiskIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
+import axios from "axios";
 
 /**
  * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@@ -32,7 +33,27 @@ export const FeilKort = (props: IFeilKort) => {
 
     const lagreEndringer = () => {
         setRedigeringsmodus(false)
-        // TODO - send endring til database
+
+        const fields = {
+            id: props.id,
+            tittel: tittel,
+            beskrivelse: beskrivelse,
+            dato: props.dato,
+            arbeidsstatus: arbeidsstatus,
+            haster: haster
+        }
+
+        const endretFeilmelding = new Feilmelding(fields)
+
+        axios.put(`/api/oppdaterfeil/${props.id}`, endretFeilmelding, {
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((response) => {
+            console.log(response);
+        }).catch((error) => {
+            console.log(error);
+        })
     }
     
     return(
@@ -46,6 +67,7 @@ export const FeilKort = (props: IFeilKort) => {
                 onClick={() => setVisModal(true)}
             >
                 <FeilkortHeader 
+                    id={props.id}
                     tittel={props.tittel}
                     beskrivelse={props.beskrivelse}
                     dato={props.dato}
@@ -63,7 +85,7 @@ export const FeilKort = (props: IFeilKort) => {
                                 value={tittel}
                                 onChange={e => setTittel(e.target.value)}
                             />
-                            <TextField 
+                            <Textarea 
                                 label="Beskrivelse"
                                 value={beskrivelse}
                                 onChange={e => setBeskrivelse(e.target.value)}
@@ -107,8 +129,10 @@ export const FeilKort = (props: IFeilKort) => {
                     </div>
 
                 : 
+                <div>
                     <div className="flex justify-between">
                         <FeilkortHeader 
+                            id={props.id}
                             tittel={props.tittel}
                             beskrivelse={props.beskrivelse}
                             dato={props.dato}
@@ -134,10 +158,11 @@ export const FeilKort = (props: IFeilKort) => {
                             </Button>
                         </div>
                     </div>
+                    <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+                </div>
                 }
 
 
-                <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
                 {/* TODO: HER KOMMER CONTENT */}
             </FeilModal>
         </>
diff --git a/frontend/src/interface.ts b/frontend/src/interface.ts
index 4757bd0..553ca65 100644
--- a/frontend/src/interface.ts
+++ b/frontend/src/interface.ts
@@ -4,6 +4,7 @@
 
 
 export interface IFeilmelding {
+    id: number,
     tittel: string,
     beskrivelse: string
     dato: Date
@@ -12,6 +13,7 @@ export interface IFeilmelding {
 }
 
 export class Feilmelding implements IFeilmelding {
+    id: number = 0
     tittel: string = "default tittel"
     beskrivelse: string = "default beskrivelse"
     dato: Date = new Date()
@@ -24,8 +26,9 @@ export class Feilmelding implements IFeilmelding {
      */
     public constructor(
         fields: {
-            tittel: string,
-            beskrivelse: string,
+            id: number
+            tittel: string
+            beskrivelse: string
             dato: Date
             haster: boolean
             arbeidsstatus: number