mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-23 08:03:49 +00:00
eslint fixes
This commit is contained in:
@@ -1,130 +1,130 @@
|
||||
<template>
|
||||
<add-address
|
||||
:key="key"
|
||||
:context="context"
|
||||
:options="options"
|
||||
:address-changed-callback="submitAddress"
|
||||
ref="addAddress"
|
||||
/>
|
||||
<add-address
|
||||
:key="key"
|
||||
:context="context"
|
||||
:options="options"
|
||||
:address-changed-callback="submitAddress"
|
||||
ref="addAddress"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddAddress from "./components/AddAddress.vue";
|
||||
import {
|
||||
postAddressToHousehold,
|
||||
postAddressToPerson,
|
||||
postAddressToHousehold,
|
||||
postAddressToPerson,
|
||||
} from "ChillPersonAssets/vuejs/_api/AddAddress";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
AddAddress,
|
||||
name: "App",
|
||||
components: {
|
||||
AddAddress,
|
||||
},
|
||||
props: ["addAddress", "callback"],
|
||||
emits: ["addressEdited", "addressCreated"],
|
||||
computed: {
|
||||
context() {
|
||||
return this.addAddress.context;
|
||||
},
|
||||
props: ["addAddress", "callback"],
|
||||
emits: ["addressEdited", "addressCreated"],
|
||||
computed: {
|
||||
context() {
|
||||
return this.addAddress.context;
|
||||
},
|
||||
options() {
|
||||
return this.addAddress.options;
|
||||
},
|
||||
key() {
|
||||
return this.context.edit
|
||||
? "address_" + this.context.addressId
|
||||
: this.context.target.name + "_" + this.context.target.id;
|
||||
},
|
||||
options() {
|
||||
return this.addAddress.options;
|
||||
},
|
||||
mounted() {
|
||||
//console.log('AddAddress: data context', this.context);
|
||||
//console.log('AddAddress: data options', this.options);
|
||||
key() {
|
||||
return this.context.edit
|
||||
? "address_" + this.context.addressId
|
||||
: this.context.target.name + "_" + this.context.target.id;
|
||||
},
|
||||
methods: {
|
||||
displayErrors() {
|
||||
return this.$refs.addAddress.errorMsg;
|
||||
},
|
||||
submitAddress(payload) {
|
||||
console.log("@@@ click on Submit Address Button", payload);
|
||||
|
||||
// Existing address
|
||||
if (this.context.edit) {
|
||||
// address is already linked, just finish !
|
||||
this.$refs.addAddress.afterLastPaneAction({});
|
||||
this.$emit("addressEdited", payload);
|
||||
|
||||
// New created address
|
||||
} else {
|
||||
this.postAddressTo(payload);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Post new created address to targetEntity
|
||||
*/
|
||||
postAddressTo(payload) {
|
||||
this.$emit("addressCreated", payload);
|
||||
|
||||
console.log(
|
||||
"postAddress",
|
||||
payload.addressId,
|
||||
"To",
|
||||
payload.target,
|
||||
payload.targetId,
|
||||
);
|
||||
switch (payload.target) {
|
||||
case "household":
|
||||
postAddressToHousehold(payload.targetId, payload.addressId)
|
||||
.then(
|
||||
(address) =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.log("..household address", address);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
this.$refs.addAddress.flag.success = true;
|
||||
|
||||
// finish
|
||||
this.$refs.addAddress.afterLastPaneAction({
|
||||
addressId: address.address_id,
|
||||
});
|
||||
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
this.$refs.addAddress.errorMsg.push(error);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
});
|
||||
break;
|
||||
case "person":
|
||||
postAddressToPerson(payload.targetId, payload.addressId)
|
||||
.then(
|
||||
(address) =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.log("..person address", address);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
this.$refs.addAddress.flag.success = true;
|
||||
|
||||
// finish
|
||||
this.$refs.addAddress.afterLastPaneAction({
|
||||
addressId: address.address_id,
|
||||
});
|
||||
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
this.$refs.addAddress.errorMsg.push(error);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
});
|
||||
break;
|
||||
case "thirdparty":
|
||||
console.log("TODO write postAddressToThirdparty");
|
||||
break;
|
||||
default:
|
||||
this.$refs.addAddress.errorMsg.push(
|
||||
"That entity is not managed by address !",
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//console.log('AddAddress: data context', this.context);
|
||||
//console.log('AddAddress: data options', this.options);
|
||||
},
|
||||
methods: {
|
||||
displayErrors() {
|
||||
return this.$refs.addAddress.errorMsg;
|
||||
},
|
||||
submitAddress(payload) {
|
||||
console.log("@@@ click on Submit Address Button", payload);
|
||||
|
||||
// Existing address
|
||||
if (this.context.edit) {
|
||||
// address is already linked, just finish !
|
||||
this.$refs.addAddress.afterLastPaneAction({});
|
||||
this.$emit("addressEdited", payload);
|
||||
|
||||
// New created address
|
||||
} else {
|
||||
this.postAddressTo(payload);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Post new created address to targetEntity
|
||||
*/
|
||||
postAddressTo(payload) {
|
||||
this.$emit("addressCreated", payload);
|
||||
|
||||
console.log(
|
||||
"postAddress",
|
||||
payload.addressId,
|
||||
"To",
|
||||
payload.target,
|
||||
payload.targetId,
|
||||
);
|
||||
switch (payload.target) {
|
||||
case "household":
|
||||
postAddressToHousehold(payload.targetId, payload.addressId)
|
||||
.then(
|
||||
(address) =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.log("..household address", address);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
this.$refs.addAddress.flag.success = true;
|
||||
|
||||
// finish
|
||||
this.$refs.addAddress.afterLastPaneAction({
|
||||
addressId: address.address_id,
|
||||
});
|
||||
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
this.$refs.addAddress.errorMsg.push(error);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
});
|
||||
break;
|
||||
case "person":
|
||||
postAddressToPerson(payload.targetId, payload.addressId)
|
||||
.then(
|
||||
(address) =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.log("..person address", address);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
this.$refs.addAddress.flag.success = true;
|
||||
|
||||
// finish
|
||||
this.$refs.addAddress.afterLastPaneAction({
|
||||
addressId: address.address_id,
|
||||
});
|
||||
|
||||
resolve();
|
||||
}),
|
||||
)
|
||||
.catch((error) => {
|
||||
this.$refs.addAddress.errorMsg.push(error);
|
||||
this.$refs.addAddress.flag.loading = false;
|
||||
});
|
||||
break;
|
||||
case "thirdparty":
|
||||
console.log("TODO write postAddressToThirdparty");
|
||||
break;
|
||||
default:
|
||||
this.$refs.addAddress.errorMsg.push(
|
||||
"That entity is not managed by address !",
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<ul
|
||||
class="record_actions"
|
||||
v-if="!options.onlyButton"
|
||||
:class="{ 'sticky-form-buttons': isStickyForm }"
|
||||
>
|
||||
<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" />
|
||||
<ul
|
||||
class="record_actions"
|
||||
v-if="!options.onlyButton"
|
||||
:class="{ 'sticky-form-buttons': isStickyForm }"
|
||||
>
|
||||
<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,5 +1,5 @@
|
||||
<template>
|
||||
<div id="address_map" />
|
||||
<div id="address_map" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -8,112 +8,107 @@ 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,
|
||||
};
|
||||
name: "AddressMap",
|
||||
props: ["entity"],
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
center() {
|
||||
return this.entity.addressMap.center;
|
||||
},
|
||||
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.postcode &&
|
||||
null !== this.entity.address.postcode.center
|
||||
) {
|
||||
return this.entity.address.postcode.center;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
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;
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.map = L.map("address_map");
|
||||
/**
|
||||
*
|
||||
* @returns {coordinates: [float, float], type: "Point"}
|
||||
*/
|
||||
addressPoint() {
|
||||
if (Object.keys(this.entity.address).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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 (null !== this.entity.address.addressReference) {
|
||||
return this.entity.address.addressReference.point;
|
||||
}
|
||||
|
||||
this.map.scrollWheelZoom.disable();
|
||||
if (
|
||||
null !== this.entity.address.postcode &&
|
||||
null !== this.entity.address.postcode.center
|
||||
) {
|
||||
return this.entity.address.postcode.center;
|
||||
}
|
||||
|
||||
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],
|
||||
});
|
||||
|
||||
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));
|
||||
}
|
||||
},
|
||||
return null;
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
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();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,149 +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>
|
||||
</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>
|
||||
<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>
|
||||
</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,227 +1,223 @@
|
||||
<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>
|
||||
<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
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import {
|
||||
searchReferenceAddresses,
|
||||
fetchReferenceAddresses,
|
||||
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,
|
||||
};
|
||||
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;
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
writeNewPostalCode() {
|
||||
return this.entity.selected.writeNew.postCode;
|
||||
},
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
});
|
||||
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;
|
||||
},
|
||||
} 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;
|
||||
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(" "),
|
||||
};
|
||||
} 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,60 +1,60 @@
|
||||
<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>
|
||||
<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
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -62,190 +62,185 @@ 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,
|
||||
};
|
||||
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;
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
isCitySelectorOpen() {
|
||||
return this.$refs.citySelector.$data.isOpen;
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
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})` : "";
|
||||
},
|
||||
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);
|
||||
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 (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");
|
||||
},
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
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");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<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>
|
||||
@@ -25,63 +25,59 @@ import VueMultiselect from "vue-multiselect";
|
||||
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
|
||||
|
||||
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,
|
||||
),
|
||||
};
|
||||
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;
|
||||
},
|
||||
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];
|
||||
},
|
||||
mounted() {
|
||||
console.log("country selection mounted", this.value);
|
||||
if (this.value !== undefined) {
|
||||
this.selectCountry(this.value);
|
||||
}
|
||||
transName({ name }) {
|
||||
return localizeString(name);
|
||||
},
|
||||
methods: {
|
||||
selectCountryByCode(countryCode) {
|
||||
return this.entity.loaded.countries.filter(
|
||||
(c) => c.countryCode === countryCode,
|
||||
)[0];
|
||||
},
|
||||
transName({ name }) {
|
||||
return localizeString(name);
|
||||
},
|
||||
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();
|
||||
},
|
||||
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,69 +1,66 @@
|
||||
<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"
|
||||
<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"
|
||||
/>
|
||||
<span class="sr-only">{{ $t("loading") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
@@ -72,116 +69,113 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "DatePane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
name: "DatePane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"options",
|
||||
"defaultz",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"insideModal",
|
||||
],
|
||||
computed: {
|
||||
address() {
|
||||
return this.entity.address;
|
||||
},
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
},
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,104 +1,101 @@
|
||||
<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 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"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
<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">
|
||||
{{ 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"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -110,88 +107,88 @@ import AddressMore from "./AddAddress/AddressMore";
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "EditPane",
|
||||
components: {
|
||||
CountrySelection,
|
||||
CitySelection,
|
||||
AddressSelection,
|
||||
AddressMap,
|
||||
AddressMore,
|
||||
ActionButtons,
|
||||
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;
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"options",
|
||||
"defaultz",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"insideModal",
|
||||
"errors",
|
||||
"checkErrors",
|
||||
],
|
||||
emits: ["getCities", "getReferenceAddresses"],
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
valueConfidential: false,
|
||||
};
|
||||
loaded() {
|
||||
return this.entity.loaded;
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
selected() {
|
||||
return this.entity.selected;
|
||||
},
|
||||
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
|
||||
},
|
||||
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,109 +1,98 @@
|
||||
<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="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="
|
||||
!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"
|
||||
/>
|
||||
|
||||
<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 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">
|
||||
<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="
|
||||
!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"
|
||||
: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>
|
||||
@@ -111,103 +100,101 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
|
||||
import ActionButtons from "./ActionButtons.vue";
|
||||
|
||||
export default {
|
||||
name: "ShowPane",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
ActionButtons,
|
||||
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;
|
||||
},
|
||||
props: [
|
||||
"context",
|
||||
"defaultz",
|
||||
"options",
|
||||
"flag",
|
||||
"entity",
|
||||
"errorMsg",
|
||||
"useDatePane",
|
||||
],
|
||||
emits: ["openEditPane"],
|
||||
mounted() {
|
||||
//console.log('context', this.context)
|
||||
displayTextButton() {
|
||||
return typeof this.options.button !== "undefined" &&
|
||||
typeof this.options.button.displayText !== "undefined"
|
||||
? this.options.button.displayText
|
||||
: this.defaultz.button.displayText;
|
||||
},
|
||||
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;
|
||||
// }
|
||||
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;
|
||||
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;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.add-address-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,64 @@
|
||||
<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="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>
|
||||
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
|
||||
<h4 class="h3">
|
||||
{{ $t("address_suggestions") }}
|
||||
</h4>
|
||||
<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"
|
||||
<div class="flex-table AddressSuggestionList">
|
||||
<div
|
||||
v-for="(a, i) in context.suggestions"
|
||||
class="item-bloc"
|
||||
:key="`suggestions-${i}`"
|
||||
>
|
||||
<template #before>
|
||||
<slot name="before" />
|
||||
</template>
|
||||
<template #action>
|
||||
<slot name="action" />
|
||||
</template>
|
||||
<template #after>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
</action-buttons>
|
||||
<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>
|
||||
@@ -69,26 +66,26 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
|
||||
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