adding an API GET Location endpoint, fetch locations and list them in vue multiselect

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js

@@ -3,16 +3,29 @@ import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.
 /*
 *  Load socialActions by socialIssue (id)
 */
-const getSocialActionByIssue = (id) => { 
+const getSocialActionByIssue = (id) => {
    const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
    return fetch(url)
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
+/*
+*   Load Locations
+ */
+const getLocations = () => {
+    const url = `/api/1.0/main/location.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
 export {
    getSocialIssues,
-   getSocialActionByIssue
+   getSocialActionByIssue,
+   getLocations
 };

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -5,11 +5,19 @@
                 Localisation
             </label>
             <div class="col-sm-8">
-                <!--
+
                 <VueMultiselect
-                    name="chooseLocation"
-                    placeholder="Choisissez une localisation">
+                    name="selectLocation"
+                    track-by="id"
+                    :multiple="false"
+                    :searchable="true"
+                    placeholder="Choisissez une localisation"
+                    label="name"
+                    :custom-label="customLabel"
+                    v-model="location"
+                    :options="locations">
                 </VueMultiselect>
+                <!--
                 -->
                 <new-location></new-location>
             </div>
@@ -18,9 +26,10 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 import VueMultiselect from 'vue-multiselect';
 import NewLocation from './Location/NewLocation.vue';
+import { getLocations } from '../api.js';
 
 export default {
     name: "Location",
@@ -28,10 +37,36 @@ export default {
         NewLocation,
         VueMultiselect
     },
+    data() {
+        return {
+            locations: []
+        }
+    },
     computed: {
         ...mapState(['activity']),
+        location: {
+            get() {
+                return this.activity.location;
+            },
+            set(value) {
+                this.$store.commit('updateLocation', value);
+            }
+        }
+    },
+    mounted() {
+        this.getLocationsList();
     },
     methods: {
+        getLocationsList() {
+            getLocations().then(response => new Promise(resolve => {
+                console.log('getLocations', response);
+                this.locations = response.results;
+                resolve();
+            }))
+        },
+        customLabel(value) {
+            return `${value.type.title.fr} ${value.name}`;
+        }
     }
 }
 </script>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js

@@ -114,6 +114,10 @@ const store = createStore({
           state.activity.users = state.activity.users.filter(user => user !== payload);
           break;
       };
+    },
+    updateLocation(state, value) {
+        console.log('### mutation: updateLocation', value);
+        state.activity.location = value;
     }
   },
   actions: {