✨ Tagbar støtter toggling av arbeidsstatusflagg, ved å ta inn et arbeidsstatus prop som er 0,1 eller 2
This commit is contained in:
parent
755effe4da
commit
5ea9d11cb7
1 changed files with 27 additions and 5 deletions
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue