mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
household address: UI of the adress move form
This commit is contained in:
nobohan
parent
4c025184b4
commit
1551ea796d
@ -260,73 +260,3 @@ div.address_form {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* HOUSEHOLD
|
||||
*/
|
||||
|
||||
div.household {
|
||||
div.household__address {
|
||||
div.row {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
& > div {
|
||||
position: absolute;
|
||||
display: table;
|
||||
height: 100%;
|
||||
border: 1px dotted #c3c3c3;
|
||||
}
|
||||
div.household__address--date {
|
||||
width: 30%;
|
||||
background-color: #c3c3c3;
|
||||
height: 100%;
|
||||
div.cell {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 50%;
|
||||
div.pill {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
bottom: -20px;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
left: -60px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.household__address--content {
|
||||
width: 70%;
|
||||
left: 30%;
|
||||
text-align: left;
|
||||
background-color: #ececec;
|
||||
border: 1px solid #888;
|
||||
div.cell {
|
||||
display: table-cell;
|
||||
padding: 5px 30px;
|
||||
vertical-align: middle;
|
||||
i.dot::before, i.dot::after {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: '';
|
||||
border: 0;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #c3c3c3;
|
||||
z-index: 10;
|
||||
left: -15px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,3 +86,81 @@ div.person-view {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* HOUSEHOLD
|
||||
*/
|
||||
|
||||
div.household {
|
||||
div.household__address {
|
||||
div.row {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
& > div {
|
||||
position: absolute;
|
||||
display: table;
|
||||
height: 100%;
|
||||
border: 1px dotted #c3c3c3;
|
||||
}
|
||||
div.household__address--date {
|
||||
width: 30%;
|
||||
background-color: #c3c3c3;
|
||||
height: 100%;
|
||||
div.cell {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 50%;
|
||||
div.pill {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
bottom: -20px;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
left: -60px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.household__address--content {
|
||||
width: 70%;
|
||||
left: 30%;
|
||||
text-align: left;
|
||||
background-color: #ececec;
|
||||
border: 1px solid #888;
|
||||
div.cell {
|
||||
display: table-cell;
|
||||
padding: 5px 30px;
|
||||
vertical-align: middle;
|
||||
i.dot::before, i.dot::after {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: '';
|
||||
border: 0;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #c3c3c3;
|
||||
z-index: 10;
|
||||
left: -15px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.household__address-move {
|
||||
div.household__address-move__create {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]
|
||||
}
|
||||
},
|
||||
|
||||
@ -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'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -21,5 +21,4 @@
|
||||
{{ encore_entry_script_tags('household_address') }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user