se forrige commit
This commit is contained in:
Markus Johansen
parent
d97900e872
commit
0b19a274e2
4 changed files with 129 additions and 155 deletions
|
|
@ -3,30 +3,22 @@ import { Button, Heading } from "@navikt/ds-react"
|
|||
|
||||
|
||||
/**
|
||||
* Inkluderer en knapp for opplastning i finder/explorer.
|
||||
* Inkluderer et felt for drag and drop opplastning av bilder
|
||||
* @returns `Drag and drop` komponent for filopplastning av skjermbilder
|
||||
* BildeOpplastningskomponentet brukes for å laste opp skjermbilder av en feil i Speil.
|
||||
* Komponentet er ment for å støtte både drag-and-drop og vanlig opplasting av bilder.
|
||||
* @TODO: Implementer funksjonalitet for å laste opp bildefiler -> API og backend
|
||||
*/
|
||||
const BildeOpplastning = () => {
|
||||
return(
|
||||
<div className="flex gap-2 flex-col">
|
||||
<Heading size="xsmall">
|
||||
Skjermbilder
|
||||
</Heading>
|
||||
<Heading size="xsmall">Skjermbilder</Heading>
|
||||
<div className="
|
||||
h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
|
||||
rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2
|
||||
">
|
||||
<FileImageIcon
|
||||
fontSize="3.5rem"
|
||||
className="text-blue-500"
|
||||
/>
|
||||
<FileImageIcon fontSize="3.5rem" className="text-blue-500"/>
|
||||
<p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<UploadIcon />}
|
||||
>
|
||||
<Button variant="secondary" icon={<UploadIcon />}>
|
||||
Last opp skjermbilder
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,21 @@ 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
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
|
||||
* Komponentet rendres på hovedsiden, og mappes ut fra en liste med feilmeldinger i KortKonteiner.
|
||||
* Du kan trykke på en feilmelding for å åpne en modal som viser mer informasjon om feilmeldingen, samt mulighet for å redigere.
|
||||
* @param id er feilmeldingens unike id
|
||||
* @param tittel
|
||||
* @param beskrivelse
|
||||
* @param dato Dato for når feilen ble meldt inn
|
||||
* @param haster Boolean som beskriver om feilen haster eller ikke.
|
||||
* @param reset funksjon som kalles når en feilmelding endres. Denne funksjonen kalles for å oppdatere feilmeldingene som vises på hovedsiden.
|
||||
*/
|
||||
const FeilKort = (props: IFeilKort) => {
|
||||
const [visModal, setVisModal] = useState<boolean>(false)
|
||||
const [redigeringsmodus, setRedigeringsmodus] = useState(false)
|
||||
|
|
@ -30,13 +33,13 @@ const FeilKort = (props: IFeilKort) => {
|
|||
return(
|
||||
<>
|
||||
<div
|
||||
key={props.key}
|
||||
key={props.id}
|
||||
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}
|
||||
|
|
@ -45,39 +48,36 @@ const FeilKort = (props: IFeilKort) => {
|
|||
haster={props.haster}
|
||||
arbeidsstatus={props.arbeidsstatus}
|
||||
kommentar={props.kommentar}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<FeilModal
|
||||
open={visModal}
|
||||
setOpen={setVisModal}
|
||||
>
|
||||
<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}
|
||||
reset={props.reset}
|
||||
kommentar={props.kommentar}
|
||||
aktorId={props.aktorId}
|
||||
id={props.id}
|
||||
tittel={props.tittel}
|
||||
beskrivelse={props.beskrivelse}
|
||||
dato={props.dato}
|
||||
haster={props.haster}
|
||||
arbeidsstatus={props.arbeidsstatus}
|
||||
setRedigeringsmodus={setRedigeringsmodus}
|
||||
setVisModal={setVisModal}
|
||||
reset={props.reset}
|
||||
kommentar={props.kommentar}
|
||||
aktorId={props.aktorId}
|
||||
/>
|
||||
:
|
||||
:
|
||||
<FeilmeldingsInnhold
|
||||
id={props.id}
|
||||
tittel={props.tittel}
|
||||
beskrivelse={props.beskrivelse}
|
||||
dato={props.dato}
|
||||
haster={props.haster}
|
||||
arbeidsstatus={props.arbeidsstatus}
|
||||
setVisModal={setVisModal}
|
||||
setRedigeringsmodus={setRedigeringsmodus}
|
||||
reset={props.reset}
|
||||
kommentar={props.kommentar}
|
||||
aktorId={props.aktorId}
|
||||
id={props.id}
|
||||
tittel={props.tittel}
|
||||
beskrivelse={props.beskrivelse}
|
||||
dato={props.dato}
|
||||
haster={props.haster}
|
||||
arbeidsstatus={props.arbeidsstatus}
|
||||
setVisModal={setVisModal}
|
||||
setRedigeringsmodus={setRedigeringsmodus}
|
||||
reset={props.reset}
|
||||
kommentar={props.kommentar}
|
||||
aktorId={props.aktorId}
|
||||
>
|
||||
<p>aktorId: {props.aktorId}</p>
|
||||
</FeilmeldingsInnhold>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,8 @@ import { IFeilmelding } from "../interface";
|
|||
import TagBar from "./TagBar";
|
||||
|
||||
/**
|
||||
* FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
|
||||
* FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten.
|
||||
* Midlertidig implementerer komponentet @requires IFeilmelding for props, men dette må endres når IFeilmelding utvides i fremtiden for støtte av flere typer feilmeldinger.
|
||||
* @param tittel
|
||||
* @param beskrivelse
|
||||
* @param haster
|
||||
* @param dato
|
||||
* @returns JSX komponent som skal vise nødvendig informasjon for å forstå en feil.
|
||||
* Headeren til et Feilkort, inneholder lite sensitiv informasjon som er beskrivende for feilen (tittel, beskrivelse, dato, haster, arbeidsstatus).
|
||||
* Komponentet er en del av FeilKort, og er det du kan se når du er på hovedsiden.
|
||||
*/
|
||||
export const FeilkortHeader = (props: IFeilmelding) => {
|
||||
return(
|
||||
|
|
|
|||
|
|
@ -1,14 +1,70 @@
|
|||
import { Accordion, Checkbox, CheckboxGroup, Radio, RadioGroup } from "@navikt/ds-react"
|
||||
import { useState } from "react"
|
||||
import React, { useState } from "react"
|
||||
|
||||
/**
|
||||
* Filtermenyen er en komponent som inneholder alle filterene som kan brukes for å filtrere feil.
|
||||
* Komponentet rendres på hovedsiden.
|
||||
* Foreløpig holder den filter for kategorier, status, prioritet og mine innmeldinger.
|
||||
*/
|
||||
const Filtermeny = () => {
|
||||
const [visningstype, settVisningstype] = useState(false)
|
||||
const [prioritet, settPrioritet] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bg-bg-default w-500">
|
||||
<Accordion>
|
||||
<KategoriFilter/>
|
||||
<StatusFilter/>
|
||||
<PrioritetFilter/>
|
||||
<MineInnmeldinger/>
|
||||
<FilterModul
|
||||
tittel="Kategorier"
|
||||
beskrivelse="Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!"
|
||||
>
|
||||
|
||||
</FilterModul>
|
||||
|
||||
<FilterModul
|
||||
tittel="Status"
|
||||
beskrivelse="
|
||||
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."
|
||||
>
|
||||
<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>
|
||||
</FilterModul>
|
||||
|
||||
<FilterModul
|
||||
tittel="Prioritet"
|
||||
beskrivelse="
|
||||
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."
|
||||
>
|
||||
<RadioGroup
|
||||
legend="Velg visningstype"
|
||||
value={prioritet}
|
||||
onChange={(nyPrioritet: any) => settPrioritet(nyPrioritet)}
|
||||
>
|
||||
<Radio value={false}>Alle feil</Radio>
|
||||
<Radio value={true}>Kun feil som haster</Radio>
|
||||
</RadioGroup>
|
||||
</FilterModul>
|
||||
|
||||
<FilterModul
|
||||
tittel="Mine innmeldinger"
|
||||
beskrivelse="Som saksbehandler kan det være nyttig å finne tilbake til feil man har meldt inn for å sjekke status eller konklusjon."
|
||||
>
|
||||
<RadioGroup
|
||||
legend="Velg visningstype"
|
||||
value={visningstype}
|
||||
onChange={(nyVisningstype: any) => settVisningstype(nyVisningstype)}
|
||||
>
|
||||
<Radio value={false}>Alle feil</Radio>
|
||||
<Radio value={true}>Kun egne feil</Radio>
|
||||
</RadioGroup>
|
||||
</FilterModul>
|
||||
</Accordion>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -16,99 +72,31 @@ const 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 = () => {
|
||||
/**
|
||||
* Filtermodul utgjør en modul for de forskjellige filterene som kan brukes i Filtermenyen.
|
||||
* Komponentet bygger på aksel sin Accordion komponent og enkelt elementer i denne.
|
||||
* Komponentet kan derfor ikke brukes utenfor en Accordion.
|
||||
* @param tittel Tittelen på filteret
|
||||
* @param beskrivelse Beskrivelse av hvordan kan brukes
|
||||
* @param children Innholdet i en Filtermodul, som er kontrollkomponenter for filteret
|
||||
* @returns
|
||||
*/
|
||||
const FilterModul = (props: ItemInterface) => {
|
||||
return(
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>
|
||||
Status
|
||||
{props.tittel}
|
||||
</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>
|
||||
<p>{props.beskrivelse}</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>
|
||||
{props.children}
|
||||
</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>
|
||||
)
|
||||
interface ItemInterface {
|
||||
tittel: string
|
||||
beskrivelse: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
Reference in a new issue