address: add a new address to a person

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -1,18 +1,45 @@
 <template>
 
-   <div v-if="address.address">
-      {{ address.address.street }}, {{ address.address.streetNumber }}
+   <div class='person__address__create'>
+      <div>
+         <add-address
+            @addNewAddress="addNewAddress">
+         </add-address>
+      </div>
+      <div>
+         <div v-if="address.text">
+            {{ address.text }}
+         </div>
+         <div v-if="address.postcode">
+            {{ address.postcode.name }}
+         </div>
+      </div>
    </div>
-   <div v-if="address.city">
-      {{ address.city.code }} {{ address.city.name }}
-   </div>
-   <div v-if="address.country">
-      {{ address.country.name }}
+   <div class='person__address__valid'>
+      <h2>{{ $t('date') }}</h2>
+      <input
+         type="date"
+         name="validFrom"
+         :placeholder="$t('validFrom')"
+         v-model="validFrom"/>
+      <div v-if="errors.length > 0">
+         {{ errors }}
+      </div>
+   </div>
+
+   <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="addToPerson">
+               {{ $t('add_an_address_to_person') }}
+            </button>
+         </li>
+      </ul>
    </div>
 
-   <add-address
-      @addNewAddress="addNewAddress">
-   </add-address>
 </template>
 
 <script>
@@ -23,9 +50,19 @@ export default {
    components: {
       AddAddress
    },
+   data() {
+      return {
+         personId: window.personId,
+         backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
+         validFrom: new Date().toISOString().split('T')[0]
+      }
+   },
    computed: {
       address() {
          return this.$store.state.address;
+      },
+      errors() {
+         return this.$store.state.errorMsg;
       }
    },
    methods: {
@@ -64,6 +101,13 @@ export default {
 
          this.$store.dispatch('addAddress', newAddress);
          modal.showModal = false;
+      },
+      addToPerson() {
+        this.$store.dispatch('addDateToAddressAndAddressToPerson', {
+           personId: this.personId,
+           addressId: this.$store.state.address.address_id,
+           body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}}
+        })
       }
    }
 };