AddAddress modal: make title dynamically passed by parent

This commit is contained in:
Mathieu Jaumotte 2021-08-02 13:26:23 +02:00
parent 886924a7e5
commit d916b575da
3 changed files with 26 additions and 20 deletions

View File

@ -4,6 +4,8 @@
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2> <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
<h2 v-else>{{ $t('edit_a_new_address') }}</h2> <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
<add-address <add-address
modalAddTitle="add_an_address_title"
modalEditTitle="edit_an_address_title"
@addNewAddress="addNewAddress"> @addNewAddress="addNewAddress">
</add-address> </add-address>
</div> </div>
@ -14,10 +16,10 @@
</show-address> </show-address>
</div> </div>
</div> </div>
<div v-if="!edit" class='person-address__valid'> <div v-if="!edit" class='person-address__valid'>
<h2>{{ $t('date') }}</h2> <h2>{{ $t('date') }}</h2>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span> <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
<input type="date" class="form-control form-control-lg" name="validFrom" <input type="date" class="form-control form-control-lg" name="validFrom"
@ -25,7 +27,7 @@
v-model="validFrom" v-model="validFrom"
aria-describedby="validFrom" /> aria-describedby="validFrom" />
</div> </div>
<div v-if="errors.length > 0"> <div v-if="errors.length > 0">
{{ errors }} {{ errors }}
</div> </div>

View File

@ -1,9 +1,9 @@
<template> <template>
<button v-if="!edit" class="btn btn-create mt-4" @click="openModal"> <button v-if="!edit" class="btn btn-create mt-4" @click="openModal">
{{ $t('add_an_address_title') }} {{ $t(modalAddTitle) }}
</button> </button>
<button v-else class="btn btn-create mt-4" @click="openModal"> <button v-else class="btn btn-create mt-4" @click="openModal">
{{ $t('edit_an_address_title') }} {{ $t(modalEditTitle) }}
</button> </button>
<teleport to="body"> <teleport to="body">
@ -12,25 +12,25 @@
@close="modal.showModal = false"> @close="modal.showModal = false">
<template v-slot:header> <template v-slot:header>
<h3 v-if="!edit" class="modal-title">{{ $t('add_an_address_title') }}</h3> <h3 v-if="!edit" class="modal-title">{{ $t(modalAddTitle) }}</h3>
<h3 v-if="edit" class="modal-title">{{ $t('edit_an_address_title') }}</h3> <h3 v-if="edit" class="modal-title">{{ $t(modalEditTitle) }}</h3>
</template> </template>
<template v-slot:body> <template v-slot:body>
<div class="address-form"> <div class="address-form">
<h4 class="h3">{{ $t('select_an_address_title') }} <h4 class="h3">{{ $t('select_an_address_title') }}
<span v-if="loading"> <span v-if="loading">
<i class="fa fa-circle-o-notch fa-spin fa-lg"></i> <i class="fa fa-circle-o-notch fa-spin fa-lg"></i>
</span> </span>
</h4> </h4>
<div class="row my-3"> <div class="row my-3">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-check"> <div class="form-check">
<input type="checkbox" <input type="checkbox"
class="form-check-input" class="form-check-input"
id="isNoAddress" id="isNoAddress"
v-model="isNoAddress" v-model="isNoAddress"
v-bind:value="value" /> v-bind:value="value" />
@ -38,18 +38,18 @@
{{ $t('isNoAddress') }} {{ $t('isNoAddress') }}
</label> </label>
</div> </div>
<country-selection <country-selection
v-bind:address="address" v-bind:address="address"
v-bind:getCities="getCities"> v-bind:getCities="getCities">
</country-selection> </country-selection>
<city-selection <city-selection
v-bind:address="address" v-bind:address="address"
v-bind:focusOnAddress="focusOnAddress" v-bind:focusOnAddress="focusOnAddress"
v-bind:getReferenceAddresses="getReferenceAddresses"> v-bind:getReferenceAddresses="getReferenceAddresses">
</city-selection> </city-selection>
<address-selection <address-selection
v-if="!isNoAddress" v-if="!isNoAddress"
v-bind:address="address" v-bind:address="address"
@ -58,15 +58,15 @@
</div> </div>
<div class="col-lg-6 mt-3 mt-lg-0"> <div class="col-lg-6 mt-3 mt-lg-0">
<address-map <address-map
v-bind:address="address" v-bind:address="address"
ref="addressMap"> ref="addressMap">
</address-map> </address-map>
</div> </div>
</div> </div>
<address-more <address-more
v-if="!isNoAddress" v-if="!isNoAddress"
v-bind:address="address"> v-bind:address="address">
@ -107,6 +107,8 @@ export default {
AddressMore AddressMore
}, },
props: [ props: [
'modalAddTitle',
'modalEditTitle'
], ],
emits: ['addNewAddress'], emits: ['addNewAddress'],
data() { data() {

View File

@ -5,6 +5,8 @@
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2> <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
<h2 v-else>{{ $t('edit_a_new_address') }}</h2> <h2 v-else>{{ $t('edit_a_new_address') }}</h2>
<add-address <add-address
modalAddTitle="add_an_address_title"
modalEditTitle="edit_an_address_title"
@addNewAddress="addNewAddress"> @addNewAddress="addNewAddress">
</add-address> </add-address>
</div> </div>
@ -17,7 +19,7 @@
</div> </div>
<div v-if="!edit" class='household__address-move__valid'> <div v-if="!edit" class='household__address-move__valid'>
<h2>{{ $t('move_date') }}</h2> <h2>{{ $t('move_date') }}</h2>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span> <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
<input type="date" class="form-control form-control-lg" name="validFrom" <input type="date" class="form-control form-control-lg" name="validFrom"
@ -25,7 +27,7 @@
v-model="validFrom" v-model="validFrom"
aria-describedby="validFrom" /> aria-describedby="validFrom" />
</div> </div>
<div v-if="errors.length > 0"> <div v-if="errors.length > 0">
{{ errors }} {{ errors }}
</div> </div>