diff --git a/frontend/src/components/FeilKort.tsx b/frontend/src/components/FeilKort.tsx index 7842bf4..d54be61 100644 --- a/frontend/src/components/FeilKort.tsx +++ b/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 { IFeilmelding } from "../interface"; +import { Button, Modal} 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"; +import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"; 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 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 ? - - <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> - + <RedigeringsVerktoy + id={props.id} + tittel={props.tittel} + beskrivelse={props.beskrivelse} + dato={props.dato} + haster={props.haster} + arbeidsstatus={props.arbeidsstatus} + setRedigeringsmodus={setRedigeringsmodus} + /> : - <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> + <FeilmeldingsInnhold + id={props.id} + tittel={props.tittel} + beskrivelse={props.beskrivelse} + dato={props.dato} + haster={props.haster} + arbeidsstatus={props.arbeidsstatus} + setVisModal={setVisModal} + setRedigeringsmodus={setRedigeringsmodus} + > + <p>Her kommer det content</p> + </FeilmeldingsInnhold> } </FeilModal> </> diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx new file mode 100644 index 0000000..918343a --- /dev/null +++ b/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; diff --git a/frontend/src/components/RedigeringsVerktoy.tsx b/frontend/src/components/RedigeringsVerktoy.tsx new file mode 100644 index 0000000..45addd9 --- /dev/null +++ b/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; \ No newline at end of file