household address: UI of the adress move form

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

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

src/Bundle/ChillPersonBundle/Resources/public/sass/person.scss

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

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue

@@ -1,37 +1,50 @@
 <template>
-   <div class='household-address__create'>
+   <div class='household__address-move'>
-      <h2>{{ $t('create_a_new_address') }}</h2>
+      <div class='household__address-move__create'>
-      <add-address
+         <div>
-         @addNewAddress="addNewAddress">
+            <h2>{{ $t('create_a_new_address') }}</h2>
-      </add-address>
+            <add-address
-      <input
+               @addNewAddress="addNewAddress">
-         type="date"
+            </add-address>
-         name="validFrom"
+         </div>
-         :placeholder="$t('validFrom')"
+         <div>
-         v-model="validFrom"/>
+            <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">
+         <ul class="record_actions sticky-form-buttons">
-            {{ newAddress.text }}
+            <li class="cancel">
-         </div>
+               <a :href=backUrl class="sc-button bt-cancel">{{ $t('back_to_the_list') }}</a>
-         <div v-if="newAddress.postcode">
+            </li>
-            {{ newAddress.postcode.name }}
+            <li>
-         </div>
+               <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]
       }
    },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/js/i18n.js

@@ -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',
+      add_an_address_to_household: 'Déménager le ménage',
-      validFrom: 'Date du déménagement'
+      validFrom: 'Date du déménagement',
+      move_date: 'Date du déménagement',
+      back_to_the_list: 'Retour à la liste'
    }
 };
 

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -21,5 +21,4 @@
         {{ encore_entry_script_tags('household_address') }}
     {% endblock %}
 
-
 {% endblock %}