Squashed commit of the following:

commit 9e767fa3e0788d87437c235e51fcdc4f26f75d98
Author: Julien Fastré <julien.fastre@champs-libres.coop>
Date:   Mon Jan 17 15:28:02 2022 +0100

    traductions

commit db65134743
Author: nobohan <juminet@gmail.com>
Date:   Mon Jan 17 12:17:22 2022 +0100

    add person: increase z-index of toast and wait for validation before closing modal

commit 7af4c3434e
Merge: a09c8ee8a 46c6d0e29
Author: Julien Fastré <julien.fastre@champs-libres.coop>
Date:   Sun Jan 16 22:51:45 2022 +0100

    Merge remote-tracking branch 'origin/master' into issue357_front_end_validation

commit a09c8ee8af
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 15:47:11 2022 +0100

    upd CHANGELOG

commit a312a9463d
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 15:29:32 2022 +0100

    address: display error message if some fields are empty (street & streetnumber)

commit 0035128138
Author: nobohan <juminet@gmail.com>
Date:   Wed Jan 12 14:47:43 2022 +0100

    address: display error message if some fields are empty

commit 49cb154672
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 20:58:00 2022 +0100

    address: add field validation (WIP)

commit 1a7ec9e396
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 17:16:43 2022 +0100

    Activity: fix vuejs warning

commit fa0b9271c2
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 16:13:23 2022 +0100

    location: treat 422 error when POSTing new location

commit c7b9a1a3fe
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 16:00:29 2022 +0100

    location: fix error when creating a new location: a new location could not be added to the availableLocations due to refactoring

commit f1c61a2387
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 15:20:33 2022 +0100

    person: treat 422 error in AddPerson for thirdparty

commit 8f6a70b240
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 11:30:05 2022 +0100

    person: add validation for required fields in on-the-fly person

commit 40e4bf953f
Author: nobohan <juminet@gmail.com>
Date:   Tue Jan 11 09:34:15 2022 +0100

    vuejs: better violations message in 422 error handling

commit 378f3a16fc
Author: nobohan <juminet@gmail.com>
Date:   Mon Jan 10 18:11:02 2022 +0100

    person: on-the-fly person: first implementation of makeFetch for posting person
This commit is contained in:
2022-01-17 15:28:49 +01:00
parent 5e3d421b56
commit 7e932e838f
18 changed files with 226 additions and 77 deletions

View File

@@ -418,3 +418,8 @@ span.item-key {
background-color: #0000000a;
//text-decoration: dotted underline;
}
// increase toast message z-index (above all modals)
div.v-toast {
z-index: 10000!important;
}

View File

@@ -85,7 +85,9 @@ const fetchScopes = () => {
const ValidationException = (response) => {
const error = {};
error.name = 'ValidationException';
error.violations = response.violations.map((violation) => `${violation.title}`);
error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
error.titles = response.violations.map((violation) => violation.title);
error.propertyPaths = response.violations.map((violation) => violation.propertyPath);
return error;
}

View File

@@ -98,6 +98,8 @@
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:errors="this.errors"
v-bind:checkErrors="this.checkErrors"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
</edit-pane>
@@ -123,6 +125,8 @@
v-bind:defaultz="this.defaultz"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:errors="this.errors"
v-bind:checkErrors="this.checkErrors"
v-bind:insideModal="false"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
@@ -256,8 +260,10 @@ export default {
editPane: false,
datePane: false,
loading: false,
success: false
success: false,
dirty: false
},
errors: [],
defaultz: {
button: {
text: { create: 'add_an_address_title', edit: 'edit_address' },
@@ -529,6 +535,23 @@ export default {
});
},
checkErrors() {
this.errors = [];
if (this.flag.dirty) {
if (this.entity.selected.country === null) {
this.errors.push("Un pays doit être sélectionné.");
}
if (Object.keys(this.entity.selected.city).length === 0) {
this.errors.push("Une ville doit être sélectionnée.");
}
if (!this.entity.selected.isNoAddress) {
if (this.entity.selected.address.street === null || this.entity.selected.address.streetNumber === null) {
this.errors.push("Une adresse doit être sélectionnée.");
}
}
}
},
/*
* Make form ready for new changes
*/

View File

@@ -12,6 +12,7 @@
@search-change="listenInputSearch"
ref="addressSelector"
@select="selectAddress"
@remove="remove"
name="field"
track-by="id"
label="value"
@@ -56,7 +57,7 @@ import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js'
export default {
name: 'AddressSelection',
components: { VueMultiselect },
props: ['entity', 'context', 'updateMapCenter'],
props: ['entity', 'context', 'updateMapCenter', 'flag', 'checkErrors'],
data() {
return {
value: this.context.edit ? this.entity.address.addressReference : null,
@@ -109,6 +110,13 @@ export default {
this.entity.selected.address.streetNumber = value.streetNumber;
this.entity.selected.writeNew.address = false;
this.updateMapCenter(value.point);
this.flag.dirty = true;
this.checkErrors();
},
remove() {
this.flag.dirty = true;
this.entity.selected.address = {};
this.checkErrors();
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
@@ -149,6 +157,8 @@ export default {
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
this.entity.selected.writeNew.address = true;
this.flag.dirty = true;
this.checkErrors();
}
},
splitAddress(address) {

View File

@@ -7,6 +7,7 @@
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
@@ -55,12 +56,12 @@ import { searchCities, fetchCities } from '../../api.js';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter'],
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
emits: ['getReferenceAddresses'],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false
isLoading: false,
}
},
computed: {
@@ -123,6 +124,13 @@ export default {
if (value.center) {
this.updateMapCenter(value.center);
}
this.flag.dirty = true;
this.checkErrors();
},
remove() {
this.flag.dirty = true;
this.entity.selected.city = {};
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {

View File

@@ -12,7 +12,9 @@
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry">
@select="selectCountry"
@remove="remove"
>
</VueMultiselect>
</div>
</template>
@@ -23,7 +25,7 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['context', 'entity'],
props: ['context', 'entity', 'flag', 'checkErrors'],
emits: ['getCities'],
data() {
return {
@@ -34,14 +36,13 @@ export default {
},
computed: {
sortedCountries() {
//console.log('sorted countries');
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return sortedCountries;
}
},
},
mounted() {
this.init();
@@ -50,6 +51,7 @@ export default {
init() {
if (this.value !== undefined) {
this.selectCountry(this.value);
this.flag.dirty = false;
}
},
selectCountryByCode(countryCode) {
@@ -62,7 +64,13 @@ export default {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit('getCities', value);
}
this.checkErrors();
},
remove() {
this.flag.dirty = true;
this.entity.selected.country = null;
this.checkErrors();
},
}
};

View File

@@ -7,6 +7,12 @@
<span class="sr-only">Loading...</span>
</div>
<div v-if="errors.length" class="alert alert-warning" >
<ul>
<li v-for="(e, i) in errors" :key="i">{{ e }}</li>
</ul>
</div>
<h4 class="h3">{{ $t('select_an_address_title') }}</h4>
<div class="row my-3">
<div class="col-lg-6">
@@ -25,6 +31,8 @@
<country-selection
v-bind:context="context"
v-bind:entity="entity"
v-bind:flag="flag"
v-bind:checkErrors="checkErrors"
@getCities="$emit('getCities', selected.country)">
</country-selection>
@@ -33,13 +41,17 @@
v-bind:context="context"
v-bind:focusOnAddress="focusOnAddress"
v-bind:updateMapCenter="updateMapCenter"
v-bind:flag="flag"
v-bind:checkErrors="checkErrors"
@getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
</city-selection>
<address-selection v-if="!isNoAddress"
v-bind:entity="entity"
v-bind:context="context"
v-bind:updateMapCenter="updateMapCenter">
v-bind:updateMapCenter="updateMapCenter"
v-bind:flag="flag"
v-bind:checkErrors="checkErrors">
</address-selection>
</div>
@@ -99,7 +111,9 @@ export default {
'flag',
'entity',
'errorMsg',
'insideModal'
'insideModal',
'errors',
'checkErrors',
],
emits: ['getCities', 'getReferenceAddresses'],
data() {
@@ -128,7 +142,7 @@ export default {
get() {
return this.entity.selected.isNoAddress;
}
}
},
},
methods: {
focusOnAddress() {

View File

@@ -90,7 +90,7 @@ export default {
OnTheFlyThirdparty,
OnTheFlyCreate
},
props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent', 'canCloseModal'],
emits: ['saveFormOnTheFly'],
data() {
return {
@@ -162,7 +162,20 @@ export default {
return 'entity-' + this.type + ' badge-' + this.type;
}
},
watch: {
canCloseModal: {
handler: function(val, oldVal) {
if (val) {
this.closeModal();
}
},
deep: true
}
},
methods: {
closeModal() {
this.modal.showModal = false;
},
openModal() {
//console.log('## OPEN ON THE FLY MODAL');
//console.log('## type:', this.type, ', action:', this.action);
@@ -200,8 +213,6 @@ export default {
// pass datas to parent
this.$emit('saveFormOnTheFly', { type: type, data: data });
this.modal.showModal = false;
},
buildLocation(id, type) {
if (type === 'person') {