🎨 Dele opp feilkort (#23)
* 🎨 Laget RedigeringsVerktøy komponent * 🎨 Laget Innholdskomponent
This commit is contained in:
parent
9528f6cfbf
commit
89954388b4
3 changed files with 167 additions and 118 deletions
frontend/src/components
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
48
frontend/src/components/FeilmeldingsInnhold.tsx
Normal file
48
frontend/src/components/FeilmeldingsInnhold.tsx
Normal 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;
|
92
frontend/src/components/RedigeringsVerktoy.tsx
Normal file
92
frontend/src/components/RedigeringsVerktoy.tsx
Normal 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;
|
Reference in a new issue