Merge branch 'main' into oppdaterer-backend

backend/src/main/kotlin/no/nav/helse/sprik/db/FeilmeldingRepository.kt

@@ -45,13 +45,8 @@ class FeilmeldingRepository {
         FeilmeldingTable.select((FeilmeldingTable.tittel.lowerCase() like sok)
                                 or (FeilmeldingTable.beskrivelse.lowerCase() like sok))
                                 .map(::radTilFeilmelding)
-
     }
 
-    //fun hentFeilmelding(id: String) = transaction {
-    //    FeilmeldingTable.select()
-    //}
-
     fun oppdaterFeilmelding(feilmelding: Feilmelding) = transaction {
         val id = feilmelding.id
         if (id != null) {
@@ -62,5 +57,4 @@ class FeilmeldingRepository {
                 it[FeilmeldingTable.haster] = feilmelding.haster
             }
         }
-    }
 }

backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt

@@ -65,10 +65,11 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
             put("/api/oppdaterfeil/{id}") {
                 val id = call.parameters["id"]
                 val oppdatertFeilmelding = call.receive<Feilmelding>()
-
+                call.respond(status = HttpStatusCode.Created, message = "Feilmelding oppdatert")
             }
         }
     }
+    
     connector {
         port = 8080
     }

backend/src/test/kotlin/no/nav/helse/sprik/FeilmeldingTest.kt

@@ -25,6 +25,7 @@ class FeilmeldingTest {
     private val feilmelding = Feilmelding(1, "Test", "Testesen", LocalDateTime.of(2023,1,1,8,0), 0, true)
     // private val feilmelding2 = Feilmelding(2, "Tittel", "Beskrivelse", LocalDateTime.of(2023,2,1,8,0), 1, false)
 
+
     @BeforeAll
     fun setup() {
         ExposedDatabase.connect(database.dataSource)

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()}

frontend/src/components/FeilCard.tsx

@@ -1,8 +1,10 @@
 import "@navikt/ds-css";
-import { Heading, Modal, Tag } from "@navikt/ds-react";
+import { Button, Heading, Modal, Radio, RadioGroup, Tag, TextField, Textarea } from "@navikt/ds-react";
-import { IFeilmelding } from "../interface";
+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.
@@ -14,13 +16,46 @@ import { useEffect, useState } from "react";
 interface IFeilKort extends IFeilmelding {
     key: number
 }
+
+
 export const FeilKort = (props: IFeilKort) => {
     const [visModal, setVisModal] = useState<boolean>(false)
+    const [redigeringsmodus, setRedigeringsmodus] = useState(false)
+    const [tittel, setTittel] = useState(props.tittel)
+    const [beskrivelse, setBeskrivelse] = useState(props.beskrivelse)
+    const [arbeidsstatus, setArbeidsstatus] = useState(props.arbeidsstatus)
+    const [haster, setHaster] = useState(props.haster)
+
 
     useEffect(() => {
         Modal.setAppElement(document.getElementById('root'));
     }, []);
 
+    const lagreEndringer = () => {
+        setRedigeringsmodus(false)
+
+        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(
         <>
             <div 
@@ -32,6 +67,7 @@ export const FeilKort = (props: IFeilKort) => {
                 onClick={() => setVisModal(true)}
             >
                 <FeilkortHeader 
+                    id={props.id}
                     tittel={props.tittel}
                     beskrivelse={props.beskrivelse}
                     dato={props.dato}
@@ -40,15 +76,92 @@ export const FeilKort = (props: IFeilKort) => {
                 />
             </div>
             <FeilModal open={visModal} setOpen={setVisModal} >
-                <FeilkortHeader 
+                {redigeringsmodus ? 
-                    tittel={props.tittel}
+
-                    beskrivelse={props.beskrivelse}
+                    <div className="flex justify-between">
-                    dato={props.dato}
+                        <div className="flex flex-col gap-4 w-1/2">
-                    haster={props.haster}
+                            <TextField 
-                    arbeidsstatus={props.arbeidsstatus}
+                                label="Tittel"
-                />
+                                value={tittel}
-                <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+                                onChange={e => setTittel(e.target.value)}
-                {/* TODO: HER KOMMER CONTENT */}
+                            />
+                            <Textarea 
+                                label="Beskrivelse"
+                                value={beskrivelse}
+                                onChange={e => setBeskrivelse(e.target.value)}
+                            />
+                            <RadioGroup
+                                legend="Velg arbeidsstatus for feil"
+                                onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
+                                value={arbeidsstatus}
+                            >
+                                <Radio value={0}>Ikke påbegynt</Radio>
+                                <Radio value={1}>Feilen jobbes med</Radio>
+                                <Radio value={2}>Feilen er fikset</Radio>
+                            </RadioGroup>
+                            <RadioGroup
+                                legend="Hvor vil du sitte?"
+                                onChange={(haster: boolean) => {setHaster(haster)}}
+                                value={haster}
+                            >
+                                <Radio value={true}>Ja</Radio>
+                                <Radio value={false}>Nei</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div className="flex gap-4 items-start">
+                            <Button
+                                variant="primary"
+                                icon={<FloppydiskIcon/>}
+                                onClick={() => lagreEndringer()}
+                            >
+                                Lagre
+                            </Button>
+                            <Button
+                                variant="danger"
+                                icon={<XMarkIcon/>}
+                                onClick={() => {
+                                    setRedigeringsmodus(false)
+                                }}
+                            >
+                                Avbryt
+                            </Button>
+                        </div>
+                    </div>
+
+                : 
+                <div>
+                    <div className="flex justify-between">
+                        <FeilkortHeader 
+                            id={props.id}
+                            tittel={props.tittel}
+                            beskrivelse={props.beskrivelse}
+                            dato={props.dato}
+                            haster={props.haster}
+                            arbeidsstatus={props.arbeidsstatus}
+                        />
+                        <div className="flex gap-4 items-start">
+                            <Button
+                                variant="secondary"
+                                icon={<PencilIcon/>}
+                                onClick={() => setRedigeringsmodus(true)}
+                            >
+                                Rediger
+                            </Button>
+                            <Button
+                                icon={<XMarkIcon/>}
+                                onClick={() => {
+                                    setVisModal(false)
+                                    setRedigeringsmodus(false)
+                                }}
+                            >
+                                Lukk
+                            </Button>
+                        </div>
+                    </div>
+                    <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+                    {/* TODO: HER KOMMER CONTENT */}
+                </div>
+                }              
             </FeilModal>
         </>
     )

frontend/src/components/FeilModal.tsx

@@ -16,6 +16,7 @@ const FeilModal = (props: modalInterface) => {
             aria-label={" modal"}
             onClose={() => props.setOpen(false)}
             aria-labelledby="modal-heading"
+            closeButton={false}
         >
         <Modal.Content>
             {props.children}

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,
+            id: number
-            beskrivelse: string,
+            tittel: string
+            beskrivelse: string
             dato: Date
             haster: boolean
             arbeidsstatus: number