From 35d623cd96e44382b945975d61e4695c7e018550 Mon Sep 17 00:00:00 2001 From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com> Date: Mon, 7 Aug 2023 12:35:55 +0200 Subject: [PATCH] Frontend opprydding (#33) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- frontend/src/components/BildeOpplastning.tsx | 20 +- frontend/src/components/FeilKort.tsx | 82 ++++----- frontend/src/components/FeilModal.tsx | 6 + frontend/src/components/FeilkortHeader.tsx | 10 +- .../src/components/FeilmeldingsInnhold.tsx | 70 ++----- frontend/src/components/Filtermeny.tsx | 172 ++++++++---------- frontend/src/components/Header.tsx | 14 +- frontend/src/components/Kommentar.tsx | 53 ++++++ frontend/src/components/KortKonteiner.tsx | 1 - .../src/components/RedigeringsVerktoy.tsx | 13 +- frontend/src/components/Skillelinje.tsx | 5 +- frontend/src/components/TagBar.tsx | 40 ++-- frontend/src/index.tsx | 32 ++-- frontend/src/interface.ts | 13 +- frontend/src/main.tsx | 1 + frontend/src/pages/feil.tsx | 33 ++-- 16 files changed, 274 insertions(+), 291 deletions(-) create mode 100644 frontend/src/components/Kommentar.tsx diff --git a/frontend/src/components/BildeOpplastning.tsx b/frontend/src/components/BildeOpplastning.tsx index 345dfa3..b64121e 100644 --- a/frontend/src/components/BildeOpplastning.tsx +++ b/frontend/src/components/BildeOpplastning.tsx @@ -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 = () => { Skjermbilder -
+
-

Dra og slipp skjermbilder her!

+

+ Dra og slipp skjermbilder her! +

-
diff --git a/frontend/src/components/FeilKort.tsx b/frontend/src/components/FeilKort.tsx index 5f900d6..c68b83c 100644 --- a/frontend/src/components/FeilKort.tsx +++ b/frontend/src/components/FeilKort.tsx @@ -7,36 +7,39 @@ 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(false) const [redigeringsmodus, setRedigeringsmodus] = useState(false) - + useEffect(() => { Modal.setAppElement(document.getElementById('root')); }, []); - + return( <>
setVisModal(true)} - > + > { haster={props.haster} arbeidsstatus={props.arbeidsstatus} kommentar={props.kommentar} - /> + />
- + {redigeringsmodus ? - : + :

aktorId: {props.aktorId}

 @@ -86,4 +86,4 @@ const FeilKort = (props: IFeilKort) => { ) } -export default FeilKort \ No newline at end of file +export default FeilKort diff --git a/frontend/src/components/FeilModal.tsx b/frontend/src/components/FeilModal.tsx index 89069c5..67e6b3b 100644 --- a/frontend/src/components/FeilModal.tsx +++ b/frontend/src/components/FeilModal.tsx @@ -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( { return( diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx index af57182..989300e 100644 --- a/frontend/src/components/FeilmeldingsInnhold.tsx +++ b/frontend/src/components/FeilmeldingsInnhold.tsx @@ -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( -
- props.setKommentarfelt(e.target.value)} - > - - -
- ) -} - -const Kommentar = (props: kommentarInterface) => { - return( - <> - -
- Notat -

{props.tekst}

-
- - ) -} \ No newline at end of file diff --git a/frontend/src/components/Filtermeny.tsx b/frontend/src/components/Filtermeny.tsx index 95b7e4a..a279fd9 100644 --- a/frontend/src/components/Filtermeny.tsx +++ b/frontend/src/components/Filtermeny.tsx @@ -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 (
- - - - + + + + + + + Velg alle + Ikke pÄbegynt + Jobbes med + Ferdig med + + + + + settPrioritet(nyPrioritet)} + > + Alle feil + Kun feil som haster + + + + + settVisningstype(nyVisningstype)} + > + Alle feil + Kun egne feil + +
) @@ -16,99 +72,31 @@ const Filtermeny = () => { export default Filtermeny -const KategoriFilter = () => { - return ( +/** + * 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( - Kategori + {props.tittel} -

- Denne lĂžsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!! -

+

{props.beskrivelse}

+
+ {props.children} ) } - - -const StatusFilter = () => { - return( - - - Status - - -

- 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. -

-
- - Velg alle - Ikke pÄbegynt - Jobbes med - Ferdig med - - - - ) -} - - -const PrioritetFilter = () => { - const [verdi, settVerdi] = useState(false) - - return( - - - Prioritet - - -

- 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. -

-
- settVerdi(nyVerdi)} - > - Alle feil - Kun feil som haster - - - - ) -} - -const MineInnmeldinger = () => { - const [verdi, settVerdi] = useState(false) - - return( - - - Mine innmeldinger - - -

- Som saksbehandler kan det vĂŠre nyttig Ă„ finne tilbake til feil man har meldt inn for Ă„ sjekke status eller konklusjon. -

-
- settVerdi(nyVerdi)} - > - Alle feil - Kun egne feil - - - - ) +interface ItemInterface { + tittel: string + beskrivelse: string + children: React.ReactNode } \ No newline at end of file diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 06e0c41..3fff8ad 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -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( Sprik - - - - - {/* */} - ) } diff --git a/frontend/src/components/Kommentar.tsx b/frontend/src/components/Kommentar.tsx new file mode 100644 index 0000000..dec8089 --- /dev/null +++ b/frontend/src/components/Kommentar.tsx @@ -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( +
+ props.setKommentarfelt(e.target.value)} + > + + +
+ ) +} + +/** + * 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( + <> + +
+ Kommentar +

{props.tekst}

+
+ + ) +} \ No newline at end of file diff --git a/frontend/src/components/KortKonteiner.tsx b/frontend/src/components/KortKonteiner.tsx index 7c2e583..9a34546 100644 --- a/frontend/src/components/KortKonteiner.tsx +++ b/frontend/src/components/KortKonteiner.tsx @@ -13,7 +13,6 @@ interface IKortKonteiner { const KortKonteiner = (props: IKortKonteiner) => { return (
- {props.feilmeldinger.map((feilMelding) => ( 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,11 +51,10 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => { return (
-
- - Rediger feil - + + Rediger feil + { return (
diff --git a/frontend/src/components/TagBar.tsx b/frontend/src/components/TagBar.tsx index 45c2ca4..1807188 100644 --- a/frontend/src/components/TagBar.tsx +++ b/frontend/src/components/TagBar.tsx @@ -4,33 +4,31 @@ interface TagBarInterface { haster: boolean arbeidsstatus: number } + +/** + * @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) => { + switch (arbeidsstatus) { + case 0: + return Ikke pÄbegynt; + case 1: + return Feilen jobbes med; + case 2: + return Feilen er fikset; + 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 + * @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) => { - - /** - * Funksjonen tar inn - * @param arbeidsstatus - * @returns - */ - const toggleArbeidsstatus = (arbeidsstatus: number) => { - switch (arbeidsstatus) { - case 0: - return Ikke pÄbegynt; - case 1: - return Feilen jobbes med; - case 2: - return Feilen er fikset; - default: - throw new Error("Ikke gyldig arbeidsstatus-kode. Koden mÄ vÊre 0, 1 eller 2"); - - } - } - return (
{toggleArbeidsstatus(props.arbeidsstatus)} diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 7181cfd..c13b070 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -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([]); - /** - * 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 (
diff --git a/frontend/src/interface.ts b/frontend/src/interface.ts index 67d1e78..3b19b97 100644 --- a/frontend/src/interface.ts +++ b/frontend/src/interface.ts @@ -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 diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index cb81e91..4d7f099 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -5,6 +5,7 @@ import './index.css' import Home from './index' import Feil from './pages/feil' + const router = createBrowserRouter([ { path: "/", diff --git a/frontend/src/pages/feil.tsx b/frontend/src/pages/feil.tsx index 8a053f8..c195993 100644 --- a/frontend/src/pages/feil.tsx +++ b/frontend/src/pages/feil.tsx @@ -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(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 (
@@ -147,7 +146,7 @@ export default function Feil() {
{status != 0 ? handleAlerts() : <>}