From 80eb5519bcfb6de2065e0b30479e8ad86e1e70ac Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 14 Jul 2021 13:36:49 +0200
Subject: [PATCH] adapt AddAddress modal to bootstrap: position, responsive,
 form

---
 .../Resources/public/scss/chillmain.scss      |  44 ------
 .../Resources/public/vuejs/Address/App.vue    |  44 +++---
 .../Resources/public/vuejs/Address/js/i18n.js |  11 +-
 .../public/vuejs/_components/AddAddress.vue   |  75 +++++-----
 .../_components/AddAddress/AddressMap.vue     |   4 +-
 .../_components/AddAddress/AddressMore.vue    | 130 +++++++++---------
 .../AddAddress/AddressSelection.vue           |  35 +++--
 .../_components/AddAddress/CitySelection.vue  |  36 +++--
 .../AddAddress/CountrySelection.vue           |   5 +-
 .../AccompanyingCourseWorkCreate/App.vue      |   2 +-
 .../public/vuejs/HouseholdAddress/App.vue     |  21 +--
 .../Resources/views/Address/list.html.twig    |   4 +-
 .../Resources/views/Address/new.html.twig     |  12 +-
 13 files changed, 217 insertions(+), 206 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 5b290b90b..f73d722bb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -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%;
-         }
-      }
-   }
-}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index fa78c7e3d..88511ef72 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
index d0e43266a..395c0edf8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
@@ -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',
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
index 4ffa957cb..e2222fa8f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
@@ -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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
index da70d0ee2..978862d82 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMap.vue
@@ -1,7 +1,5 @@
 <template>
-   <div class="container">
-      <div id='address_map'></div>
-   </div>
+   <div id="address_map"></div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
index 744f9ddc1..11c25b318 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressMore.vue
@@ -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>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
index a0b186a55..656d1e068 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue
@@ -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>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
index 81662d2eb..cd322c03c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CitySelection.vue
@@ -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>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
index 388ab7e8e..4e23f0d34 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/CountrySelection.vue
@@ -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"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index d6e6fa7be..636acb658 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue
index 73880f5db..f2c75ff69 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue
@@ -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>
-
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
index 8ddcef53a..f5d24b304 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
@@ -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"
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index 68af0967c..b6272d0b6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -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 %}