Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

adapt AddAddress modal to bootstrap: position, responsive, form

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-07-14 13:36:49 +02:00
parent 50f3ec9064
commit 80eb5519bc
13 changed files with 217 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -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%;
}
}
}
}

44
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class='person-address__create'>
<div class='person__address__create'>
<div> <div>
<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>
@ -8,7 +7,6 @@
@addNewAddress="addNewAddress"> @addNewAddress="addNewAddress">
</add-address> </add-address>
</div> </div>
<div> <div>
<show-address <show-address
v-if="address" v-if="address"
@ -16,13 +14,18 @@
</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>
<input
type="date" <div class="input-group mb-3">
name="validFrom" <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
:placeholder="$t('validFrom')" <input type="date" class="form-control form-control-lg" name="validFrom"
v-model="validFrom"/> v-bind:placeholder="$t('validFrom')"
v-model="validFrom"
aria-describedby="validFrom" />
</div>
<div v-if="errors.length > 0"> <div v-if="errors.length > 0">
{{ errors }} {{ errors }}
</div> </div>
@ -34,19 +37,16 @@
</div> </div>
</div> </div>
<div> <ul class="record_actions sticky-form-buttons">
<ul class="record_actions sticky-form-buttons"> <li class="cancel">
<li class="btn btn-cancel"> <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
<a :href=backUrl class="btn btn-cancel">{{ $t('back_to_the_list') }}</a> </li>
</li> <li v-if="!edit">
<li v-if="!edit"> <button type="submit" class="btn btn-update" @click="addToPerson">
<button type="submit" class="btn btn-update centered" @click="addToPerson"> {{ $t('add_an_address_to_person') }}
{{ $t('add_an_address_to_person') }} </button>
</button> </li>
</li> </ul>
</ul>
</div>
</template> </template>
<script> <script>

11
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
View File

@ -7,8 +7,13 @@ const addressMessages = {
select_an_address_title: 'Sélectionner une adresse', select_an_address_title: 'Sélectionner une adresse',
fill_an_address: 'Compléter l\'adresse', fill_an_address: 'Compléter l\'adresse',
select_country: 'Choisir le pays', select_country: 'Choisir le pays',
country: 'Pays',
select_city: 'Choisir une localité', select_city: 'Choisir une localité',
city: 'Localité',
other_city: 'Autre localité',
select_address: 'Choisir une adresse', select_address: 'Choisir une adresse',
address: 'Adresse',
other_address: 'Autre adresse',
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse', create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
isNoAddress: 'Pas d\'adresse complète', isNoAddress: 'Pas d\'adresse complète',
street: 'Nom de rue', street: 'Nom de rue',
@ -17,12 +22,12 @@ const addressMessages = {
corridor: 'Couloir', corridor: 'Couloir',
steps: 'Escalier', steps: 'Escalier',
flat: 'Appartement', flat: 'Appartement',
buildingName: 'Nom du batiment', buildingName: 'Nom du bâtiment',
extra: 'Complément d\'adresse', extra: 'Complément d\'adresse',
distribution: 'Service particulier de distribution', distribution: 'Service particulier de distribution',
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité', create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
postalCode_name: 'Nom de la localité', postalCode_name: 'Nom',
postalCode_code: 'Code postal de la localité', postalCode_code: 'Code postal',
date: 'Date de la nouvelle adresse', date: 'Date de la nouvelle adresse',
add_an_address_to_person: 'Ajouter l\'adresse à la personne', add_an_address_to_person: 'Ajouter l\'adresse à la personne',
validFrom: 'Date de la nouvelle adresse', validFrom: 'Date de la nouvelle adresse',

75
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
View File

@ -17,62 +17,62 @@
</template> </template>
<template v-slot:body> <template v-slot:body>
<div class="address_form"> <div class="address-form">
<div v-if="loading"> <h4 class="h3">{{ $t('select_an_address_title') }}
{{ $t('loading') }} <span v-if="loading">
</div> <i class="fa fa-circle-o-notch"></i>
</span>
<div class="address_form__header"> </h4>
<h4>{{ $t('select_an_address_title') }}</h4>
</div> <div class="row my-3">
<div class="col-lg-6">
<div class="address_form__select">
<div class="form-check">
<div class="address_form__select__body">
<label for="isNoAddress">
<input type="checkbox" <input type="checkbox"
name="isNoAddress" class="form-check-input"
v-bind:placeholder="$t('isNoAddress')" id="isNoAddress"
v-model="isNoAddress" v-model="isNoAddress"
v-bind:value="value"/> v-bind:value="value" />
{{ $t('isNoAddress') }} <label class="form-check-label" for="isNoAddress">
</label> {{ $t('isNoAddress') }}
</label>
</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"
v-bind:updateMapCenter="updateMapCenter"> v-bind:updateMapCenter="updateMapCenter">
</address-selection> </address-selection>
</div>
<div class="address_form__select__map"> </div>
<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
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> </div>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
@ -257,3 +257,16 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
div.address-form {
h4.h3 {
font-weight: bold;
}
div#address_map {
height: 400px;
width: 100%;
}
}
</style>

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="container"> <div id="address_map"></div>
<div id='address_map'></div>
</div>
</template> </template>
<script> <script>

130
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
View File

@ -1,67 +1,73 @@
<template> <template>
<h4>{{ $t('fill_an_address') }}</h4> <h4 class="h3">{{ $t('fill_an_address') }}</h4>
<div> <div class="row my-3">
<label for="floor">{{ $t('floor') }}</label> <div class="col-lg-6">
<input <div class="form-floating my-1">
type="text" <input class="form-control"
name="floor" type="text"
maxlength=16 name="floor"
:placeholder="$t('floor')" maxlength=16
v-model="floor"/> :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>
<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> </div>
</template> </template>

35
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="container"> <div class="my-1">
<label class="col-form-label" for="addressSelector">{{ $t('address') }}</label>
<VueMultiselect <VueMultiselect
id="addressSelector" id="addressSelector"
v-model="value" v-model="value"
@ -16,17 +17,27 @@
:options="addresses"> :options="addresses">
</VueMultiselect> </VueMultiselect>
</div> </div>
<div class="custom-address" v-if="writeNewAddress || writeNewPostalCode"> <div class="custom-address row g-1" v-if="writeNewAddress || writeNewPostalCode">
<input <div class="col-10">
type="text" <div class="form-floating">
name="street" <input class="form-control"
:placeholder="$t('street')" type="text"
v-model="street"/> name="street"
<input :placeholder="$t('street')"
type="text" v-model="street"/>
name="streetNumber" <label for="street">{{ $t('street') }}</label>
:placeholder="$t('streetNumber')" </div>
v-model="streetNumber"/> </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> </div>
</template> </template>

36
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="container"> <div class="my-1">
<label class="col-form-label" for="citySelector">{{ $t('city') }}</label>
<VueMultiselect <VueMultiselect
id="citySelector" id="citySelector"
v-model="value" v-model="value"
@ -16,17 +17,28 @@
:options="cities"> :options="cities">
</VueMultiselect> </VueMultiselect>
</div> </div>
<div class="custom-postcode" v-if="writeNewPostalCode">
<input <div class="custom-postcode row g-1" v-if="writeNewPostalCode">
type="text" <div class="col-4">
name="name" <div class="form-floating">
:placeholder="$t('postalCode_name')" <input class="form-control"
v-model="name"/> type="text"
<input name="code"
type="text" :placeholder="$t('postalCode_code')"
name="code" v-model="code"/>
:placeholder="$t('postalCode_code')" <label for="code">{{ $t('postalCode_code') }}</label>
v-model="code"/> </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> </div>
</template> </template>

5
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div class="container"> <div class="my-1">
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
<VueMultiselect <VueMultiselect
v-model="value" v-model="value"
name="field" id="countrySelect"
track-by="id" track-by="id"
label="name" label="name"
:custom-label="transName" :custom-label="transName"

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
View File

@ -62,7 +62,7 @@
<div> <div>
<ul class="record_actions"> <ul class="record_actions">
<li class="btn btn-cancel"> <li class="cancel">
<a href="#" class="btn btn-cancel"> <a href="#" class="btn btn-cancel">
{{ $t('action.cancel') }} {{ $t('action.cancel') }}
</a> </a>

21
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue
View File

@ -16,11 +16,15 @@
</div> </div>
<div class='household__address-move__valid'> <div class='household__address-move__valid'>
<h2>{{ $t('move_date') }}</h2> <h2>{{ $t('move_date') }}</h2>
<input
type="date" <div class="input-group mb-3">
name="validFrom" <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
:placeholder="$t('validFrom')" <input type="date" class="form-control form-control-lg" name="validFrom"
v-model="validFrom"/> v-bind:placeholder="$t('validFrom')"
v-model="validFrom"
aria-describedby="validFrom" />
</div>
<div v-if="errors.length > 0"> <div v-if="errors.length > 0">
{{ errors }} {{ errors }}
</div> </div>
@ -33,11 +37,11 @@
</div> </div>
<div> <div>
<ul class="record_actions sticky-form-buttons"> <ul class="record_actions sticky-form-buttons">
<li class="btn btn-cancel"> <li class="cancel">
<a :href=backUrl class="btn btn-cancel">{{ $t('back_to_the_list') }}</a> <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
</li> </li>
<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') }} {{ $t('add_an_address_to_household') }}
</button> </button>
</li> </li>
@ -129,4 +133,3 @@ export default {
}; };
</script> </script>

4
src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
View File

@ -110,8 +110,8 @@
<ul class="record_actions sticky-form-buttons"> <ul class="record_actions sticky-form-buttons">
<li class="cancel"> <li class="cancel">
<a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel"> <a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel">
{{ 'Back to the person details'|trans }} {{ 'Back to the person details'|trans }}
</a> </a>
</li> </li>
<li> <li>
<a class="btn btn-create" <a class="btn btn-create"

12
src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
View File

@ -14,13 +14,17 @@
* You should have received a copy of the GNU Affero General Public License * 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/>. * 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 = '' %} {% set activeRouteKey = '' %}
{% block title %}{{ 'New address for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %} {% block title %}{{ 'New address for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %}
{% block personcontent %} {% block personcontent %}
<div class="address-new">
<div class="row justify-content-center">
<div class="col-md-10">
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
@ -40,6 +44,8 @@
{{ encore_entry_script_tags('vue_address') }} {{ encore_entry_script_tags('vue_address') }}
{% endblock %} {% endblock %}
</div>
</div>
</div>
{% endblock personcontent %} {% endblock personcontent %}