Tagbar støtter toggling av arbeidsstatusflagg, ved å ta inn et arbeidsstatus prop som er 0,1 eller 2

This commit is contained in:
Markus Johansen 2023-08-01 09:50:56 +02:00
parent 755effe4da
commit 5ea9d11cb7

View file

@ -60,7 +60,7 @@ export const FeilkortHeader = (props: IFeilmelding) => {
<p className="text-text-subtle mb-4">{props.dato.toDateString()}</p> <p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
<p>{props.beskrivelse}</p> <p>{props.beskrivelse}</p>
</div> </div>
<TagBar haster={false}/> <TagBar haster={true} arbeidsstatus={2}/>
</div> </div>
) )
} }
@ -68,17 +68,39 @@ export const FeilkortHeader = (props: IFeilmelding) => {
interface TagBarInterface { interface TagBarInterface {
haster: boolean haster: boolean
arbeidsstatus: number
} }
/** /**
* Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster". * Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
* Komponentet er en del av FeilKortHeader * Komponentet er en del av FeilKortHeader
* @param haster * @param haster er en boolean som beskriver om feilen haster eller ikke.
* @param arbeidsstatus
*/ */
const TagBar = (props: TagBarInterface) => { const TagBar = (props: TagBarInterface) => {
/**
* Funksjonen tar inn
* @param arbeidsstatus
* @returns
*/
const toggleArbeidsstatus = (arbeidsstatus: number) => {
switch (arbeidsstatus) {
case 0:
return <Tag variant="neutral">Ikke påbegynt</Tag>;
case 1:
return <Tag variant="info">Feilen jobbes med</Tag>;
case 2:
return <Tag variant="success">Feilen er fikset</Tag>;
default:
throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
}
}
return ( return (
<div className="flex gap-8 mt-4"> <div className="flex gap-3 mt-4">
<Tag variant="info">Jobbes med</Tag> {toggleArbeidsstatus(props.arbeidsstatus)}
{props.haster === true ? <Tag variant="warning">Haster</Tag> : <></>} {props.haster ? <Tag variant="warning">Haster</Tag> : <></>}
</div> </div>
) )
} }