mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
adapt AddAddress modal to bootstrap: position, responsive, form
This commit is contained in:
parent
50f3ec9064
commit
80eb5519bc
@ -203,47 +203,3 @@ div.flex-table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Address form
|
||||
*/
|
||||
div.address_form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
div.address_form__header {
|
||||
|
||||
}
|
||||
div.address_form__select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
div.address_form__select__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
div.custom-address, div.custom-postcode {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
div.address_form__select__map {
|
||||
margin: 0px 20px;
|
||||
div#address_map {
|
||||
height:400px;
|
||||
width:400px;
|
||||
input {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.address_form__more {
|
||||
& > div {
|
||||
display: flex;
|
||||
& > label {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
|
||||
<div class='person__address__create'>
|
||||
<div class='person-address__create'>
|
||||
<div>
|
||||
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
|
||||
<h2 v-else>{{ $t('edit_a_new_address') }}</h2>
|
||||
@ -8,7 +7,6 @@
|
||||
@addNewAddress="addNewAddress">
|
||||
</add-address>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<show-address
|
||||
v-if="address"
|
||||
@ -16,13 +14,18 @@
|
||||
</show-address>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!edit" class='person__address__valid'>
|
||||
|
||||
<div v-if="!edit" class='person-address__valid'>
|
||||
<h2>{{ $t('date') }}</h2>
|
||||
<input
|
||||
type="date"
|
||||
name="validFrom"
|
||||
:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"/>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<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"
|
||||
v-bind:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom" />
|
||||
</div>
|
||||
|
||||
<div v-if="errors.length > 0">
|
||||
{{ errors }}
|
||||
</div>
|
||||
@ -34,19 +37,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="btn btn-cancel">
|
||||
<a :href=backUrl class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
</li>
|
||||
<li v-if="!edit">
|
||||
<button type="submit" class="btn btn-update centered" @click="addToPerson">
|
||||
{{ $t('add_an_address_to_person') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
</li>
|
||||
<li v-if="!edit">
|
||||
<button type="submit" class="btn btn-update" @click="addToPerson">
|
||||
{{ $t('add_an_address_to_person') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -7,8 +7,13 @@ const addressMessages = {
|
||||
select_an_address_title: 'Sélectionner une adresse',
|
||||
fill_an_address: 'Compléter l\'adresse',
|
||||
select_country: 'Choisir le pays',
|
||||
country: 'Pays',
|
||||
select_city: 'Choisir une localité',
|
||||
city: 'Localité',
|
||||
other_city: 'Autre localité',
|
||||
select_address: 'Choisir une adresse',
|
||||
address: 'Adresse',
|
||||
other_address: 'Autre adresse',
|
||||
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
|
||||
isNoAddress: 'Pas d\'adresse complète',
|
||||
street: 'Nom de rue',
|
||||
@ -17,12 +22,12 @@ const addressMessages = {
|
||||
corridor: 'Couloir',
|
||||
steps: 'Escalier',
|
||||
flat: 'Appartement',
|
||||
buildingName: 'Nom du batiment',
|
||||
buildingName: 'Nom du bâtiment',
|
||||
extra: 'Complément d\'adresse',
|
||||
distribution: 'Service particulier de distribution',
|
||||
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
|
||||
postalCode_name: 'Nom de la localité',
|
||||
postalCode_code: 'Code postal de la localité',
|
||||
postalCode_name: 'Nom',
|
||||
postalCode_code: 'Code postal',
|
||||
date: 'Date de la nouvelle adresse',
|
||||
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
|
||||
validFrom: 'Date de la nouvelle adresse',
|
||||
|
||||
@ -17,62 +17,62 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div class="address_form">
|
||||
|
||||
<div v-if="loading">
|
||||
{{ $t('loading') }}
|
||||
</div>
|
||||
|
||||
<div class="address_form__header">
|
||||
<h4>{{ $t('select_an_address_title') }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="address_form__select">
|
||||
|
||||
<div class="address_form__select__body">
|
||||
<label for="isNoAddress">
|
||||
<div class="address-form">
|
||||
|
||||
<h4 class="h3">{{ $t('select_an_address_title') }}
|
||||
<span v-if="loading">
|
||||
<i class="fa fa-circle-o-notch"></i>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
name="isNoAddress"
|
||||
v-bind:placeholder="$t('isNoAddress')"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value"/>
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
|
||||
v-bind:value="value" />
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<country-selection
|
||||
v-bind:address="address"
|
||||
v-bind:getCities="getCities">
|
||||
</country-selection>
|
||||
|
||||
|
||||
<city-selection
|
||||
v-bind:address="address"
|
||||
v-bind:focusOnAddress="focusOnAddress"
|
||||
v-bind:getReferenceAddresses="getReferenceAddresses">
|
||||
</city-selection>
|
||||
|
||||
|
||||
<address-selection
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
</address-selection>
|
||||
</div>
|
||||
|
||||
<div class="address_form__select__map">
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
|
||||
<address-map
|
||||
v-bind:address="address"
|
||||
ref="addressMap">
|
||||
</address-map>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
|
||||
<div class="address_form__more">
|
||||
<address-more
|
||||
v-if="!isNoAddress"
|
||||
v-bind:address="address">
|
||||
</address-more>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@ -257,3 +257,16 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
div.address-form {
|
||||
h4.h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
div#address_map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id='address_map'></div>
|
||||
</div>
|
||||
<div id="address_map"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,67 +1,73 @@
|
||||
<template>
|
||||
<h4>{{ $t('fill_an_address') }}</h4>
|
||||
<div>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<h4 class="h3">{{ $t('fill_an_address') }}</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
: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"
|
||||
maxlength=16
|
||||
: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"
|
||||
maxlength=16
|
||||
: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"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="form-floating my-1">
|
||||
<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">
|
||||
<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>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="corridor"
|
||||
maxlength=16
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="steps"
|
||||
maxlength=16
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="flat"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="buildingName">{{ $t('buildingName') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="buildingName"
|
||||
maxlength=255
|
||||
:placeholder="$t('buildingName')"
|
||||
v-model="buildingName"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="extra">{{ $t('extra') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="extra"
|
||||
maxlength=255
|
||||
:placeholder="$t('extra')"
|
||||
v-model="extra"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="distribution">{{ $t('distribution') }}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="distribution"
|
||||
maxlength=255
|
||||
:placeholder="$t('distribution')"
|
||||
v-model="distribution"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
|
||||
<VueMultiselect
|
||||
id="addressSelector"
|
||||
v-model="value"
|
||||
@ -16,17 +17,27 @@
|
||||
:options="addresses">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div class="custom-address" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="$t('street')"
|
||||
v-model="street"/>
|
||||
<input
|
||||
type="text"
|
||||
name="streetNumber"
|
||||
:placeholder="$t('streetNumber')"
|
||||
v-model="streetNumber"/>
|
||||
<div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
|
||||
<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>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
|
||||
<VueMultiselect
|
||||
id="citySelector"
|
||||
v-model="value"
|
||||
@ -16,17 +17,28 @@
|
||||
:options="cities">
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
<div class="custom-postcode" v-if="writeNewPostalCode">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
:placeholder="$t('postalCode_code')"
|
||||
v-model="code"/>
|
||||
|
||||
<div class="custom-postcode row g-1" v-if="writeNewPostalCode">
|
||||
<div class="col-4">
|
||||
<div class="form-floating">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="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"
|
||||
name="name"
|
||||
:placeholder="$t('postalCode_name')"
|
||||
v-model="name"/>
|
||||
<label for="name">{{ $t('postalCode_name') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="my-1">
|
||||
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
|
||||
<VueMultiselect
|
||||
v-model="value"
|
||||
name="field"
|
||||
id="countrySelect"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:custom-label="transName"
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
<div>
|
||||
<ul class="record_actions">
|
||||
<li class="btn btn-cancel">
|
||||
<li class="cancel">
|
||||
<a href="#" class="btn btn-cancel">
|
||||
{{ $t('action.cancel') }}
|
||||
</a>
|
||||
|
||||
@ -16,11 +16,15 @@
|
||||
</div>
|
||||
<div class='household__address-move__valid'>
|
||||
<h2>{{ $t('move_date') }}</h2>
|
||||
<input
|
||||
type="date"
|
||||
name="validFrom"
|
||||
:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"/>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<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"
|
||||
v-bind:placeholder="$t('validFrom')"
|
||||
v-model="validFrom"
|
||||
aria-describedby="validFrom" />
|
||||
</div>
|
||||
|
||||
<div v-if="errors.length > 0">
|
||||
{{ errors }}
|
||||
</div>
|
||||
@ -33,11 +37,11 @@
|
||||
</div>
|
||||
<div>
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="btn btn-cancel">
|
||||
<a :href=backUrl class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
<li class="cancel">
|
||||
<a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<button type="submit" class="btn btn-update centered" @click="addToHousehold">
|
||||
<button type="submit" class="btn btn-update" @click="addToHousehold">
|
||||
{{ $t('add_an_address_to_household') }}
|
||||
</button>
|
||||
</li>
|
||||
@ -129,4 +133,3 @@ export default {
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -110,8 +110,8 @@
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel">
|
||||
{{ 'Back to the person details'|trans }}
|
||||
</a>
|
||||
{{ 'Back to the person details'|trans }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-create"
|
||||
|
||||
@ -14,13 +14,17 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#}
|
||||
{% extends "@ChillPerson/Person/layout.html.twig" %}
|
||||
{% extends "@ChillPerson/Person/layout.html.twig" %}
|
||||
|
||||
{% set activeRouteKey = '' %}
|
||||
|
||||
{% block title %}{{ 'New address for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %}
|
||||
|
||||
{% block personcontent %}
|
||||
<div class="address-new">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-10">
|
||||
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ block('title') }}</h1>
|
||||
@ -40,6 +44,8 @@
|
||||
{{ encore_entry_script_tags('vue_address') }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock personcontent %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user