From 082e3687925e3bd88db55f6768ecf1739c025509 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 29 Feb 2024 11:18:15 +0100
Subject: [PATCH] linked reactive text area with response store

---
 frontend/pages/survey/[_id]/[_question].vue | 27 +++++++++++----------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/pages/survey/[_id]/[_question].vue b/frontend/pages/survey/[_id]/[_question].vue
index 40756884..93ffc907 100644
--- a/frontend/pages/survey/[_id]/[_question].vue
+++ b/frontend/pages/survey/[_id]/[_question].vue
@@ -7,13 +7,13 @@
                 <div class="my-card col">
                     <!-- COTINUE HERE: use the pops (attributes) of the commopents (see example) to pass write values and capture answers -->
                     <p>Questions type: {{ question.question_type }}
-                    Answer body: {{ answers.text }}
+                    Answer body: {{ current_answer }}
                     </p>
                     <RespondentViewQuestionTypesAnswerTypeText 
                     v-if="question.question_type === 'text'"
                     :question="question"
                     :question_index="current_question_index"
-                    :answer="answers"
+                    :answer="current_answer"
                     @update-answer="handleUpdateAnswer"
                     />
                     <RespondentViewQuestionTypesAnswerTypeShortText 
@@ -109,21 +109,13 @@ import { ref, watch } from "vue"
 import { navigateTo } from "nuxt/app";
 import { useSurveyStore } from "~/stores/survey";
 import { useStoreResponse } from '~/stores/response';
+
 // import leaflet from "leaflet"
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LCircle, LControl } from "@vue-leaflet/vue-leaflet";
 
-// Replace with your actual answer object
-const body = '';
-const answers = ref({ text: body });  // body of the answer must be a string (as per the API)
-// ref makes the variable reactive
 
 
-const handleUpdateAnswer = (updatedAnswer, questionIndex) =>{
-      // Handle the updated answer here
-      console.log(updatedAnswer)
-        answers.text = updatedAnswer
-    };
 
 const responseStore = useStoreResponse();
 const question_url = "/api/questions/";
@@ -145,8 +137,17 @@ console.log("current map view //", current_map_view_id);
 let {data: map_View} = await useAsyncData(() => $cmsApi(mapview_url + current_map_view_id));
 console.log("map_View //", map_View)
 
-// TODO: limit nextQuestion to the last question in the survey
-// TODO: Add sumbit button to the last question in the survey. Use v-if to show the button only on the last question
+// Replace with your actual answer object
+const current_answer = ref({ question_id: current_question_id, text: '' });
+// const answers = ref({ text: body });  // body of the answer must be a string (as per the API)
+// ref makes the variable reactive
+const handleUpdateAnswer = (updatedAnswer, questionIndex) =>{
+      // Handle the updated answer here
+    console.log(updatedAnswer);
+    current_answer.text = updatedAnswer;
+    current_answer.question_index = questionIndex;
+    responseStore.updateAnswer(updatedAnswer);
+    };
 
 // to set up the map
 // const center = ref([47.41322, -1.219482])