🚧 working on submit-functionality

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

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>

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>

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>