:recycle: Refactored Radio Questionnaire into individual questions

frontend/src/components/onboarding/Aspects.vue

@@ -1,14 +1,12 @@
 <template lang="pug">
-w-card.aspects.w-flex.column
-    form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
-        QuestionResponse(
-            :question='question'
-            @updated='updateRadio'
-            v-for='question in aspectQuestions'
-        )
-        w-button.ma1.grow(bg-color='success' type='submit')
-            w-icon.mr1 wi-check
-            | SUBMIT ANSWERS
+form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
+p(v-for='question in aspectQuestions')
+    QuestionResponse(
+        :question='question' 
+        @updated='updateRadio'
+        @updateIsAnswered='updateIsAnswered'
+        v-if='question.isBeingAnswered' @update-all='updateAll'
+    )
 </template>
 
 <script>
@@ -30,19 +28,32 @@ export default {
     async created() {
         this.aspectQuestions.forEach((q, i) => {
             console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
+            q.isBeingAnswered = i === 0 ? true : false
         })
     },
     methods: {
+        updateAll() {
+            this.$emit('handle-submit')
+        },
         updateRadio(onRadioSelect) {
             answered[onRadioSelect.id - 1] = onRadioSelect.answer
             this.$emit('update-answers', {
                 key: 'Aspects',
                 question: {
-                    survey_stage: 'aspects'
+                    survey_stage: 'aspects',
                 },
                 input: answered,
             })
         },
+        updateIsAnswered(id) {
+            this.aspectQuestions.forEach((q, i) => {
+                if (i === id - 1) {
+                    const nextQ = this.aspectQuestions[id]
+                    q.isBeingAnswered = false
+                    nextQ.isBeingAnswered = true
+                }
+            })
+        },
     },
 }
 </script>

frontend/src/components/onboarding/QuestionResponse.vue

@@ -4,6 +4,9 @@ w-card.question
     section.radio-buttons.w-flex.row.justify-space-between
         p(v-for="label in question.labels") {{label}}
     w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
+    w-button.ma1.grow(v-if='question.id !== 6' @click="updateAnswers") NEXT
+    w-button.ma1.grow(v-else @click="updateAll") SUBMIT ANSWERS
+
 </template>
 
 <script>
@@ -14,7 +17,7 @@ export default {
             required: true,
         },
     },
-    emits: ['updated'],
+    emits: ['updated', 'update-is-answered', 'update-all'],
     data: () => ({
         radioItems: [
             { answer: 1 },
@@ -28,6 +31,12 @@ export default {
         onUpdate(e) {
             this.$emit('updated', { ...this.question, answer: e + 1 })
         },
+        updateAnswers() {
+            this.$emit('update-is-answered', this.question.id)
+        },
+        updateAll() {
+            this.$emit('update-all')
+        }
     },
 }
 </script>

frontend/src/views/OnboardingView.vue

@@ -67,7 +67,6 @@ export default {
                 console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
                 if (k === 'aspects') return
             }
-            console.log('this.answered :>> ', this.answered)
             if (this.currentStep > this.survey.steps.length) {
                 this.onSubmit(this.answered)
             } else {