se forrige commit

frontend/src/components/BildeOpplastning.tsx

@@ -3,30 +3,22 @@ import { Button, Heading } from "@navikt/ds-react"
 
 
 /**
- * Inkluderer en knapp for opplastning i finder/explorer.
+ * BildeOpplastningskomponentet brukes for å laste opp skjermbilder av en feil i Speil.
- * Inkluderer et felt for drag and drop opplastning av bilder
+ * Komponentet er ment for å støtte både drag-and-drop og vanlig opplasting av bilder.
- * @returns `Drag and drop` komponent for filopplastning av skjermbilder
+ * @TODO: Implementer funksjonalitet for å laste opp bildefiler -> API og backend
  */
 const BildeOpplastning = () => {
     return(
         <div className="flex gap-2 flex-col">
-            <Heading size="xsmall">
+            <Heading size="xsmall">Skjermbilder</Heading>
-                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 
+                <FileImageIcon fontSize="3.5rem" className="text-blue-500"/> 
-                    fontSize="3.5rem"
-                    className="text-blue-500"
-                /> 
                 <p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
             </div>
-            <Button
+            <Button variant="secondary" icon={<UploadIcon />}>
-                variant="secondary"
-                icon={<UploadIcon />}
-            >
                 Last opp skjermbilder
             </Button>     
         </div>

frontend/src/components/FeilKort.tsx

@@ -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 
+            <FeilModal open={visModal} setOpen={setVisModal}>
-                open={visModal} 
-                setOpen={setVisModal} 
-            >
                 {redigeringsmodus ? 
                     <RedigeringsVerktoy 
                     id={props.id}

frontend/src/components/FeilkortHeader.tsx

@@ -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.
+ * Headeren til et Feilkort, inneholder lite sensitiv informasjon som er beskrivende for feilen (tittel, beskrivelse, dato, haster, arbeidsstatus).
- * FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten. 
+ * Komponentet er en del av FeilKort, og er det du kan se når du er på hovedsiden.
- * 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.
  */
 export const FeilkortHeader = (props: IFeilmelding) => {
     return(

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 (
         <div className="bg-bg-default w-500">
             <Accordion>
-                <KategoriFilter/>
+                <FilterModul 
-                <StatusFilter/>
+                    tittel="Kategorier"
-                <PrioritetFilter/>
+                    beskrivelse="Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!"
-                <MineInnmeldinger/>
+                >
+
+                </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 (
+ * Filtermodul utgjør en modul for de forskjellige filterene som kan brukes i Filtermenyen.
-        <Accordion.Item>
+ * Komponentet bygger på aksel sin Accordion komponent og enkelt elementer i denne. 
-            <Accordion.Header>
+ * Komponentet kan derfor ikke brukes utenfor en Accordion.
-                Kategori
+ * @param tittel Tittelen på filteret
-            </Accordion.Header>
+ * @param beskrivelse Beskrivelse av hvordan kan brukes
-            <Accordion.Content>
+ * @param children Innholdet i en Filtermodul, som er kontrollkomponenter for filteret
-                <p>
+ * @returns 
-                    Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!!
+*/
-                </p>
+const FilterModul = (props: ItemInterface) => {
-            </Accordion.Content>
-        </Accordion.Item>
-    )
-}
-
-
-const StatusFilter = () => {
     return(
         <Accordion.Item>
             <Accordion.Header>
-                Status
+                {props.tittel}
             </Accordion.Header>
             <Accordion.Content>
-                <p>
+                <p>{props.beskrivelse}</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
+                {props.children}
-                    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>
     )
 }
-
+interface ItemInterface {
-
+    tittel: string
-const PrioritetFilter = () => {
+    beskrivelse: string
-    const [verdi, settVerdi] = useState(false)
+    children: React.ReactNode
-    
-    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>
-    )
 }