From 676986f1058033aabcd10e5f016aef267fbee817 Mon Sep 17 00:00:00 2001
From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com>
Date: Tue, 1 Aug 2023 10:42:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Statusflagg=20(#19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Tagbar støtter toggling av arbeidsstatusflagg, ved å ta inn et arbeidsstatus prop som er 0,1 eller 2

* 🗃️ Legger til PK, arbeidsstatus og haster i database

Co-authored-by: Amalie Erdal Mansåker <amalie.erdal.mansaker@nav.no>

* ✏️  Fikser glemt semikolon + glemte felt i tester

Co-authored-by: Amalie Erdal Mansåker <amalie.erdal.mansaker@nav.no>

* 🍱 Oppdaterer interface frontend for å matche nye felt haster og arbeidsstatus

* 🐛 Manglet nye props i cardcontainer

* ✨ Tagbar støtter toggling av arbeidsstatusflagg, ved å ta inn et arbeidsstatus prop som er 0,1 eller 2

---------

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Co-authored-by: Amalie Erdal Mansåker <amalie.erdal.mansaker@nav.no>
Co-authored-by: Sid <93219711+SindreKjelsrud@users.noreply.github.com>
---
 frontend/src/components/CardsContainer.tsx |  4 +--
 frontend/src/components/FeilCard.tsx       | 34 ++++++++++++++++++----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx
index 1e93578..d51318d 100644
--- a/frontend/src/components/CardsContainer.tsx
+++ b/frontend/src/components/CardsContainer.tsx
@@ -9,9 +9,7 @@ interface ICardsContainer {
  * Komponent som laster inn feilmeldinger i kort fra database.
  * @returns grid med feilmeldinger 
  */
-const CardsContainer = (props: ICardsContainer) => {
-  {props.feilmeldinger.map((feilMelding) => console.log(feilMelding))}
-  
+const CardsContainer = (props: ICardsContainer) => {  
   return (
       <div className="grid grid-cols-2 gap-6">
         
diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilCard.tsx
index d0e2383..7cbbcb5 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilCard.tsx
@@ -71,8 +71,8 @@ export const FeilkortHeader = (props: IFeilmelding) => {
                 <Heading size="medium">{props.tittel}</Heading>
                 <p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
                 <p>{props.beskrivelse}</p>    
-            </div>  
-            <TagBar haster={props.haster}/>              
+            </div>
+            <TagBar haster={props.haster} arbeidsstatus={props.arbeidsstatus}/>              
         </div>
     )
 }
@@ -80,17 +80,39 @@ export const FeilkortHeader = (props: IFeilmelding) => {
 
 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 
+ * @param haster er en boolean som beskriver om feilen haster eller ikke.
+ * @param arbeidsstatus
  */
 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-8 mt-4">
-            <Tag variant="info">Jobbes med</Tag>
-            {props.haster === true ? <Tag variant="warning">Haster</Tag> : <></>}
+        <div className="flex gap-3 mt-4">
+            {toggleArbeidsstatus(props.arbeidsstatus)}
+            {props.haster ? <Tag variant="warning">Haster</Tag> : <></>}
         </div>
     )
 }