79 lines
No EOL
2.9 KiB
TypeScript
79 lines
No EOL
2.9 KiB
TypeScript
import "@navikt/ds-css";
|
|
import { Button, Modal} from "@navikt/ds-react";
|
|
import { Feilmelding, IFeilmelding } from "../interface";
|
|
import FeilModal from "./FeilModal";
|
|
import { useEffect, useState } from "react";
|
|
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.
|
|
* @param tittel
|
|
* @param beskrivelse
|
|
* @param dato
|
|
* @returns JSX komponent som beskriver innholdet i feilmeldinger.
|
|
*/
|
|
interface IFeilKort extends IFeilmelding {
|
|
key: number
|
|
}
|
|
|
|
const FeilKort = (props: IFeilKort) => {
|
|
const [visModal, setVisModal] = useState<boolean>(false)
|
|
const [redigeringsmodus, setRedigeringsmodus] = useState(false)
|
|
|
|
useEffect(() => {
|
|
Modal.setAppElement(document.getElementById('root'));
|
|
}, []);
|
|
|
|
return(
|
|
<>
|
|
<div
|
|
key={props.key}
|
|
className="
|
|
bg-bg-default border border-border-default p-7 rounded-lg
|
|
hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
|
|
active:bg-surface-active"
|
|
onClick={() => setVisModal(true)}
|
|
>
|
|
<FeilkortHeader
|
|
id={props.id}
|
|
tittel={props.tittel}
|
|
beskrivelse={props.beskrivelse}
|
|
dato={props.dato}
|
|
haster={props.haster}
|
|
arbeidsstatus={props.arbeidsstatus}
|
|
/>
|
|
</div>
|
|
<FeilModal open={visModal} setOpen={setVisModal} >
|
|
{redigeringsmodus ?
|
|
<RedigeringsVerktoy
|
|
id={props.id}
|
|
tittel={props.tittel}
|
|
beskrivelse={props.beskrivelse}
|
|
dato={props.dato}
|
|
haster={props.haster}
|
|
arbeidsstatus={props.arbeidsstatus}
|
|
setRedigeringsmodus={setRedigeringsmodus}
|
|
setVisModal={setVisModal}
|
|
/>
|
|
:
|
|
<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>
|
|
</>
|
|
)
|
|
}
|
|
export default FeilKort |