From 59e577dbdd7ea10be6cabae9a655780ee40caaa6 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 1 Mar 2024 22:37:50 +0100
Subject: [PATCH 01/39] Add .env.example file with initial configuration

---
 .env.example | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..7747b8b8
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,10 @@
+SECRET_KEY=''
+DATABASE_ENGINE='postgis'
+POSTGRES_DBASE=''
+POSTGRES_USER=''
+POSTGRES_PWD=''
+POSTGRES_HOST='localhost'
+POSTGRES_PORT='5432'
+TEST_DBASE=''
+API_PARTY_CMS_URL1224=http://127.0.0.1:8000/ # TODO: find where this is used
+

From 779c9ae4ee79badc51d95fabf670e4b0778d1dff Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Tue, 5 Mar 2024 09:28:05 +0100
Subject: [PATCH 02/39] Refactor AnswerMapView.vue component

---
 frontend/components/AnswerMapView.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 80ba217c..6aa4b958 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -1,8 +1,8 @@
 <template>
     <v-sheet v-model="dialog" width="auto">
-        <template v-slot:activator="{ props }">
+        <!-- <template v-slot:activator="{ props }">
             <v-btn class="mt-4" variant="tonal" append-icon="mdi-pencil" border v-bind="props">Edit Map</v-btn>
-        </template>
+        </template> -->
 
         <v-card>
             <v-card-text>
@@ -44,7 +44,10 @@ const questionStore = useQuestionDesignStore()
 
 const props = defineProps({
     questionIndex: Number,
-    mapViewId: Number | undefined
+    mapViewId: Number | undefined,
+    name: String,
+    mapServiceUrl: String,
+    options: Object, // e.g. {zoom: 7, center: [52.04573404034129, 5.108642578125001]}
 })
 
 // Map without controls

From c000ffed473e6d29c6584f7a6a67aab14ad54c17 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Tue, 5 Mar 2024 09:28:14 +0100
Subject: [PATCH 03/39] Refactor mapview store to include additional properties

---
 frontend/stores/mapview.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/stores/mapview.js b/frontend/stores/mapview.js
index b3829446..895c7bef 100644
--- a/frontend/stores/mapview.js
+++ b/frontend/stores/mapview.js
@@ -4,8 +4,11 @@ import { useGlobalStore } from './global'
 
 export const useMapViewStore = defineStore('mapView', {
     state: () => ({
-        lastSavedZoomLevel: null,
-        lastSavedCenter: null
+        mapViewId: null,
+        name: null,
+        zoomLevel: null,
+        center: null,
+        geometries: {} // a GeoJSON featurecollection for all geometries
     }),
     getters: {
         // getCurrentQuestions: (state) => state.currentQuestions

From 6736d2f9e31e855b4743b99226a2e77b6660882b Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 7 Mar 2024 10:41:14 +0100
Subject: [PATCH 04/39] Refactor geojson to geometries

---
 frontend/components/AnswerMapView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 6aa4b958..435bef5a 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -72,7 +72,7 @@ const mapViewData = reactive({
         zoom: 7,
         center: [52.04573404034129, 5.108642578125001]
     },
-    geojson: {
+    geometries: {
         type: "FeatureCollection",
         features: []
     }
@@ -84,7 +84,7 @@ const mapViewData = reactive({
 
 const setGeoJsonMarkers = () => {
     const drawnItems = featureGroupRef.value.leafletObject
-    const initialGeojson = mapViewData.geojson;
+    const initialGeojson = mapViewData.geometries;
 
     initialGeojson.features.forEach((feature) => {
         const layer = L.geoJSON(feature, {
@@ -116,7 +116,7 @@ onMounted(async () => {
     if (props.mapViewId) {
         const geoData = await mapViewStore.fetchMapView(props.mapViewId)
         if (geoData?.geojson?.features) {
-            mapViewData.geojson = geoData.geojson
+            mapViewData.geometries = geoData.geojson
         }
         if (geoData?.name) {
             mapViewData.name = geoData.name
@@ -135,7 +135,7 @@ onMounted(async () => {
  */
 
 watch(
-    () => mapViewData.geojson,
+    () => mapViewData.geometries,
     (newvalue) => {
         updateKeyGeoJson.value++
     },
@@ -161,9 +161,9 @@ const onMapWWControlReady = () => {
     if (map !== null) {
         drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
 
-        if (mapViewData.geojson.features) {
+        if (mapViewData.geometries.features) {
             const drawnItems = drawnItemsRef.value;
-            const initialGeojson = mapViewData.geojson;
+            const initialGeojson = mapViewData.geometries;
 
             initialGeojson.features.forEach((feature) => {
                 const layer = L.geoJSON(feature, {
@@ -286,7 +286,7 @@ const updateCenter = (value) => {
 const submitMap = async () => {
     const global = useGlobalStore()
     let response
-    mapViewData.geojson = drawnItemsRef.value.toGeoJSON()
+    mapViewData.geometries = drawnItemsRef.value.toGeoJSON()
     // Save new zoom value if not falsely
     console.log('optionsTempStoreZoom.value submit //> ', optionsTempStoreZoom.value)
     if (optionsTempStoreZoom?.value) {

From facbeb08a048ee72f701e41e44ea5c6adb380647 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 7 Mar 2024 10:41:28 +0100
Subject: [PATCH 05/39] Add getGeometries getter to mapView store

---
 frontend/stores/mapview.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/stores/mapview.js b/frontend/stores/mapview.js
index 895c7bef..6f8715cb 100644
--- a/frontend/stores/mapview.js
+++ b/frontend/stores/mapview.js
@@ -12,6 +12,7 @@ export const useMapViewStore = defineStore('mapView', {
     }),
     getters: {
         // getCurrentQuestions: (state) => state.currentQuestions
+        getGeometries: (state) => state.geometries
     },
     actions: {
         async createMapview(mapSettings) {

From 413fcd6469834e8b047b34160e9f758169678544 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 7 Mar 2024 17:51:01 +0100
Subject: [PATCH 06/39] pass pops to AnswerMapVie

---
 frontend/pages/survey/[_id]/[_question].vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/survey/[_id]/[_question].vue b/frontend/pages/survey/[_id]/[_question].vue
index 716f6781..6ed6b24c 100644
--- a/frontend/pages/survey/[_id]/[_question].vue
+++ b/frontend/pages/survey/[_id]/[_question].vue
@@ -5,10 +5,10 @@
             <v-card class="my-card" :title="question.text" :subtitle="question.order">
                 <!-- Answer card-->
                 <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 }}
+              
+                    <p>Questions type: {{ question.question_type }}
                     Answer body: {{ current_answer }}
-                    </p> -->
+                    </p>
                     <RespondentViewQuestionTypesAnswerTypeText 
                     v-if="question.question_type === 'text'"
                     :question="question"
@@ -57,9 +57,15 @@
                 <div class="q-pa-md row items-start q-gutter-md">
                     <!-- Map card -->
                     <!-- TODO: link answerMapview with map view props in each question -->
+                  
+                    <p>map id {{ question.map_view }}</p>
+
                     <div v-if="(question.map_view != null || question.is_geospatial)" style="min-width: 600px;"
                         class="my-card col">
-                        <AnswerMapView />
+                        <AnswerMapView
+                        :questionIndex="question.id"
+                        :mapViewId ="question.map_view"
+                        />
                     </div>
                     <!-- Navigation -->
                     <v-card-actions>
@@ -116,8 +122,8 @@ let current_map_view_id = questions[current_question_index - 1].map_view;  // ge
 let { data: question } = await useAsyncData(() => $cmsApi(questions_url + current_question_id));
 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)
+// let {data: map_View} = await useAsyncData(() => $cmsApi(mapview_url + current_map_view_id));
+// console.log("map_View //", map_View)
 
 // Replace with your actual answer object
 const current_answer = ref({ question_id: current_question_id, text: '' });

From 94095424e62402e04d8c10d771c9dbc198d8fb7c Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 7 Mar 2024 17:51:31 +0100
Subject: [PATCH 07/39] Refactor AnswerMapView component and update
 useMapViewStore

---
 frontend/stores/mapview.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/stores/mapview.js b/frontend/stores/mapview.js
index 6f8715cb..ccc1abb6 100644
--- a/frontend/stores/mapview.js
+++ b/frontend/stores/mapview.js
@@ -6,6 +6,7 @@ export const useMapViewStore = defineStore('mapView', {
     state: () => ({
         mapViewId: null,
         name: null,
+        mapServiceUrl: null,
         zoomLevel: null,
         center: null,
         geometries: {} // a GeoJSON featurecollection for all geometries
@@ -56,7 +57,19 @@ export const useMapViewStore = defineStore('mapView', {
         async fetchMapView(id) {
             console.log('Map_view id //> ', id)
             const config = setRequestConfig({ method: 'GET' })
-            const res = await $cmsApi(`/api/map_views/${id}`, config);
+            const {data: res, error } = await useAsyncData( () => $cmsApi(`/api/map_views/${id}`, config));
+
+             console.log('Map_view res //> ', res)
+            if (res?.value) {
+                this.mapViewId = res.value.id;
+                this.name = res.value.name;
+                this.mapServiceUrl = res.value.map_service_url;
+                console.log('res.value.options.zoom //> ', res.value.options.zoom)
+                this.zoomLevel = res.value.options.zoom;
+                this.center = res.value.options.center;
+                this.geometries = res.value.geometries
+            }
+
             return res
         }
     },

From a89d582fe1d54c5635be5465167aaa8dbce37b21 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 7 Mar 2024 17:52:11 +0100
Subject: [PATCH 08/39] add TODO to fix mapviewdata

---
 frontend/components/AnswerMapView.vue | 66 +++++++++++++++++----------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 435bef5a..8b8e5da4 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -7,10 +7,23 @@
         <v-card>
             <v-card-text>
                 <!-- <v-text-field v-model="title" label="Name of map view" variant="outlined"></v-text-field> -->
+                <p>Map name: {{ mapViewData.name }}</p>
+                <p>Map url: {{ mapViewData.map_service_url }}</p>
+                <p>Map zoom: {{ mapViewData.options.zoom }}</p>
+                <p>Map center: {{ mapViewStore.center }}</p>
+
+                <!-- TODO: fix issue with mapViewData calling the map store before the map store is ready. Try if removing the mapViewData will fix the issue -->
+
                 <div style="height:600px; width:auto">
-                    <l-map ref="mapRefPopUp" @ready="onMapWWControlReady" @update:zoom="updateZoom"
+                    <l-map ref="mapRefPopUp" 
+                        :zoom="mapViewData.options.zoom" 
+                        :center="mapViewStore.center"
+                        @ready="onMapWWControlReady"  @update:zoom="updateZoom"
                         @update:center="updateCenter" :noBlockingAnimations="true">
-                        <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
+                        <l-tile-layer 
+                            :url="mapViewStore.mapServiceUrl"
+                            >
+                        </l-tile-layer>
                         <l-feature-group ref="featureGroupRefWControl"></l-feature-group>
                     </l-map>
                 </div>
@@ -44,10 +57,10 @@ const questionStore = useQuestionDesignStore()
 
 const props = defineProps({
     questionIndex: Number,
-    mapViewId: Number | undefined,
-    name: String,
-    mapServiceUrl: String,
-    options: Object, // e.g. {zoom: 7, center: [52.04573404034129, 5.108642578125001]}
+    mapViewId: Number | undefined
+    // name: String,
+    // mapServiceUrl: String,
+    // options: Object, // e.g. {zoom: 7, center: [52.04573404034129, 5.108642578125001]}
 })
 
 // Map without controls
@@ -57,27 +70,29 @@ const storedMapWithoutControls = ref(null)
 const mapRef = ref(null)
 const featureGroupRef = ref(null)
 const featureGroupRefWControl = ref(null)
-const dialog = ref(props.dialogOpen)
+// const dialog = ref(props.dialogOpen)
 const drawnItemsRef = ref(null)
 const optionsTempStoreZoom = ref(null)
 const optionsTempStoreCenter = ref(null)
 const updateKeyMapWithoutControls = ref(0)
 const updateKeyGeoJson = ref(0)
 
+
 const mapViewData = reactive({
     id: props.mapViewId || null,
-    name: props.title || "",
-    map_service_url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    name: "", 
+    map_service_url: mapViewStore.mapServiceUrl,
     options: {
-        zoom: 7,
-        center: [52.04573404034129, 5.108642578125001]
+        zoom: mapViewStore.zoomLevel,
+        center: [52.0000, 8.108642578125001]
+
     },
-    geometries: {
-        type: "FeatureCollection",
-        features: []
-    }
+    geometries: mapViewStore.geometries
 })
 
+console.log('mapViewData //> ', mapViewStore)
+
+
 /**
  * Utils
  */
@@ -115,17 +130,22 @@ const geoJsonReady = () => {
 onMounted(async () => {
     if (props.mapViewId) {
         const geoData = await mapViewStore.fetchMapView(props.mapViewId)
-        if (geoData?.geojson?.features) {
-            mapViewData.geometries = geoData.geojson
+
+        if (geoData?.geojson?.geometries) { // 
+            mapViewData.geometries = mapViewStore.geometries
+        }
+        if (geoData.value?.name) {
+            mapViewData.name = mapViewStore.name
+            
         }
-        if (geoData?.name) {
-            mapViewData.name = geoData.name
+        if (geoData.value?.map_service_url) {
+            mapViewData.map_service_url = mapViewStore.mapServiceUrl
         }
-        if (geoData?.options?.zoom) {
-            mapViewData.options.zoom = geoData.options.zoom
+        if (geoData.value?.options?.zoom) {
+            mapViewData.options.zoom = mapViewStore.zoomLevel
         }
-        if (geoData?.options?.center) {
-            mapViewData.options.center = geoData.options.center
+        if (geoData.value?.options?.center) {
+            mapViewData.options.center = mapViewStore.center
         }
     }
 })

From 2817fd58e27937d2aec54acf8da622c6c04901ea Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 8 Mar 2024 17:20:56 +0100
Subject: [PATCH 09/39] add TODO about mapViewData calling the map store before
 it is ready

---
 frontend/components/AnswerMapView.vue | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 8b8e5da4..70ce473d 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -10,18 +10,18 @@
                 <p>Map name: {{ mapViewData.name }}</p>
                 <p>Map url: {{ mapViewData.map_service_url }}</p>
                 <p>Map zoom: {{ mapViewData.options.zoom }}</p>
-                <p>Map center: {{ mapViewStore.center }}</p>
+                <p>Map center: {{ mapViewData.options.center }}</p>
 
                 <!-- TODO: fix issue with mapViewData calling the map store before the map store is ready. Try if removing the mapViewData will fix the issue -->
 
                 <div style="height:600px; width:auto">
                     <l-map ref="mapRefPopUp" 
                         :zoom="mapViewData.options.zoom" 
-                        :center="mapViewStore.center"
+                        :center="mapViewData.options.center"
                         @ready="onMapWWControlReady"  @update:zoom="updateZoom"
                         @update:center="updateCenter" :noBlockingAnimations="true">
                         <l-tile-layer 
-                            :url="mapViewStore.mapServiceUrl"
+                            :url="mapViewData.map_service_url"
                             >
                         </l-tile-layer>
                         <l-feature-group ref="featureGroupRefWControl"></l-feature-group>
@@ -78,19 +78,22 @@ const updateKeyMapWithoutControls = ref(0)
 const updateKeyGeoJson = ref(0)
 
 
+/**
+ * TODO: attempt to fix issue with mapViewData by removing the use of OnMounted.
+ */
+
 const mapViewData = reactive({
     id: props.mapViewId || null,
     name: "", 
-    map_service_url: mapViewStore.mapServiceUrl,
+    map_service_url: "",
     options: {
-        zoom: mapViewStore.zoomLevel,
-        center: [52.0000, 8.108642578125001]
+        zoom: null,
+        center: []
 
     },
-    geometries: mapViewStore.geometries
+    geometries: {}
 })
 
-console.log('mapViewData //> ', mapViewStore)
 
 
 /**
@@ -129,6 +132,7 @@ const geoJsonReady = () => {
 
 onMounted(async () => {
     if (props.mapViewId) {
+        mapViewStore.$reset() // Reset the store to avoid old data
         const geoData = await mapViewStore.fetchMapView(props.mapViewId)
 
         if (geoData?.geojson?.geometries) { // 
@@ -147,9 +151,14 @@ onMounted(async () => {
         if (geoData.value?.options?.center) {
             mapViewData.options.center = mapViewStore.center
         }
+        console.log('mapViewData CENTER //> ', mapViewData.options.center)
+        console.log('map STORE CENTER //> ', mapViewStore.center)
     }
 })
 
+
+
+
 /**
  * Watch mapViewData.geojson to update the map after changes or else the new values won't be visible
  */

From 38eb0f9a17b2e8df7ace1da3ddd3777a85d01fd7 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Sat, 9 Mar 2024 19:15:00 +0100
Subject: [PATCH 10/39] temporal Fix issue center in AnswerMapView.vue

---
 frontend/components/AnswerMapView.vue | 66 +++++++++++++--------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 70ce473d..95d6928e 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -12,16 +12,17 @@
                 <p>Map zoom: {{ mapViewData.options.zoom }}</p>
                 <p>Map center: {{ mapViewData.options.center }}</p>
 
-                <!-- TODO: fix issue with mapViewData calling the map store before the map store is ready. Try if removing the mapViewData will fix the issue -->
+                <!-- TODO: fix issue with passing values for center. Check if the source is the vue-leaflet package-->
 
                 <div style="height:600px; width:auto">
                     <l-map ref="mapRefPopUp" 
                         :zoom="mapViewData.options.zoom" 
-                        :center="mapViewData.options.center"
+                        :center="[51.9536903, 4.4303978]" 
                         @ready="onMapWWControlReady"  @update:zoom="updateZoom"
                         @update:center="updateCenter" :noBlockingAnimations="true">
                         <l-tile-layer 
                             :url="mapViewData.map_service_url"
+                            layer-type="base"
                             >
                         </l-tile-layer>
                         <l-feature-group ref="featureGroupRefWControl"></l-feature-group>
@@ -78,9 +79,6 @@ const updateKeyMapWithoutControls = ref(0)
 const updateKeyGeoJson = ref(0)
 
 
-/**
- * TODO: attempt to fix issue with mapViewData by removing the use of OnMounted.
- */
 
 const mapViewData = reactive({
     id: props.mapViewId || null,
@@ -95,6 +93,36 @@ const mapViewData = reactive({
 })
 
 
+/**
+ * Fetch the geojson data from the DB and add it to the mapViewData
+ */
+
+ onMounted(async () => {
+    if (props.mapViewId) {
+        mapViewStore.$reset() // Reset the store to avoid old data
+        const geoData = await mapViewStore.fetchMapView(props.mapViewId)
+
+        if (geoData?.value?.geometries) { // 
+            mapViewData.geometries = mapViewStore.geometries
+        }
+        if (geoData.value?.name) {
+            mapViewData.name = mapViewStore.name
+            
+        }
+        if (geoData.value?.map_service_url) {
+            mapViewData.map_service_url = mapViewStore.mapServiceUrl
+        }
+        if (geoData.value?.options.zoom) {
+            mapViewData.options.zoom = mapViewStore.zoomLevel
+        }
+        if (geoData.value?.options.center) {
+            mapViewData.options.center = mapViewStore.center
+        }
+        
+        console.log('map STORE CENTER //> ', mapViewStore.center)
+    }
+})
+
 
 /**
  * Utils
@@ -126,35 +154,7 @@ const geoJsonReady = () => {
     setGeoJsonMarkers()
 }
 
-/**
- * Fetch the geojson data from the DB and add it to the mapViewData
- */
 
-onMounted(async () => {
-    if (props.mapViewId) {
-        mapViewStore.$reset() // Reset the store to avoid old data
-        const geoData = await mapViewStore.fetchMapView(props.mapViewId)
-
-        if (geoData?.geojson?.geometries) { // 
-            mapViewData.geometries = mapViewStore.geometries
-        }
-        if (geoData.value?.name) {
-            mapViewData.name = mapViewStore.name
-            
-        }
-        if (geoData.value?.map_service_url) {
-            mapViewData.map_service_url = mapViewStore.mapServiceUrl
-        }
-        if (geoData.value?.options?.zoom) {
-            mapViewData.options.zoom = mapViewStore.zoomLevel
-        }
-        if (geoData.value?.options?.center) {
-            mapViewData.options.center = mapViewStore.center
-        }
-        console.log('mapViewData CENTER //> ', mapViewData.options.center)
-        console.log('map STORE CENTER //> ', mapViewStore.center)
-    }
-})
 
 
 

From 9742c4472ca5073f7a37f9e0c498d583bfe44b7f Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Sat, 9 Mar 2024 19:23:21 +0100
Subject: [PATCH 11/39] add TODO to fix map view

---
 frontend/components/AnswerMapView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 95d6928e..e7e1db1f 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -12,12 +12,14 @@
                 <p>Map zoom: {{ mapViewData.options.zoom }}</p>
                 <p>Map center: {{ mapViewData.options.center }}</p>
 
-                <!-- TODO: fix issue with passing values for center. Check if the source is the vue-leaflet package-->
+                <!-- TODO: fix issue with passing values for center. check issue: https://stackoverflow.com/questions/42879725/leaflet-will-not-display-my-marker-typeerror-t-is-null -->
 
                 <div style="height:600px; width:auto">
                     <l-map ref="mapRefPopUp" 
                         :zoom="mapViewData.options.zoom" 
-                        :center="[51.9536903, 4.4303978]" 
+                        minZoom="2"
+                        maxZoom="18"
+                        :center="mapViewData.options.center" 
                         @ready="onMapWWControlReady"  @update:zoom="updateZoom"
                         @update:center="updateCenter" :noBlockingAnimations="true">
                         <l-tile-layer 

From f66aba9237bc69cf16431cb1527b216721bccfa1 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 12:26:45 +0100
Subject: [PATCH 12/39] remove the use of constant MapViewData

---
 frontend/components/AnswerMapView.vue | 267 +++++++++++++-------------
 1 file changed, 133 insertions(+), 134 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index e7e1db1f..f88f7898 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -7,23 +7,21 @@
         <v-card>
             <v-card-text>
                 <!-- <v-text-field v-model="title" label="Name of map view" variant="outlined"></v-text-field> -->
-                <p>Map name: {{ mapViewData.name }}</p>
-                <p>Map url: {{ mapViewData.map_service_url }}</p>
-                <p>Map zoom: {{ mapViewData.options.zoom }}</p>
-                <p>Map center: {{ mapViewData.options.center }}</p>
+                <p>Map name: {{ mapViewStore.name }}</p>
+                <p>Map url: {{ mapViewStore.mapServiceUrl }}</p>
+                <p>Map zoom: {{ mapViewStore.zoomLevel }}</p>
+                <p>Map  store center: {{ mapViewStore.center }}</p>
 
                 <!-- TODO: fix issue with passing values for center. check issue: https://stackoverflow.com/questions/42879725/leaflet-will-not-display-my-marker-typeerror-t-is-null -->
 
                 <div style="height:600px; width:auto">
                     <l-map ref="mapRefPopUp" 
-                        :zoom="mapViewData.options.zoom" 
-                        minZoom="2"
-                        maxZoom="18"
-                        :center="mapViewData.options.center" 
-                        @ready="onMapWWControlReady"  @update:zoom="updateZoom"
-                        @update:center="updateCenter" :noBlockingAnimations="true">
+                        :zoom="mapViewStore.zoomLevel" 
+                        :center="mapViewStore.center"
+                        @ready=""  @update:zoom="updateZoom"
+                        @update:center="" :noBlockingAnimations="true">
                         <l-tile-layer 
-                            :url="mapViewData.map_service_url"
+                            :url="mapViewStore.mapServiceUrl"
                             layer-type="base"
                             >
                         </l-tile-layer>
@@ -55,7 +53,7 @@ import { useMapViewStore } from "~/stores/mapview"
 import { useQuestionDesignStore } from "~/stores/questionDesign"
 import { useGlobalStore } from '~/stores/global'
 
-const mapViewStore = useMapViewStore()
+
 const questionStore = useQuestionDesignStore()
 
 const props = defineProps({
@@ -80,50 +78,51 @@ const optionsTempStoreCenter = ref(null)
 const updateKeyMapWithoutControls = ref(0)
 const updateKeyGeoJson = ref(0)
 
-
-
 const mapViewData = reactive({
     id: props.mapViewId || null,
     name: "", 
-    map_service_url: "",
-    options: {
-        zoom: null,
-        center: []
-
-    },
     geometries: {}
 })
 
 
+const mapViewStore = useMapViewStore()
+mapViewStore.$reset()
+
 /**
  * Fetch the geojson data from the DB and add it to the mapViewData
  */
+if (props.mapViewId) {        
+        let mapView = await mapViewStore.fetchMapView(props.mapViewId)
+    }
 
- onMounted(async () => {
-    if (props.mapViewId) {
-        mapViewStore.$reset() // Reset the store to avoid old data
-        const geoData = await mapViewStore.fetchMapView(props.mapViewId)
-
-        if (geoData?.value?.geometries) { // 
-            mapViewData.geometries = mapViewStore.geometries
-        }
-        if (geoData.value?.name) {
-            mapViewData.name = mapViewStore.name
+
+//  onMounted(async () => {
+//     if (props.mapViewId) {
+//         mapViewStore.$reset() // Reset the store to avoid old data
+//         const geoData = await mapViewStore.fetchMapView(props.mapViewId)
+
+//         if (geoData?.value?.geometries) { // 
+//             console.log('geoData.value.geometries //> ', geoData.value.geometries)
+//             mapViewData.geometries = mapViewStore.geometries
+//         }
+//         if (geoData.value?.name) {
+//             mapViewData.name = mapViewStore.name
             
-        }
-        if (geoData.value?.map_service_url) {
-            mapViewData.map_service_url = mapViewStore.mapServiceUrl
-        }
-        if (geoData.value?.options.zoom) {
-            mapViewData.options.zoom = mapViewStore.zoomLevel
-        }
-        if (geoData.value?.options.center) {
-            mapViewData.options.center = mapViewStore.center
-        }
+//         }
+//         if (geoData.value?.map_service_url) {
+//             mapViewData.map_service_url = mapViewStore.mapServiceUrl
+//         }
+//         if (geoData.value?.options?.zoom) {
+//             mapViewData.options.zoom = mapViewStore.zoomLevel
+//         }
+//         if (geoData.value?.options?.center) {
+//             let center = mapViewStore.center
+//             mapViewData.options.center = center.map(Number)
+//         }
         
-        console.log('map STORE CENTER //> ', mapViewStore.center)
-    }
-})
+//         console.log('map STORE CENTER //> ', mapViewStore.center)
+//     }
+// })
 
 
 /**
@@ -187,92 +186,92 @@ const title = computed({
 /**
  * Add the props.geojson to the drawnItemsRef value
  */
-const onMapWWControlReady = () => {
-    const map = mapRefPopUp.value.leafletObject;
-    if (map !== null) {
-        drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
-
-        if (mapViewData.geometries.features) {
-            const drawnItems = drawnItemsRef.value;
-            const initialGeojson = mapViewData.geometries;
-
-            initialGeojson.features.forEach((feature) => {
-                const layer = L.geoJSON(feature, {
-                    pointToLayer: function (feature, latlng) {
-                        if (feature.properties.radius) {
-                            return L.circle(latlng, { radius: feature.properties.radius });
-                        } else {
-                            return L.marker(latlng);
-                        }
-                    },
-                }).addTo(drawnItems);
-                drawnItems.addLayer(layer);
-            });
-        }
-
-        // Initialize the draw control and pass it the FeatureGroup of editable layers
-        const drawControl = new L.Control.Draw({
-            edit: {
-                featureGroup: drawnItemsRef.value,
-            },
-            draw: {
-                circle: true, // Add circle shape
-                marker: true,
-                polyline: true,
-                polygon: true,
-                rectangle: false,
-                circleMarker: false
-            }
-        });
-
-        map.addControl(drawControl);
-        // set options
-        map.setView(mapViewData.options.center, mapViewData.options.zoom);
-
-
-        map.on(L.Draw.Event.CREATED, (event) => {
-            const layer = event.layer;
-            const layerType = event.layerType;
-
-            if (layerType === 'circle') {
-                const radius = layer.getRadius();
-                const latlng = layer.getLatLng();
-                const geojsonFeature = {
-                    type: 'Feature',
-                    properties: { radius: radius },
-                    geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
-                };
-                const circleLayer = L.geoJSON(geojsonFeature, {
-                    pointToLayer: function (feature, latlng) {
-                        return L.circle(latlng, { radius: feature.properties.radius });
-                    },
-                });
-                drawnItemsRef.value.addLayer(circleLayer);
-            } else {
-                drawnItemsRef.value.addLayer(layer);
-            }
-        });
-
-
-        map.on(L.Draw.Event.DELETED, (event) => {
-            const layers = event.layers;
-            layers.eachLayer((layer) => {
-                drawnItemsRef.value.removeLayer(layer);
-            });
-        });
-
-        map.on(L.Draw.Event.EDITED, (event) => {
-            const layers = event.layers;
-            layers.eachLayer((layer) => {
-                // Remove the old version of the edited layer
-                drawnItemsRef.value.removeLayer(layer);
-
-                // Add the updated version of the edited layer
-                drawnItemsRef.value.addLayer(layer);
-            });
-        });
-    }
-};
+// const onMapWWControlReady = () => {
+//     const map = mapRefPopUp.value.leafletObject;
+//     if (map !== null) {
+//         drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
+
+//         if (mapViewData.geometries.features) {
+//             const drawnItems = drawnItemsRef.value;
+//             const initialGeojson = mapViewData.geometries;
+
+//             initialGeojson.features.forEach((feature) => {
+//                 const layer = L.geoJSON(feature, {
+//                     pointToLayer: function (feature, latlng) {
+//                         if (feature.properties.radius) {
+//                             return L.circle(latlng, { radius: feature.properties.radius });
+//                         } else {
+//                             return L.marker(latlng);
+//                         }
+//                     },
+//                 }).addTo(drawnItems);
+//                 drawnItems.addLayer(layer);
+//             });
+//         }
+
+//         // Initialize the draw control and pass it the FeatureGroup of editable layers
+//         const drawControl = new L.Control.Draw({
+//             edit: {
+//                 featureGroup: drawnItemsRef.value,
+//             },
+//             draw: {
+//                 circle: true, // Add circle shape
+//                 marker: true,
+//                 polyline: true,
+//                 polygon: true,
+//                 rectangle: false,
+//                 circleMarker: false
+//             }
+//         });
+
+//         map.addControl(drawControl);
+//         // set options
+//         map.setView(mapViewData.options.center, mapViewData.options.zoom);
+
+
+//         map.on(L.Draw.Event.CREATED, (event) => {
+//             const layer = event.layer;
+//             const layerType = event.layerType;
+
+//             if (layerType === 'circle') {
+//                 const radius = layer.getRadius();
+//                 const latlng = layer.getLatLng();
+//                 const geojsonFeature = {
+//                     type: 'Feature',
+//                     properties: { radius: radius },
+//                     geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
+//                 };
+//                 const circleLayer = L.geoJSON(geojsonFeature, {
+//                     pointToLayer: function (feature, latlng) {
+//                         return L.circle(latlng, { radius: feature.properties.radius });
+//                     },
+//                 });
+//                 drawnItemsRef.value.addLayer(circleLayer);
+//             } else {
+//                 drawnItemsRef.value.addLayer(layer);
+//             }
+//         });
+
+
+//         map.on(L.Draw.Event.DELETED, (event) => {
+//             const layers = event.layers;
+//             layers.eachLayer((layer) => {
+//                 drawnItemsRef.value.removeLayer(layer);
+//             });
+//         });
+
+//         map.on(L.Draw.Event.EDITED, (event) => {
+//             const layers = event.layers;
+//             layers.eachLayer((layer) => {
+//                 // Remove the old version of the edited layer
+//                 drawnItemsRef.value.removeLayer(layer);
+
+//                 // Add the updated version of the edited layer
+//                 drawnItemsRef.value.addLayer(layer);
+//             });
+//         });
+//     }
+// };
 
 /**
  * Init the map with out controls
@@ -308,11 +307,11 @@ const updateZoom = (value) => {
     console.log('optionsTempStoreZoom.valu //> ', optionsTempStoreZoom.value)
 }
 
-const updateCenter = (value) => {
-    console.log('value //> ', value)
-    optionsTempStoreCenter.value = [value.lat, value.lng]
-    console.log('optionsTempStoreCenter.valu //> ', optionsTempStoreCenter.value)
-}
+// const updateCenter = (value) => {
+//     console.log('value //> ', value)
+//     optionsTempStoreCenter.value = [value.lat, value.lng]
+//     console.log('optionsTempStoreCenter.valu //> ', optionsTempStoreCenter.value)
+// }
 
 const submitMap = async () => {
     const global = useGlobalStore()

From 1e0d93e097c55393d13fd164891971666d6e50e0 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 12:27:23 +0100
Subject: [PATCH 13/39] Remove OnMounted operations

---
 frontend/components/AnswerMapView.vue | 28 ---------------------------
 1 file changed, 28 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index f88f7898..73b3144c 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -96,34 +96,6 @@ if (props.mapViewId) {
     }
 
 
-//  onMounted(async () => {
-//     if (props.mapViewId) {
-//         mapViewStore.$reset() // Reset the store to avoid old data
-//         const geoData = await mapViewStore.fetchMapView(props.mapViewId)
-
-//         if (geoData?.value?.geometries) { // 
-//             console.log('geoData.value.geometries //> ', geoData.value.geometries)
-//             mapViewData.geometries = mapViewStore.geometries
-//         }
-//         if (geoData.value?.name) {
-//             mapViewData.name = mapViewStore.name
-            
-//         }
-//         if (geoData.value?.map_service_url) {
-//             mapViewData.map_service_url = mapViewStore.mapServiceUrl
-//         }
-//         if (geoData.value?.options?.zoom) {
-//             mapViewData.options.zoom = mapViewStore.zoomLevel
-//         }
-//         if (geoData.value?.options?.center) {
-//             let center = mapViewStore.center
-//             mapViewData.options.center = center.map(Number)
-//         }
-        
-//         console.log('map STORE CENTER //> ', mapViewStore.center)
-//     }
-// })
-
 
 /**
  * Utils

From 30e7be9be5a8b6d012c84a13c9e9ccfd455da59a Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 13:21:09 +0100
Subject: [PATCH 14/39] fix map loading with controls

---
 frontend/components/AnswerMapView.vue | 253 +++++++++++++-------------
 1 file changed, 123 insertions(+), 130 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 73b3144c..b0aa25f1 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -12,13 +12,11 @@
                 <p>Map zoom: {{ mapViewStore.zoomLevel }}</p>
                 <p>Map  store center: {{ mapViewStore.center }}</p>
 
-                <!-- TODO: fix issue with passing values for center. check issue: https://stackoverflow.com/questions/42879725/leaflet-will-not-display-my-marker-typeerror-t-is-null -->
-
                 <div style="height:600px; width:auto">
-                    <l-map ref="mapRefPopUp" 
+                    <l-map ref="mapRefAnswer" 
                         :zoom="mapViewStore.zoomLevel" 
                         :center="mapViewStore.center"
-                        @ready=""  @update:zoom="updateZoom"
+                        @ready="onMapWWControlReady"  @update:zoom="updateZoom"
                         @update:center="" :noBlockingAnimations="true">
                         <l-tile-layer 
                             :url="mapViewStore.mapServiceUrl"
@@ -65,7 +63,7 @@ const props = defineProps({
 })
 
 // Map without controls
-const mapRefPopUp = ref(null)
+const mapRefAnswer = ref(null)
 const storedMapWithoutControls = ref(null)
 // Map with controls (the pop up one)
 const mapRef = ref(null)
@@ -128,10 +126,6 @@ const geoJsonReady = () => {
 }
 
 
-
-
-
-
 /**
  * Watch mapViewData.geojson to update the map after changes or else the new values won't be visible
  */
@@ -158,92 +152,91 @@ const title = computed({
 /**
  * Add the props.geojson to the drawnItemsRef value
  */
-// const onMapWWControlReady = () => {
-//     const map = mapRefPopUp.value.leafletObject;
-//     if (map !== null) {
-//         drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
-
-//         if (mapViewData.geometries.features) {
-//             const drawnItems = drawnItemsRef.value;
-//             const initialGeojson = mapViewData.geometries;
-
-//             initialGeojson.features.forEach((feature) => {
-//                 const layer = L.geoJSON(feature, {
-//                     pointToLayer: function (feature, latlng) {
-//                         if (feature.properties.radius) {
-//                             return L.circle(latlng, { radius: feature.properties.radius });
-//                         } else {
-//                             return L.marker(latlng);
-//                         }
-//                     },
-//                 }).addTo(drawnItems);
-//                 drawnItems.addLayer(layer);
-//             });
-//         }
-
-//         // Initialize the draw control and pass it the FeatureGroup of editable layers
-//         const drawControl = new L.Control.Draw({
-//             edit: {
-//                 featureGroup: drawnItemsRef.value,
-//             },
-//             draw: {
-//                 circle: true, // Add circle shape
-//                 marker: true,
-//                 polyline: true,
-//                 polygon: true,
-//                 rectangle: false,
-//                 circleMarker: false
-//             }
-//         });
-
-//         map.addControl(drawControl);
-//         // set options
-//         map.setView(mapViewData.options.center, mapViewData.options.zoom);
-
-
-//         map.on(L.Draw.Event.CREATED, (event) => {
-//             const layer = event.layer;
-//             const layerType = event.layerType;
-
-//             if (layerType === 'circle') {
-//                 const radius = layer.getRadius();
-//                 const latlng = layer.getLatLng();
-//                 const geojsonFeature = {
-//                     type: 'Feature',
-//                     properties: { radius: radius },
-//                     geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
-//                 };
-//                 const circleLayer = L.geoJSON(geojsonFeature, {
-//                     pointToLayer: function (feature, latlng) {
-//                         return L.circle(latlng, { radius: feature.properties.radius });
-//                     },
-//                 });
-//                 drawnItemsRef.value.addLayer(circleLayer);
-//             } else {
-//                 drawnItemsRef.value.addLayer(layer);
-//             }
-//         });
-
-
-//         map.on(L.Draw.Event.DELETED, (event) => {
-//             const layers = event.layers;
-//             layers.eachLayer((layer) => {
-//                 drawnItemsRef.value.removeLayer(layer);
-//             });
-//         });
-
-//         map.on(L.Draw.Event.EDITED, (event) => {
-//             const layers = event.layers;
-//             layers.eachLayer((layer) => {
-//                 // Remove the old version of the edited layer
-//                 drawnItemsRef.value.removeLayer(layer);
-
-//                 // Add the updated version of the edited layer
-//                 drawnItemsRef.value.addLayer(layer);
-//             });
-//         });
-//     }
-// };
+const onMapWWControlReady = () => {
+    const map = mapRefAnswer.value.leafletObject;
+    if (map !== null) {
+        drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
+
+        if (mapViewStore.geometries.features) {
+            const drawnItems = drawnItemsRef.value;
+            const initialGeojson = mapViewStore.geometries;
+
+            initialGeojson.features.forEach((feature) => {
+                const layer = L.geoJSON(feature, {
+                    pointToLayer: function (feature, latlng) {
+                        if (feature.properties.radius) {
+                            return L.circle(latlng, { radius: feature.properties.radius });
+                        } else {
+                            return L.marker(latlng);
+                        }
+                    },
+                }).addTo(drawnItems);
+                drawnItems.addLayer(layer);
+            });
+        }
+
+        // Initialize the draw control and pass it the FeatureGroup of editable layers
+        const drawControl = new L.Control.Draw({
+            edit: {
+                featureGroup: drawnItemsRef.value,
+            },
+            draw: {
+                circle: true, // Add circle shape
+                marker: true,
+                polyline: true,
+                polygon: true,
+                rectangle: false,
+                circleMarker: false,
+            }
+        });
+
+        map.addControl(drawControl);
+        // set options
+        // map.setView(mapViewData.options.center, mapViewData.options.zoom);
+
+
+        map.on(L.Draw.Event.CREATED, (event) => {
+            const layer = event.layer;
+            const layerType = event.layerType;
+
+            if (layerType === 'circle') {
+                const radius = layer.getRadius();
+                const latlng = layer.getLatLng();
+                const geojsonFeature = {
+                    type: 'Feature',
+                    properties: { radius: radius },
+                    geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
+                };
+                const circleLayer = L.geoJSON(geojsonFeature, {
+                    pointToLayer: function (feature, latlng) {
+                        return L.circle(latlng, { radius: feature.properties.radius });
+                    },
+                });
+                drawnItemsRef.value.addLayer(circleLayer);
+            } else {
+                drawnItemsRef.value.addLayer(layer);
+            }
+        });
+
+        map.on(L.Draw.Event.DELETED, (event) => {
+            const layers = event.layers;
+            layers.eachLayer((layer) => {
+                drawnItemsRef.value.removeLayer(layer);
+            });
+        });
+
+        map.on(L.Draw.Event.EDITED, (event) => {
+            const layers = event.layers;
+            layers.eachLayer((layer) => {
+                // Remove the old version of the edited layer
+                drawnItemsRef.value.removeLayer(layer);
+
+                // Add the updated version of the edited layer
+                drawnItemsRef.value.addLayer(layer);
+            });
+        });
+    }
+};
 
 /**
  * Init the map with out controls
@@ -274,7 +267,7 @@ const onLeafletReadyMapWithoutControls = () => {
  */
 
 const updateZoom = (value) => {
-    console.log('value //> ', value)
+    // console.log('value //> ', value)
     optionsTempStoreZoom.value = value
     console.log('optionsTempStoreZoom.valu //> ', optionsTempStoreZoom.value)
 }
@@ -285,42 +278,42 @@ const updateZoom = (value) => {
 //     console.log('optionsTempStoreCenter.valu //> ', optionsTempStoreCenter.value)
 // }
 
-const submitMap = async () => {
-    const global = useGlobalStore()
-    let response
-    mapViewData.geometries = drawnItemsRef.value.toGeoJSON()
-    // Save new zoom value if not falsely
-    console.log('optionsTempStoreZoom.value submit //> ', optionsTempStoreZoom.value)
-    if (optionsTempStoreZoom?.value) {
-        mapViewData.options.zoom = optionsTempStoreZoom.value
-    }
-    console.log('optionsTempStoreZoom.valu submit //> ', optionsTempStoreCenter.value)
-    // Save new center value if not falsely
-    if (optionsTempStoreCenter?.value) {
-        mapViewData.options.center = optionsTempStoreCenter.value
-    }
-    /**
-     * Check if the mapView already exists, if it exist then update, if not then create a new one
-     */
-
-    if (props.mapViewId) {
-        response = await mapViewStore.updateMapview(props.mapViewId, mapViewData)
-    } else {
-        mapViewData.name = mapViewData?.name || uuidv4()
-        response = await mapViewStore.createMapview(mapViewData)
-    }
+// const submitMap = async () => {
+//     const global = useGlobalStore()
+//     let response
+//     mapViewData.geometries = drawnItemsRef.value.toGeoJSON()
+//     // Save new zoom value if not falsely
+//     console.log('optionsTempStoreZoom.value submit //> ', optionsTempStoreZoom.value)
+//     if (optionsTempStoreZoom?.value) {
+//         mapViewData.options.zoom = optionsTempStoreZoom.value
+//     }
+//     console.log('optionsTempStoreZoom.valu submit //> ', optionsTempStoreCenter.value)
+//     // Save new center value if not falsely
+//     if (optionsTempStoreCenter?.value) {
+//         mapViewData.options.center = optionsTempStoreCenter.value
+//     }
+//     /**
+//      * Check if the mapView already exists, if it exist then update, if not then create a new one
+//      */
+
+//     if (props.mapViewId) {
+//         response = await mapViewStore.updateMapview(props.mapViewId, mapViewData)
+//     } else {
+//         mapViewData.name = mapViewData?.name || uuidv4()
+//         response = await mapViewStore.createMapview(mapViewData)
+//     }
 
-    if (response.data) {
-        mapViewData.name = response.data.name
-        await questionStore.editCurrentQuestionKeyValue(props.questionIndex, { map_view: response.data.id })
-        await questionStore.saveCurrentQuestions()
-    }
-    updateKeyMapWithoutControls.value++
-    setGeoJsonMarkers()
-    // response.refresh()
-    global.succes('Map view saved')
+//     if (response.data) {
+//         mapViewData.name = response.data.name
+//         await questionStore.editCurrentQuestionKeyValue(props.questionIndex, { map_view: response.data.id })
+//         await questionStore.saveCurrentQuestions()
+//     }
+//     updateKeyMapWithoutControls.value++
+//     setGeoJsonMarkers()
+//     // response.refresh()
+//     global.succes('Map view saved')
     
-}
+// }
 </script>
   
 <style></style>
\ No newline at end of file

From ee2188bf8a4701aebc980fc50231bc3c0e03daa8 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 13:47:41 +0100
Subject: [PATCH 15/39] Remove unused code in Answer model

---
 citizenvoice/apiapp/models/answer.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/citizenvoice/apiapp/models/answer.py b/citizenvoice/apiapp/models/answer.py
index f6e43f87..57ffe45e 100644
--- a/citizenvoice/apiapp/models/answer.py
+++ b/citizenvoice/apiapp/models/answer.py
@@ -27,7 +27,7 @@ class Answer(models.Model):
     updated = models.DateTimeField(_("Last edited"), auto_now=True)
     body = models.TextField(_("Answer Body"))
     # TODO: [manuel] Shall we define types for answers?
-    # location = Location()
+ 
 
 
     def __str__(self):

From 494022f0add0b66f21be4d47bcfd37d0d20c99c1 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 13:47:57 +0100
Subject: [PATCH 16/39] Add description field to Location model and rename
 location field to geometry in subclasses

---
 ...linestringlocation_description_and_more.py | 28 +++++++++++++++++++
 ...on_linestringlocation_geometry_and_more.py | 28 +++++++++++++++++++
 ...ometry_linestringlocation_geom_and_more.py | 28 +++++++++++++++++++
 citizenvoice/apiapp/models/location.py        |  7 +++--
 4 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 citizenvoice/apiapp/migrations/0002_linestringlocation_description_and_more.py
 create mode 100644 citizenvoice/apiapp/migrations/0003_rename_location_linestringlocation_geometry_and_more.py
 create mode 100644 citizenvoice/apiapp/migrations/0004_rename_geometry_linestringlocation_geom_and_more.py

diff --git a/citizenvoice/apiapp/migrations/0002_linestringlocation_description_and_more.py b/citizenvoice/apiapp/migrations/0002_linestringlocation_description_and_more.py
new file mode 100644
index 00000000..b42efb69
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0002_linestringlocation_description_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0 on 2024-03-13 12:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='linestringlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100),
+        ),
+        migrations.AddField(
+            model_name='pointlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100),
+        ),
+        migrations.AddField(
+            model_name='polygonlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/migrations/0003_rename_location_linestringlocation_geometry_and_more.py b/citizenvoice/apiapp/migrations/0003_rename_location_linestringlocation_geometry_and_more.py
new file mode 100644
index 00000000..59fd547c
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0003_rename_location_linestringlocation_geometry_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0 on 2024-03-13 12:44
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0002_linestringlocation_description_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='linestringlocation',
+            old_name='location',
+            new_name='geometry',
+        ),
+        migrations.RenameField(
+            model_name='pointlocation',
+            old_name='location',
+            new_name='geometry',
+        ),
+        migrations.RenameField(
+            model_name='polygonlocation',
+            old_name='location',
+            new_name='geometry',
+        ),
+    ]
diff --git a/citizenvoice/apiapp/migrations/0004_rename_geometry_linestringlocation_geom_and_more.py b/citizenvoice/apiapp/migrations/0004_rename_geometry_linestringlocation_geom_and_more.py
new file mode 100644
index 00000000..66ff532a
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0004_rename_geometry_linestringlocation_geom_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0 on 2024-03-13 12:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0003_rename_location_linestringlocation_geometry_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='linestringlocation',
+            old_name='geometry',
+            new_name='geom',
+        ),
+        migrations.RenameField(
+            model_name='pointlocation',
+            old_name='geometry',
+            new_name='geom',
+        ),
+        migrations.RenameField(
+            model_name='polygonlocation',
+            old_name='geometry',
+            new_name='geom',
+        ),
+    ]
diff --git a/citizenvoice/apiapp/models/location.py b/citizenvoice/apiapp/models/location.py
index 4404b8fc..df0d1922 100644
--- a/citizenvoice/apiapp/models/location.py
+++ b/citizenvoice/apiapp/models/location.py
@@ -16,6 +16,7 @@ class Location(models.Model):
     - answer: a location may belong to an answer
     """
     name = models.CharField(max_length=100, blank=True)
+    description = models.CharField(max_length=100, blank=True)
     question = models.ForeignKey(Question, on_delete=models.CASCADE, blank=True, null=True)
     answer = models.ForeignKey(Answer, on_delete=models.CASCADE, blank=True, null=True)
 
@@ -31,18 +32,18 @@ class PointLocation(Location):
     """
     Represents the location of a question or answer as a POINT
     """
-    location = PointField()
+    geom = PointField()
 
 
 class PolygonLocation(Location):
     """
     Represents the location of a question or answer as a POLYGON
     """
-    location = PolygonField()
+    geom = PolygonField()
 
 
 class LineStringLocation(Location):
     """
     Represents the location of a question or answer as a LINESTRING
     """
-    location = LineStringField()
+    geom = LineStringField()

From 1146acd6591eb55d682ccf0d61096039d3fce8ab Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 15:25:54 +0100
Subject: [PATCH 17/39] Update description field in Location model to allow
 null values

---
 citizenvoice/apiapp/models/location.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/citizenvoice/apiapp/models/location.py b/citizenvoice/apiapp/models/location.py
index df0d1922..a50a2ca2 100644
--- a/citizenvoice/apiapp/models/location.py
+++ b/citizenvoice/apiapp/models/location.py
@@ -16,7 +16,7 @@ class Location(models.Model):
     - answer: a location may belong to an answer
     """
     name = models.CharField(max_length=100, blank=True)
-    description = models.CharField(max_length=100, blank=True)
+    description = models.CharField(max_length=100, blank=True, null=True)
     question = models.ForeignKey(Question, on_delete=models.CASCADE, blank=True, null=True)
     answer = models.ForeignKey(Answer, on_delete=models.CASCADE, blank=True, null=True)
 

From 75beb03f37c4fc46f0897c1eb730fa709f16bfaa Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 15:26:03 +0100
Subject: [PATCH 18/39] Fix typos and update field names in serializers.py

---
 ...linestringlocation_description_and_more.py | 28 +++++++++++++++++++
 citizenvoice/apiapp/serializers.py            | 19 +++++++------
 2 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 citizenvoice/apiapp/migrations/0005_alter_linestringlocation_description_and_more.py

diff --git a/citizenvoice/apiapp/migrations/0005_alter_linestringlocation_description_and_more.py b/citizenvoice/apiapp/migrations/0005_alter_linestringlocation_description_and_more.py
new file mode 100644
index 00000000..3196f91e
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0005_alter_linestringlocation_description_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0 on 2024-03-13 13:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0004_rename_geometry_linestringlocation_geom_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='linestringlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+        migrations.AlterField(
+            model_name='pointlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+        migrations.AlterField(
+            model_name='polygonlocation',
+            name='description',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/serializers.py b/citizenvoice/apiapp/serializers.py
index 759b3a24..8470d91b 100644
--- a/citizenvoice/apiapp/serializers.py
+++ b/citizenvoice/apiapp/serializers.py
@@ -1,9 +1,9 @@
 from rest_framework import serializers
-from .models import Answer, Question, Survey,PointLocation, PolygonLocation, LineStringLocation, MapView
+from .models import Answer, Question, Survey, PointLocation, PolygonLocation, LineStringLocation, MapView
 from .models import Response as ResponseModel
 from django.contrib.auth.models import User
 
-# =============================================
+# =============================================ß
 # Create serializer classes that allow for exposing certain model fields to be used in the API
 # =============================================
 
@@ -61,7 +61,6 @@ class Meta:
         fields = ('created', 'updated', 'survey',
                   'respondent', 'interview_uuid')
 
-# TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
 class SurveySerializer(serializers.HyperlinkedModelSerializer):
@@ -92,33 +91,35 @@ class Meta:
 
 class PointLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'location', 'name', 'question', 'answer' fields of the PointLocation model for the API.
+    Serialises 'geom', 'name', 'descripton', 'question', 'answer' fields of the PointLocation model for the API.
     """
     class Meta:
         model = PointLocation
-        fields = ('location', 'name', 'question', 'answer')
+        fields = ('geom', 'name', 'description', 'question', 'answer')
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
 class PolygonLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'location', 'name', 'question', 'answer' fields of the PolygonLocation model for the API.
+    Serialises 'geom', 'name', 'descripton', 'question', 'answer' fields of the PolygonLocation model for the API.
     """
     class Meta:
         model = PolygonLocation
-        fields = ('location', 'name', 'question', 'answer')
+        fields = ('geom', 'name', 'description', 'question', 'answer')
+        
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
 class LineStringLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'location', 'name', 'question', 'answer' fields of the LineStringLocation model for the API.
+    Serialises 'geom', 'name', 'description', 'question', 'answer' fields of the LineStringLocation model for the API.
     """
     class Meta:
         model = LineStringLocation
-        fields = ('location', 'name', 'question', 'answer')
+        fields = ('geom', 'name', 'description', 'question', 'answer')
+        
 
 
 class MapViewSerializer(serializers.HyperlinkedModelSerializer):

From fbaaa5aa31b45cf6cb79376458b7b5008e27f75a Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 16:03:23 +0100
Subject: [PATCH 19/39] Refactor location models to use separate classes for
 different geometries

---
 citizenvoice/apiapp/models/location.py | 53 ++++++++++++++------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/citizenvoice/apiapp/models/location.py b/citizenvoice/apiapp/models/location.py
index a50a2ca2..86ff5ccb 100644
--- a/citizenvoice/apiapp/models/location.py
+++ b/citizenvoice/apiapp/models/location.py
@@ -5,9 +5,33 @@
 from .question import Question
 from .answer import Answer
 
+
+class PointLocation(models.Model)   :
+    """
+    Represents the location of a question or answer as a POINT
+    """
+    geom = PointField()
+    description = models.CharField(max_length=100, blank=True, null=True)
+
+class PolygonLocation(models.Model):
+    """
+    Represents the location of a question or answer as a POLYGON
+    """
+    geom = PolygonField()
+    description = models.CharField(max_length=100, blank=True, null=True)
+
+
+class LineStringLocation(models.Model):
+    """
+    Represents the location of a question or answer as a LINESTRING
+    """
+    geom = LineStringField()
+    description = models.CharField(max_length=100, blank=True, null=True)
+
+
 class Location(models.Model):
     """
-    Abstract class for representing geographic locations of
+    class for representing geographic locations of
     Questions and Answers.
 
     Attributes:
@@ -16,34 +40,13 @@ class Location(models.Model):
     - answer: a location may belong to an answer
     """
     name = models.CharField(max_length=100, blank=True)
-    description = models.CharField(max_length=100, blank=True, null=True)
     question = models.ForeignKey(Question, on_delete=models.CASCADE, blank=True, null=True)
     answer = models.ForeignKey(Answer, on_delete=models.CASCADE, blank=True, null=True)
-
-    class Meta:
-        abstract = True
+    points = models.ManyToManyField(PointLocation, blank=True)
+    lines = models.ManyToManyField(LineStringLocation,  blank=True)
+    polygons = models.ManyToManyField(PolygonLocation, blank=True)
 
     def __str__(self):
         "Returs the name of the location"
         return str(self.name)
 
-
-class PointLocation(Location):
-    """
-    Represents the location of a question or answer as a POINT
-    """
-    geom = PointField()
-
-
-class PolygonLocation(Location):
-    """
-    Represents the location of a question or answer as a POLYGON
-    """
-    geom = PolygonField()
-
-
-class LineStringLocation(Location):
-    """
-    Represents the location of a question or answer as a LINESTRING
-    """
-    geom = LineStringField()

From 3ba14db2d69e7d20a4d097ed1e8f0a3b5f159b0d Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 16:03:29 +0100
Subject: [PATCH 20/39] Add LocationSerializer to serializers.py

---
 citizenvoice/apiapp/serializers.py | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/citizenvoice/apiapp/serializers.py b/citizenvoice/apiapp/serializers.py
index 8470d91b..0eb5246a 100644
--- a/citizenvoice/apiapp/serializers.py
+++ b/citizenvoice/apiapp/serializers.py
@@ -1,5 +1,7 @@
 from rest_framework import serializers
-from .models import Answer, Question, Survey, PointLocation, PolygonLocation, LineStringLocation, MapView
+from .models import (Answer, Question, Survey, PointLocation, 
+                     PolygonLocation, LineStringLocation, MapView,
+                    Location)
 from .models import Response as ResponseModel
 from django.contrib.auth.models import User
 
@@ -89,24 +91,35 @@ class Meta:
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
+class LocationSerializer(serializers.HyperlinkedModelSerializer):
+    """
+    Serialises 'name', 'question', 'answer', 'points', 'lines', 'polygons'
+    fields of the Location model for the API.
+    """
+    class Meta:
+        model = Location
+        fields = ('name', 'question', 'answer', 'points', 'lines', 'polygons')
+
+
 class PointLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'geom', 'name', 'descripton', 'question', 'answer' fields of the PointLocation model for the API.
+    Serialises 'name', 'descripton', fields of the PointLocation model for the API.
     """
     class Meta:
         model = PointLocation
-        fields = ('geom', 'name', 'description', 'question', 'answer')
+        fields = ('geom', 'description')
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
 class PolygonLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'geom', 'name', 'descripton', 'question', 'answer' fields of the PolygonLocation model for the API.
+    Serialises 'geom', 'descripton', fields of the PolygonLocation model for the API.
     """
     class Meta:
         model = PolygonLocation
-        fields = ('geom', 'name', 'description', 'question', 'answer')
+        fields = ('geom', 'description')
+        
         
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
@@ -114,13 +127,13 @@ class Meta:
 
 class LineStringLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'geom', 'name', 'description', 'question', 'answer' fields of the LineStringLocation model for the API.
+    Serialises 'geom', 'description' fields of the LineStringLocation model for the API.
     """
     class Meta:
         model = LineStringLocation
-        fields = ('geom', 'name', 'description', 'question', 'answer')
+        fields = ('geom', 'description')
         
-
+    
 
 class MapViewSerializer(serializers.HyperlinkedModelSerializer):
     """

From 78f8ac231e394bbe022decd976e8629bfc494c88 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 16:03:37 +0100
Subject: [PATCH 21/39] Add LocationViewSet to query data from the database

---
 citizenvoice/apiapp/views.py | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/citizenvoice/apiapp/views.py b/citizenvoice/apiapp/views.py
index 2d99ce1d..22ef8240 100644
--- a/citizenvoice/apiapp/views.py
+++ b/citizenvoice/apiapp/views.py
@@ -1,4 +1,4 @@
-from .models import Answer, Question, Survey, PointLocation, PolygonLocation, LineStringLocation, MapView
+from .models import Answer, Question, Survey, PointLocation, PolygonLocation, LineStringLocation, MapView, Location
 from .models import Response as ResponseModel
 from .permissions import IsAuthenticatedAndSelfOrMakeReadOnly, IsAuthenticatedAndSelf
 from rest_framework.decorators import api_view
@@ -9,7 +9,7 @@
 from rest_framework.response import Response as rf_response
 from django.middleware import csrf
 from django.utils import timezone
-from .serializers import AnswerSerializer, PointLocationSerializer, PolygonLocationSerializer, \
+from .serializers import AnswerSerializer, LocationSerializer, PointLocationSerializer, PolygonLocationSerializer, \
     LineStringLocationSerializer, QuestionSerializer, SurveySerializer, ResponseSerializer, UserSerializer, \
     MapViewSerializer
 from rest_framework.permissions import AllowAny, IsAuthenticated
@@ -456,6 +456,23 @@ def get_queryset(response):
         queryset = User.objects.all().order_by('username')
         return queryset
 
+class LocationViewSet(viewsets.ModelViewSet):
+    """
+    Location ViewSet used internally to query data from database for all users.
+    """
+
+    serializer_class = LocationSerializer
+
+    def get_queryset(response):
+        """
+        Returns a set of all Location instances in the database.
+
+        Return:
+            queryset: containing all Location instances
+        """
+
+        queryset = Location.objects.all()
+        return queryset
 
 class PointLocationViewSet(viewsets.ModelViewSet):
     """

From 5d50da5f59678d83bd336fe3c49816cda638d44b Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 16:03:57 +0100
Subject: [PATCH 22/39] Add Location model and update URL routing

---
 ...move_linestringlocation_answer_and_more.py | 62 +++++++++++++++++++
 citizenvoice/apiapp/models/__init__.py        |  2 +-
 citizenvoice/apiapp/urls.py                   |  6 +-
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 citizenvoice/apiapp/migrations/0006_remove_linestringlocation_answer_and_more.py

diff --git a/citizenvoice/apiapp/migrations/0006_remove_linestringlocation_answer_and_more.py b/citizenvoice/apiapp/migrations/0006_remove_linestringlocation_answer_and_more.py
new file mode 100644
index 00000000..72084c8b
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0006_remove_linestringlocation_answer_and_more.py
@@ -0,0 +1,62 @@
+# Generated by Django 5.0 on 2024-03-13 14:33
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0005_alter_linestringlocation_description_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='linestringlocation',
+            name='answer',
+        ),
+        migrations.RemoveField(
+            model_name='linestringlocation',
+            name='name',
+        ),
+        migrations.RemoveField(
+            model_name='linestringlocation',
+            name='question',
+        ),
+        migrations.RemoveField(
+            model_name='pointlocation',
+            name='answer',
+        ),
+        migrations.RemoveField(
+            model_name='pointlocation',
+            name='name',
+        ),
+        migrations.RemoveField(
+            model_name='pointlocation',
+            name='question',
+        ),
+        migrations.RemoveField(
+            model_name='polygonlocation',
+            name='answer',
+        ),
+        migrations.RemoveField(
+            model_name='polygonlocation',
+            name='name',
+        ),
+        migrations.RemoveField(
+            model_name='polygonlocation',
+            name='question',
+        ),
+        migrations.CreateModel(
+            name='Location',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(blank=True, max_length=100)),
+                ('answer', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='apiapp.answer')),
+                ('lines', models.ManyToManyField(blank=True, to='apiapp.linestringlocation')),
+                ('points', models.ManyToManyField(blank=True, to='apiapp.pointlocation')),
+                ('polygons', models.ManyToManyField(blank=True, to='apiapp.polygonlocation')),
+                ('question', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='apiapp.question')),
+            ],
+        ),
+    ]
diff --git a/citizenvoice/apiapp/models/__init__.py b/citizenvoice/apiapp/models/__init__.py
index 3b700773..007bf2fb 100644
--- a/citizenvoice/apiapp/models/__init__.py
+++ b/citizenvoice/apiapp/models/__init__.py
@@ -6,7 +6,7 @@
 from .question import Question
 from .response import Response
 from .survey import Survey
-from .location import PointLocation, PolygonLocation, LineStringLocation
+from .location import PointLocation, PolygonLocation, LineStringLocation, Location
 from .mapview import MapView
 
 __all__ = ["Answer", "Response", "Survey", "Question", "PointLocation", "PolygonLocation", "LineStringLocation", "MapView"]
diff --git a/citizenvoice/apiapp/urls.py b/citizenvoice/apiapp/urls.py
index 1e4e9e2e..c54570a1 100644
--- a/citizenvoice/apiapp/urls.py
+++ b/citizenvoice/apiapp/urls.py
@@ -22,13 +22,15 @@
 router.register(r'surveys', views.SurveyViewSet, basename='survey')
 router.register(r'responses', views.ResponseViewSet, basename='response')
 router.register(r'users', views.UserViewSet, basename='user')
-router.register(r'pointlocations', views.PointLocationViewSet,
-                basename='pointlocation')
+router.register(r'locations', views.LocationViewSet,
+                basename='locations')
 router.register(r'polygonlocations', views.PolygonLocationViewSet,
                 basename='polygonlocation')
 router.register(r'linestringlocations',
                 views.LineStringLocationViewSet, basename='linestringlocation')
 router.register(r'map_views', views.MapViewViewSet, basename='mapview')
+router.register(r'pointlocations', views.PointLocationViewSet,
+                basename='pointlocation')
 
 # Wire up our API using automatic URL routing.
 # Additionally, we include login URLs for the browsable API.

From e7ecb76282b0d55bb5af73e958a3f8e31527ce09 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 16:12:16 +0100
Subject: [PATCH 23/39] Add Location model to admin site

---
 citizenvoice/apiapp/admin.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/citizenvoice/apiapp/admin.py b/citizenvoice/apiapp/admin.py
index 9bc5f717..fae5456d 100644
--- a/citizenvoice/apiapp/admin.py
+++ b/citizenvoice/apiapp/admin.py
@@ -2,7 +2,9 @@
 import django.contrib.auth.models
 from django.contrib import auth
 
-from .models import Answer, Question, Survey, Response, PointLocation, PolygonLocation, LineStringLocation, MapView
+from .models import ( Answer, Question, Survey, Response, PointLocation, 
+                     PolygonLocation, LineStringLocation, MapView,
+                     Location)
 
 # Register the models in the admin site in order to view, create and edit them from the admin page
 admin.site.register(Answer)
@@ -13,6 +15,7 @@
 admin.site.register(LineStringLocation)
 admin.site.register(PolygonLocation)
 admin.site.register(MapView)
+admin.site.register(Location)
 
 
 # Unregister User and Group fields

From 02d3e9d69962af1cca5a63720e549953639d44a3 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Wed, 13 Mar 2024 17:14:39 +0100
Subject: [PATCH 24/39] Remove location field from Answer model and add
 locations field

---
 ...remove_location_answer_answer_locations.py | 23 +++++++++++++++++++
 citizenvoice/apiapp/models/answer.py          |  2 ++
 citizenvoice/apiapp/models/location.py        |  4 ++--
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 citizenvoice/apiapp/migrations/0007_remove_location_answer_answer_locations.py

diff --git a/citizenvoice/apiapp/migrations/0007_remove_location_answer_answer_locations.py b/citizenvoice/apiapp/migrations/0007_remove_location_answer_answer_locations.py
new file mode 100644
index 00000000..a487e60c
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0007_remove_location_answer_answer_locations.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.0 on 2024-03-13 16:04
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0006_remove_linestringlocation_answer_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='location',
+            name='answer',
+        ),
+        migrations.AddField(
+            model_name='answer',
+            name='locations',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='apiapp.location'),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/models/answer.py b/citizenvoice/apiapp/models/answer.py
index 57ffe45e..b2bfd112 100644
--- a/citizenvoice/apiapp/models/answer.py
+++ b/citizenvoice/apiapp/models/answer.py
@@ -10,6 +10,7 @@
 from django.db import models
 from .response import Response
 from .question import Question
+from .location import Location
 from django.utils.translation import gettext_lazy as _
 
 
@@ -23,6 +24,7 @@ class Answer(models.Model):
     """
     response = models.ForeignKey(Response, to_field="interview_uuid", on_delete=models.CASCADE) # this field is not inheriting data type. Must be uuid.
     question = models.ForeignKey(Question, on_delete=models.CASCADE)
+    locations = models.ForeignKey(Location, on_delete=models.CASCADE, blank=True, null=True)
     created = models.DateTimeField(_("Creation date"), auto_now_add=True)
     updated = models.DateTimeField(_("Last edited"), auto_now=True)
     body = models.TextField(_("Answer Body"))
diff --git a/citizenvoice/apiapp/models/location.py b/citizenvoice/apiapp/models/location.py
index 86ff5ccb..f13b9d82 100644
--- a/citizenvoice/apiapp/models/location.py
+++ b/citizenvoice/apiapp/models/location.py
@@ -3,7 +3,7 @@
 from django.db import models
 from django.utils.translation import gettext_lazy as _
 from .question import Question
-from .answer import Answer
+
 
 
 class PointLocation(models.Model)   :
@@ -39,9 +39,9 @@ class for representing geographic locations of
     - question: a location may belong to a question
     - answer: a location may belong to an answer
     """
+
     name = models.CharField(max_length=100, blank=True)
     question = models.ForeignKey(Question, on_delete=models.CASCADE, blank=True, null=True)
-    answer = models.ForeignKey(Answer, on_delete=models.CASCADE, blank=True, null=True)
     points = models.ManyToManyField(PointLocation, blank=True)
     lines = models.ManyToManyField(LineStringLocation,  blank=True)
     polygons = models.ManyToManyField(PolygonLocation, blank=True)

From e49a9a218c1fee460d3343850dd0cd8750b5941a Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 17:40:55 +0100
Subject: [PATCH 25/39] fix issue with serilizing locations in
 AnswersSerializer

---
 citizenvoice/apiapp/serializers.py | 41 +++++++++++++++++-------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/citizenvoice/apiapp/serializers.py b/citizenvoice/apiapp/serializers.py
index 0eb5246a..aca7b366 100644
--- a/citizenvoice/apiapp/serializers.py
+++ b/citizenvoice/apiapp/serializers.py
@@ -10,16 +10,7 @@
 # =============================================
 
 
-class AnswerSerializer(serializers.HyperlinkedModelSerializer):
-    """
-    Serialises 'response', 'question', 'created', 'updated', 'body'
-    fields of the Answer model for the API.
-    """
-    class Meta:
-        model = Answer
-        fields = ('response', 'question', 'created', 'updated', 'body')
-
-
+    
 class QuestionSerializer(serializers.ModelSerializer):
     """
     Serializes 'text', 'order', 'required', 'question_type', 'choices', 'is_geospatial', 'map_view'
@@ -71,6 +62,7 @@ class SurveySerializer(serializers.HyperlinkedModelSerializer):
     'editable_answers', 'publish_date', 'expire_date', 'public_url', 'designer'
     fields of the Survey model for the API.
     """
+
     class Meta:
         model = Survey
         fields = ('id', 'name', 'description', 'is_published', 'need_logged_user', 'editable_answers',
@@ -96,29 +88,31 @@ class LocationSerializer(serializers.HyperlinkedModelSerializer):
     Serialises 'name', 'question', 'answer', 'points', 'lines', 'polygons'
     fields of the Location model for the API.
     """
+    # survey = serializers.PrimaryKeyRelatedField(queryset=Survey.objects.all())
+    
     class Meta:
         model = Location
-        fields = ('name', 'question', 'answer', 'points', 'lines', 'polygons')
+        fields = ('id', 'name', 'question', 'points', 'lines', 'polygons')
 
 
 class PointLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'name', 'descripton', fields of the PointLocation model for the API.
+    Serialises 'id', 'name', 'descripton', fields of the PointLocation model for the API.
     """
     class Meta:
         model = PointLocation
-        fields = ('geom', 'description')
+        fields = ('id', 'geom', 'description')
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
 
 class PolygonLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'geom', 'descripton', fields of the PolygonLocation model for the API.
+    Serialises 'id', 'geom', 'descripton', fields of the PolygonLocation model for the API.
     """
     class Meta:
         model = PolygonLocation
-        fields = ('geom', 'description')
+        fields = ('id', 'geom', 'description')
         
         
 
@@ -127,13 +121,26 @@ class Meta:
 
 class LineStringLocationSerializer(serializers.HyperlinkedModelSerializer):
     """
-    Serialises 'geom', 'description' fields of the LineStringLocation model for the API.
+    Serialises 'id', 'geom', 'description' fields of the LineStringLocation model for the API.
     """
     class Meta:
         model = LineStringLocation
-        fields = ('geom', 'description')
+        fields = ('id', 'geom', 'description')
         
+
+class AnswerSerializer(serializers.HyperlinkedModelSerializer):
+    """
+    Serialises 'response', 'question', 'created', 'updated', 'body'
+    fields of the Answer model for the API.
+    """
+    
+    locations = LocationSerializer()
+    question = serializers.PrimaryKeyRelatedField(queryset=Question.objects.all())
     
+    class Meta:
+        model = Answer
+        fields = ('id', 'question', 'locations',  'created', 'updated', 'body', 'response',)
+
 
 class MapViewSerializer(serializers.HyperlinkedModelSerializer):
     """

From 6ec35066c38dd001737a852356ea8a2d9d31e3d4 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 17:41:07 +0100
Subject: [PATCH 26/39] Fix typo in import statement

---
 citizenvoice/apiapp/models/answer.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/citizenvoice/apiapp/models/answer.py b/citizenvoice/apiapp/models/answer.py
index b2bfd112..68aa8a7e 100644
--- a/citizenvoice/apiapp/models/answer.py
+++ b/citizenvoice/apiapp/models/answer.py
@@ -6,7 +6,7 @@
 
 # from abc import update_abstractmethods
 # Import geographic model since we will be saving location data
-# from django.contrib.gis.db import models
+# from django.contrib.gis.db import moßdels
 from django.db import models
 from .response import Response
 from .question import Question
@@ -14,7 +14,6 @@
 from django.utils.translation import gettext_lazy as _
 
 
-
 # Represents a single answer given to a certain question as part of a user's response
 class Answer(models.Model):
     """

From dc6ea30cae551742c5bbb455812c15b9b529bb66 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 17:43:57 +0100
Subject: [PATCH 27/39] enable map drawing controls on maps

---
 frontend/components/AnswerMapView.vue | 73 ++++++++++++++-------------
 1 file changed, 37 insertions(+), 36 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index b0aa25f1..54faf565 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -157,7 +157,7 @@ const onMapWWControlReady = () => {
     if (map !== null) {
         drawnItemsRef.value = featureGroupRefWControl.value.leafletObject;
 
-        if (mapViewStore.geometries.features) {
+        if (mapViewStore.geometries?.features) {
             const drawnItems = drawnItemsRef.value;
             const initialGeojson = mapViewStore.geometries;
 
@@ -278,42 +278,43 @@ const updateZoom = (value) => {
 //     console.log('optionsTempStoreCenter.valu //> ', optionsTempStoreCenter.value)
 // }
 
-// const submitMap = async () => {
-//     const global = useGlobalStore()
-//     let response
-//     mapViewData.geometries = drawnItemsRef.value.toGeoJSON()
-//     // Save new zoom value if not falsely
-//     console.log('optionsTempStoreZoom.value submit //> ', optionsTempStoreZoom.value)
-//     if (optionsTempStoreZoom?.value) {
-//         mapViewData.options.zoom = optionsTempStoreZoom.value
-//     }
-//     console.log('optionsTempStoreZoom.valu submit //> ', optionsTempStoreCenter.value)
-//     // Save new center value if not falsely
-//     if (optionsTempStoreCenter?.value) {
-//         mapViewData.options.center = optionsTempStoreCenter.value
-//     }
-//     /**
-//      * Check if the mapView already exists, if it exist then update, if not then create a new one
-//      */
-
-//     if (props.mapViewId) {
-//         response = await mapViewStore.updateMapview(props.mapViewId, mapViewData)
-//     } else {
-//         mapViewData.name = mapViewData?.name || uuidv4()
-//         response = await mapViewStore.createMapview(mapViewData)
-//     }
-
-//     if (response.data) {
-//         mapViewData.name = response.data.name
-//         await questionStore.editCurrentQuestionKeyValue(props.questionIndex, { map_view: response.data.id })
-//         await questionStore.saveCurrentQuestions()
-//     }
-//     updateKeyMapWithoutControls.value++
-//     setGeoJsonMarkers()
-//     // response.refresh()
-//     global.succes('Map view saved')
+const submitMap = async () => {
+    const global = useGlobalStore()
+    let response
+    mapViewData.geometries = drawnItemsRef.value.toGeoJSON()
+    // Save new zoom value if not falsely
+    // console.log('optionsTempStoreZoom.value submit //> ', optionsTempStoreZoom.value)
+    // if (optionsTempStoreZoom?.value) {
+    //     mapViewData.options.zoom = optionsTempStoreZoom.value
+    // }
+    // console.log('optionsTempStoreZoom.valu submit //> ', optionsTempStoreCenter.value)
+    // Save new center value if not falsely
+    // if (optionsTempStoreCenter?.value) {
+    //     mapViewData.options.center = optionsTempStoreCenter.value
+    // }
+    /**
+     * Check if the mapView already exists, if it exist then update, if not then create a new one
+     */
+    // COTINUE HERE: do we need this function?
+
+    if (props.mapViewId) {
+        response = await mapViewStore.updateMapview(props.mapViewId, mapViewData)
+    } else {
+        mapViewData.name = mapViewData?.name || uuidv4()
+        response = await mapViewStore.createMapview(mapViewData)
+    }
+
+    if (response.data) {
+        mapViewData.name = response.data.name
+        await questionStore.editCurrentQuestionKeyValue(props.questionIndex, { map_view: response.data.id })
+        await questionStore.saveCurrentQuestions()
+    }
+    updateKeyMapWithoutControls.value++
+    setGeoJsonMarkers()
+    // response.refresh()
+    global.succes('Map view saved')
     
-// }
+}
 </script>
   
 <style></style>
\ No newline at end of file

From 0a5201c48db2894c1d4451ab36f89269fc97f42f Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 17:47:21 +0100
Subject: [PATCH 28/39] add method to retrieve geometries by answerid

---
 citizenvoice/apiapp/views.py | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/citizenvoice/apiapp/views.py b/citizenvoice/apiapp/views.py
index 22ef8240..b3ec0c6e 100644
--- a/citizenvoice/apiapp/views.py
+++ b/citizenvoice/apiapp/views.py
@@ -473,6 +473,23 @@ def get_queryset(response):
 
         queryset = Location.objects.all()
         return queryset
+    
+    
+    @staticmethod
+    def GetGeometries(answer_id):
+        """
+        Get a list of all geometries associated to an answer.
+
+        Parameters:
+            answer_id (int): Answer ID to be used for finding related geometries.
+
+        Return: 
+            queryset: containing the geometries instances related to this Answer
+        """
+
+        queryset = Location.objects.filter(answer=answer_id)
+        return queryset
+
 
 class PointLocationViewSet(viewsets.ModelViewSet):
     """

From 367d62b4d0a82e99665638db720a5a84ab7b6099 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 20:40:39 +0100
Subject: [PATCH 29/39] rename prop mapViewId to mapViewUrl

---
 frontend/components/AnswerMapView.vue       | 16 +++++++++-------
 frontend/pages/survey/[_id]/[_question].vue |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/components/AnswerMapView.vue b/frontend/components/AnswerMapView.vue
index 54faf565..8a93e894 100644
--- a/frontend/components/AnswerMapView.vue
+++ b/frontend/components/AnswerMapView.vue
@@ -1,9 +1,9 @@
+
 <template>
     <v-sheet v-model="dialog" width="auto">
         <!-- <template v-slot:activator="{ props }">
             <v-btn class="mt-4" variant="tonal" append-icon="mdi-pencil" border v-bind="props">Edit Map</v-btn>
         </template> -->
-
         <v-card>
             <v-card-text>
                 <!-- <v-text-field v-model="title" label="Name of map view" variant="outlined"></v-text-field> -->
@@ -56,7 +56,7 @@ const questionStore = useQuestionDesignStore()
 
 const props = defineProps({
     questionIndex: Number,
-    mapViewId: Number | undefined
+    mapViewUrl: Number | undefined
     // name: String,
     // mapServiceUrl: String,
     // options: Object, // e.g. {zoom: 7, center: [52.04573404034129, 5.108642578125001]}
@@ -77,7 +77,7 @@ const updateKeyMapWithoutControls = ref(0)
 const updateKeyGeoJson = ref(0)
 
 const mapViewData = reactive({
-    id: props.mapViewId || null,
+    id: props.mapViewUrl || null,
     name: "", 
     geometries: {}
 })
@@ -89,8 +89,8 @@ mapViewStore.$reset()
 /**
  * Fetch the geojson data from the DB and add it to the mapViewData
  */
-if (props.mapViewId) {        
-        let mapView = await mapViewStore.fetchMapView(props.mapViewId)
+if (props.mapViewUrl) {        
+        let mapView = await mapViewStore.fetchMapView(props.mapViewUrl)
     }
 
 
@@ -297,8 +297,8 @@ const submitMap = async () => {
      */
     // COTINUE HERE: do we need this function?
 
-    if (props.mapViewId) {
-        response = await mapViewStore.updateMapview(props.mapViewId, mapViewData)
+    if (props.mapViewUrl) {
+        response = await mapViewStore.updateMapview(props.mapViewUrl, mapViewData)
     } else {
         mapViewData.name = mapViewData?.name || uuidv4()
         response = await mapViewStore.createMapview(mapViewData)
@@ -315,6 +315,8 @@ const submitMap = async () => {
     global.succes('Map view saved')
     
 }
+
+
 </script>
   
 <style></style>
\ No newline at end of file
diff --git a/frontend/pages/survey/[_id]/[_question].vue b/frontend/pages/survey/[_id]/[_question].vue
index 6ed6b24c..29a6fd2f 100644
--- a/frontend/pages/survey/[_id]/[_question].vue
+++ b/frontend/pages/survey/[_id]/[_question].vue
@@ -64,7 +64,7 @@
                         class="my-card col">
                         <AnswerMapView
                         :questionIndex="question.id"
-                        :mapViewId ="question.map_view"
+                        :mapViewUrl ="question.map_view"
                         />
                     </div>
                     <!-- Navigation -->

From bca74481de6e4b174ba3177507495d7a6ccc4b5e Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 20:43:24 +0100
Subject: [PATCH 30/39] use url to fetch mapview in fetchMapView action

---
 frontend/stores/mapview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/stores/mapview.js b/frontend/stores/mapview.js
index ccc1abb6..7699e959 100644
--- a/frontend/stores/mapview.js
+++ b/frontend/stores/mapview.js
@@ -57,7 +57,7 @@ export const useMapViewStore = defineStore('mapView', {
         async fetchMapView(id) {
             console.log('Map_view id //> ', id)
             const config = setRequestConfig({ method: 'GET' })
-            const {data: res, error } = await useAsyncData( () => $cmsApi(`/api/map_views/${id}`, config));
+            const {data: res, error } = await useAsyncData( () => $cmsApi(`${id}`, config));
 
              console.log('Map_view res //> ', res)
             if (res?.value) {

From 5bb4b41f4438d954edde36f5b5b18b2a30b1f8ef Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 23:21:04 +0100
Subject: [PATCH 31/39] Update serializers for Question, Response, and Survey
 models

---
 citizenvoice/apiapp/serializers.py | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/citizenvoice/apiapp/serializers.py b/citizenvoice/apiapp/serializers.py
index aca7b366..3a511291 100644
--- a/citizenvoice/apiapp/serializers.py
+++ b/citizenvoice/apiapp/serializers.py
@@ -11,18 +11,19 @@
 
 
     
-class QuestionSerializer(serializers.ModelSerializer):
+class QuestionSerializer(serializers.HyperlinkedModelSerializer):
     """
     Serializes 'text', 'order', 'required', 'question_type', 'choices', 'is_geospatial', 'map_view'
     fields of the Question model for the API.
     """
     survey = serializers.PrimaryKeyRelatedField(queryset=Survey.objects.all())
+    # survey = serializers.HyperlinkedRelatedField(view_name='survey-detail', read_only=True)
 
     class Meta:
         model = Question
-        fields = ('id', 'text', 'order', 'required', 'question_type',
+        fields = ('id', 'url', 'text', 'order', 'required', 'question_type',
                   'choices', 'survey', 'is_geospatial', 'map_view')
-        read_only_fields = ('id',)
+        read_only_fields = ('id', 'url')
 
     def create(self, validated_data):
         question = Question.objects.create(
@@ -38,7 +39,7 @@ def create(self, validated_data):
         return question
 
 
-class ResponseSerializer(serializers.ModelSerializer):
+class ResponseSerializer(serializers.HyperlinkedModelSerializer):
     """
     Serializes 'created', 'updated', 'survey', 'interview_uuid', 'respondent'
     fields of the Response model for the API.
@@ -52,7 +53,7 @@ def get_respondent(self, User):
     class Meta:
         model = ResponseModel
         fields = ('created', 'updated', 'survey',
-                  'respondent', 'interview_uuid')
+                   'interview_uuid', 'url','respondent')
 
 
 
@@ -66,7 +67,7 @@ class SurveySerializer(serializers.HyperlinkedModelSerializer):
     class Meta:
         model = Survey
         fields = ('id', 'name', 'description', 'is_published', 'need_logged_user', 'editable_answers',
-                  'publish_date', 'expire_date', 'public_url', 'designer')
+                  'publish_date', 'expire_date', 'public_url', 'designer', 'url')
 
 # TODO: change this to use serializers.ModelSerializer (PrimaryKeyRelatedField)
 
@@ -141,6 +142,14 @@ class Meta:
         model = Answer
         fields = ('id', 'question', 'locations',  'created', 'updated', 'body', 'response',)
 
+    def create(self, validated_data):
+        answer = Answer.objects.create(
+            response=validated_data['response'],
+            question=validated_data['question'],
+            locations=validated_data.get('locations', None),
+            body=validated_data['body']
+        )
+        return answer
 
 class MapViewSerializer(serializers.HyperlinkedModelSerializer):
     """

From 17909bd478844714bad5b0751dbb7a4fd30fbf85 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 23:21:13 +0100
Subject: [PATCH 32/39] Add openapi documentation link to urls.py

---
 citizenvoice/apiapp/urls.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/citizenvoice/apiapp/urls.py b/citizenvoice/apiapp/urls.py
index c54570a1..6b3566c5 100644
--- a/citizenvoice/apiapp/urls.py
+++ b/citizenvoice/apiapp/urls.py
@@ -39,3 +39,6 @@
     path('api-auth/', include('rest_framework.urls', namespace='rest_framework')),
     path('csrf/', views.get_csrf_token, name='get_csrf_token'),
 ]
+
+
+# TODO: learn about openapi in django: https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/apis/
\ No newline at end of file

From f692cca891af15069852706964ae2e8a4b14bfc5 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 23:21:26 +0100
Subject: [PATCH 33/39] Add answer store and its actions

---
 frontend/stores/answer.js | 81 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 frontend/stores/answer.js

diff --git a/frontend/stores/answer.js b/frontend/stores/answer.js
new file mode 100644
index 00000000..be99b3ea
--- /dev/null
+++ b/frontend/stores/answer.js
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { useUserStore } from './user';
+import { useGlobalStore } from './global';
+import setRequestConfig from './utils/setRequestConfig';
+
+
+export const useAnswerStore = defineStore('answer', {
+    
+    state: () => 
+        // required data for the response store
+        // responseId // if null it means that the respondent 
+        // respondent
+        // currentQuestion
+        // surveyId
+        // answersToCurrentSurvey
+       { 
+        return { 
+            question_index: null,
+            body: ""
+        } },
+    getters: {
+
+    },
+    actions: {
+        updateAnswer(answer) {
+            // updates an answer in the array of answers
+            // answer must have the following structure
+            // {
+            // question_id: integer,
+            // text: text,
+            // }
+            const existingAnswer = this.answers.find(a => a.question_id === answer.question_id);
+            if (existingAnswer) {
+                existingAnswer.text = answer.text;
+            }
+            else {
+                this.answers.push(answer);
+            }
+    
+        },
+        
+        clearAnswers() {
+            // Clear all the answers
+            this.answers = []
+        },
+        async submitAnswer(response_url, question_url, answer_value) {
+            const user = useUserStore();
+            const global = useGlobalStore();
+            const csrftoken = user.getCookie('csrftoken');
+            const token = user.getAuthToken;
+
+            const config = {
+                headers : {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrftoken,
+                },
+                method: 'POST',
+                // pas the data for the new Response object as the request body
+                
+                // TODO: have the repondent set to the logged in user 
+                body: {
+                    response: response_url,
+                    question: question_url,
+                    body: answer_value
+                }
+            };
+            if (token) {
+                config.headers['Authorization'] = `Token ${token}`
+            };
+
+            const {data: response, pending, error} = await useAsyncData('submitAnswer', () => $cmsApi('/api/answers/', config));
+
+            if (response) {
+                console.log('response submitted //> ');
+            }
+        
+        }
+
+       
+    }
+})
\ No newline at end of file

From 3508d9dee68d447e844cccecf42dcc4408df21de Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Thu, 14 Mar 2024 23:21:37 +0100
Subject: [PATCH 34/39] Update fetchMapView function to use URL parameter
 instead of ID

---
 frontend/stores/mapview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/stores/mapview.js b/frontend/stores/mapview.js
index 7699e959..873d912b 100644
--- a/frontend/stores/mapview.js
+++ b/frontend/stores/mapview.js
@@ -54,10 +54,10 @@ export const useMapViewStore = defineStore('mapView', {
             global.succes('Map update saved')
             return { data: data?.value, refresh }
         },
-        async fetchMapView(id) {
-            console.log('Map_view id //> ', id)
+        async fetchMapView(url) {
+            console.log('Map_view id //> ', url)
             const config = setRequestConfig({ method: 'GET' })
-            const {data: res, error } = await useAsyncData( () => $cmsApi(`${id}`, config));
+            const {data: res, error } = await useAsyncData( () => $cmsApi(`${url}`, config));
 
              console.log('Map_view res //> ', res)
             if (res?.value) {

From b25c0d481c44d2b00b5ffbefc32602fb63689908 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 15 Mar 2024 13:02:53 +0100
Subject: [PATCH 35/39] Add 'url' field to LocationSerializer and make
 'locations' field optional in AnswerSerializer

---
 citizenvoice/apiapp/serializers.py | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/citizenvoice/apiapp/serializers.py b/citizenvoice/apiapp/serializers.py
index 3a511291..3789e6be 100644
--- a/citizenvoice/apiapp/serializers.py
+++ b/citizenvoice/apiapp/serializers.py
@@ -93,7 +93,7 @@ class LocationSerializer(serializers.HyperlinkedModelSerializer):
     
     class Meta:
         model = Location
-        fields = ('id', 'name', 'question', 'points', 'lines', 'polygons')
+        fields = ('id', 'url', 'name', 'question', 'points', 'lines', 'polygons')
 
 
 class PointLocationSerializer(serializers.HyperlinkedModelSerializer):
@@ -135,12 +135,15 @@ class AnswerSerializer(serializers.HyperlinkedModelSerializer):
     fields of the Answer model for the API.
     """
     
-    locations = LocationSerializer()
+    locations = serializers.PrimaryKeyRelatedField(queryset=Location.objects.all(), required=False)
     question = serializers.PrimaryKeyRelatedField(queryset=Question.objects.all())
     
     class Meta:
         model = Answer
-        fields = ('id', 'question', 'locations',  'created', 'updated', 'body', 'response',)
+        fields = ('id', 'question', 'locations',  'created', 'updated', 'body', 'response')
+        extra_kwargs = {
+            'locations': {'required': False}  # this makes the locations field optional. However, the body or a resquest is not consistent. Is this a problem?
+        }
 
     def create(self, validated_data):
         answer = Answer.objects.create(

From ff78155a55af0d80b75c7c0bb87f1a04669b92fb Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 15 Mar 2024 13:03:22 +0100
Subject: [PATCH 36/39] Update location fields in models

---
 ...on_lines_alter_location_points_and_more.py | 28 +++++++++++++++
 ...locations_alter_location_lines_and_more.py | 35 +++++++++++++++++++
 .../migrations/0010_alter_answer_locations.py | 19 ++++++++++
 .../migrations/0011_alter_answer_body.py      | 18 ++++++++++
 citizenvoice/apiapp/models/answer.py          |  2 +-
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 citizenvoice/apiapp/migrations/0008_alter_location_lines_alter_location_points_and_more.py
 create mode 100644 citizenvoice/apiapp/migrations/0009_alter_answer_locations_alter_location_lines_and_more.py
 create mode 100644 citizenvoice/apiapp/migrations/0010_alter_answer_locations.py
 create mode 100644 citizenvoice/apiapp/migrations/0011_alter_answer_body.py

diff --git a/citizenvoice/apiapp/migrations/0008_alter_location_lines_alter_location_points_and_more.py b/citizenvoice/apiapp/migrations/0008_alter_location_lines_alter_location_points_and_more.py
new file mode 100644
index 00000000..1b60dccd
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0008_alter_location_lines_alter_location_points_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0 on 2024-03-15 10:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0007_remove_location_answer_answer_locations'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='location',
+            name='lines',
+            field=models.ManyToManyField(blank=True, null=True, to='apiapp.linestringlocation'),
+        ),
+        migrations.AlterField(
+            model_name='location',
+            name='points',
+            field=models.ManyToManyField(blank=True, null=True, to='apiapp.pointlocation'),
+        ),
+        migrations.AlterField(
+            model_name='location',
+            name='polygons',
+            field=models.ManyToManyField(blank=True, null=True, to='apiapp.polygonlocation'),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/migrations/0009_alter_answer_locations_alter_location_lines_and_more.py b/citizenvoice/apiapp/migrations/0009_alter_answer_locations_alter_location_lines_and_more.py
new file mode 100644
index 00000000..16ecf1f3
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0009_alter_answer_locations_alter_location_lines_and_more.py
@@ -0,0 +1,35 @@
+# Generated by Django 5.0 on 2024-03-15 10:29
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0008_alter_location_lines_alter_location_points_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='answer',
+            name='locations',
+            field=models.ForeignKey(blank=True, default=1, on_delete=django.db.models.deletion.CASCADE, to='apiapp.location'),
+            preserve_default=False,
+        ),
+        migrations.AlterField(
+            model_name='location',
+            name='lines',
+            field=models.ManyToManyField(blank=True, to='apiapp.linestringlocation'),
+        ),
+        migrations.AlterField(
+            model_name='location',
+            name='points',
+            field=models.ManyToManyField(blank=True, to='apiapp.pointlocation'),
+        ),
+        migrations.AlterField(
+            model_name='location',
+            name='polygons',
+            field=models.ManyToManyField(blank=True, to='apiapp.polygonlocation'),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/migrations/0010_alter_answer_locations.py b/citizenvoice/apiapp/migrations/0010_alter_answer_locations.py
new file mode 100644
index 00000000..548f696e
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0010_alter_answer_locations.py
@@ -0,0 +1,19 @@
+# Generated by Django 5.0 on 2024-03-15 10:52
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0009_alter_answer_locations_alter_location_lines_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='answer',
+            name='locations',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='apiapp.location'),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/migrations/0011_alter_answer_body.py b/citizenvoice/apiapp/migrations/0011_alter_answer_body.py
new file mode 100644
index 00000000..e9cfb81a
--- /dev/null
+++ b/citizenvoice/apiapp/migrations/0011_alter_answer_body.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0 on 2024-03-15 11:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apiapp', '0010_alter_answer_locations'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='answer',
+            name='body',
+            field=models.TextField(blank=True, verbose_name='Answer Body'),
+        ),
+    ]
diff --git a/citizenvoice/apiapp/models/answer.py b/citizenvoice/apiapp/models/answer.py
index 68aa8a7e..1c685dee 100644
--- a/citizenvoice/apiapp/models/answer.py
+++ b/citizenvoice/apiapp/models/answer.py
@@ -26,7 +26,7 @@ class Answer(models.Model):
     locations = models.ForeignKey(Location, on_delete=models.CASCADE, blank=True, null=True)
     created = models.DateTimeField(_("Creation date"), auto_now_add=True)
     updated = models.DateTimeField(_("Last edited"), auto_now=True)
-    body = models.TextField(_("Answer Body"))
+    body = models.TextField(_("Answer Body"), blank=True)
     # TODO: [manuel] Shall we define types for answers?
  
 

From 4948f5cb8446c984c31b0ee5da2189ac0be43435 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 15 Mar 2024 13:03:32 +0100
Subject: [PATCH 37/39] Refactor submitAnswers function to use question_id
 instead of question_url

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

diff --git a/frontend/pages/survey/[_id]/[_question].vue b/frontend/pages/survey/[_id]/[_question].vue
index 29a6fd2f..646c2b08 100644
--- a/frontend/pages/survey/[_id]/[_question].vue
+++ b/frontend/pages/survey/[_id]/[_question].vue
@@ -174,13 +174,13 @@ const submitAnswers = async () => {
 
     for (let i = 0; i < responseStore.answers.length; i++) {
         const response_url = response_root + responseStore.responseId + "/";
-        const question_url = question_root + responseStore.answers[i].question_id + "/";
+        const question_id = responseStore.answers[i].question_id;
         const answer_text = responseStore.answers[i].text;
         console.log("submitting answer: ", answer_text);
         responseStore.submitAnswer(
             response_url,
-            question_url,
-            answer_text
+            question_id,
+            answer_text,
         )
     }
     global.succes("Your answers have been submitted")

From cf1636d7ba841abb5b5ea31430c18a8127c8fa8e Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Fri, 15 Mar 2024 13:13:03 +0100
Subject: [PATCH 38/39] Add useAnswerStore import and update submitAnswer
 function

---
 frontend/stores/response.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/stores/response.js b/frontend/stores/response.js
index c1bf71d5..2d197eb6 100644
--- a/frontend/stores/response.js
+++ b/frontend/stores/response.js
@@ -3,6 +3,9 @@ import { useUserStore } from './user';
 import { useGlobalStore } from './global';
 import setRequestConfig from './utils/setRequestConfig';
 import { useSurveyStore } from './survey';
+import { useAnswerStore } from './answer';
+
+// const answer = useAnswerStore();
 
 export const useStoreResponse = defineStore('response', {
     
@@ -17,11 +20,12 @@ export const useStoreResponse = defineStore('response', {
         return { 
             responseData: {},
             answers: 
-            [
+            [ 
                 // expects and array of objects with the following structure
                 // {
                 // question_index: integer,
                 // body: text,
+                // locations: [list of locations],
                 // }
             ],
         
@@ -126,7 +130,7 @@ export const useStoreResponse = defineStore('response', {
             // Clear all the answers
             this.answers = []
         },
-        async submitAnswer(response_url, question_url, answer_value) {
+        async submitAnswer(response_url, question_id, answer_value) { // TODO: must include locations in the answer
             const user = useUserStore();
             const global = useGlobalStore();
             const csrftoken = user.getCookie('csrftoken');
@@ -141,10 +145,11 @@ export const useStoreResponse = defineStore('response', {
                 // pas the data for the new Response object as the request body
                 
                 // TODO: have the repondent set to the logged in user 
+
                 body: {
                     response: response_url,
-                    question: question_url,
-                    body: answer_value
+                    question: question_id,
+                    body: answer_value,
                 }
             };
             if (token) {
@@ -156,7 +161,10 @@ export const useStoreResponse = defineStore('response', {
             if (response) {
                 console.log('response submitted //> ');
             }
-        
+            if (error) {
+                console.log('error in SubmitAnswer //> ', error);
+            }
+
         }
 
         // TODO: CONTINUE HERE

From 4011aa8716b5461e1d0f7e68e0e4c6c696276615 Mon Sep 17 00:00:00 2001
From: Manuel Garcia <gilbert.mg22@gmail.com>
Date: Mon, 18 Mar 2024 10:51:00 +0100
Subject: [PATCH 39/39] Remove point location test case

---
 citizenvoice/tests/test_api_methods.py | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/citizenvoice/tests/test_api_methods.py b/citizenvoice/tests/test_api_methods.py
index eb3a936b..a55be813 100644
--- a/citizenvoice/tests/test_api_methods.py
+++ b/citizenvoice/tests/test_api_methods.py
@@ -31,18 +31,6 @@ def setUpTestData(cls):
                                 question_type='text', choices='', survey=survey)
         question.save()
 
-        # Create a new point location
-        point_location = PointLocation(location='SRID=4326;POINT (0.0075149652548134 0.0322341867016535)', name='test location',
-                                        question=question)
-        point_location.save()
-
-        pass
-
-    def test_get_pointlocation_by_question(self):
-        question = Question.objects.get(id=1)
-        point_location = PointLocation.objects.get(question=question)
-        location = point_location.location
-        self.assertEqual(location, 'SRID=4326;POINT (0.0075149652548134 0.0322341867016535)')
 
     def test_get_non_expired_surveys(self):
         print('=================================')