From b732a46ca10758c7425e408183dc367b86df2723 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Sun, 7 Jan 2024 16:26:26 +0100
Subject: [PATCH] :construction: working on submit-functionality

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 .../src/components/form/answerbox/AnswerBox.svelte    |  8 ++++----
 frontend/src/components/form/footer/Footer.svelte     |  3 ++-
 frontend/src/routes/form/[slug]/+page.svelte          | 11 ++++++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/form/answerbox/AnswerBox.svelte b/frontend/src/components/form/answerbox/AnswerBox.svelte
index 16878b2..79a35c5 100644
--- a/frontend/src/components/form/answerbox/AnswerBox.svelte
+++ b/frontend/src/components/form/answerbox/AnswerBox.svelte
@@ -2,12 +2,13 @@
     import UserFormInput from "../../userform/UserFormInput.svelte";
     import { convertAnswerDataToNumeric, convertAnswerDataToString } from "$lib/convertAnswerData";
 	import { onMount } from "svelte";
+    import { createEventDispatcher } from 'svelte';
+    
+    const dispatch = createEventDispatcher();
 
     export let answerText:string
     export let answerNum:number
     export let answerID:number
-
-    let answeredAll:boolean
     
     let knowledge:string
     let empathy:string
@@ -15,7 +16,7 @@
 
     const handleFormUpdate = () => {
         if (knowledge != "" && empathy != "" && helpfulness != "") {
-            answeredAll = true
+            dispatch("update", true)
         }
 
         let knowledgeNumeric = convertAnswerDataToNumeric(knowledge)
@@ -56,7 +57,6 @@
             empathy=""
             helpfulness=""
         }
-
     })
 
 </script>
diff --git a/frontend/src/components/form/footer/Footer.svelte b/frontend/src/components/form/footer/Footer.svelte
index 00bbb26..ca795a9 100644
--- a/frontend/src/components/form/footer/Footer.svelte
+++ b/frontend/src/components/form/footer/Footer.svelte
@@ -4,6 +4,7 @@
     import { goto } from "$app/navigation";
 
     export let questionNum:number
+    export let answeredAll:boolean
 
     const gotoNextPage = async (questionNum: number) => {        
         goto(`${questionNum + 1}`)
@@ -23,7 +24,7 @@
     class={`${questionNum == 0 || questionNum % 4 != 0 ?  "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-8 py-3`}>
             Send inn svar
     </button>
-    <button disabled={questionNum != 0 && questionNum % 4 == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"}`} on:click={() => gotoNextPage(questionNum)}>
+    <button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"}`} on:click={() => gotoNextPage(questionNum)}>
         Neste spørsmål
         <ArrowChevron width=16 direction="right"/>
     </button>
diff --git a/frontend/src/routes/form/[slug]/+page.svelte b/frontend/src/routes/form/[slug]/+page.svelte
index 06fd997..af9ba96 100644
--- a/frontend/src/routes/form/[slug]/+page.svelte
+++ b/frontend/src/routes/form/[slug]/+page.svelte
@@ -14,6 +14,9 @@
     let questionAnswer2ID: number = 0
     let questionNumber: number = 0
 
+    let question1Answered: boolean = false
+    let question2Answered: boolean = false
+    
     // Reactive statement to react on 'data.slug' changes
     $: if (data && data.slug !== undefined && browser) {
         questionNumber = data.slug;
@@ -43,9 +46,11 @@
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
     <div class="flex h-full justify-between gap-12">
         {#key questionNumber}     
-            <AnswerBox answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
-            <AnswerBox answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
+            <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
+            <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
         {/key}
     </div>
-    <Footer questionNum={Number(questionNumber)}/>
+    {#key questionNumber}
+        <Footer answeredAll={question1Answered && question2Answered} questionNum={Number(questionNumber)}/>
+    {/key}
 </div>
\ No newline at end of file