🎨 Dele opp feilkort ()

* 🎨 Laget RedigeringsVerktøy komponent

* 🎨 Laget Innholdskomponent
This commit is contained in:
Markus A. R. Johansen 2023-08-02 11:47:28 +02:00 committed by GitHub
parent 9528f6cfbf
commit 89954388b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 167 additions and 118 deletions

View file

@ -1,11 +1,12 @@
import "@navikt/ds-css"; 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 FeilModal from "./FeilModal";
import { useEffect, useState } from "react"; 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 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. * 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 key: number
} }
const FeilKort = (props: IFeilKort) => {
const FeilKort = (props: IFeilKort) => {
const [visModal, setVisModal] = useState<boolean>(false) const [visModal, setVisModal] = useState<boolean>(false)
const [redigeringsmodus, setRedigeringsmodus] = useState(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(() => { useEffect(() => {
Modal.setAppElement(document.getElementById('root')); 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( return(
<> <>
<div <div
@ -77,90 +48,28 @@ interface IFeilKort extends IFeilmelding {
</div> </div>
<FeilModal open={visModal} setOpen={setVisModal} > <FeilModal open={visModal} setOpen={setVisModal} >
{redigeringsmodus ? {redigeringsmodus ?
<RedigeringsVerktoy
<div className="flex justify-between"> id={props.id}
<div className="flex flex-col gap-4 w-1/2"> tittel={props.tittel}
<TextField beskrivelse={props.beskrivelse}
label="Tittel" dato={props.dato}
value={tittel} haster={props.haster}
onChange={e => setTittel(e.target.value)} arbeidsstatus={props.arbeidsstatus}
/> setRedigeringsmodus={setRedigeringsmodus}
<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> <FeilmeldingsInnhold
<div className="flex justify-between"> id={props.id}
<FeilkortHeader tittel={props.tittel}
id={props.id} beskrivelse={props.beskrivelse}
tittel={props.tittel} dato={props.dato}
beskrivelse={props.beskrivelse} haster={props.haster}
dato={props.dato} arbeidsstatus={props.arbeidsstatus}
haster={props.haster} setVisModal={setVisModal}
arbeidsstatus={props.arbeidsstatus} setRedigeringsmodus={setRedigeringsmodus}
/> >
<div className="flex gap-4 items-start"> <p>Her kommer det content</p>
<Button </FeilmeldingsInnhold>
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> </FeilModal>
</> </>

View file

@ -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;

View file

@ -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;