Frontend opprydding (#33)
* se forrige commit * 🎨📝 Kommentar komponenter i egen fil, og dokumentering av modal, kommentar, header, feilmeldingsinnhold og kortkonteiner * 📝 Dokumentert redigeringsverktøy, skillelinje og tagbar * 📝♻️ Forenklet henting av alle feil og dokumenterte resterende frontend
This commit is contained in:
Markus A. R. Johansen
GitHub
parent
d75e646140
commit
35d623cd96
16 changed files with 274 additions and 291 deletions
|
|
@ -3,9 +3,9 @@ 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(
|
||||
|
|
@ -13,20 +13,16 @@ const BildeOpplastning = () => {
|
|||
<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
|
||||
">
|
||||
<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"
|
||||
/>
|
||||
<p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
|
||||
<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,7 +33,7 @@ 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
|
||||
|
|
@ -47,10 +50,7 @@ const FeilKort = (props: IFeilKort) => {
|
|||
kommentar={props.kommentar}
|
||||
/>
|
||||
</div>
|
||||
<FeilModal
|
||||
open={visModal}
|
||||
setOpen={setVisModal}
|
||||
>
|
||||
<FeilModal open={visModal} setOpen={setVisModal}>
|
||||
{redigeringsmodus ?
|
||||
<RedigeringsVerktoy
|
||||
id={props.id}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ interface modalInterface {
|
|||
children: React.ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal som brukes til å vise feilmeldinger i fullvisningsmodus med feilinnhold og redigeringsverktøy
|
||||
* @param open boolean som beskriver om modalen skal være åpen eller ikke
|
||||
* @param setOpen setter open
|
||||
* @param children innholdet i modalen
|
||||
*/
|
||||
const FeilModal = (props: modalInterface) => {
|
||||
return(
|
||||
<Modal
|
||||
|
|
|
|||
|
|
@ -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,25 +1,31 @@
|
|||
import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
|
||||
import { Button, Heading, TextField } from "@navikt/ds-react"
|
||||
import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
|
||||
import { Button } from "@navikt/ds-react"
|
||||
import { FeilmeldingsInnholdInterface } from "../interface"
|
||||
import FeilkortHeader from "./FeilkortHeader"
|
||||
import { useState } from "react"
|
||||
import Skillelinje from "./Skillelinje"
|
||||
import axios from "axios"
|
||||
import { Kommentar, KommentarTekstfelt } from "./Kommentar"
|
||||
|
||||
|
||||
/**
|
||||
* FeilmeldingsInnhold er et komponent som viser det fulle innholdet til en feilmelding.
|
||||
* Komponentet er en del av FeilKort, og er det du kan se når du trykker på et Feilkort.
|
||||
* Tilgangen til å vise FeilmeldingsInnhold er skal begrenses til saksbehandlere, utviklere og fagfolk med tjenestlig behov.
|
||||
*/
|
||||
const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
|
||||
//kommentar kan være null eller undefined når den kommer fra databasen, derfor må den sjekkes og omgjøres til en tom string om det er tilfellet
|
||||
const [kommentar, setKommentar] = useState(props.kommentar != (null || undefined) ? props.kommentar : "")
|
||||
const [kommentarfelt, setKommentarfelt] = useState("")
|
||||
|
||||
/**
|
||||
* Endrer Feilmeldingsobjektet i databasen og setter en ny kommentar på den
|
||||
*/
|
||||
const oppdaterkommentar = async() => {
|
||||
console.log(kommentarfelt)
|
||||
console.log(kommentar);
|
||||
|
||||
|
||||
const payload = {
|
||||
id: props.id,
|
||||
kommentar: kommentarfelt,
|
||||
}
|
||||
|
||||
await axios.put("/api/oppdaterkommentar", payload, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -29,7 +35,8 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
|
|||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
|
||||
//TODO: fiks så kommentar oppdateres uten å måtte skjule modalen.
|
||||
props.setVisModal(false)
|
||||
props.reset()
|
||||
}
|
||||
|
||||
|
|
@ -84,50 +91,3 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
|
|||
)
|
||||
}
|
||||
export default FeilmeldingsInnhold;
|
||||
|
||||
|
||||
interface Ikommentar {
|
||||
setKommentarfelt: (val: string) => void
|
||||
oppdaterKommentar: () => void
|
||||
}
|
||||
|
||||
interface kommentarTekstfeltInterface extends Ikommentar{
|
||||
kommentarfelt: string,
|
||||
}
|
||||
interface kommentarInterface {
|
||||
tekst: string
|
||||
}
|
||||
|
||||
|
||||
const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
|
||||
return(
|
||||
<div className="flex items-end gap-12 w-full mt-4 h-fit">
|
||||
<TextField
|
||||
className="grow"
|
||||
label="Skriv inn din kommentar til feilen"
|
||||
value={props.kommentarfelt}
|
||||
onChange={e => props.setKommentarfelt(e.target.value)}
|
||||
>
|
||||
</TextField>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<ChatElipsisIcon/>}
|
||||
onClick={() => props.oppdaterKommentar()}
|
||||
>
|
||||
Legg til kommentar
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Kommentar = (props: kommentarInterface) => {
|
||||
return(
|
||||
<>
|
||||
<Skillelinje/>
|
||||
<div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
|
||||
<Heading size="medium">Notat</Heading>
|
||||
<p className="break-words">{props.tekst}</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -1,20 +1,14 @@
|
|||
import { MenuGridIcon } from "@navikt/aksel-icons"
|
||||
import { InternalHeader, Dropdown } from "@navikt/ds-react"
|
||||
import { InternalHeader } from "@navikt/ds-react"
|
||||
|
||||
/**
|
||||
* Headeren til applikasjonen, inneholder logo og lenke til hovedsiden.
|
||||
*/
|
||||
const Header = () => {
|
||||
return(
|
||||
<InternalHeader>
|
||||
<InternalHeader.Title href="/#home">
|
||||
Sprik
|
||||
</InternalHeader.Title>
|
||||
<Dropdown>
|
||||
<InternalHeader.Button
|
||||
as={Dropdown.Toggle}
|
||||
>
|
||||
<MenuGridIcon title="MenuGridIconer og oppslagsverk" />
|
||||
</InternalHeader.Button>
|
||||
{/* <Dropdown.Menu /> */}
|
||||
</Dropdown>
|
||||
</InternalHeader>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
53
frontend/src/components/Kommentar.tsx
Normal file
53
frontend/src/components/Kommentar.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { ChatElipsisIcon } from "@navikt/aksel-icons"
|
||||
import { TextField, Button, Heading } from "@navikt/ds-react"
|
||||
import Skillelinje from "./Skillelinje"
|
||||
|
||||
interface kommentarTekstfeltInterface {
|
||||
kommentarfelt: string,
|
||||
setKommentarfelt: (val: string) => void
|
||||
oppdaterKommentar: () => void
|
||||
}
|
||||
interface kommentarInterface {
|
||||
tekst: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Kommentartekstfeltet er et tekstfelt med en knapp som poster en kommentar til en feil.
|
||||
*/
|
||||
export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
|
||||
return(
|
||||
<div className="flex items-end gap-12 w-full mt-4 h-fit">
|
||||
<TextField
|
||||
className="grow"
|
||||
label="Skriv inn din kommentar til feilen"
|
||||
value={props.kommentarfelt}
|
||||
onChange={e => props.setKommentarfelt(e.target.value)}
|
||||
>
|
||||
</TextField>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={<ChatElipsisIcon/>}
|
||||
onClick={() => props.oppdaterKommentar()}
|
||||
>
|
||||
Legg til kommentar
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Kommentar er en komponent som viser en kommentar til en feil.
|
||||
* Komentaren kan beskrive konklusjonen til en feil, eller være en oppdatering på statusen til en feil.
|
||||
* @param tekst
|
||||
*/
|
||||
export const Kommentar = (props: kommentarInterface) => {
|
||||
return(
|
||||
<>
|
||||
<Skillelinje/>
|
||||
<div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
|
||||
<Heading size="medium">Kommentar</Heading>
|
||||
<p className="break-words">{props.tekst}</p>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ interface IKortKonteiner {
|
|||
const KortKonteiner = (props: IKortKonteiner) => {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
|
||||
{props.feilmeldinger.map((feilMelding) => (
|
||||
<FeilKort
|
||||
key={props.feilmeldinger.indexOf(feilMelding)}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,18 @@ interface redigeringsInterface extends FeilmeldingsInnholdInterface {
|
|||
reset: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Redigeringsverktøy er et skjema som lar brukeren redigere en innmeldt feil.
|
||||
* Statusflagg som arbeidsstatus og haster flagg kan endres.
|
||||
* Tittel og beskrivelse kan også endres
|
||||
*/
|
||||
const RedigeringsVerktoy = (props: redigeringsInterface) => {
|
||||
const [tittel, setTittel] = useState(props.tittel)
|
||||
const [beskrivelse, setBeskrivelse] = useState(props.beskrivelse)
|
||||
const [arbeidsstatus, setArbeidsstatus] = useState(props.arbeidsstatus)
|
||||
const [haster, setHaster] = useState(props.haster)
|
||||
|
||||
|
||||
const lagreEndringer = async() => {
|
||||
props.setVisModal(false)
|
||||
props.setRedigeringsmodus(false)
|
||||
|
|
@ -45,7 +51,6 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col gap-12 items-center px-12">
|
||||
|
||||
<div className="flex flex-col gap-6 w-full">
|
||||
<Heading className="" size="large">
|
||||
Rediger feil
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
|
||||
|
||||
/**
|
||||
* Skillelinjer som brukes for å dele opp innholdet i et komponent/skjema i mindre deler
|
||||
* Forbedrer lesbarheten til skjemaet
|
||||
*/
|
||||
const Skillelinje = () => {
|
||||
return (
|
||||
<div className="h-1 bg-gray-200 my-3 rounded-lg w-full"></div>
|
||||
|
|
|
|||
|
|
@ -4,20 +4,12 @@ interface TagBarInterface {
|
|||
haster: boolean
|
||||
arbeidsstatus: number
|
||||
}
|
||||
/**
|
||||
* Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
|
||||
* Komponentet er en del av FeilKortHeader
|
||||
* @param haster er en boolean som beskriver om feilen haster eller ikke.
|
||||
* @param arbeidsstatus
|
||||
*/
|
||||
const TagBar = (props: TagBarInterface) => {
|
||||
|
||||
/**
|
||||
* Funksjonen tar inn
|
||||
* @param arbeidsstatus
|
||||
* @returns
|
||||
/**
|
||||
* @param arbeidsstatus er en kode som beskriver om feilen er fikset, jobbes med eller ikke påbegynt. må være 0, 1 eller 2.
|
||||
* @returns Tag komponent med riktig farge og tekst basert på arbeidsstatus-kode
|
||||
*/
|
||||
const toggleArbeidsstatus = (arbeidsstatus: number) => {
|
||||
const toggleArbeidsstatus = (arbeidsstatus: number) => {
|
||||
switch (arbeidsstatus) {
|
||||
case 0:
|
||||
return <Tag variant="neutral">Ikke påbegynt</Tag>;
|
||||
|
|
@ -27,10 +19,16 @@ const TagBar = (props: TagBarInterface) => {
|
|||
return <Tag variant="success">Feilen er fikset</Tag>;
|
||||
default:
|
||||
throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
|
||||
* Komponentet er en del av FeilKortHeader
|
||||
* @param haster er en boolean som beskriver om feilen haster eller ikke.
|
||||
* @param arbeidsstatus er en kode som beskriver om feilen er fikset, jobbes med eller ikke påbegynt. må være 0, 1 eller 2.
|
||||
*/
|
||||
const TagBar = (props: TagBarInterface) => {
|
||||
return (
|
||||
<div className="flex gap-3 mt-4">
|
||||
{toggleArbeidsstatus(props.arbeidsstatus)}
|
||||
|
|
|
|||
|
|
@ -9,37 +9,28 @@ import axios from "axios";
|
|||
import { useEffect, useState } from "react";
|
||||
import { Feilmelding } from "./interface";
|
||||
|
||||
/**
|
||||
* Hovedsiden til applikasjonen, viser alle innmeldte feil.
|
||||
* Tilbyr søkefelt og filtreringsmuligheter
|
||||
* Tilbyr også navigering til feilinnmeldingssiden
|
||||
*/
|
||||
export default function Home() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
|
||||
|
||||
/**
|
||||
* Henter alle feilmeldinger fra backend.
|
||||
* Bruker endepunktet /api/hentallefeil.
|
||||
*/
|
||||
|
||||
const hentAlleFeil = async () => {
|
||||
await axios.get("/api/hentallefeil")
|
||||
.then(data => data.data)
|
||||
.then(feil => {
|
||||
setFeilmeldinger(
|
||||
feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding))
|
||||
);
|
||||
})
|
||||
const { data } = await axios.get("/api/hentallefeil")
|
||||
setFeilmeldinger(data)
|
||||
}
|
||||
|
||||
// Sørger for at hentAlleFeil() kun kjører når komponentet laster inn
|
||||
useEffect(() => {
|
||||
hentAlleFeil();
|
||||
}, [])
|
||||
|
||||
/**
|
||||
* Oppdaterer viste feilmeldinger ved endring i søkefelt.
|
||||
* Kontakter endepunktet /api/hentsok/.
|
||||
* @param soketekst
|
||||
*/
|
||||
|
||||
//oppdaterer visningen av feilmeldinger når søkefeltet endres
|
||||
const handleSearch = async (soketekst: string) => {
|
||||
// Ved tomt søkefelt hentes alle feilmeldinger
|
||||
if (soketekst === "") {
|
||||
hentAlleFeil()
|
||||
return
|
||||
|
|
@ -48,6 +39,7 @@ export default function Home() {
|
|||
setFeilmeldinger(data)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<main className="flex flex-col h-screen">
|
||||
<Header/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
/**
|
||||
* I denne filen kan vi legge interfaces som skal brukes over flere steder!
|
||||
*/
|
||||
|
||||
|
||||
export interface IFeilmelding {
|
||||
id: number,
|
||||
tittel: string,
|
||||
|
|
@ -21,6 +16,10 @@ export interface FeilmeldingsInnholdInterface extends IFeilmelding {
|
|||
reset: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* En klasse som implementerer IFeilmelding interfacet.
|
||||
* Brukes for å mappe JSON objekter til en klasse ved henting av data fra backend
|
||||
*/
|
||||
export class Feilmelding implements IFeilmelding {
|
||||
id: number = 0
|
||||
tittel: string = "default tittel"
|
||||
|
|
@ -31,10 +30,6 @@ export class Feilmelding implements IFeilmelding {
|
|||
kommentar?: string = undefined
|
||||
aktorid?: number = undefined
|
||||
|
||||
/**
|
||||
* Typescript 2.1 syntax som lar deg sende inn et JSON object og mappe det til class.
|
||||
* https://stackoverflow.com/questions/14142071/typescript-and-field-initializers
|
||||
*/
|
||||
public constructor(
|
||||
fields: {
|
||||
id: number
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import './index.css'
|
|||
import Home from './index'
|
||||
import Feil from './pages/feil'
|
||||
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ import Header from "../components/Header";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import Skillelinje from "../components/Skillelinje";
|
||||
|
||||
/**
|
||||
* Siden for å melde inn feil i speil.
|
||||
*/
|
||||
export default function Feil() {
|
||||
const [tittel, setTittel] = useState("");
|
||||
const [beskrivelse, setBeskrivelse] = useState("");
|
||||
|
|
@ -16,20 +19,27 @@ export default function Feil() {
|
|||
const [haster, setHaster] = useState(false)
|
||||
const [valgteTags, setValgteTags] = useState([] as string[]);
|
||||
const [aktorid, setAktorid] = useState<number|null>(null);
|
||||
const navigate = useNavigate()
|
||||
const tags = [
|
||||
"Utbetaling",
|
||||
"Inntekt",
|
||||
"Speil",
|
||||
"Annet"
|
||||
];
|
||||
|
||||
const handleSubmit = () => {
|
||||
//Sender feil til databasen
|
||||
const meldInnFeil = () => {
|
||||
const payload = {
|
||||
id: null,
|
||||
tittel: tittel,
|
||||
beskrivelse: beskrivelse,
|
||||
dato: new Date().toISOString().replace('Z', ''), // Litt wack fix, burde endres
|
||||
dato: new Date().toISOString().replace('Z', ''),
|
||||
arbeidsstatus: 0,
|
||||
haster: haster,
|
||||
kommentar: null,
|
||||
aktorid: aktorid ? aktorid : null,
|
||||
//kategorier: valgteTags
|
||||
//TODO: kategorier: valgteTags
|
||||
}
|
||||
|
||||
axios.post("/api/nyfeil", payload, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -41,6 +51,7 @@ export default function Feil() {
|
|||
})
|
||||
}
|
||||
|
||||
//Håndterer alerts som vises etter at feil er lagt til i databasen eller feiler i å bli lagt til
|
||||
const handleAlerts = () => {
|
||||
if (status === 201) {
|
||||
console.log("Feil lagt til i database");
|
||||
|
|
@ -56,18 +67,6 @@ export default function Feil() {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: clear data fra felter
|
||||
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const tags = [
|
||||
"Utbetaling",
|
||||
"Inntekt",
|
||||
"Speil",
|
||||
"Annet"
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="flex flex-col h-screen">
|
||||
<Header/>
|
||||
|
|
@ -147,7 +146,7 @@ export default function Feil() {
|
|||
<div className="w-1/2 flex flex-col gap-2 justify-center mt-8">
|
||||
{status != 0 ? handleAlerts() : <></>}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
onClick={meldInnFeil}
|
||||
variant="primary"
|
||||
>
|
||||
Meld inn feil
|
||||
|
|
|
|||
Reference in a new issue