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

✨ Status, Prioritet og mine innmeldinger filtreringskomponenter frontend (#14)

Browse source
This commit is contained in:
Markus A. R. Johansen 2023-07-20 16:06:09 +02:00 • committed by GitHub
parent fc6be8f02c
commit b5f6b71f71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 105 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

142
frontend/src/components/Filtermeny.tsx
View file

@ -1,46 +1,114 @@
import { Accordion } from "@navikt/ds-react"
import { Accordion, Checkbox, CheckboxGroup, Radio, RadioGroup } from "@navikt/ds-react"
import { useState } from "react"
const Filtermeny = () => {
return (
<div className="bg-bg-default w-500">
<Accordion>
<Accordion.Item>
<Accordion.Header>
Kategori
</Accordion.Header>
<Accordion.Content>
Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
nedsatt arbeidsevnen. NAV kan gjøre <a href="#Unntak">unntak</a>.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>
Status
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
Prioritet
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
Mine innmeldinger
</Accordion.Header>
<Accordion.Content>
Da er det lite som trengs å gjøres.
</Accordion.Content>
</Accordion.Item>
<KategoriFilter/>
<StatusFilter/>
<PrioritetFilter/>
<MineInnmeldinger/>
</Accordion>
</div>
)
}
export default Filtermeny
export default Filtermeny
const KategoriFilter = () => {
return (
<Accordion.Item>
<Accordion.Header>
Kategori
</Accordion.Header>
<Accordion.Content>
<p>
Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!!
</p>
</Accordion.Content>
</Accordion.Item>
)
}
const StatusFilter = () => {
return(
<Accordion.Item>
<Accordion.Header>
Status
</Accordion.Header>
<Accordion.Content>
<p>
Ved å filtrere etter status på forskjellig innmeldte feil
kan du enkelt få oversikt over hvilke feil som ikke er påbegynte,
hvilke som utredes av utviklingsteamet og løste feil.
</p>
<br/>
<CheckboxGroup
legend="Hvilke statusflagg ønsker du å vise?"
>
<Checkbox value="Ikke påbegynt">Velg alle</Checkbox>
<Checkbox value="Ikke påbegynt">Ikke påbegynt</Checkbox>
<Checkbox value="Jobbes med">Jobbes med</Checkbox>
<Checkbox value="Ferdig med">Ferdig med</Checkbox>
</CheckboxGroup>
</Accordion.Content>
</Accordion.Item>
)
}
const PrioritetFilter = () => {
const [verdi, settVerdi] = useState(false)
return(
<Accordion.Item>
<Accordion.Header>
Prioritet
</Accordion.Header>
<Accordion.Content>
<p>
Saker som haster å løse kan merkes med et haster flagg.
For å raskt finne ut av hvilke saker som må løses raskt,
kan man velge å kun vise hastesaker.
</p>
<br/>
<RadioGroup
legend="Velg visningstype"
value={verdi}
onChange={(nyVerdi: any) => settVerdi(nyVerdi)}
>
<Radio value={false}>Alle feil</Radio>
<Radio value={true}>Kun feil som haster</Radio>
</RadioGroup>
</Accordion.Content>
</Accordion.Item>
)
}
const MineInnmeldinger = () => {
const [verdi, settVerdi] = useState(false)
return(
<Accordion.Item>
<Accordion.Header>
Mine innmeldinger
</Accordion.Header>
<Accordion.Content>
<p>
Som saksbehandler kan det være nyttig å finne tilbake til feil man har meldt inn for å sjekke status eller konklusjon.
</p>
<br/>
<RadioGroup
legend="Velg visningstype"
value={verdi}
onChange={(nyVerdi: any) => settVerdi(nyVerdi)}
>
<Radio value={false}>Alle feil</Radio>
<Radio value={true}>Kun egne feil</Radio>
</RadioGroup>
</Accordion.Content>
</Accordion.Item>
)
}