Merge branch 'main' into nyRedigeringsLayout

frontend/src/components/FeilKort.tsx

@@ -46,7 +46,10 @@ const FeilKort = (props: IFeilKort) => {
                     arbeidsstatus={props.arbeidsstatus}
                 />
             </div>
-            <FeilModal open={visModal} setOpen={setVisModal} >
+            <FeilModal 
+                open={visModal} 
+                setOpen={setVisModal} 
+            >
                 {redigeringsmodus ? 
                     <RedigeringsVerktoy 
                         id={props.id}

frontend/src/components/FeilmeldingsInnhold.tsx

@@ -1,10 +1,36 @@
-import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
-import { Button } from "@navikt/ds-react"
+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 className="flex justify-between ">
@@ -17,7 +43,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)}
                     >
@@ -36,7 +62,65 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
             </div>
             <Skillelinje/>
             {props.children}
-        </>
+            {kommentar.length === 0 ? 
+                <KommentarTekstfelt
+                    kommentarfelt={kommentarfelt} 
+                    setKommentarfelt={setKommentarfelt}
+                    oppdaterKommentar={() => oppdaterkommentar()}
+                /> 
+                    : 
+                <Kommentar 
+                    tekst={kommentar}
+                />
+            }
+      </>
     )
 }
 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> 
+        </>
+    )
+}

frontend/src/components/Skillelinje.tsx

@@ -2,7 +2,7 @@
 
 const Skillelinje = () => {
     return (
-        <div className="h-1 bg-gray-200 my-4 rounded-lg w-full"></div>
+        <div className="h-1 bg-gray-200 my-3 rounded-lg w-full"></div>
     )
 }
 export default Skillelinje

frontend/src/interface.ts

@@ -16,6 +16,7 @@ export interface FeilmeldingsInnholdInterface extends IFeilmelding {
     children?: React.ReactNode
     setRedigeringsmodus: (redigeringsmodus: boolean) => void
     setVisModal: (visModal: boolean) => void
+    reset: () => void
 }
 
 export class Feilmelding implements IFeilmelding {

frontend/src/pages/feil.tsx

@@ -1,7 +1,7 @@
 import "@navikt/ds-css";
 
 import { ArrowLeftIcon, BugIcon } from "@navikt/aksel-icons";
-import { Alert, Button, Heading, TextField, Textarea } from "@navikt/ds-react";
+import { Alert, Button, Heading, Switch, TextField, Textarea } from "@navikt/ds-react";
 import axios from "axios";
 import { useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
@@ -13,7 +13,7 @@ export default function Feil() {
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
     const [status, setStatus] = useState(0)
-    //const [haster, setHaster] = useState(false)
+    const [haster, setHaster] = useState(false)
 
     const handleSubmit = () => {
 
@@ -23,8 +23,8 @@ export default function Feil() {
             beskrivelse: beskrivelse,
             dato: new Date().toISOString().replace('Z', ''), // Litt wack fix, burde endres
             arbeidsstatus: 0,
-            haster: false,
+            haster: haster,
-            kommentar: ""
+            kommentar: null
         }
         
         axios.post("/api/nyfeil", payload, {
@@ -63,7 +63,7 @@ export default function Feil() {
             <Header/>
             <div className="flex grow">
                 <div className="w-1/4 bg-bg-subtle"></div>
-                <div className="flex flex-col justify-center gap-16 p-8 px-16  grow">
+                <div className="flex flex-col justify-center gap-8 p-8 px-16  grow">
                     <div className=" flex flex-col gap-2 justify-center">
                         <BugIcon
                             title="Insekts ikon"
@@ -89,7 +89,17 @@ export default function Feil() {
                         <Skillelinje/>
                         <BildeOpplastning/>
                         <Skillelinje/>
+                        <Heading size="xsmall">
+                            Haster det å fikse feilen?
+                        </Heading>
+                        <Switch 
+                            onClick={() => setHaster(!haster)}
+                        >
+                            Saken Haster
+                        </Switch>
                     </div>
+
+
                     <div className="w-1/2 flex flex-col gap-2 justify-center">
                         {status != 0 ? handleAlerts() : <></>}
                         <Button