Merge pull request #20 from navikt/oppdaterFeil

✨ Oppdater feilmeldinger fra frontend

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

@@ -5,6 +5,7 @@ import no.nav.helse.sprik.db.FeilmeldingTable.arbeidsstatus
 import no.nav.helse.sprik.db.FeilmeldingTable.beskrivelse
 import no.nav.helse.sprik.db.FeilmeldingTable.dato
 import no.nav.helse.sprik.db.FeilmeldingTable.haster
+import no.nav.helse.sprik.db.FeilmeldingTable.id
 import no.nav.helse.sprik.db.FeilmeldingTable.tittel
 import no.nav.helse.sprik.modell.Feilmelding
 import org.jetbrains.exposed.sql.*
@@ -28,6 +29,7 @@ class FeilmeldingRepository {
     }
 
     private fun radTilFeilmelding(rad: ResultRow) = Feilmelding(
+        id = rad[id],
         tittel = rad[tittel],
         beskrivelse = rad[beskrivelse],
         dato = rad[dato],
@@ -47,4 +49,13 @@ class FeilmeldingRepository {
                                 .map(::radTilFeilmelding)
 
     }
+
+    fun hentFeilmelding(id: String) = transaction {
+        TODO()
+        FeilmeldingTable.id
+    }
+
+    fun oppdaterFeilmelding(id: String): Nothing = transaction {
+        TODO()
+    }
 }

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

@@ -4,6 +4,7 @@ import org.jetbrains.exposed.sql.Table
 import org.jetbrains.exposed.sql.javatime.datetime
 
 object FeilmeldingTable : Table("feilmelding") {
+    val id = integer("id")
     val tittel = text("tittel")
     val beskrivelse = text("beskrivelse")
     val dato = datetime("dato")

backend/src/main/kotlin/no/nav/helse/sprik/modell/Feilmelding.kt

@@ -14,6 +14,7 @@ import java.time.LocalDateTime
  * */
 @Serializable
 class Feilmelding(
+    val id: Int?,
     val tittel: String,
     val beskrivelse: String,
     val dato: LocalDateTime, //Krever en spesiallaget serialiserer i KotlinX

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

@@ -23,6 +23,7 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
             anyHost()
             allowMethod(HttpMethod.Get)
             allowMethod(HttpMethod.Post)
+            allowMethod(HttpMethod.Put)
             allowNonSimpleContentTypes = true
         }
         install(ContentNegotiation) {
@@ -61,6 +62,11 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
                 val sokeresultat = feilmeldingRepository.hentSokteFeilmeldinger(sokestreng)
                 call.respond(status = HttpStatusCode.Created, message = sokeresultat)
             }
+            put("/api/oppdaterfeil/{id}") {
+                val id = call.parameters["id"]
+                val oppdatertFeilmelding = call.receive<Feilmelding>()
+                call.respond(status = HttpStatusCode.Created, message = "Feilmelding oppdatert")
+            }
         }
     }
     connector {

backend/src/test/kotlin/LocalApp.kt

@@ -22,10 +22,10 @@ fun main() {
 
 private fun oppretteMockData() {
     val feilmeldingRepository = FeilmeldingRepository()
-    feilmeldingRepository.lagre(Feilmelding("Mangel på hensyn til tariffoppgjør", "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)", LocalDateTime.of(2023, 1, 1, 8, 0, 0), 0, false))
+    feilmeldingRepository.lagre(Feilmelding(null, "Mangel på hensyn til tariffoppgjør", "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)", LocalDateTime.of(2023, 1, 1, 8, 0, 0), 0, false))
-    feilmeldingRepository.lagre(Feilmelding("Speil sier NAV må tilbakekreve sykepenger på feil grunnlag", "Beskrivelse Test2", LocalDateTime.of(2023, 2, 1, 8, 0, 0), 1, true))
+    feilmeldingRepository.lagre(Feilmelding(null, "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag", "Beskrivelse Test2", LocalDateTime.of(2023, 2, 1, 8, 0, 0), 1, true))
-    feilmeldingRepository.lagre(Feilmelding("Feil A", "Lorem Ipsum", LocalDateTime.of(2023, 3, 1, 8, 0, 0), 2, false))
+    feilmeldingRepository.lagre(Feilmelding(null, "Feil A", "Lorem Ipsum", LocalDateTime.of(2023, 3, 1, 8, 0, 0), 2, false))
-    feilmeldingRepository.lagre(Feilmelding("Feil B", "Lorem Ipsum", LocalDateTime.of(2023, 4, 1, 8, 0, 0), 1, true))
+    feilmeldingRepository.lagre(Feilmelding(null, "Feil B", "Lorem Ipsum", LocalDateTime.of(2023, 4, 1, 8, 0, 0), 1, true))
-    feilmeldingRepository.lagre(Feilmelding("Feil C", "Lorem Ipsum", LocalDateTime.of(2023, 5, 1, 8, 0, 0), 1, true))
+    feilmeldingRepository.lagre(Feilmelding(null, "Feil C", "Lorem Ipsum", LocalDateTime.of(2023, 5, 1, 8, 0, 0), 1, true))
-    feilmeldingRepository.lagre(Feilmelding("Feil D", "Lorem Ipsum", LocalDateTime.of(2023, 6, 1, 8, 0, 0), 0, false))
+    feilmeldingRepository.lagre(Feilmelding(null, "Feil D", "Lorem Ipsum", LocalDateTime.of(2023, 6, 1, 8, 0, 0), 0, false))
 }

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

@@ -21,8 +21,8 @@ import org.jetbrains.exposed.sql.Database as ExposedDatabase
 class FeilmeldingTest {
     private val database = Database(dbconfig()).configureFlyway()
     private val feilmeldingRepository = FeilmeldingRepository()
-    private val feilmelding = Feilmelding("Test", "Testesen", LocalDateTime.of(2023,1,1,8,0), 0, true)
+    private val feilmelding = Feilmelding(1, "Test", "Testesen", LocalDateTime.of(2023,1,1,8,0), 0, true)
-    private val feilmelding2 = Feilmelding("Tittel", "Beskrivelse", LocalDateTime.of(2023,2,1,8,0), 1, false)
+    private val feilmelding2 = Feilmelding(2, "Tittel", "Beskrivelse", LocalDateTime.of(2023,2,1,8,0), 1, false)
 
     @BeforeAll
     fun setup() {
@@ -101,4 +101,9 @@ class FeilmeldingTest {
         assertEquals("Test", sokeresultat[0].tittel)
         assertEquals("Testesen", sokeresultat[0].beskrivelse)
     }
+
+    @Test
+    fun `Oppdaterer en feilmelding`() {
+        
+    }
 }

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} >
+                {redigeringsmodus ? 
+
+                    <div className="flex justify-between">
+                        <div className="flex flex-col gap-4 w-1/2">
+                            <TextField 
+                                label="Tittel"
+                                value={tittel}
+                                onChange={e => setTittel(e.target.value)}
+                            />
+                            <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

frontend/src/pages/feil.tsx

@@ -12,6 +12,7 @@ export default function Feil() {
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
     const [status, setStatus] = useState(0)
+    //const [haster, setHaster] = useState(false)
 
     const handleSubmit = () => {