Submitting address, and validFrom field

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

@@ -1,10 +1,19 @@
 <template>
 
+   <div v-for="error in displayErrors"
+      class="alert alert-danger my-2">
+      {{ error }}
+   </div>
+
+   <pre v-if="addAddress.result">
+      {{ addAddress.result.address_id }}
+   </pre>
+
    <add-address
+      v-bind:key="addAddress.type"
       v-bind:context="context"
-      v-bind:key="addAddress.key"
       v-bind:options="addAddress.options"
-      @submitAddress="submitAddress"
+      v-bind:result="addAddress.result"
       ref="addAddress">
    </add-address>
 </template>
@@ -24,10 +33,8 @@ export default {
             personId: window.personId,
             addressId: window.addressId,
             backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
-            validFrom: new Date().toISOString().split('T')[0]
          },
          addAddress: {
-            key: 'person',
             options: {
                /// Options override default
 
@@ -39,19 +46,15 @@ export default {
 
                /// Display each step in page or Modal
                //bindModal: { step1: false, step2: false } //TODO true-false must not be possible
-            }
+            },
+            type: 'person',
+            result: null // <== returned from addAddress component
          }
       }
    },
    methods: {
-      submitAddress({ submited, flag }) {
+      displayErrors() {
-         console.log('@@@ CLICK button submitAddress');
+         return this.$refs.addAddress.errorMsg;
-
-         console.log('address to post:', submited);
-         console.log('datas by refs: ', this.$refs.addAddress.entity.address.text);
-
-         this.$refs.addAddress.initForm(); // to cast child method
-         flag.showPane = false;
       }
    }
 }

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -26,7 +26,8 @@
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
-               v-bind:flag="this.flag">
+               v-bind:flag="this.flag"
+               ref="showAddress">
             </show-address>
          </template>
 
@@ -36,7 +37,7 @@
                {{ $t('action.edit')}}
             </button>
             <button class="btn btn-save"
-               @click.prevent="$emit('submitAddress', { getSubmited , flag })">
+               @click="submitAddress">
                {{ $t('action.save')}}
             </button>
          </template>
@@ -51,8 +52,9 @@
          v-bind:default="this.default"
          v-bind:entity="this.entity"
          v-bind:flag="this.flag"
+         ref="showAddress"
          v-bind:insideModal="false" @openEditPane="openEditPane"
-         @submitAddress="$emit('submitAddress', { getSubmited , flag })">
+         @submitAddress="submitAddress">
       </show-address>
    </div>
 
@@ -122,8 +124,7 @@ import {
 
 export default {
    name: "AddAddress",
-   props: ['context', 'options'],
+   props: ['context', 'options', 'result'],
-   emits: ['submitAddress'],
    components: {
       Modal,
       ShowAddress,
@@ -173,6 +174,10 @@ export default {
                zoom: 12
             },
          },
+         valid: {
+            from: null,
+            to: null
+         },
          errorMsg: []
       }
    },
@@ -197,11 +202,8 @@ export default {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
-      },
-
-      getSubmited() {
-         return this.entity.address;
       }
+
    },
    mounted() {
       if (!this.step1WithModal) {
@@ -221,11 +223,13 @@ export default {
          }
          this.flag.showPane = true;
       },
+
       openEditPane() {
          console.log('open the Edit panel');
          this.initForm();
          this.getCountries();
       },
+
       closeEditPane() {
          console.log('close the Edit Panel (with validation)');
          this.applyChanges();
@@ -373,7 +377,6 @@ export default {
       *  then update existing address with backend datas when promise is resolved
       */
       updateAddress(payload) {
-         console.log('updateAddress payload', payload);
 
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
          this.flag.loading = true;
@@ -387,7 +390,6 @@ export default {
                   body.postcode = {'id': postalCode.id },
                      patchAddress(payload.addressId, body)
                         .then(address => new Promise((resolve, reject) => {
-                           console.log('update address');
                            this.entity.address = address;
                            this.flag.loading = false;
                            resolve();
@@ -401,7 +403,6 @@ export default {
          } else {
             patchAddress(payload.addressId, payload.newAddress)
                .then(address => new Promise((resolve, reject) => {
-                  console.log('update address');
                   this.entity.address = address;
                   this.flag.loading = false;
                   resolve();
@@ -418,7 +419,6 @@ export default {
       *  creating new address, and receive backend datas when promise is resolved
       */
       addAddress(payload) {
-         console.log('addAddress payload', payload);
 
          this.flag.loading = true;
          if('newPostcode' in payload){
@@ -431,7 +431,6 @@ export default {
                   body.postcode = {'id': postalCode.id},
                      postAddress(body)
                         .then(address => new Promise((resolve, reject) => {
-                           console.log('add address');
                            this.entity.address = address;
                            resolve();
                            this.flag.loading = false;
@@ -445,7 +444,6 @@ export default {
          } else {
             postAddress(payload)
                .then(address => new Promise((resolve, reject) => {
-                  console.log('add address');
                   this.entity.address = address;
                   resolve();
                   this.flag.loading = false;
@@ -455,9 +453,52 @@ export default {
                   this.flag.loading = false;
                });
          }
+      },
+
+      /*
+      *  When submited
+      */
+      submitAddress() {
+         console.log('@@@ CLICK button submitAddress');
+         this.addDateToAddressAndAddressToPerson({
+            personId: this.context.personId,
+            addressId: this.entity.address.address_id,
+            body: { validFrom: { datetime: `${this.$refs.showAddress.validFrom}T00:00:00+0100`}},
+            backUrl: this.context.backUrl
+         });
+         this.initForm();
+         this.flag.showPane = false;
+      },
+
+      addDateToAddressAndAddressToPerson(payload) {
+         console.log('addDateToAddressAndAddressToPerson payload', payload);
+         this.flag.loading = true;
+         patchAddress(payload.addressId, payload.body)
+            .then(address => new Promise((resolve, reject) => {
+               this.valid.from = address.validFrom;
+               resolve();
+            }).then(
+               postAddressToPerson(payload.personId, payload.addressId)
+                  .then(person => new Promise((resolve, reject) => {
+
+                     console.log('commit addAddressToPerson !!!', person);
+                     this.result = person;
+
+                     this.flag.loading = false;
+                     this.flag.success = true;
+                     window.location.assign(payload.backUrl);
+                     resolve();
+                  }))
+                  .catch((error) => {
+                     this.errorMsg.push(error);
+                     this.flag.loading = false;
+                  })
+            ))
+            .catch((error) => {
+               this.errorMsg.push(error);
+               this.flag.loading = false;
+            });
       }
-
-
    }
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue

@@ -20,41 +20,63 @@
             {{ address.country.name.fr }}
          </p>
       </div>
+      <div>
+         <div v-if="address.floor">
+            <span class="floor">
+               <b>{{ $t('floor') }}</b>: {{ address.floor }}
+            </span>
+         </div>
+         <div v-if="address.corridor">
+            <span class="corridor">
+               <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
+            </span>
+         </div>
+         <div v-if="address.steps">
+            <span class="steps">
+               <b>{{ $t('steps') }}</b>: {{ address.steps }}
+            </span>
+         </div>
+         <div v-if="address.flat">
+            <span class="flat">
+               <b>{{ $t('flat') }}</b>: {{ address.flat }}
+            </span>
+         </div>
+         <div v-if="address.buildingName">
+            <span class="buildingName">
+               <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
+            </span>
+         </div>
+         <div v-if="address.extra">
+            <span class="extra">
+               <b>{{ $t('extra') }}</b>: {{ address.extra }}
+            </span>
+         </div>
+         <div v-if="address.distribution">
+            <span class="distribution">
+               <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
+            </span>
+         </div>
+      </div>
 
-      <div v-if="address.floor">
+      <div v-if="!context.edit" class='person-address__valid'>
-         <span class="floor">
+         <h2>{{ $t('date') }}</h2>
-            <b>{{ $t('floor') }}</b>: {{ address.floor }}
+         <div class="input-group mb-3">
-         </span>
+            <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
-      </div>
+            <input type="date" class="form-control form-control-lg" name="validFrom"
-      <div v-if="address.corridor">
+               v-bind:placeholder="$t('validFrom')"
-         <span class="corridor">
+               v-model="validFrom"
-            <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
+               aria-describedby="validFrom"
-         </span>
+            />
-      </div>
+         </div>
-      <div v-if="address.steps">
+         <!--div v-if="errorMsg.length > 0">
-         <span class="steps">
+            {{ errors }}
-            <b>{{ $t('steps') }}</b>: {{ address.steps }}
+         </div-->
-         </span>
+         <div v-if="flag.loading">
-      </div>
+            {{ $t('loading') }}
-      <div v-if="address.flat">
+         </div>
-         <span class="flat">
+         <div v-if="flag.success">
-            <b>{{ $t('flat') }}</b>: {{ address.flat }}
+            {{ $t('person_address_creation_success') }}
-         </span>
+         </div>
-      </div>
-      <div v-if="address.buildingName">
-         <span class="buildingName">
-            <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
-         </span>
-      </div>
-      <div v-if="address.extra">
-         <span class="extra">
-            <b>{{ $t('extra') }}</b>: {{ address.extra }}
-         </span>
-      </div>
-      <div v-if="address.distribution">
-         <span class="distribution">
-            <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
-         </span>
       </div>
 
    </div>
@@ -93,7 +115,7 @@ export default {
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane', 'submitAddress'],
+   emits: ['openEditPane', 'submitAddress', 'validFrom'],
    computed: {
       address() {
          return this.entity.address;
@@ -109,6 +131,9 @@ export default {
       },
       getSubmited() {
          return this.entity.address;
+      },
+      validFrom() {
+         return new Date().toISOString().split('T')[0];
       }
    }
 };