activity/location: refactor

Refactor the way for loading locations:

* fix showing the default location
* fix when there is not thirdparty default location
* separate api queries instead of inlines;
* use the store instead of the mounted
* refactored for a possible re-use in calendar

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

@@ -15,7 +15,7 @@
                     :searchable="true"
                     :placeholder="$t('activity.choose_location')"
                     :custom-label="customLabel"
-                    :options="locations"
+                    :options="availableLocations"
                     group-values="locations"
                     group-label="locationGroup"
                     v-model="location"
@@ -40,13 +40,8 @@ export default {
         NewLocation,
         VueMultiselect,
     },
-    data() {
-        return {
-            locations: [],
-        };
-    },
     computed: {
-        ...mapState(["activity"]),
+        ...mapState(["activity", "availableLocations"]),
         ...mapGetters(["suggestedEntities"]),
         location: {
             get() {
@@ -57,61 +52,6 @@ export default {
             },
         },
     },
-    mounted() {
-        getLocations().then(
-            (results) => {
-                getUserCurrentLocation().then(
-                    userCurrentLocation => {
-                        getLocationTypeByDefaultFor('person').then(
-                            (personLocationType) => {
-                                if (personLocationType) {
-                                    const personLocation = this.makeAccompanyingPeriodLocation(personLocationType);
-                                    const concernedPersonsLocation =
-                                        this.makeConcernedPersonsLocation(personLocationType);
-                                    getLocationTypeByDefaultFor('thirdparty').then(
-                                        thirdpartyLocationType => {
-                                            const concernedThirdPartiesLocation =
-                                                this.makeConcernedThirdPartiesLocation(thirdpartyLocationType);
-                                            this.locations = [
-                                                {
-                                                    locationGroup: 'Ma localisation',
-                                                    locations: [userCurrentLocation]
-                                                },
-                                                {
-                                                    locationGroup: 'Localisation du parcours',
-                                                    locations: [personLocation]
-                                                },
-                                                {
-                                                    locationGroup: 'Parties concernées',
-                                                    locations: [...concernedPersonsLocation, ...concernedThirdPartiesLocation]
-                                                },
-                                                {
-                                                    locationGroup: 'Autres localisations',
-                                                    locations: results
-                                                }
-                                            ];
-                                        }
-                                    )
-                                } else {
-                                    this.locations = [
-                                        {
-                                            locationGroup: 'Localisations',
-                                            locations: response.results
-                                        }
-                                    ];
-                                }
-                                if (window.default_location_id) {
-                                    let location = this.locations.filter(
-                                        (l) => l.id === window.default_location_id
-                                    );
-                                    this.$store.dispatch("updateLocation", location);
-                                }
-                            }
-                        )
-                    }
-                )
-            })
-    },
     methods: {
         labelAccompanyingCourseLocation(value) {
             return `${value.address.text} (${value.locationType.title.fr})`
@@ -125,58 +65,6 @@ export default {
                     : value.locationType.title.fr
                 : '';
         },
-        makeConcernedPersonsLocation(locationType) {
-            let locations = [];
-            this.suggestedEntities.forEach(
-                (e) => {
-                    if (e.type === 'person' && e.current_household_address !== null){
-                        locations.push({
-                            type: 'location',
-                            id: -this.suggestedEntities.indexOf(e)*10,
-                            onthefly: true,
-                            name: e.text,
-                            address: {
-                                id: e.current_household_address.address_id,
-                            },
-                            locationType: locationType
-                        });
-                    }
-                }
-            )
-            return locations;
-        },
-        makeConcernedThirdPartiesLocation(locationType) {
-            let locations = [];
-            this.suggestedEntities.forEach(
-                (e) => {
-                    if (e.type === 'thirdparty' && e.address !== null){
-                        locations.push({
-                            type: 'location',
-                            id: -this.suggestedEntities.indexOf(e)*10,
-                            onthefly: true,
-                            name: e.text,
-                            address: { id: e.address.address_id },
-                            locationType: locationType
-                        });
-                    }
-                }
-            )
-            return locations;
-        },
-        makeAccompanyingPeriodLocation(locationType) {
-            const accPeriodLocation = this.activity.accompanyingPeriod.location;
-            return {
-                type: 'location',
-                id: -1,
-                onthefly: true,
-                name: '__AccompanyingCourseLocation__',
-                address: {
-                    id: accPeriodLocation.address_id,
-                    text: `${accPeriodLocation.text} - ${accPeriodLocation.postcode.code} ${accPeriodLocation.postcode.name}`
-                },
-                locationType: locationType
-            }
-        }
     },
 };
 </script>

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

@@ -1,6 +1,7 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 import { postLocation } from './api';
+import prepareLocations from './store.locations.js';
 
 const debug = process.env.NODE_ENV !== 'production';
 //console.log('window.activity', window.activity);
@@ -25,6 +26,7 @@ const store = createStore({
         activity: window.activity,
         socialIssuesOther: [],
         socialActionsList: [],
+        availableLocations: [],
     },
     getters: {
         suggestedEntities(state) {
@@ -200,6 +202,9 @@ const store = createStore({
             console.log("### mutation: updateLocation", value);
             state.activity.location = value;
         },
+        addAvailableLocationGroup(state, group) {
+            state.availableLocations.push(group);
+        }
     },
     actions: {
         addIssueSelected({ commit }, issue) {
@@ -335,4 +340,6 @@ const store = createStore({
     },
 });
 
+prepareLocations(store);
+
 export default store;

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

@@ -0,0 +1,123 @@
+import {getLocations, getLocationTypeByDefaultFor, getUserCurrentLocation} from "./api";
+
+const makeConcernedPersonsLocation = (locationType, store) => {
+    let locations = [];
+    store.getters.suggestedEntities.forEach(
+        (e) => {
+            if (e.type === 'person' && e.current_household_address !== null){
+                locations.push({
+                    type: 'location',
+                    id: -store.getters.suggestedEntities.indexOf(e)*10,
+                    onthefly: true,
+                    name: e.text,
+                    address: {
+                        id: e.current_household_address.address_id,
+                    },
+                    locationType: locationType
+                });
+            }
+        }
+    )
+    return locations;
+};
+const makeConcernedThirdPartiesLocation = (locationType, store) => {
+    let locations = [];
+    store.getters.suggestedEntities.forEach(
+        (e) => {
+            if (e.type === 'thirdparty' && e.address !== null){
+                locations.push({
+                    type: 'location',
+                    id: -store.getters.suggestedEntities.indexOf(e)*10,
+                    onthefly: true,
+                    name: e.text,
+                    address: { id: e.address.address_id },
+                    locationType: locationType
+                });
+            }
+        }
+    )
+    return locations;
+};
+const makeAccompanyingPeriodLocation = (locationType, store) => {
+    const accPeriodLocation = store.state.activity.accompanyingPeriod.location;
+    return {
+        type: 'location',
+        id: -1,
+        onthefly: true,
+        name: '__AccompanyingCourseLocation__',
+        address: {
+            id: accPeriodLocation.address_id,
+            text: `${accPeriodLocation.text} - ${accPeriodLocation.postcode.code} ${accPeriodLocation.postcode.name}`
+        },
+        locationType: locationType
+    }
+};
+
+export default function prepareLocations(store) {
+
+// find the locations
+    let allLocations = getLocations().then(
+        (results) => {
+            store.commit('addAvailableLocationGroup', {
+                locationGroup: 'Autres localisations',
+                locations: results
+            });
+        }
+    );
+
+    let currentLocation = getUserCurrentLocation().then(
+        userCurrentLocation => {
+            if (null !== userCurrentLocation) {
+                store.commit('addAvailableLocationGroup', {
+                    locationGroup: 'Ma localisation',
+                    locations: [userCurrentLocation]
+                });
+            }
+        }
+    );
+
+    let partiesLocations = [], partyPromise;
+    ['person', 'thirdparty'].forEach(kind => {
+        partyPromise = getLocationTypeByDefaultFor(kind).then(
+            (kindLocationType) => {
+                if (kindLocationType) {
+                    let concernedKindLocations;
+                    if (kind === 'person') {
+                        concernedKindLocations = makeConcernedPersonsLocation(kindLocationType, store);
+                        // add location for the parcours into suggestions
+                        const personLocation = makeAccompanyingPeriodLocation(kindLocationType, store);
+                        store.commit('addAvailableLocationGroup', {
+                            locationGroup: 'Localisation du parcours',
+                            locations: [personLocation]
+                        });
+                    } else {
+                        concernedKindLocations = makeConcernedThirdPartiesLocation(kindLocationType, store);
+                    }
+
+                    store.commit('addAvailableLocationGroup', {
+                        locationGroup: kind === 'person' ? 'Usagers concernés' : 'Tiers concernés',
+                        locations: concernedKindLocations,
+                    });
+                }
+            }
+        );
+        partiesLocations.push(partyPromise);
+    });
+
+// when all location are loaded
+    Promise.all([allLocations, currentLocation, ...partiesLocations]).then(() => {
+        console.log('current location in activity', store.state.activity.location);
+        console.log('default loation id', window.default_location_id);
+        if (window.default_location_id) {
+            for (let group of store.state.availableLocations) {
+                console.log(group);
+                let location = group.locations.find((l) => l.id === window.default_location_id);
+                console.log(location);
+                if (location !== undefined) {
+                    store.dispatch('updateLocation', location);
+                    break;
+                }
+            }
+        }
+    });
+}

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js

@@ -1,6 +1,10 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 import { postLocation } from 'ChillActivityAssets/vuejs/Activity/api';
+import {
+    getLocations, getLocationTypeByDefaultFor,
+    getUserCurrentLocation
+} from "../../../../../ChillActivityBundle/Resources/public/vuejs/Activity/api";
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -217,9 +221,7 @@ const store = createStore({
              hiddenLocation.value = value.id;
          }
          commit("updateLocation", value);
-
       }
-
   }
 });