mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
location: code refactoring: move saveNewLocation + order of fields
This commit is contained in:
nobohan
parent
e52880bb53
commit
4e72bdead5
@ -20,7 +20,7 @@
|
||||
v-model="location">
|
||||
</VueMultiselect>
|
||||
|
||||
<new-location @saveNewLocation="saveNewLocation"></new-location>
|
||||
<new-location v-bind:locations="locations"></new-location>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
@ -30,7 +30,7 @@
|
||||
import { mapState } from "vuex";
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import NewLocation from './Location/NewLocation.vue';
|
||||
import { getLocations, postLocation } from '../api.js';
|
||||
import { getLocations } from '../api.js';
|
||||
|
||||
export default {
|
||||
name: "Location",
|
||||
@ -67,29 +67,6 @@ export default {
|
||||
},
|
||||
customLabel(value) {
|
||||
return `${value.locationType.title.fr} ${value.name}`;
|
||||
},
|
||||
saveNewLocation(selected) {
|
||||
console.log('saveNewLocation', selected);
|
||||
let body = {
|
||||
type: 'location',
|
||||
name: selected.name,
|
||||
address: {
|
||||
id: selected.addressId
|
||||
},
|
||||
locationType: {
|
||||
id: selected.type,
|
||||
type: 'location-type'
|
||||
},
|
||||
phonenumber1: selected.phonenumber1,
|
||||
phonenumber2: selected.phonenumber2,
|
||||
email: selected.email,
|
||||
}
|
||||
postLocation(body).then(location => new Promise(resolve => {
|
||||
console.log('postLocation', location);
|
||||
this.locations.push(location);
|
||||
this.$store.dispatch('updateLocation', location);
|
||||
resolve();
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,75 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-create" @click="openModal">
|
||||
{{ $t('activity.create_new_location') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-create" @click="openModal">
|
||||
{{ $t('activity.create_new_location') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<form>
|
||||
<div class="form-floating mb-3">
|
||||
<p v-if="errors.length">
|
||||
<b>{{ $t('activity.errors') }}</b>
|
||||
<ul>
|
||||
<li v-for="error in errors">{{ error }}</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<div class="form-floating mb-3">
|
||||
<select class="form-select form-select-lg" id="type" required v-model="selectType">
|
||||
<option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
|
||||
<option v-for="t in locationTypes" :value="t.id">
|
||||
{{ t.title.fr }}
|
||||
</option>
|
||||
</select>
|
||||
<label>{{ $t('activity.location_fields.type') }}</label>
|
||||
</div>
|
||||
|
||||
<add-address
|
||||
:context="addAddress.context"
|
||||
:options="addAddress.options"
|
||||
:addressChangedCallback="submitNewAddress"
|
||||
ref="addAddress">
|
||||
</add-address>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
|
||||
<label for="name">{{ $t('activity.location_fields.name') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
|
||||
<label for="name">{{ $t('activity.location_fields.name') }}</label>
|
||||
</div>
|
||||
<add-address
|
||||
:context="addAddress.context"
|
||||
:options="addAddress.options"
|
||||
:addressChangedCallback="submitNewAddress"
|
||||
ref="addAddress">
|
||||
</add-address>
|
||||
|
||||
<div class="form-floating mb-3">
|
||||
<select class="form-select form-select-lg" id="type" v-model="selectType">
|
||||
<option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
|
||||
<option v-for="t in locationTypes" :value="t.id">
|
||||
{{ t.title.fr }}
|
||||
</option>
|
||||
</select>
|
||||
<label>{{ $t('activity.location_fields.type') }}</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
|
||||
<label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3" v-if="hasPhonenumber1">
|
||||
<input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
|
||||
<label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
|
||||
<label for="email">{{ $t('activity.location_fields.email') }}</label>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<button class="btn btn-save"
|
||||
@click.prevent="saveNewLocation"
|
||||
>
|
||||
{{ $t('action.save') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
|
||||
<label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3" v-if="hasPhonenumber1">
|
||||
<input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
|
||||
<label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
|
||||
<label for="email">{{ $t('activity.location_fields.email') }}</label>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<button class="btn btn-save"
|
||||
@click.prevent="$emit('saveNewLocation', selected); modal.showModal = false;">
|
||||
{{ $t('action.save') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
</modal>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
|
||||
import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
|
||||
import { mapState } from "vuex";
|
||||
import { getLocationTypes } from "../../api";
|
||||
import { getLocationTypes, postLocation } from "../../api";
|
||||
|
||||
export default {
|
||||
name: "NewLocation",
|
||||
@ -77,9 +88,10 @@ export default {
|
||||
Modal,
|
||||
AddAddress,
|
||||
},
|
||||
emits: ['saveNewLocation'],
|
||||
props: ['locations'],
|
||||
data() {
|
||||
return {
|
||||
errors: [],
|
||||
selected: {
|
||||
type: {},
|
||||
name: null,
|
||||
@ -160,6 +172,18 @@ export default {
|
||||
this.getLocationTypesList();
|
||||
},
|
||||
methods: {
|
||||
checkForm() {
|
||||
console.log('check form')
|
||||
if (this.selected.type) {
|
||||
return true;
|
||||
}
|
||||
|
||||
this.errors = [];
|
||||
|
||||
if (!this.selected.type) {
|
||||
this.errors.push('Type of location required');
|
||||
}
|
||||
},
|
||||
getLocationTypesList() {
|
||||
getLocationTypes().then(response => new Promise(resolve => {
|
||||
console.log('getLocationTypes', response);
|
||||
@ -170,6 +194,31 @@ export default {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
saveNewLocation() {
|
||||
this.checkForm();
|
||||
console.log('saveNewLocation', this.selected);
|
||||
let body = {
|
||||
type: 'location',
|
||||
name: this.selected.name,
|
||||
address: {
|
||||
id: this.selected.addressId
|
||||
},
|
||||
locationType: {
|
||||
id: this.selected.type,
|
||||
type: 'location-type'
|
||||
},
|
||||
phonenumber1: this.selected.phonenumber1,
|
||||
phonenumber2: this.selected.phonenumber2,
|
||||
email: this.selected.email,
|
||||
}
|
||||
postLocation(body).then(location => new Promise(resolve => {
|
||||
console.log('postLocation', location);
|
||||
this.locations.push(location);
|
||||
this.$store.dispatch('updateLocation', location);
|
||||
resolve();
|
||||
this.modal.showModal = false;
|
||||
}));
|
||||
},
|
||||
submitNewAddress(payload) {
|
||||
console.log('submitNewAddress', payload);
|
||||
this.selected.addressId = payload.addressId;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user