🎨 Dele opp feilkort (#23)

* 🎨 Laget RedigeringsVerktøy komponent

* 🎨 Laget Innholdskomponent

frontend/src/components/FeilKort.tsx

@@ -1,11 +1,12 @@
 import "@navikt/ds-css";
-import { Button, Modal, Radio, RadioGroup, TextField, Textarea } from "@navikt/ds-react";
+import { Button, Modal} 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 { PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
-import axios from "axios";
 import FeilkortHeader from "./FeilkortHeader";
+import RedigeringsVerktoy from "./RedigeringsVerktoy";
+import FeilmeldingsInnhold from "./FeilmeldingsInnhold";
 
 /**
  * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@@ -18,44 +19,14 @@ interface IFeilKort extends IFeilmelding {
     key: number
 }
 
-
 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 payload = {
-            id: props.id,
-            tittel: tittel,
-            beskrivelse: beskrivelse,
-            dato: props.dato.toISOString().replace('Z', ''),
-            arbeidsstatus: arbeidsstatus,
-            haster: haster
-        }
-
-        axios.put(`/api/oppdaterfeil/${props.id}`, payload, {
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        }).then((response) => {
-            console.log(response);
-        }).catch((error) => {
-            console.log(error);
-        })
-
-
-    }
-    
     return(
         <>
             <div 
@@ -77,90 +48,28 @@ interface IFeilKort extends IFeilmelding {
             </div>
             <FeilModal open={visModal} setOpen={setVisModal} >
                 {redigeringsmodus ? 
-
+                    <RedigeringsVerktoy 
-                    <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}
+                        setRedigeringsmodus={setRedigeringsmodus}
                     />
-                        <div className="flex gap-4 items-start">
+                : 
-                            <Button
+                    <FeilmeldingsInnhold
-                                variant="secondary"
+                        id={props.id}
-                                icon={<PencilIcon/>}
+                        tittel={props.tittel}
-                                onClick={() => setRedigeringsmodus(true)}
+                        beskrivelse={props.beskrivelse}
+                        dato={props.dato}
+                        haster={props.haster}
+                        arbeidsstatus={props.arbeidsstatus}
+                        setVisModal={setVisModal}
+                        setRedigeringsmodus={setRedigeringsmodus}
                     >
-                                Rediger
+                        <p>Her kommer det content</p>
-                            </Button>
+                    </FeilmeldingsInnhold>
-                            <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/FeilmeldingsInnhold.tsx

@@ -0,0 +1,48 @@
+import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { Button } from "@navikt/ds-react"
+import { IFeilmelding } from "../interface"
+import FeilkortHeader from "./FeilkortHeader"
+
+
+interface FeilmeldingsInnholdInterface extends IFeilmelding {
+    children: React.ReactNode
+    setVisModal: (visModal: boolean) => void
+    setRedigeringsmodus: (redigeringsmodus: boolean) => void
+}
+
+const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
+    return(
+        <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={() => props.setRedigeringsmodus(true)}
+                    >
+                        Rediger
+                    </Button>
+                    <Button
+                        icon={<XMarkIcon />}
+                        onClick={() => {
+                            props.setVisModal(false)
+                            props.setRedigeringsmodus(false)
+                        }}
+                    >
+                        Lukk
+                    </Button>
+                </div>
+            </div>
+            <div className="h-2 bg-gray-200 my-4 rounded-lg"></div>
+            {props.children}
+        </div>
+    )
+}
+export default FeilmeldingsInnhold;

frontend/src/components/RedigeringsVerktoy.tsx

@@ -0,0 +1,92 @@
+import { FloppydiskIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { TextField, Textarea, RadioGroup, Radio, Button } from "@navikt/ds-react"
+import { useState } from "react"
+import { IFeilmelding } from "../interface"
+import axios from "axios"
+
+interface RedigeringsInterface extends IFeilmelding {
+    setRedigeringsmodus: (redigeringsmodus: boolean) => void
+}
+
+const RedigeringsVerktoy = (props: RedigeringsInterface) => {
+    const [tittel, setTittel] = useState(props.tittel)
+    const [beskrivelse, setBeskrivelse] = useState(props.beskrivelse)
+    const [arbeidsstatus, setArbeidsstatus] = useState(props.arbeidsstatus)
+    const [haster, setHaster] = useState(props.haster)
+
+    const lagreEndringer = () => {
+        props.setRedigeringsmodus(false)
+
+        const payload = {
+            id: props.id,
+            tittel: tittel,
+            beskrivelse: beskrivelse,
+            dato: props.dato.toISOString().replace('Z', ''),
+            arbeidsstatus: arbeidsstatus,
+            haster: haster
+        }
+
+        axios.put(`/api/oppdaterfeil/${props.id}`, payload, {
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((response) => {
+            console.log(response);
+        }).catch((error) => {
+            console.log(error);
+        })
+    }
+
+    return (
+        <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={() => {
+                        props.setRedigeringsmodus(false)
+                    }}
+                >
+                    Avbryt
+                </Button>
+            </div>
+        </div>
+    )
+}
+export default RedigeringsVerktoy;