sidski/helse-sprik
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ Klarer å skifte mellom redigerings- og visningsmodus

Browse source 
Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
This commit is contained in:
Sindre Kjelsrud 2023-08-01 12:08:45 +02:00
parent 02178d187f
commit 3792ee6861
1 changed files with 55 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

72
frontend/src/components/FeilCard.tsx
View file

@ -3,7 +3,7 @@ import { Button, Heading, Modal, Tag } from "@navikt/ds-react";
import { IFeilmelding } from "../interface";
import FeilModal from "./FeilModal";
import { useEffect, useState } from "react";
import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
import { FloppydiskIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
/**
* En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@ -15,12 +15,20 @@ import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
interface IFeilKort extends IFeilmelding {
key: number
}
export const FeilKort = (props: IFeilKort) => {
const [visModal, setVisModal] = useState<boolean>(false)
const [redigeringsmodus, setRedigeringsmodus] = useState(false)
useEffect(() => {
Modal.setAppElement(document.getElementById('root'));
}, []);
const lagreEndringer = () => {
setRedigeringsmodus(false)
}
return(
<>
@ -35,23 +43,53 @@ export const FeilKort = (props: IFeilKort) => {
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={props.dato}/>
</div>
<FeilModal open={visModal} setOpen={setVisModal} >
<div className="flex justify-between">
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
<div className="flex gap-4 items-start">
<Button
variant="secondary"
icon={<PencilIcon/>}
>
Rediger
</Button>
<Button
icon={<XMarkIcon/>}
onClick={() => setVisModal(false)}
>
Lukk
</Button>
{redigeringsmodus ?
<div className="flex justify-between">
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
<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 tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()} />
<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>