Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-28 18:43:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

Create address on the fly field in event form

Browse Source
This commit is contained in:
Julie Lenaerts
2025-04-29 14:31:39 +02:00
parent 27f0bf28e9
commit bb71e084b8
15 changed files with 386 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
View File

@@ -21,10 +21,10 @@
>
<template #header>
<h2 class="modal-title">
{{ $t(getTextTitle) }}
{{ trans(getTextTitle) }}
<span v-if="flag.loading" class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
<span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
</span>
</h2>
</template>
@@ -43,7 +43,7 @@
<template #footer>
<button @click="openEditPane" class="btn btn-create">
{{ $t("create_a_new_address") }}
{{ trans(CREATE_A_NEW_ADDRESS) }}
</button>
</template>
</modal>
@@ -62,13 +62,13 @@
>
<template #before v-if="!bypassFirstStep">
<a class="btn btn-cancel" @click="resetPane">
{{ $t("action.cancel") }}
{{ trans(CANCEL) }}
</a>
</template>
<template #action>
<li>
<button @click="openEditPane" class="btn btn-create">
{{ $t("create_a_new_address") }}
{{ trans(CREATE_A_NEW_ADDRESS) }}
</button>
</li>
</template>
@@ -85,10 +85,10 @@
>
<template #header>
<h2 class="modal-title">
{{ $t(getTextTitle) }}
{{ trans(getTextTitle) }}
<span v-if="flag.loading" class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
<span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
</span>
</h2>
</template>
@@ -108,17 +108,17 @@
</template>
<template #footer>
<!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
<!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ trans(CANCEL) }}</button>-->
<button
v-if="!this.context.edit && this.useDatePane"
class="btn btn-update change-icon"
@click="closeEditPane"
>
{{ $t("nav.next") }}
{{ trans(NEXT) }}
<i class="fa fa-fw fa-arrow-right" />
</button>
<button v-else class="btn btn-save" @click="closeEditPane">
{{ $t("action.save") }}
{{ trans(SAVE) }}
</button>
</template>
</modal>
@@ -139,7 +139,7 @@
>
<template #before>
<a class="btn btn-cancel" @click="resetPane">
{{ $t("action.cancel") }}
{{ trans(CANCEL) }}
</a>
</template>
<template #action>
@@ -148,13 +148,13 @@
class="btn btn-update change-icon"
@click="closeEditPane"
>
{{ $t("nav.next") }}
{{ trans(NEXT) }}
<i class="fa fa-fw fa-arrow-right" />
</button>
</li>
<li v-else>
<button class="btn btn-save" @click="closeEditPane">
{{ $t("action.save") }}
{{ trans(SAVE) }}
</button>
</li>
</template>
@@ -171,10 +171,10 @@
>
<template #header>
<h2 class="modal-title">
{{ $t(getTextTitle) }}
{{ trans(getTextTitle) }}
<span v-if="flag.loading" class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
<span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
</span>
</h2>
</template>
@@ -193,10 +193,10 @@
<template #footer>
<button class="btn btn-misc" @click="openEditPane">
<i class="fa fa-fw fa-arrow-left" />
{{ $t("nav.previous") }}
{{ trans(PREVIOUS) }}
</button>
<button class="btn btn-save" @click="closeDatePane">
{{ $t("action.save") }}
{{ trans(SAVE) }}
</button>
<!-- -->
</template>
@@ -216,13 +216,13 @@
<template #before>
<button class="btn btn-misc" @click="openEditPane">
<i class="fa fa-fw fa-arrow-left" />
{{ $t("nav.previous") }}
{{ trans(PREVIOUS) }}
</button>
</template>
<template #action>
<li>
<button class="btn btn-save" @click="closeDatePane">
{{ $t("action.save") }}
{{ trans(SAVE) }}
</button>
</li>
</template>
@@ -244,9 +244,16 @@ import {
postPostalCode,
} from "../api";
import {
postAddressToPerson,
postAddressToHousehold,
} from "ChillPersonAssets/vuejs/_api/AddAddress.js";
CREATE_A_NEW_ADDRESS,
ADDRESS_LOADING,
ACTIVITY_CREATE_ADDRESS,
ACTIVITY_EDIT_ADDRESS,
CANCEL,
SAVE,
PREVIOUS,
NEXT,
trans,
} from "translator";
import ShowPane from "./ShowPane.vue";
import SuggestPane from "./SuggestPane.vue";
import EditPane from "./EditPane.vue";
@@ -254,6 +261,17 @@ import DatePane from "./DatePane.vue";
export default {
name: "AddAddress",
setup() {
return {
trans,
CREATE_A_NEW_ADDRESS,
ADDRESS_LOADING,
CANCEL,
SAVE,
PREVIOUS,
NEXT
};
},
props: ["context", "options", "addressChangedCallback"],
components: {
Modal,
@@ -373,9 +391,11 @@ export default {
(this.options.title.edit !== null ||
this.options.title.create !== null)
) {
console.log('this.options.title', this.options.title)
return this.context.edit
? this.options.title.edit
: this.options.title.create;
? ACTIVITY_EDIT_ADDRESS
: ACTIVITY_CREATE_ADDRESS;
}
return this.context.edit
? this.defaultz.title.edit

58
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
View File

@@ -1,6 +1,6 @@
<template>
<h4 class="h3">
{{ $t("fill_an_address") }}
{{ trans(ADDRESS_FILL_AN_ADDRESS) }}
</h4>
<div class="row my-3">
<div class="col-lg-6" v-if="!isNoAddress">
@@ -9,40 +9,40 @@
class="form-control"
type="text"
name="floor"
:placeholder="$t('floor')"
:placeholder="trans(ADDRESS_FLOOR)"
v-model="floor"
/>
<label for="floor">{{ $t("floor") }}</label>
<label for="floor">{{ trans(ADDRESS_FLOOR) }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="corridor"
:placeholder="$t('corridor')"
:placeholder="trans(ADDRESS_CORRIDOR)"
v-model="corridor"
/>
<label for="corridor">{{ $t("corridor") }}</label>
<label for="corridor">{{ trans(ADDRESS_CORRIDOR) }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="steps"
:placeholder="$t('steps')"
:placeholder="trans(ADDRESS_STEPS)"
v-model="steps"
/>
<label for="steps">{{ $t("steps") }}</label>
<label for="steps">{{ trans(ADDRESS_STEPS) }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="flat"
:placeholder="$t('flat')"
:placeholder="trans(ADDRESS_FLAT)"
v-model="flat"
/>
<label for="flat">{{ $t("flat") }}</label>
<label for="flat">{{ trans(ADDRESS_FLAT) }}</label>
</div>
</div>
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
@@ -52,10 +52,10 @@
type="text"
name="buildingName"
maxlength="255"
:placeholder="$t('buildingName')"
:placeholder="trans(ADDRESS_BUILDING_NAME)"
v-model="buildingName"
/>
<label for="buildingName">{{ $t("buildingName") }}</label>
<label for="buildingName">{{ trans(ADDRESS_BUILDING_NAME) }}</label>
</div>
<div class="form-floating my-1">
<input
@@ -63,10 +63,10 @@
type="text"
name="extra"
maxlength="255"
:placeholder="$t('extra')"
:placeholder="trans(ADDRESS_EXTRA)"
v-model="extra"
/>
<label for="extra">{{ $t("extra") }}</label>
<label for="extra">{{ trans(ADDRESS_EXTRA) }}</label>
</div>
<div class="form-floating my-1" v-if="!isNoAddress">
<input
@@ -74,18 +74,46 @@
type="text"
name="distribution"
maxlength="255"
:placeholder="$t('distribution')"
:placeholder="trans(ADDRESS_DISTRIBUTION)"
v-model="distribution"
/>
<label for="distribution">{{ $t("distribution") }}</label>
<label for="distribution">{{ trans(ADDRESS_DISTRIBUTION) }}</label>
</div>
</div>
</div>
</template>
<script>
import {
ADDRESS_STREET,
ADDRESS_STREET_NUMBER,
ADDRESS_FLOOR,
ADDRESS_CORRIDOR,
ADDRESS_STEPS,
ADDRESS_FLAT,
ADDRESS_BUILDING_NAME,
ADDRESS_DISTRIBUTION,
ADDRESS_EXTRA,
ADDRESS_FILL_AN_ADDRESS,
trans,
} from "translator";
export default {
name: "AddressMore",
setup() {
return {
ADDRESS_STREET,
ADDRESS_STREET_NUMBER,
ADDRESS_FLOOR,
ADDRESS_CORRIDOR,
ADDRESS_STEPS,
ADDRESS_FLAT,
ADDRESS_BUILDING_NAME,
ADDRESS_DISTRIBUTION,
ADDRESS_EXTRA,
ADDRESS_FILL_AN_ADDRESS,
trans,
};
},
props: ["entity", "isNoAddress"],
computed: {
floor: {

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="my-1">
<label class="col-form-label" for="addressSelector">{{
$t("address")
trans(ADDRESS_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')"
:placeholder="trans(ADDRESS_SELECT_ADDRESS)"
:tag-placeholder="trans(ADDRESS_CREATE_ADDRESS)"
:select-label="trans(MULTISELECT_SELECT_LABEL)"
:deselect-label="trans(ADDRESS_CREATE_ADDRESS)"
:selected-label="trans(MULTISELECT_SELECTED_LABEL)"
@search-change="listenInputSearch"
:internal-search="false"
ref="addressSelector"
@@ -42,10 +42,10 @@
class="form-control"
type="text"
name="street"
:placeholder="$t('street')"
:placeholder="trans(ADDRESS_STREET)"
v-model="street"
/>
<label for="street">{{ $t("street") }}</label>
<label for="street">{{ trans(ADDRESS_STREET) }}</label>
</div>
</div>
<div class="col-2">
@@ -54,10 +54,10 @@
class="form-control"
type="text"
name="streetNumber"
:placeholder="$t('streetNumber')"
:placeholder="trans(ADDRESS_STREET_NUMBER)"
v-model="streetNumber"
/>
<label for="streetNumber">{{ $t("streetNumber") }}</label>
<label for="streetNumber">{{ trans(ADDRESS_STREET_NUMBER) }}</label>
</div>
</div>
</div>
@@ -69,10 +69,32 @@ import {
searchReferenceAddresses,
fetchReferenceAddresses,
} from "../../api.js";
import {
ADDRESS_STREET,
ADDRESS_STREET_NUMBER,
ADDRESS_ADDRESS,
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
ADDRESS_SELECT_ADDRESS,
ADDRESS_CREATE_ADDRESS,
trans,
} from "translator";
export default {
name: "AddressSelection",
components: { VueMultiselect },
setup() {
return {
ADDRESS_STREET,
ADDRESS_STREET_NUMBER,
ADDRESS_ADDRESS,
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
ADDRESS_SELECT_ADDRESS,
ADDRESS_CREATE_ADDRESS,
trans,
};
},
props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
data() {
return {

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="my-1">
<label class="col-form-label">{{ $t("city") }}</label>
<label class="col-form-label">{{ trans(ADDRESS_CITY) }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@@ -12,15 +12,15 @@
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')"
:placeholder="trans(ADDRESS_SELECT_CITY)"
:select-label="trans(MULTISELECT_SELECT_LABEL)"
:deselect-label="trans(ADDRESS_CREATE_POSTAL_CODE)"
:selected-label="trans(MULTISELECT_SELECTED_LABEL)"
:taggable="true"
:multiple="false"
:internal-search="false"
@tag="addPostcode"
:tag-placeholder="$t('create_postal_code')"
:tag-placeholder="trans(ADDRESS_CREATE_POSTAL_CODE)"
:loading="isLoading"
:options="cities"
/>
@@ -36,10 +36,10 @@
class="form-control"
type="text"
id="code"
:placeholder="$t('postalCode_code')"
:placeholder="trans(ADDRESS_POSTAL_CODE_CODE)"
v-model="code"
/>
<label for="code">{{ $t("postalCode_code") }}</label>
<label for="code">{{ trans(ADDRESS_POSTAL_CODE_CODE) }}</label>
</div>
</div>
<div class="col-8">
@@ -48,10 +48,10 @@
class="form-control"
type="text"
id="name"
:placeholder="$t('postalCode_name')"
:placeholder="trans(ADDRESS_POSTAL_CODE_NAME)"
v-model="name"
/>
<label for="name">{{ $t("postalCode_name") }}</label>
<label for="name">{{ trans(ADDRESS_POSTAL_CODE_NAME) }}</label>
</div>
</div>
</div>
@@ -60,10 +60,32 @@
<script>
import VueMultiselect from "vue-multiselect";
import { searchCities, fetchCities } from "../../api.js";
import {
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
ADDRESS_POSTAL_CODE_CODE,
ADDRESS_POSTAL_CODE_NAME,
ADDRESS_CREATE_POSTAL_CODE,
ADDRESS_CITY,
ADDRESS_SELECT_CITY,
trans,
} from "translator";
export default {
name: "CitySelection",
components: { VueMultiselect },
setup() {
return {
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
ADDRESS_CITY,
ADDRESS_SELECT_CITY,
ADDRESS_POSTAL_CODE_CODE,
ADDRESS_POSTAL_CODE_NAME,
ADDRESS_CREATE_POSTAL_CODE,
trans,
};
},
props: [
"entity",
"context",

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{
$t("country")
trans(ADDRESS_COUNTRY)
}}</label>
<VueMultiselect
id="countrySelect"
label="name"
track-by="id"
:custom-label="transName"
:placeholder="$t('select_country')"
:placeholder="trans(ADDRESS_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-label="trans(MULTISELECT_SELECT_LABEL)"
:deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
:selected-label="trans(MULTISELECT_SELECTED_LABEL)"
@select="selectCountry"
@remove="remove"
/>
@@ -23,10 +23,28 @@
<script>
import VueMultiselect from "vue-multiselect";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import {
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
MULTISELECT_DESELECT_LABEL,
ADDRESS_COUNTRY,
ADDRESS_SELECT_COUNTRY,
trans,
} from "translator";
export default {
name: "CountrySelection",
components: { VueMultiselect },
setup() {
return {
MULTISELECT_SELECTED_LABEL,
MULTISELECT_SELECT_LABEL,
MULTISELECT_DESELECT_LABEL,
ADDRESS_COUNTRY,
ADDRESS_SELECT_COUNTRY,
trans,
};
},
props: ["context", "entity", "flag", "checkErrors"],
emits: ["getCities"],
data() {

21
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
View File

@@ -18,7 +18,7 @@
</div>
<h4 class="h3">
{{ $t("select_an_address_title") }}
{{ trans(ADDRESS_SELECT_AN_ADDRESS_TITLE) }}
</h4>
<div class="row my-3">
<div class="col-lg-6">
@@ -31,7 +31,7 @@
:value="valueConfidential"
/>
<label class="form-check-label" for="isConfidential">
{{ $t("isConfidential") }}
{{ trans(ADDRESS_IS_CONFIDENTIAL) }}
</label>
</div>
<div class="form-check">
@@ -43,7 +43,7 @@
:value="value"
/>
<label class="form-check-label" for="isNoAddress">
{{ $t("isNoAddress") }}
{{ trans(ADDRESS_IS_NO_ADDRESS) }}
</label>
</div>
@@ -108,6 +108,13 @@ import AddressSelection from "./AddAddress/AddressSelection";
import AddressMap from "./AddAddress/AddressMap";
import AddressMore from "./AddAddress/AddressMore";
import ActionButtons from "./ActionButtons.vue";
import {
ADDRESS_SELECT_AN_ADDRESS_TITLE,
ADDRESS_IS_CONFIDENTIAL,
ADDRESS_IS_NO_ADDRESS,
trans,
} from "translator";
export default {
name: "EditPane",
@@ -119,6 +126,14 @@ export default {
AddressMore,
ActionButtons,
},
setup() {
return {
trans,
ADDRESS_SELECT_AN_ADDRESS_TITLE,
ADDRESS_IS_CONFIDENTIAL,
ADDRESS_IS_NO_ADDRESS
};
},
props: [
"context",
"options",

56
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
View File

@@ -5,7 +5,7 @@
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
<span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
@@ -13,8 +13,8 @@
</div>
<div v-if="flag.success" class="alert alert-success">
{{ $t(getSuccessText) }}
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
{{ trans(getSuccessText) }}
<span v-if="forceRedirect">{{ trans(ADDRESS_WAIT_REDIRECTION) }}</span>
</div>
<div
@@ -28,7 +28,7 @@
<div class="no-address-yet">
<i class="fa fa-map-marker" aria-hidden="true" />
<p class="chill-no-data-statement">
{{ $t("not_yet_address") }}
{{ trans(ADDRESS_NOT_YET_ADDRESS) }}
</p>
<action-buttons
@@ -43,10 +43,10 @@
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
:title="trans(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
trans(getTextButton)
}}</span>
</button>
</template>
@@ -71,10 +71,10 @@
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
:title="trans(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
trans(getTextButton)
}}</span>
</button>
</template>
@@ -95,11 +95,11 @@
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
:title="trans(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
trans(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
@@ -109,13 +109,37 @@
<script>
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";
import {
ACTIVITY_CREATE_ADDRESS,
ACTIVITY_EDIT_ADDRESS,
ADDRESS_NOT_YET_ADDRESS,
ADDRESS_WAIT_REDIRECTION,
ADDRESS_LOADING,
ADDRESS_ADDRESS_EDIT_SUCCESS,
ADDRESS_ADDRESS_NEW_SUCCESS,
trans,
} from "translator";
export default {
name: "ShowPane",
methods: {
},
components: {
AddressRenderBox,
ActionButtons,
},
setup() {
return {
trans,
ACTIVITY_CREATE_ADDRESS,
ACTIVITY_EDIT_ADDRESS,
ADDRESS_NOT_YET_ADDRESS,
ADDRESS_WAIT_REDIRECTION,
ADDRESS_LOADING,
ADDRESS_ADDRESS_NEW_SUCCESS,
ADDRESS_ADDRESS_EDIT_SUCCESS
};
},
props: [
"context",
"defaultz",
@@ -156,18 +180,20 @@ export default {
(this.options.button.text.edit !== null ||
this.options.button.text.create !== null)
) {
// console.log('this.options.button.text', this.options.button.text)
return this.context.edit
? this.options.button.text.edit
: this.options.button.text.create;
? ACTIVITY_CREATE_ADDRESS
: ACTIVITY_EDIT_ADDRESS;
}
console.log('defaultz', this.defaultz);
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";
? ADDRESS_ADDRESS_EDIT_SUCCESS
: ADDRESS_ADDRESS_NEW_SUCCESS;
},
onlyButton() {
return typeof this.options.onlyButton !== "undefined"