commit
3acfcb7ff7
6 changed files with 96 additions and 55 deletions
frontend
|
@ -1,35 +1,35 @@
|
|||
import FeilCard from "./FeilCard"
|
||||
|
||||
type FeilMelding = {
|
||||
tittel: String
|
||||
beskrivelse: String
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns Komponent for returnering av konteiner med alle feilinnmeldingene.
|
||||
*/
|
||||
const CardsContainer = () => {
|
||||
|
||||
const feilMeldinger: FeilMelding[] = [
|
||||
const feilMeldinger: Feilmelding[] = [
|
||||
{
|
||||
tittel: "Mangel på hensyn til tariffoppgjør",
|
||||
beskrivelse: "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)"
|
||||
beskrivelse: "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)",
|
||||
haster: false
|
||||
},
|
||||
{
|
||||
tittel: "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag",
|
||||
beskrivelse: "baluba"
|
||||
beskrivelse: "baluba",
|
||||
haster: true
|
||||
},
|
||||
{
|
||||
tittel: "Feil A",
|
||||
beskrivelse: "Lorem Ipsum"
|
||||
beskrivelse: "Lorem Ipsum",
|
||||
haster: false
|
||||
},
|
||||
{
|
||||
tittel: "Feil B",
|
||||
beskrivelse: "dolor"
|
||||
beskrivelse: "dolor",
|
||||
haster: false
|
||||
},
|
||||
{
|
||||
tittel: "Håndkle på hue",
|
||||
beskrivelse: "Bombastic side eye"
|
||||
beskrivelse: "Bombastic side eye",
|
||||
haster: true
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -37,7 +37,12 @@ const CardsContainer = () => {
|
|||
<div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{feilMeldinger.map((feilMelding) => (
|
||||
<FeilCard key={feilMelding.toString()} tittel={feilMelding.tittel} beskrivelse={feilMelding.beskrivelse}/>
|
||||
<FeilCard
|
||||
key={feilMeldinger.indexOf(feilMelding)}
|
||||
tittel={feilMelding.tittel}
|
||||
beskrivelse={feilMelding.beskrivelse}
|
||||
haster={feilMelding.haster}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,24 +1,21 @@
|
|||
import "@navikt/ds-css";
|
||||
import { ExpansionCard, Tag } from "@navikt/ds-react";
|
||||
|
||||
interface feilmeldingInterface {
|
||||
tittel: String,
|
||||
beskrivelse: String
|
||||
interface TagBarInterface {
|
||||
haster: boolean
|
||||
}
|
||||
|
||||
const TagBar = () => {
|
||||
//typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke
|
||||
const TagBar = (props: TagBarInterface) => {
|
||||
return (
|
||||
<div className="flex gap-8 mt-4">
|
||||
<Tag variant="info">Jobbes med</Tag>
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="neutral">Spleiselaget</Tag>
|
||||
<Tag variant="warning">Haster</Tag>
|
||||
</div>
|
||||
{props.haster === true ? <Tag variant="warning">Haster</Tag> : <></>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FeilCard = (props: feilmeldingInterface) => {
|
||||
const FeilCard = (props: Feilmelding) => {
|
||||
return (
|
||||
<ExpansionCard aria-label="tekst">
|
||||
<ExpansionCard.Header>
|
||||
|
@ -26,7 +23,7 @@ const FeilCard = (props: feilmeldingInterface) => {
|
|||
<ExpansionCard.Description>
|
||||
{props.beskrivelse}
|
||||
</ExpansionCard.Description>
|
||||
<TagBar />
|
||||
<TagBar haster={props.haster}/>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
Hællæ
|
||||
|
|
46
frontend/src/components/Filtermeny.tsx
Normal file
46
frontend/src/components/Filtermeny.tsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
import { Accordion } from "@navikt/ds-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>
|
||||
</Accordion>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Filtermeny
|
|
@ -2,54 +2,34 @@ import CardsContainer from "./components/CardsContainer";
|
|||
import "@navikt/ds-css";
|
||||
import { Button, Heading, Search } from "@navikt/ds-react";
|
||||
import Header from "./components/Header";
|
||||
import { PlusIcon } from "@navikt/aksel-icons";
|
||||
import Filtermeny from "./components/Filtermeny";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function Home() {
|
||||
// const handleFeil = () => {
|
||||
// router.push('/feil')
|
||||
// }
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<main className="flex flex-col h-screen">
|
||||
<Header/>
|
||||
<div className="flex justify-center grow">
|
||||
<div className="bg-bg-subtle w-1/6 p-8 flex flex-col justify-end">
|
||||
<div className="flex flex-col gap-4 text-center bottom-0">
|
||||
<div className="flex grow">
|
||||
<Filtermeny/>
|
||||
<div className="grow bg-bg-subtle px-32 py-10 flex flex-col gap-10">
|
||||
<div className="flex gap-12 items-end">
|
||||
<Search label="Søkefelt" hideLabel={false}/>
|
||||
<Button
|
||||
variant="primary"
|
||||
// onClick={handleFeil}
|
||||
onClick={() => navigate("nyfeil")}
|
||||
className="w-64 h-min"
|
||||
icon={<PlusIcon/>}
|
||||
onClick={() => navigate("nyfeil")}
|
||||
>
|
||||
Meld inn feil
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
>
|
||||
Meld inn funksjonalitetsønsker
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 grow flex gap-8 flex-col">
|
||||
<Search
|
||||
label="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
|
||||
variant="primary"
|
||||
hideLabel={false}
|
||||
/>
|
||||
<Heading
|
||||
level="1"
|
||||
size="medium"
|
||||
>
|
||||
Innmeldte feil (saker, feilmeldinger poster, feil)
|
||||
</Heading>
|
||||
<CardsContainer/>
|
||||
</div>
|
||||
|
||||
<div className="bg-bg-subtle w-1/6 p-8">
|
||||
<h1>Filter to be</h1>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
|
10
frontend/src/interface.ts
Normal file
10
frontend/src/interface.ts
Normal file
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* I denne filen kan vi legge interfaces som skal brukes over flere steder!
|
||||
*/
|
||||
|
||||
|
||||
interface Feilmelding {
|
||||
tittel: String,
|
||||
beskrivelse: String
|
||||
haster: boolean
|
||||
}
|
|
@ -293,7 +293,10 @@ module.exports = {
|
|||
"large": "8px",
|
||||
"xlarge": "12px",
|
||||
"full": "9999px"
|
||||
}
|
||||
},
|
||||
"width": {
|
||||
"500": "500px",
|
||||
},
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
|
|
Reference in a new issue