From 8091b21b20d3e9122399e5325365d58e61793bc1 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Mon, 7 Aug 2023 12:00:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Dokumentert=20redigeringsverkt?=
 =?UTF-8?q?=C3=B8y,=20skillelinje=20og=20tagbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RedigeringsVerktoy.tsx     | 13 ++++--
 frontend/src/components/Skillelinje.tsx       |  5 ++-
 frontend/src/components/TagBar.tsx            | 40 +++++++++----------
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/RedigeringsVerktoy.tsx b/frontend/src/components/RedigeringsVerktoy.tsx
index 271b916..f40f330 100644
--- a/frontend/src/components/RedigeringsVerktoy.tsx
+++ b/frontend/src/components/RedigeringsVerktoy.tsx
@@ -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)
@@ -44,11 +50,10 @@ 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
-            </Heading>
+                <Heading className="" size="large">
+                    Rediger feil
+                </Heading>
                 <TextField 
                     label="Tittel"
                     value={tittel}
diff --git a/frontend/src/components/Skillelinje.tsx b/frontend/src/components/Skillelinje.tsx
index 4caef55..4b32447 100644
--- a/frontend/src/components/Skillelinje.tsx
+++ b/frontend/src/components/Skillelinje.tsx
@@ -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>
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 <Tag variant="neutral">Ikke påbegynt</Tag>;
+        case 1:
+            return <Tag variant="info">Feilen jobbes med</Tag>;
+        case 2:
+            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
+ * @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 <Tag variant="neutral">Ikke påbegynt</Tag>;
-            case 1:
-                return <Tag variant="info">Feilen jobbes med</Tag>;
-            case 2:
-                return <Tag variant="success">Feilen er fikset</Tag>;
-            default:
-                throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
-                
-        }
-    }
-
     return (
         <div className="flex gap-3 mt-4">
             {toggleArbeidsstatus(props.arbeidsstatus)}