household address: UI of the adress move form

This commit is contained in:
nobohan
2021-06-10 14:34:14 +02:00
parent 4c025184b4
commit 1551ea796d
5 changed files with 121 additions and 98 deletions

View File

@@ -1,37 +1,50 @@
<template>
<div class='household-address__create'>
<h2>{{ $t('create_a_new_address') }}</h2>
<add-address
@addNewAddress="addNewAddress">
</add-address>
<input
type="date"
name="validFrom"
:placeholder="$t('validFrom')"
v-model="validFrom"/>
<div class='household__address-move'>
<div class='household__address-move__create'>
<div>
<h2>{{ $t('create_a_new_address') }}</h2>
<add-address
@addNewAddress="addNewAddress">
</add-address>
</div>
<div>
<div v-if="newAddress.text">
{{ newAddress.text }}
</div>
<div v-if="newAddress.postcode">
{{ newAddress.postcode.name }}
</div>
</div>
</div>
<div class='household__address-move__valid'>
<h2>{{ $t('move_date') }}</h2>
<input
type="date"
name="validFrom"
:placeholder="$t('validFrom')"
v-model="validFrom"/>
<div v-if="errors.length > 0">
{{ errors }}
</div>
</div>
<div>
<div v-if="newAddress.text">
{{ newAddress.text }}
</div>
<div v-if="newAddress.postcode">
{{ newAddress.postcode.name }}
</div>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a :href=backUrl class="sc-button bt-cancel">{{ $t('back_to_the_list') }}</a>
</li>
<li>
<button type="submit" class="sc-button bt-update centered mt-4" @click="addToHousehold">
{{ $t('add_an_address_to_household') }}
</button>
</li>
</ul>
</div>
<div v-if="errors.length > 0">
{{ errors }}
</div>
</div>
<div>
<button class="sc-button bt-create centered mt-4" @click="addToHousehold">
{{ $t('add_an_address_to_household') }}
</button>
</div>
</template>
<script>
import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';
//import { patchAddress } from 'ChillMainAssets/vuejs/_api/AddAddress.js';
export default {
name: 'App',
@@ -41,6 +54,7 @@ export default {
data() {
return {
householdId: window.householdId,
backUrl: `/fr/person/household/${householdId}/addresses`, //TODO better way to pass this
validFrom: new Date().toISOString().split('T')[0]
}
},

View File

@@ -4,8 +4,10 @@ const appMessages = {
fr: {
select_a_existing_address: 'Sélectionner une adresse existante',
create_a_new_address: 'Créer une nouvelle adresse',
add_an_address_to_household: 'Ajouter l\'adresse au ménage',
validFrom: 'Date du déménagement'
add_an_address_to_household: 'Déménager le ménage',
validFrom: 'Date du déménagement',
move_date: 'Date du déménagement',
back_to_the_list: 'Retour à la liste'
}
};