mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-23 16:13:50 +00:00
Apply prettier rules
This commit is contained in:
@@ -1,37 +1,32 @@
|
||||
<template>
|
||||
<ul
|
||||
class="record_actions"
|
||||
v-if="!options.onlyButton"
|
||||
:class="{ 'sticky-form-buttons': isStickyForm }"
|
||||
>
|
||||
<li
|
||||
v-if="isStickyForm"
|
||||
class="cancel"
|
||||
<ul
|
||||
class="record_actions"
|
||||
v-if="!options.onlyButton"
|
||||
:class="{ 'sticky-form-buttons': isStickyForm }"
|
||||
>
|
||||
<slot name="before" />
|
||||
</li>
|
||||
<li>
|
||||
<slot name="action" />
|
||||
</li>
|
||||
<li v-if="isStickyForm">
|
||||
<slot name="after" />
|
||||
</li>
|
||||
</ul>
|
||||
<slot
|
||||
v-else
|
||||
name="action"
|
||||
/>
|
||||
<li v-if="isStickyForm" class="cancel">
|
||||
<slot name="before" />
|
||||
</li>
|
||||
<li>
|
||||
<slot name="action" />
|
||||
</li>
|
||||
<li v-if="isStickyForm">
|
||||
<slot name="after" />
|
||||
</li>
|
||||
</ul>
|
||||
<slot v-else name="action" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ActionButtons",
|
||||
props: ['options', 'defaultz'],
|
||||
computed: {
|
||||
isStickyForm() {
|
||||
return (typeof this.options.stickyActions !== 'undefined') ?
|
||||
this.options.stickyActions : this.defaultz.stickyActions;
|
||||
},
|
||||
}
|
||||
}
|
||||
name: "ActionButtons",
|
||||
props: ["options", "defaultz"],
|
||||
computed: {
|
||||
isStickyForm() {
|
||||
return typeof this.options.stickyActions !== "undefined"
|
||||
? this.options.stickyActions
|
||||
: this.defaultz.stickyActions;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,99 +1,119 @@
|
||||
<template>
|
||||
<div id="address_map" />
|
||||
<div id="address_map" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import L from 'leaflet';
|
||||
import markerIconPng from 'leaflet/dist/images/marker-icon.png'
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import L from "leaflet";
|
||||
import markerIconPng from "leaflet/dist/images/marker-icon.png";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
|
||||
const lonLatForLeaflet = (coordinates) => {
|
||||
return [coordinates[1], coordinates[0]];
|
||||
}
|
||||
return [coordinates[1], coordinates[0]];
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'AddressMap',
|
||||
props: ['entity'],
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
center() {
|
||||
return this.entity.addressMap.center;
|
||||
},
|
||||
hasAddressPoint() {
|
||||
if (Object.keys(this.entity.address).length === 0) {
|
||||
return false;
|
||||
}
|
||||
if (null !== this.entity.address.addressReference) {
|
||||
return true;
|
||||
}
|
||||
if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @returns {coordinates: [float, float], type: "Point"}
|
||||
*/
|
||||
addressPoint() {
|
||||
if (Object.keys(this.entity.address).length === 0) {
|
||||
return null;
|
||||
}
|
||||
name: "AddressMap",
|
||||
props: ["entity"],
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
center() {
|
||||
return this.entity.addressMap.center;
|
||||
},
|
||||
hasAddressPoint() {
|
||||
if (Object.keys(this.entity.address).length === 0) {
|
||||
return false;
|
||||
}
|
||||
if (null !== this.entity.address.addressReference) {
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
null !== this.entity.address.postcode &&
|
||||
null !== this.entity.address.postcode.center
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @returns {coordinates: [float, float], type: "Point"}
|
||||
*/
|
||||
addressPoint() {
|
||||
if (Object.keys(this.entity.address).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (null !== this.entity.address.addressReference) {
|
||||
return this.entity.address.addressReference.point;
|
||||
}
|
||||
if (null !== this.entity.address.addressReference) {
|
||||
return this.entity.address.addressReference.point;
|
||||
}
|
||||
|
||||
if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
|
||||
return this.entity.address.postcode.center;
|
||||
}
|
||||
if (
|
||||
null !== this.entity.address.postcode &&
|
||||
null !== this.entity.address.postcode.center
|
||||
) {
|
||||
return this.entity.address.postcode.center;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
init() {
|
||||
this.map = L.map('address_map');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.map = L.map("address_map");
|
||||
|
||||
if (!this.hasAddressPoint) {
|
||||
this.map.setView(lonLatForLeaflet(this.entity.addressMap.center), this.entity.addressMap.zoom);
|
||||
} else {
|
||||
this.map.setView(lonLatForLeaflet(this.addressPoint.coordinates), 15);
|
||||
}
|
||||
if (!this.hasAddressPoint) {
|
||||
this.map.setView(
|
||||
lonLatForLeaflet(this.entity.addressMap.center),
|
||||
this.entity.addressMap.zoom,
|
||||
);
|
||||
} else {
|
||||
this.map.setView(
|
||||
lonLatForLeaflet(this.addressPoint.coordinates),
|
||||
15,
|
||||
);
|
||||
}
|
||||
|
||||
this.map.scrollWheelZoom.disable();
|
||||
this.map.scrollWheelZoom.disable();
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(this.map);
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(this.map);
|
||||
|
||||
const markerIcon = L.icon({
|
||||
iconUrl: markerIconPng,
|
||||
iconAnchor: [12, 41],
|
||||
});
|
||||
const markerIcon = L.icon({
|
||||
iconUrl: markerIconPng,
|
||||
iconAnchor: [12, 41],
|
||||
});
|
||||
|
||||
if (!this.hasAddressPoint) {
|
||||
this.marker = L.marker(lonLatForLeaflet(this.entity.addressMap.center), {icon: markerIcon});
|
||||
} else {
|
||||
this.marker = L.marker(lonLatForLeaflet(this.addressPoint.coordinates), {icon: markerIcon});
|
||||
}
|
||||
this.marker.addTo(this.map);
|
||||
},
|
||||
update() {
|
||||
if (this.marker && this.entity.addressMap.center) {
|
||||
this.marker.setLatLng(lonLatForLeaflet(this.entity.addressMap.center));
|
||||
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
}
|
||||
if (!this.hasAddressPoint) {
|
||||
this.marker = L.marker(
|
||||
lonLatForLeaflet(this.entity.addressMap.center),
|
||||
{ icon: markerIcon },
|
||||
);
|
||||
} else {
|
||||
this.marker = L.marker(
|
||||
lonLatForLeaflet(this.addressPoint.coordinates),
|
||||
{ icon: markerIcon },
|
||||
);
|
||||
}
|
||||
this.marker.addTo(this.map);
|
||||
},
|
||||
update() {
|
||||
if (this.marker && this.entity.addressMap.center) {
|
||||
this.marker.setLatLng(
|
||||
lonLatForLeaflet(this.entity.addressMap.center),
|
||||
);
|
||||
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,158 +1,149 @@
|
||||
<template>
|
||||
<h4 class="h3">
|
||||
{{ $t('fill_an_address') }}
|
||||
</h4>
|
||||
<div class="row my-3">
|
||||
<div
|
||||
class="col-lg-6"
|
||||
v-if="!isNoAddress"
|
||||
>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"
|
||||
>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="corridor"
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"
|
||||
>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="steps"
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"
|
||||
>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="flat"
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"
|
||||
>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
</div>
|
||||
<h4 class="h3">
|
||||
{{ $t("fill_an_address") }}
|
||||
</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6" v-if="!isNoAddress">
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"
|
||||
/>
|
||||
<label for="floor">{{ $t("floor") }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="corridor"
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"
|
||||
/>
|
||||
<label for="corridor">{{ $t("corridor") }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="steps"
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"
|
||||
/>
|
||||
<label for="steps">{{ $t("steps") }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="flat"
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"
|
||||
/>
|
||||
<label for="flat">{{ $t("flat") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
|
||||
<div class="form-floating my-1" v-if="!isNoAddress">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength="255"
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"
|
||||
/>
|
||||
<label for="buildingName">{{ $t("buildingName") }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength="255"
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"
|
||||
/>
|
||||
<label for="extra">{{ $t("extra") }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1" v-if="!isNoAddress">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength="255"
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"
|
||||
/>
|
||||
<label for="distribution">{{ $t("distribution") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
|
||||
<div
|
||||
class="form-floating my-1"
|
||||
v-if="!isNoAddress"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength="255"
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"
|
||||
>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
</div>
|
||||
<div class="form-floating my-1">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength="255"
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"
|
||||
>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
</div>
|
||||
<div
|
||||
class="form-floating my-1"
|
||||
v-if="!isNoAddress"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength="255"
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"
|
||||
>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddressMore",
|
||||
props: ['entity', 'isNoAddress'],
|
||||
computed: {
|
||||
floor: {
|
||||
set(value) {
|
||||
this.entity.selected.address.floor = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.floor;
|
||||
}
|
||||
},
|
||||
corridor: {
|
||||
set(value) {
|
||||
this.entity.selected.address.corridor = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.corridor;
|
||||
}
|
||||
},
|
||||
steps: {
|
||||
set(value) {
|
||||
this.entity.selected.address.steps = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.steps;
|
||||
}
|
||||
},
|
||||
flat: {
|
||||
set(value) {
|
||||
this.entity.selected.address.flat = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.flat;
|
||||
}
|
||||
},
|
||||
buildingName: {
|
||||
set(value) {
|
||||
this.entity.selected.address.buildingName = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.buildingName;
|
||||
}
|
||||
},
|
||||
extra: {
|
||||
set(value) {
|
||||
this.entity.selected.address.extra = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.extra;
|
||||
}
|
||||
},
|
||||
distribution: {
|
||||
set(value) {
|
||||
this.entity.selected.address.distribution = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.distribution;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "AddressMore",
|
||||
props: ["entity", "isNoAddress"],
|
||||
computed: {
|
||||
floor: {
|
||||
set(value) {
|
||||
this.entity.selected.address.floor = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.floor;
|
||||
},
|
||||
},
|
||||
corridor: {
|
||||
set(value) {
|
||||
this.entity.selected.address.corridor = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.corridor;
|
||||
},
|
||||
},
|
||||
steps: {
|
||||
set(value) {
|
||||
this.entity.selected.address.steps = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.steps;
|
||||
},
|
||||
},
|
||||
flat: {
|
||||
set(value) {
|
||||
this.entity.selected.address.flat = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.flat;
|
||||
},
|
||||
},
|
||||
buildingName: {
|
||||
set(value) {
|
||||
this.entity.selected.address.buildingName = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.buildingName;
|
||||
},
|
||||
},
|
||||
extra: {
|
||||
set(value) {
|
||||
this.entity.selected.address.extra = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.extra;
|
||||
},
|
||||
},
|
||||
distribution: {
|
||||
set(value) {
|
||||
this.entity.selected.address.distribution = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.distribution;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,204 +1,227 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label
|
||||
class="col-form-label"
|
||||
for="addressSelector"
|
||||
>{{ $t('address') }}</label>
|
||||
<VueMultiselect
|
||||
id="addressSelector"
|
||||
v-model="value"
|
||||
:placeholder="$t('select_address')"
|
||||
:tag-placeholder="$t('create_address')"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('create_address')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@search-change="listenInputSearch"
|
||||
:internal-search="false"
|
||||
ref="addressSelector"
|
||||
@select="selectAddress"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
@tag="addAddress"
|
||||
:loading="isLoading"
|
||||
:options="addresses"
|
||||
/>
|
||||
</div>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="addressSelector">{{
|
||||
$t("address")
|
||||
}}</label>
|
||||
<VueMultiselect
|
||||
id="addressSelector"
|
||||
v-model="value"
|
||||
:placeholder="$t('select_address')"
|
||||
:tag-placeholder="$t('create_address')"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('create_address')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@search-change="listenInputSearch"
|
||||
:internal-search="false"
|
||||
ref="addressSelector"
|
||||
@select="selectAddress"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
@tag="addAddress"
|
||||
:loading="isLoading"
|
||||
:options="addresses"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="custom-address row g-1"
|
||||
v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)"
|
||||
>
|
||||
<div class="col-10">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"
|
||||
>
|
||||
<label for="street">{{ $t('street') }}</label>
|
||||
</div>
|
||||
<div
|
||||
class="custom-address row g-1"
|
||||
v-if="
|
||||
writeNewAddress ||
|
||||
writeNewPostalCode ||
|
||||
(isEnteredCustomAddress && !isAddressSelectorOpen)
|
||||
"
|
||||
>
|
||||
<div class="col-10">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"
|
||||
/>
|
||||
<label for="street">{{ $t("street") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"
|
||||
/>
|
||||
<label for="streetNumber">{{ $t("streetNumber") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"
|
||||
>
|
||||
<label for="streetNumber">{{ $t('streetNumber') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js';
|
||||
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import {
|
||||
searchReferenceAddresses,
|
||||
fetchReferenceAddresses,
|
||||
} from "../../api.js";
|
||||
|
||||
export default {
|
||||
name: 'AddressSelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['entity', 'context', 'updateMapCenter', 'flag', 'checkErrors'],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit ? this.entity.address.addressReference : null,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
writeNewAddress() {
|
||||
return this.entity.selected.writeNew.address;
|
||||
},
|
||||
writeNewPostalCode() {
|
||||
return this.entity.selected.writeNew.postCode;
|
||||
},
|
||||
isAddressSelectorOpen() {
|
||||
return this.$refs.addressSelector.$data.isOpen;
|
||||
},
|
||||
isEnteredCustomAddress() {
|
||||
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
|
||||
},
|
||||
addresses() {
|
||||
return this.entity.loaded.addresses;
|
||||
},
|
||||
street: {
|
||||
set(value) {
|
||||
this.entity.selected.address.street = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.street;
|
||||
}
|
||||
},
|
||||
streetNumber: {
|
||||
set(value) {
|
||||
this.entity.selected.address.streetNumber = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.streetNumber;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`
|
||||
},
|
||||
selectAddress(value) {
|
||||
this.entity.selected.address = value;
|
||||
this.entity.selected.address.addressReference = {
|
||||
id: value.id
|
||||
};
|
||||
this.entity.selected.address.street = value.street;
|
||||
this.entity.selected.address.streetNumber = value.streetNumber;
|
||||
this.entity.selected.writeNew.address = false;
|
||||
this.updateMapCenter(value.point);
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.address = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
|
||||
if (!this.entity.selected.writeNew.postcode && 'id' in this.entity.selected.city) {
|
||||
if (query.length > 2) {
|
||||
this.isLoading = true;
|
||||
searchReferenceAddresses(query, this.entity.selected.city).then(
|
||||
addresses => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.addresses = addresses.results;
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
console.log(error); //TODO better error handling
|
||||
this.isLoading = false;
|
||||
});
|
||||
} else {
|
||||
if (query.length === 0) { // Fetch all cities when suppressing the query
|
||||
this.isLoading = true;
|
||||
fetchReferenceAddresses(this.entity.selected.city).then(
|
||||
addresses => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.addresses = addresses.results;
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isAddressSelectorOpen) {
|
||||
this.$data.value = { text: query };
|
||||
} else if (this.isEnteredCustomAddress) {
|
||||
let addr = this.splitAddress(this.$data.value.text);
|
||||
this.entity.selected.address.street = addr.street;
|
||||
this.entity.selected.address.streetNumber = addr.number;
|
||||
this.entity.selected.writeNew.address = true;
|
||||
name: "AddressSelection",
|
||||
components: { VueMultiselect },
|
||||
props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit
|
||||
? this.entity.address.addressReference
|
||||
: null,
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
writeNewAddress() {
|
||||
return this.entity.selected.writeNew.address;
|
||||
},
|
||||
writeNewPostalCode() {
|
||||
return this.entity.selected.writeNew.postCode;
|
||||
},
|
||||
isAddressSelectorOpen() {
|
||||
return this.$refs.addressSelector.$data.isOpen;
|
||||
},
|
||||
isEnteredCustomAddress() {
|
||||
return (
|
||||
this.$data.value !== null &&
|
||||
typeof this.$data.value.text !== "undefined"
|
||||
);
|
||||
},
|
||||
addresses() {
|
||||
return this.entity.loaded.addresses;
|
||||
},
|
||||
street: {
|
||||
set(value) {
|
||||
this.entity.selected.address.street = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.street;
|
||||
},
|
||||
},
|
||||
streetNumber: {
|
||||
set(value) {
|
||||
this.entity.selected.address.streetNumber = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.address.streetNumber;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return value.streetNumber === undefined
|
||||
? value.street
|
||||
: `${value.streetNumber}, ${value.street}`;
|
||||
},
|
||||
selectAddress(value) {
|
||||
this.entity.selected.address = value;
|
||||
this.entity.selected.address.addressReference = {
|
||||
id: value.id,
|
||||
};
|
||||
this.entity.selected.address.street = value.street;
|
||||
this.entity.selected.address.streetNumber = value.streetNumber;
|
||||
this.entity.selected.writeNew.address = false;
|
||||
this.updateMapCenter(value.point);
|
||||
this.checkErrors();
|
||||
}
|
||||
},
|
||||
splitAddress(address) {
|
||||
let substr = address
|
||||
.split(',')
|
||||
.map(s => s.trim());
|
||||
if (substr.length === 1) {
|
||||
substr = address.split(' ');
|
||||
}
|
||||
let decimal = [];
|
||||
substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
|
||||
if (decimal[0] === true) {
|
||||
return {
|
||||
number: substr.shift(),
|
||||
street: substr.join(' ')
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.address = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
|
||||
if (
|
||||
!this.entity.selected.writeNew.postcode &&
|
||||
"id" in this.entity.selected.city
|
||||
) {
|
||||
if (query.length > 2) {
|
||||
this.isLoading = true;
|
||||
searchReferenceAddresses(query, this.entity.selected.city)
|
||||
.then(
|
||||
(addresses) =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.entity.loaded.addresses =
|
||||
addresses.results;
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log(error); //TODO better error handling
|
||||
this.isLoading = false;
|
||||
});
|
||||
} else {
|
||||
if (query.length === 0) {
|
||||
// Fetch all cities when suppressing the query
|
||||
this.isLoading = true;
|
||||
fetchReferenceAddresses(this.entity.selected.city)
|
||||
.then(
|
||||
(addresses) =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.entity.loaded.addresses =
|
||||
addresses.results;
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (decimal[decimal.length - 1] === true) {
|
||||
return {
|
||||
number: substr.pop(),
|
||||
street: substr.join(' ')
|
||||
|
||||
if (this.isAddressSelectorOpen) {
|
||||
this.$data.value = { text: query };
|
||||
} else if (this.isEnteredCustomAddress) {
|
||||
let addr = this.splitAddress(this.$data.value.text);
|
||||
this.entity.selected.address.street = addr.street;
|
||||
this.entity.selected.address.streetNumber = addr.number;
|
||||
this.entity.selected.writeNew.address = true;
|
||||
this.checkErrors();
|
||||
}
|
||||
}
|
||||
return {
|
||||
number: '',
|
||||
street: substr.join(' ')
|
||||
}
|
||||
},
|
||||
addAddress() {
|
||||
this.entity.selected.writeNew.address = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
splitAddress(address) {
|
||||
let substr = address.split(",").map((s) => s.trim());
|
||||
if (substr.length === 1) {
|
||||
substr = address.split(" ");
|
||||
}
|
||||
let decimal = [];
|
||||
substr.forEach((s, i) => {
|
||||
decimal[i] = /^\d+$/.test(s);
|
||||
});
|
||||
if (decimal[0] === true) {
|
||||
return {
|
||||
number: substr.shift(),
|
||||
street: substr.join(" "),
|
||||
};
|
||||
} else if (decimal[decimal.length - 1] === true) {
|
||||
return {
|
||||
number: substr.pop(),
|
||||
street: substr.join(" "),
|
||||
};
|
||||
}
|
||||
return {
|
||||
number: "",
|
||||
street: substr.join(" "),
|
||||
};
|
||||
},
|
||||
addAddress() {
|
||||
this.entity.selected.writeNew.address = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,221 +1,251 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label">{{ $t('city') }}</label>
|
||||
<VueMultiselect
|
||||
id="citySelector"
|
||||
v-model="value"
|
||||
@search-change="listenInputSearch"
|
||||
ref="citySelector"
|
||||
@select="selectCity"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_city')"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('create_postal_code')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
:internal-search="false"
|
||||
@tag="addPostcode"
|
||||
:tag-placeholder="$t('create_postal_code')"
|
||||
:loading="isLoading"
|
||||
:options="cities"
|
||||
/>
|
||||
</div>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label">{{ $t("city") }}</label>
|
||||
<VueMultiselect
|
||||
id="citySelector"
|
||||
v-model="value"
|
||||
@search-change="listenInputSearch"
|
||||
ref="citySelector"
|
||||
@select="selectCity"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_city')"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('create_postal_code')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
:internal-search="false"
|
||||
@tag="addPostcode"
|
||||
:tag-placeholder="$t('create_postal_code')"
|
||||
:loading="isLoading"
|
||||
:options="cities"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="custom-postcode row g-1"
|
||||
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"
|
||||
>
|
||||
<label for="code">{{ $t('postalCode_code') }}</label>
|
||||
</div>
|
||||
<div
|
||||
class="custom-postcode row g-1"
|
||||
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"
|
||||
/>
|
||||
<label for="code">{{ $t("postalCode_code") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"
|
||||
/>
|
||||
<label for="name">{{ $t("postalCode_name") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
id="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"
|
||||
>
|
||||
<label for="name">{{ $t('postalCode_name') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import { searchCities, fetchCities } from '../../api.js';
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import { searchCities, fetchCities } from "../../api.js";
|
||||
|
||||
export default {
|
||||
name: 'CitySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
|
||||
emits: ['getReferenceAddresses'],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit ? this.entity.address.postcode : null,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
writeNewPostcode() {
|
||||
return this.entity.selected.writeNew.postcode;
|
||||
},
|
||||
isCitySelectorOpen() {
|
||||
return this.$refs.citySelector.$data.isOpen;
|
||||
},
|
||||
isEnteredCustomCity() {
|
||||
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
|
||||
},
|
||||
cities() {
|
||||
return this.entity.loaded.cities.sort(
|
||||
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name
|
||||
)
|
||||
},
|
||||
name: {
|
||||
set(value) {
|
||||
this.entity.selected.postcode.name = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.postcode.name;
|
||||
}
|
||||
},
|
||||
code: {
|
||||
set(value) {
|
||||
this.entity.selected.postcode.code= value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.postcode.code;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log('writeNew.postcode', this.entity.selected.writeNew.postcode, 'in mounted');
|
||||
if (this.context.edit) {
|
||||
this.entity.selected.city = this.value;
|
||||
this.entity.selected.postcode.name = this.value.name;
|
||||
this.entity.selected.postcode.code = this.value.code;
|
||||
this.$emit('getReferenceAddresses', this.value);
|
||||
if (typeof this.value.center !== 'undefined') {
|
||||
this.updateMapCenter(this.value.center);
|
||||
if (this.value.center.coordinates) {
|
||||
this.entity.selected.postcode.coordinates = this.value.center.coordinates;
|
||||
name: "CitySelection",
|
||||
components: { VueMultiselect },
|
||||
props: [
|
||||
"entity",
|
||||
"context",
|
||||
"focusOnAddress",
|
||||
"updateMapCenter",
|
||||
"flag",
|
||||
"checkErrors",
|
||||
],
|
||||
emits: ["getReferenceAddresses"],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit ? this.entity.address.postcode : null,
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
writeNewPostcode() {
|
||||
return this.entity.selected.writeNew.postcode;
|
||||
},
|
||||
isCitySelectorOpen() {
|
||||
return this.$refs.citySelector.$data.isOpen;
|
||||
},
|
||||
isEnteredCustomCity() {
|
||||
return (
|
||||
this.$data.value !== null &&
|
||||
typeof this.$data.value.text !== "undefined"
|
||||
);
|
||||
},
|
||||
cities() {
|
||||
return this.entity.loaded.cities.sort(
|
||||
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
|
||||
);
|
||||
},
|
||||
name: {
|
||||
set(value) {
|
||||
this.entity.selected.postcode.name = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.postcode.name;
|
||||
},
|
||||
},
|
||||
code: {
|
||||
set(value) {
|
||||
this.entity.selected.postcode.code = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.postcode.code;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(
|
||||
"writeNew.postcode",
|
||||
this.entity.selected.writeNew.postcode,
|
||||
"in mounted",
|
||||
);
|
||||
if (this.context.edit) {
|
||||
this.entity.selected.city = this.value;
|
||||
this.entity.selected.postcode.name = this.value.name;
|
||||
this.entity.selected.postcode.code = this.value.code;
|
||||
this.$emit("getReferenceAddresses", this.value);
|
||||
if (typeof this.value.center !== "undefined") {
|
||||
this.updateMapCenter(this.value.center);
|
||||
if (this.value.center.coordinates) {
|
||||
this.entity.selected.postcode.coordinates =
|
||||
this.value.center.coordinates;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return (value.code && value.name) ? `${value.name} (${value.code})` : '';
|
||||
},
|
||||
selectCity(value) {
|
||||
console.log(value)
|
||||
this.entity.selected.city = value;
|
||||
this.entity.selected.postcode.name = value.name;
|
||||
this.entity.selected.postcode.code = value.code;
|
||||
if (value.center) {
|
||||
this.entity.selected.postcode.coordinates = value.center.coordinates;
|
||||
}
|
||||
this.entity.selected.writeNew.postcode = false;
|
||||
this.$emit('getReferenceAddresses', value);
|
||||
this.focusOnAddress();
|
||||
if (value.center) {
|
||||
this.updateMapCenter(value.center);
|
||||
}
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.city = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
if (query.length > 2) {
|
||||
this.isLoading = true;
|
||||
searchCities(query, this.entity.selected.country).then(
|
||||
cities => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
console.log(error); //TODO better error handling
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transName(value) {
|
||||
return value.code && value.name
|
||||
? `${value.name} (${value.code})`
|
||||
: "";
|
||||
},
|
||||
selectCity(value) {
|
||||
console.log(value);
|
||||
this.entity.selected.city = value;
|
||||
this.entity.selected.postcode.name = value.name;
|
||||
this.entity.selected.postcode.code = value.code;
|
||||
if (value.center) {
|
||||
this.entity.selected.postcode.coordinates =
|
||||
value.center.coordinates;
|
||||
}
|
||||
this.entity.selected.writeNew.postcode = false;
|
||||
this.$emit("getReferenceAddresses", value);
|
||||
this.focusOnAddress();
|
||||
if (value.center) {
|
||||
this.updateMapCenter(value.center);
|
||||
}
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.city = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
if (query.length > 2) {
|
||||
this.isLoading = true;
|
||||
searchCities(query, this.entity.selected.country)
|
||||
.then(
|
||||
(cities) =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.entity.loaded.cities =
|
||||
cities.results.filter(
|
||||
(c) => c.origin !== 3,
|
||||
); // filter out user-defined cities
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log(error); //TODO better error handling
|
||||
this.isLoading = false;
|
||||
});
|
||||
} else {
|
||||
if (query.length === 0) {
|
||||
// Fetch all cities when suppressing the query
|
||||
this.isLoading = true;
|
||||
fetchCities(this.entity.selected.country)
|
||||
.then(
|
||||
(cities) =>
|
||||
new Promise((resolve, reject) => {
|
||||
this.entity.loaded.cities =
|
||||
cities.results.filter(
|
||||
(c) => c.origin !== 3,
|
||||
); // filter out user-defined cities
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (this.isCitySelectorOpen) {
|
||||
this.$data.value = { text: query };
|
||||
} else if (this.isEnteredCustomCity) {
|
||||
let city = this.splitCity(this.$data.value.text);
|
||||
this.$refs.citySelector.currentOptionLabel = "";
|
||||
this.entity.selected.city = city;
|
||||
this.entity.selected.postcode.name = city.name;
|
||||
this.entity.selected.postcode.code = city.code;
|
||||
this.entity.selected.writeNew.postcode = true;
|
||||
console.log("writeNew.postcode true, in listenInputSearch");
|
||||
}
|
||||
},
|
||||
splitCity(city) {
|
||||
let substr = city.split("-").map((s) => s.trim());
|
||||
if (substr.length === 1) {
|
||||
substr = city.split(" ");
|
||||
}
|
||||
//console.log('substr', substr);
|
||||
let decimal = [];
|
||||
substr.forEach((s, i) => {
|
||||
decimal[i] = /^\d+$/.test(s);
|
||||
});
|
||||
} else {
|
||||
if (query.length === 0) { // Fetch all cities when suppressing the query
|
||||
this.isLoading = true;
|
||||
fetchCities(this.entity.selected.country).then(
|
||||
cities => new Promise((resolve, reject) => {
|
||||
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
|
||||
this.isLoading = false;
|
||||
resolve();
|
||||
}))
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
this.isLoading = false;
|
||||
});
|
||||
if (decimal[0] === true) {
|
||||
return {
|
||||
code: substr.shift(),
|
||||
name: substr.join(" "),
|
||||
};
|
||||
} else if (decimal[decimal.length - 1] === true) {
|
||||
return {
|
||||
code: substr.pop(),
|
||||
name: substr.join(" "),
|
||||
};
|
||||
}
|
||||
}
|
||||
if (this.isCitySelectorOpen) {
|
||||
this.$data.value = { text: query };
|
||||
} else if (this.isEnteredCustomCity) {
|
||||
let city = this.splitCity(this.$data.value.text);
|
||||
this.$refs.citySelector.currentOptionLabel = '';
|
||||
this.entity.selected.city = city;
|
||||
this.entity.selected.postcode.name = city.name;
|
||||
this.entity.selected.postcode.code = city.code;
|
||||
return {
|
||||
code: "",
|
||||
name: substr.join(" "),
|
||||
};
|
||||
},
|
||||
addPostcode() {
|
||||
console.log("addPostcode: pass here ?? never, it seems");
|
||||
this.entity.selected.writeNew.postcode = true;
|
||||
console.log('writeNew.postcode true, in listenInputSearch');
|
||||
}
|
||||
},
|
||||
splitCity(city) {
|
||||
let substr = city
|
||||
.split('-')
|
||||
.map(s => s.trim());
|
||||
if (substr.length === 1) {
|
||||
substr = city.split(' ');
|
||||
}
|
||||
//console.log('substr', substr);
|
||||
let decimal = [];
|
||||
substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
|
||||
if (decimal[0] === true) {
|
||||
return {
|
||||
code: substr.shift(),
|
||||
name: substr.join(' ')
|
||||
}
|
||||
}
|
||||
else if (decimal[decimal.length - 1] === true) {
|
||||
return {
|
||||
code: substr.pop(),
|
||||
name: substr.join(' ')
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: '',
|
||||
name: substr.join(' ')
|
||||
}
|
||||
},
|
||||
addPostcode() {
|
||||
console.log('addPostcode: pass here ?? never, it seems');
|
||||
this.entity.selected.writeNew.postcode = true;
|
||||
console.log('writeNew.postcode true, in addPostcode');
|
||||
}
|
||||
}
|
||||
console.log("writeNew.postcode true, in addPostcode");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,76 +1,86 @@
|
||||
<template>
|
||||
<div class="my-1">
|
||||
<label
|
||||
class="col-form-label"
|
||||
for="countrySelect"
|
||||
>{{ $t('country') }}</label>
|
||||
<VueMultiselect
|
||||
id="countrySelect"
|
||||
label="name"
|
||||
track-by="id"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_country')"
|
||||
:options="sortedCountries"
|
||||
v-model="value"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('multiselect.deselect_label')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@select="selectCountry"
|
||||
@remove="remove"
|
||||
/>
|
||||
</div>
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="countrySelect">{{
|
||||
$t("country")
|
||||
}}</label>
|
||||
<VueMultiselect
|
||||
id="countrySelect"
|
||||
label="name"
|
||||
track-by="id"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_country')"
|
||||
:options="sortedCountries"
|
||||
v-model="value"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('multiselect.deselect_label')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@select="selectCountry"
|
||||
@remove="remove"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
|
||||
export default {
|
||||
name: 'CountrySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['context', 'entity', 'flag', 'checkErrors'],
|
||||
emits: ['getCities'],
|
||||
data() {
|
||||
return {
|
||||
value: this.selectCountryByCode(
|
||||
this.context.edit ? this.entity.selected.country.code : this.context.defaults.default_country
|
||||
)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sortedCountries() {
|
||||
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() {
|
||||
console.log('country selection mounted', this.value);
|
||||
if (this.value !== undefined) {
|
||||
this.selectCountry(this.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectCountryByCode(countryCode) {
|
||||
return this.entity.loaded.countries.filter(c => c.countryCode === countryCode)[0];
|
||||
},
|
||||
transName ({ name }) {
|
||||
return name.fr //TODO multilang
|
||||
},
|
||||
selectCountry(value) {
|
||||
//console.log('select country', value);
|
||||
this.entity.selected.country = value;
|
||||
this.$emit('getCities', value);
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.country = null;
|
||||
this.checkErrors();
|
||||
},
|
||||
|
||||
}
|
||||
name: "CountrySelection",
|
||||
components: { VueMultiselect },
|
||||
props: ["context", "entity", "flag", "checkErrors"],
|
||||
emits: ["getCities"],
|
||||
data() {
|
||||
return {
|
||||
value: this.selectCountryByCode(
|
||||
this.context.edit
|
||||
? this.entity.selected.country.code
|
||||
: this.context.defaults.default_country,
|
||||
),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sortedCountries() {
|
||||
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() {
|
||||
console.log("country selection mounted", this.value);
|
||||
if (this.value !== undefined) {
|
||||
this.selectCountry(this.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectCountryByCode(countryCode) {
|
||||
return this.entity.loaded.countries.filter(
|
||||
(c) => c.countryCode === countryCode,
|
||||
)[0];
|
||||
},
|
||||
transName({ name }) {
|
||||
return name.fr; //TODO multilang
|
||||
},
|
||||
selectCountry(value) {
|
||||
//console.log('select country', value);
|
||||
this.entity.selected.country = value;
|
||||
this.$emit("getCities", value);
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.entity.selected.country = null;
|
||||
this.checkErrors();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,166 +1,187 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="insideModal === false"
|
||||
class="loading"
|
||||
>
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t('loading') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="errorMsg && errorMsg.length > 0"
|
||||
class="alert alert-danger"
|
||||
>
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<address-render-box :address="selectedAddress" />
|
||||
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="showDateFrom"
|
||||
class="col-lg-6 address-valid date-since"
|
||||
>
|
||||
<h3>{{ $t(getValidFromDateText) }}</h3>
|
||||
<div class="input-group mb-3">
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="validFrom"
|
||||
><i class="fa fa-fw fa-calendar" /></span>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control form-control-lg"
|
||||
name="validFrom"
|
||||
:placeholder="$t(getValidFromDateText)"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom"
|
||||
>
|
||||
</div>
|
||||
<div v-if="insideModal === false" class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t("loading") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showDateTo"
|
||||
class="col-lg-6 address-valid date-until"
|
||||
>
|
||||
<h3>{{ $t(getValidToDateText) }}</h3>
|
||||
<div class="input-group mb-3">
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="validTo"
|
||||
><i class="fa fa-fw fa-calendar" /></span>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control form-control-lg"
|
||||
name="validTo"
|
||||
:placeholder="$t(getValidToDateText)"
|
||||
v-model="validTo"
|
||||
aria-describedby="validTo"
|
||||
>
|
||||
</div>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
<address-render-box :address="selectedAddress" />
|
||||
|
||||
<div class="row">
|
||||
<div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
|
||||
<h3>{{ $t(getValidFromDateText) }}</h3>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="validFrom"
|
||||
><i class="fa fa-fw fa-calendar"
|
||||
/></span>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control form-control-lg"
|
||||
name="validFrom"
|
||||
:placeholder="$t(getValidFromDateText)"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showDateTo" class="col-lg-6 address-valid date-until">
|
||||
<h3>{{ $t(getValidToDateText) }}</h3>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="validTo"
|
||||
><i class="fa fa-fw fa-calendar"
|
||||
/></span>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control form-control-lg"
|
||||
name="validTo"
|
||||
:placeholder="$t(getValidToDateText)"
|
||||
v-model="validTo"
|
||||
aria-describedby="validTo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
import { dateToISO, ISOToDate } from "ChillMainAssets/chill/js/date";
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "DatePane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'options',
|
||||
'defaultz',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'insideModal'
|
||||
],
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
validFrom: {
|
||||
set(value) {
|
||||
this.entity.selected.valid.from = ISOToDate(value);
|
||||
},
|
||||
get() {
|
||||
return dateToISO(this.entity.selected.valid.from);
|
||||
}
|
||||
},
|
||||
validTo: {
|
||||
set(value) {
|
||||
this.entity.selected.valid.to = ISOToDate(value);
|
||||
},
|
||||
get() {
|
||||
return dateToISO(this.entity.selected.valid.to);
|
||||
}
|
||||
},
|
||||
getValidFromDateText() {
|
||||
return (this.context.target.name === 'household') ? 'move_date' : 'validFrom';
|
||||
},
|
||||
getValidToDateText() {
|
||||
return 'validTo';
|
||||
},
|
||||
showDateFrom() {
|
||||
return !this.context.edit && this.options.useDate.validFrom;
|
||||
},
|
||||
showDateTo() {
|
||||
return !this.context.edit && this.options.useDate.validTo;
|
||||
},
|
||||
selectedAddress() {
|
||||
let address = {};
|
||||
name: "DatePane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"options",
|
||||
"defaultz",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"insideModal",
|
||||
],
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
validFrom: {
|
||||
set(value) {
|
||||
this.entity.selected.valid.from = ISOToDate(value);
|
||||
},
|
||||
get() {
|
||||
return dateToISO(this.entity.selected.valid.from);
|
||||
},
|
||||
},
|
||||
validTo: {
|
||||
set(value) {
|
||||
this.entity.selected.valid.to = ISOToDate(value);
|
||||
},
|
||||
get() {
|
||||
return dateToISO(this.entity.selected.valid.to);
|
||||
},
|
||||
},
|
||||
getValidFromDateText() {
|
||||
return this.context.target.name === "household"
|
||||
? "move_date"
|
||||
: "validFrom";
|
||||
},
|
||||
getValidToDateText() {
|
||||
return "validTo";
|
||||
},
|
||||
showDateFrom() {
|
||||
return !this.context.edit && this.options.useDate.validFrom;
|
||||
},
|
||||
showDateTo() {
|
||||
return !this.context.edit && this.options.useDate.validTo;
|
||||
},
|
||||
selectedAddress() {
|
||||
let address = {};
|
||||
|
||||
address['country'] = (this.entity.selected.country) ? this.entity.selected.country : null;
|
||||
address['postcode'] = (this.entity.selected.postcode) ? this.entity.selected.postcode : null;
|
||||
address["country"] = this.entity.selected.country
|
||||
? this.entity.selected.country
|
||||
: null;
|
||||
address["postcode"] = this.entity.selected.postcode
|
||||
? this.entity.selected.postcode
|
||||
: null;
|
||||
|
||||
if (this.entity.selected.address) {
|
||||
let number = (this.entity.selected.address.streetNumber) ? this.entity.selected.address.streetNumber : null;
|
||||
let street = (this.entity.selected.address.street) ? this.entity.selected.address.street : null;
|
||||
address['text'] = number + ', ' + street;
|
||||
if (this.entity.selected.address) {
|
||||
let number = this.entity.selected.address.streetNumber
|
||||
? this.entity.selected.address.streetNumber
|
||||
: null;
|
||||
let street = this.entity.selected.address.street
|
||||
? this.entity.selected.address.street
|
||||
: null;
|
||||
address["text"] = number + ", " + street;
|
||||
|
||||
address['street'] = (this.entity.selected.address.street) ? this.entity.selected.address.street : null;
|
||||
address['streetNumber'] = (this.entity.selected.address.streetNumber) ? this.entity.selected.address.streetNumber : null;
|
||||
address['floor'] = (this.entity.selected.address.floor) ? this.entity.selected.address.floor : null;
|
||||
address['corridor'] = (this.entity.selected.address.corridor) ? this.entity.selected.address.corridor : null;
|
||||
address['steps'] = (this.entity.selected.address.steps) ? this.entity.selected.address.steps : null;
|
||||
address['flat'] = (this.entity.selected.address.flat) ? this.entity.selected.address.flat : null;
|
||||
address['buildingName'] = (this.entity.selected.address.buildingName) ? this.entity.selected.address.buildingName : null;
|
||||
address['distribution'] = (this.entity.selected.address.distribution) ? this.entity.selected.address.distribution : null;
|
||||
address['extra'] = (this.entity.selected.address.extra) ? this.entity.selected.address.extra : null;
|
||||
}
|
||||
address["street"] = this.entity.selected.address.street
|
||||
? this.entity.selected.address.street
|
||||
: null;
|
||||
address["streetNumber"] = this.entity.selected.address
|
||||
.streetNumber
|
||||
? this.entity.selected.address.streetNumber
|
||||
: null;
|
||||
address["floor"] = this.entity.selected.address.floor
|
||||
? this.entity.selected.address.floor
|
||||
: null;
|
||||
address["corridor"] = this.entity.selected.address.corridor
|
||||
? this.entity.selected.address.corridor
|
||||
: null;
|
||||
address["steps"] = this.entity.selected.address.steps
|
||||
? this.entity.selected.address.steps
|
||||
: null;
|
||||
address["flat"] = this.entity.selected.address.flat
|
||||
? this.entity.selected.address.flat
|
||||
: null;
|
||||
address["buildingName"] = this.entity.selected.address
|
||||
.buildingName
|
||||
? this.entity.selected.address.buildingName
|
||||
: null;
|
||||
address["distribution"] = this.entity.selected.address
|
||||
.distribution
|
||||
? this.entity.selected.address.distribution
|
||||
: null;
|
||||
address["extra"] = this.entity.selected.address.extra
|
||||
? this.entity.selected.address.extra
|
||||
: null;
|
||||
}
|
||||
|
||||
if (this.entity.selected.valid) {
|
||||
address['validFrom'] = (this.entity.selected.valid.from) ? dateToISO(this.entity.selected.valid.from) : null;
|
||||
address['validTo'] = (this.entity.selected.valid.to) ? dateToISO(this.entity.selected.valid.to) : null;
|
||||
}
|
||||
if (this.entity.selected.valid) {
|
||||
address["validFrom"] = this.entity.selected.valid.from
|
||||
? dateToISO(this.entity.selected.valid.from)
|
||||
: null;
|
||||
address["validTo"] = this.entity.selected.valid.to
|
||||
? dateToISO(this.entity.selected.valid.to)
|
||||
: null;
|
||||
}
|
||||
|
||||
return address;
|
||||
}
|
||||
}
|
||||
}
|
||||
return address;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,216 +1,197 @@
|
||||
<template>
|
||||
<div class="address-form">
|
||||
<!-- Not display in modal -->
|
||||
<div
|
||||
v-if="insideModal === false"
|
||||
class="loading"
|
||||
>
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<div class="address-form">
|
||||
<!-- Not display in modal -->
|
||||
<div v-if="insideModal === false" class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<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"
|
||||
<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">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isConfidential"
|
||||
v-model="isConfidential"
|
||||
:value="valueConfidential"
|
||||
/>
|
||||
<label class="form-check-label" for="isConfidential">
|
||||
{{ $t("isConfidential") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
:value="value"
|
||||
/>
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t("isNoAddress") }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
:context="context"
|
||||
:entity="entity"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
@get-cities="$emit('getCities', selected.country)"
|
||||
/>
|
||||
|
||||
<city-selection
|
||||
:entity="entity"
|
||||
:context="context"
|
||||
:focus-on-address="focusOnAddress"
|
||||
:update-map-center="updateMapCenter"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
@get-reference-addresses="
|
||||
$emit('getReferenceAddresses', selected.city)
|
||||
"
|
||||
/>
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
:entity="entity"
|
||||
:context="context"
|
||||
:update-map-center="updateMapCenter"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
<address-map :entity="entity" ref="addressMap" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more :entity="entity" :is-no-address="isNoAddress" />
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
{{ e }}
|
||||
</li>
|
||||
</ul>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
|
||||
<h4 class="h3">
|
||||
{{ $t('select_an_address_title') }}
|
||||
</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isConfidential"
|
||||
v-model="isConfidential"
|
||||
:value="valueConfidential"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="isConfidential"
|
||||
>
|
||||
{{ $t('isConfidential') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
:value="value"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="isNoAddress"
|
||||
>
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
:context="context"
|
||||
:entity="entity"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
@get-cities="$emit('getCities', selected.country)"
|
||||
/>
|
||||
|
||||
<city-selection
|
||||
:entity="entity"
|
||||
:context="context"
|
||||
:focus-on-address="focusOnAddress"
|
||||
:update-map-center="updateMapCenter"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
@get-reference-addresses="$emit('getReferenceAddresses', selected.city)"
|
||||
/>
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
:entity="entity"
|
||||
:context="context"
|
||||
:update-map-center="updateMapCenter"
|
||||
:flag="flag"
|
||||
:check-errors="checkErrors"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
<address-map
|
||||
:entity="entity"
|
||||
ref="addressMap"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more
|
||||
:entity="entity"
|
||||
:is-no-address="isNoAddress"
|
||||
/>
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountrySelection from './AddAddress/CountrySelection';
|
||||
import CitySelection from './AddAddress/CitySelection';
|
||||
import AddressSelection from './AddAddress/AddressSelection';
|
||||
import AddressMap from './AddAddress/AddressMap';
|
||||
import AddressMore from './AddAddress/AddressMore';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
import CountrySelection from "./AddAddress/CountrySelection";
|
||||
import CitySelection from "./AddAddress/CitySelection";
|
||||
import AddressSelection from "./AddAddress/AddressSelection";
|
||||
import AddressMap from "./AddAddress/AddressMap";
|
||||
import AddressMore from "./AddAddress/AddressMore";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "EditPane",
|
||||
components: {
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'options',
|
||||
'defaultz',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'insideModal',
|
||||
'errors',
|
||||
'checkErrors',
|
||||
],
|
||||
emits: ['getCities', 'getReferenceAddresses'],
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
valueConfidential: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
loaded() {
|
||||
return this.entity.loaded;
|
||||
},
|
||||
selected() {
|
||||
return this.entity.selected;
|
||||
},
|
||||
addressMap() {
|
||||
return this.entity.addressMap;
|
||||
},
|
||||
isConfidential: {
|
||||
set(value) {
|
||||
this.entity.selected.confidential = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.confidential;
|
||||
}
|
||||
},
|
||||
isNoAddress: {
|
||||
set(value) {
|
||||
console.log('isNoAddress value', value);
|
||||
this.entity.selected.isNoAddress = value;
|
||||
this.checkErrors();
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.isNoAddress;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focusOnAddress() {
|
||||
const addressSelector = document.getElementById('addressSelector');
|
||||
if (addressSelector !== null) {
|
||||
addressSelector.focus();
|
||||
}
|
||||
},
|
||||
updateMapCenter(point) {
|
||||
console.log('point', point);
|
||||
this.addressMap.center[0] = point.coordinates[0];
|
||||
this.addressMap.center[1] = point.coordinates[1];
|
||||
this.$refs.addressMap.update(); // cast child methods
|
||||
}
|
||||
}
|
||||
name: "EditPane",
|
||||
components: {
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"options",
|
||||
"defaultz",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"insideModal",
|
||||
"errors",
|
||||
"checkErrors",
|
||||
],
|
||||
emits: ["getCities", "getReferenceAddresses"],
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
valueConfidential: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
loaded() {
|
||||
return this.entity.loaded;
|
||||
},
|
||||
selected() {
|
||||
return this.entity.selected;
|
||||
},
|
||||
addressMap() {
|
||||
return this.entity.addressMap;
|
||||
},
|
||||
isConfidential: {
|
||||
set(value) {
|
||||
this.entity.selected.confidential = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.confidential;
|
||||
},
|
||||
},
|
||||
isNoAddress: {
|
||||
set(value) {
|
||||
console.log("isNoAddress value", value);
|
||||
this.entity.selected.isNoAddress = value;
|
||||
this.checkErrors();
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.isNoAddress;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focusOnAddress() {
|
||||
const addressSelector = document.getElementById("addressSelector");
|
||||
if (addressSelector !== null) {
|
||||
addressSelector.focus();
|
||||
}
|
||||
},
|
||||
updateMapCenter(point) {
|
||||
console.log("point", point);
|
||||
this.addressMap.center[0] = point.coordinates[0];
|
||||
this.addressMap.center[1] = point.coordinates[1];
|
||||
this.$refs.addressMap.update(); // cast child methods
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div.address-form {
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,199 +1,213 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!onlyButton"
|
||||
class="mt-4 flex-grow-1"
|
||||
>
|
||||
<div class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t('loading') }}</span>
|
||||
</div>
|
||||
<div v-if="!onlyButton" class="mt-4 flex-grow-1">
|
||||
<div class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t("loading") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="errorMsg && errorMsg.length > 0"
|
||||
class="alert alert-danger"
|
||||
>
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="flag.success"
|
||||
class="alert alert-success"
|
||||
>
|
||||
{{ $t(getSuccessText) }}
|
||||
<span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
|
||||
</div>
|
||||
<div v-if="flag.success" class="alert alert-success">
|
||||
{{ $t(getSuccessText) }}
|
||||
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')"
|
||||
class="mt-5"
|
||||
>
|
||||
<div class="no-address-yet">
|
||||
<i
|
||||
class="fa fa-map-marker"
|
||||
aria-hidden="true"
|
||||
<div
|
||||
v-if="
|
||||
!this.context.edit &&
|
||||
!this.flag.success &&
|
||||
this.context.target.name !== 'household'
|
||||
"
|
||||
class="mt-5"
|
||||
>
|
||||
<div class="no-address-yet">
|
||||
<i class="fa fa-map-marker" aria-hidden="true" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("not_yet_address") }}
|
||||
</p>
|
||||
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{
|
||||
$t(getTextButton)
|
||||
}}</span>
|
||||
</button>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-render-box
|
||||
:address="address"
|
||||
:is-multiline="false"
|
||||
:use-date-pane="useDatePane"
|
||||
/>
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t('not_yet_address') }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="this.context.target.name === 'household' || this.context.edit"
|
||||
>
|
||||
<action-buttons :options="this.options" :defaultz="this.defaultz">
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{
|
||||
$t(getTextButton)
|
||||
}}</span>
|
||||
</button>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="onlyButton">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{
|
||||
$t(getTextButton)
|
||||
}}</span>
|
||||
</button>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-render-box
|
||||
:address="address"
|
||||
:is-multiline="false"
|
||||
:use-date-pane="useDatePane"
|
||||
/>
|
||||
|
||||
<div v-if="this.context.target.name === 'household' || this.context.edit">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
|
||||
</button>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="onlyButton">
|
||||
<action-buttons
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
class="add-address-btn"
|
||||
>
|
||||
<template #action>
|
||||
<button
|
||||
@click.prevent="$emit('openEditPane')"
|
||||
class="btn"
|
||||
:class="getClassButton"
|
||||
type="button"
|
||||
name="button"
|
||||
:title="$t(getTextButton)"
|
||||
>
|
||||
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
|
||||
</button>
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: 'ShowPane',
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'defaultz',
|
||||
'options',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'useDatePane'
|
||||
],
|
||||
emits: ['openEditPane'],
|
||||
mounted() {
|
||||
//console.log('context', this.context)
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
displayTextButton() {
|
||||
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
|
||||
this.options.button.displayText : this.defaultz.button.displayText;
|
||||
},
|
||||
getClassButton() {
|
||||
let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
|
||||
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
|
||||
`${this.options.button.size} ` : '';
|
||||
return `${size}${type}`;
|
||||
},
|
||||
getTextButton() {
|
||||
if ( typeof this.options.button.text !== 'undefined'
|
||||
&& ( this.options.button.text.edit !== null
|
||||
|| this.options.button.text.create !== null
|
||||
)) {
|
||||
return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
|
||||
}
|
||||
return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
|
||||
},
|
||||
getSuccessText() {
|
||||
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
|
||||
},
|
||||
onlyButton() {
|
||||
return (typeof this.options.onlyButton !== 'undefined') ?
|
||||
this.options.onlyButton : this.defaultz.onlyButton;
|
||||
},
|
||||
forceRedirect() {
|
||||
return (!(this.context.backUrl === null || typeof this.context.backUrl === 'undefined'));
|
||||
},
|
||||
// showMessageWhenNoAddress() {
|
||||
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
|
||||
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
|
||||
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
|
||||
// }
|
||||
// return !this.context.edit && !this.address.id && this.options.stickyActions;
|
||||
// }
|
||||
}
|
||||
name: "ShowPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"defaultz",
|
||||
"options",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"useDatePane",
|
||||
],
|
||||
emits: ["openEditPane"],
|
||||
mounted() {
|
||||
//console.log('context', this.context)
|
||||
},
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
displayTextButton() {
|
||||
return typeof this.options.button !== "undefined" &&
|
||||
typeof this.options.button.displayText !== "undefined"
|
||||
? this.options.button.displayText
|
||||
: this.defaultz.button.displayText;
|
||||
},
|
||||
getClassButton() {
|
||||
let type = this.context.edit
|
||||
? this.defaultz.button.type.edit
|
||||
: this.defaultz.button.type.create;
|
||||
let size =
|
||||
typeof this.options.button !== "undefined" &&
|
||||
this.options.button.size !== null
|
||||
? `${this.options.button.size} `
|
||||
: "";
|
||||
return `${size}${type}`;
|
||||
},
|
||||
getTextButton() {
|
||||
if (
|
||||
typeof this.options.button.text !== "undefined" &&
|
||||
(this.options.button.text.edit !== null ||
|
||||
this.options.button.text.create !== null)
|
||||
) {
|
||||
return this.context.edit
|
||||
? this.options.button.text.edit
|
||||
: this.options.button.text.create;
|
||||
}
|
||||
return this.context.edit
|
||||
? this.defaultz.button.text.edit
|
||||
: this.defaultz.button.text.create;
|
||||
},
|
||||
getSuccessText() {
|
||||
return this.context.edit
|
||||
? "address_edit_success"
|
||||
: "address_new_success";
|
||||
},
|
||||
onlyButton() {
|
||||
return typeof this.options.onlyButton !== "undefined"
|
||||
? this.options.onlyButton
|
||||
: this.defaultz.onlyButton;
|
||||
},
|
||||
forceRedirect() {
|
||||
return !(
|
||||
this.context.backUrl === null ||
|
||||
typeof this.context.backUrl === "undefined"
|
||||
);
|
||||
},
|
||||
// showMessageWhenNoAddress() {
|
||||
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
|
||||
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
|
||||
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
|
||||
// }
|
||||
// return !this.context.edit && !this.address.id && this.options.stickyActions;
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.address-container {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.no-address-yet {
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
padding:1.5rem;
|
||||
margin-bottom:2rem;
|
||||
i {
|
||||
font-size:2rem;
|
||||
margin-bottom:2rem;
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,100 +1,94 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="insideModal === false"
|
||||
class="loading"
|
||||
>
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t('loading') }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="errorMsg && errorMsg.length > 0"
|
||||
class="alert alert-danger"
|
||||
>
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<h4 class="h3">
|
||||
{{ $t('address_suggestions') }}
|
||||
</h4>
|
||||
|
||||
<div class="flex-table AddressSuggestionList">
|
||||
<div
|
||||
v-for="(a, i) in context.suggestions"
|
||||
class="item-bloc"
|
||||
:key="`suggestions-${i}`"
|
||||
>
|
||||
<div class="float-button bottom">
|
||||
<div class="box">
|
||||
<div class="action">
|
||||
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-sm btn-choose"
|
||||
@click="this.pickAddress(a)"
|
||||
>
|
||||
{{ $t('use_this_address') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<address-render-box :address="a" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="insideModal === false" class="loading">
|
||||
<i
|
||||
v-if="flag.loading"
|
||||
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
|
||||
/>
|
||||
<span class="sr-only">{{ $t("loading") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<h4 class="h3">
|
||||
{{ $t("address_suggestions") }}
|
||||
</h4>
|
||||
|
||||
<div class="flex-table AddressSuggestionList">
|
||||
<div
|
||||
v-for="(a, i) in context.suggestions"
|
||||
class="item-bloc"
|
||||
:key="`suggestions-${i}`"
|
||||
>
|
||||
<div class="float-button bottom">
|
||||
<div class="box">
|
||||
<div class="action">
|
||||
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-sm btn-choose"
|
||||
@click="this.pickAddress(a)"
|
||||
>
|
||||
{{ $t("use_this_address") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<address-render-box :address="a" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<action-buttons
|
||||
v-if="insideModal === false"
|
||||
:options="this.options"
|
||||
:defaultz="this.defaultz"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
|
||||
import ActionButtons from './ActionButtons.vue';
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "SuggestPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons
|
||||
},
|
||||
props: [
|
||||
'context',
|
||||
'options',
|
||||
'defaultz',
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'insideModal',
|
||||
],
|
||||
computed: {},
|
||||
methods: {
|
||||
pickAddress(address) {
|
||||
console.log('pickAddress in suggest pane', address);
|
||||
this.$emit('pickAddress', address);
|
||||
},
|
||||
}
|
||||
}
|
||||
name: "SuggestPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"options",
|
||||
"defaultz",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"insideModal",
|
||||
],
|
||||
computed: {},
|
||||
methods: {
|
||||
pickAddress(address) {
|
||||
console.log("pickAddress in suggest pane", address);
|
||||
this.$emit("pickAddress", address);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user