activity: suggest location based on accompanying period (WIP)

This commit is contained in:
nobohan 2021-11-23 14:19:19 +01:00
parent 7eeb2f2a7d
commit 92e59e211d

View File

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