From 92e59e211d06c77e7f9b6782765e21418d13ef96 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 23 Nov 2021 14:19:19 +0100
Subject: [PATCH] activity: suggest location based on accompanying period (WIP)

---
 .../vuejs/Activity/components/Location.vue    | 76 ++++++++++++-------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
index 5fa3360b7..147184098 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue
@@ -2,10 +2,9 @@
     <teleport to="#location">
         <div class="mb-3 row">
             <label class="col-form-label col-sm-4">
-                {{ $t('activity.location') }}
+                {{ $t("activity.location") }}
             </label>
             <div class="col-sm-8">
-
                 <VueMultiselect
                     name="selectLocation"
                     id="selectLocation"
@@ -17,7 +16,8 @@
                     :placeholder="$t('activity.choose_location')"
                     :custom-label="customLabel"
                     :options="locations"
-                    v-model="location">
+                    v-model="location"
+                >
                 </VueMultiselect>
 
                 <new-location v-bind:locations="locations"></new-location>
@@ -27,49 +27,69 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import VueMultiselect from 'vue-multiselect';
-import NewLocation from './Location/NewLocation.vue';
-import { getLocations } from '../api.js';
+import { mapState, mapGetters } from "vuex";
+import VueMultiselect from "vue-multiselect";
+import NewLocation from "./Location/NewLocation.vue";
+import { getLocations } from "../api.js";
 
 export default {
     name: "Location",
     components: {
         NewLocation,
-        VueMultiselect
+        VueMultiselect,
     },
     data() {
         return {
-            locations: []
-        }
+            locations: [],
+        };
     },
     computed: {
-        ...mapState(['activity']),
+        ...mapState(["activity"]),
+        ...mapGetters(["suggestedEntities"]),
         location: {
             get() {
                 return this.activity.location;
             },
             set(value) {
-                this.$store.dispatch('updateLocation', value);
-            }
-        }
+                this.$store.dispatch("updateLocation", value);
+            },
+        },
     },
     mounted() {
-        getLocations().then(response => new Promise(resolve => {
-            console.log('getLocations', response);
-            this.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);
-            }
-            resolve();
-        }))
+        getLocations().then(
+            (response) =>
+                new Promise((resolve) => {
+                    console.log("getLocations", response);
+                    this.locations = [
+                        ...this.getAccompanyingPeriodLocation(),
+                        ...response.results,
+                        ...this.createConcernedPersonsLocation(),
+                    ];
+                    if (window.default_location_id) {
+                        let location = this.locations.filter(
+                            (l) => l.id === window.default_location_id
+                        );
+                        this.$store.dispatch("updateLocation", location);
+                    }
+                    resolve();
+                })
+        );
     },
     methods: {
         customLabel(value) {
-            return `${value.locationType.title.fr} ${value.name ? value.name : ''}`;
-        }
-    }
-}
-
+            return `${value.locationType.title.fr} ${
+                value.name ? value.name : ""
+            }`;
+        },
+        getAccompanyingPeriodLocation() {
+            let location = this.activity.accompanyingPeriod.location;
+            return location;
+        },
+        createConcernedPersonsLocation() {
+            let entities = this.suggestedEntities;
+            console.log(entities);
+            return []; // TODO WIP
+        },
+    },
+};
 </script>