prepare vue Address to be used too in accompanyingCourse context

i18n is managed by root component:
* ok for person and household implementation (=> they use Address root component)
* but must be imported in vue i18n file if called from another component

submitAddress is emit to parent, it allow to control final action:
* casting final submitNewAddress with POST requests (for person or household entity);
* or dispatching changes from store, casting only payload to be used.

remove and simplify some options: backurl is always used with person/household,
and never if called from another vue component.

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

@@ -4,25 +4,12 @@
       {{ error }}
    </div>
 
-   <div v-if="addAddress.options.displayResult && addAddress.result !== null"
-      class="chill-entity entity-address">
-      <div class="address multiline">
-         <p class="street">{{ addAddress.result.street }}
-            <span class="streetnumber">{{ addAddress.result.streetNumber }}</span>
-         </p>
-         <p class="postcode">
-            <span class="code">{{ addAddress.result.postcode.code }}</span>
-            <span class="name">{{ addAddress.result.postcode.name }}</span>
-         </p>
-         <p class="country">{{ addAddress.result.country.name.fr }}</p>
-      </div>
-   </div>
-
    <add-address
       v-bind:key="context.entity.type"
       v-bind:context="context"
       v-bind:options="addAddress.options"
       v-bind:result="addAddress.result"
+      @submitAddress="submitAddress"
       ref="addAddress">
    </add-address>
 </template>
@@ -78,19 +65,22 @@ export default {
                bindModal: {
                   step1: window.binModalStep1,  //boolean, default: true
                   step2: window.binModalStep2   //boolean, default: true
-               },
+               }
-
+            }
-               // Options only for root parent component
-               displayResult: true,
-               redirectToBackUrl: true
-            },
-            result: null // <== returned from addAddress component
          }
       }
    },
    methods: {
       displayErrors() {
          return this.$refs.addAddress.errorMsg;
+      },
+      submitAddress() {
+         console.log('@@@ click on Submit Address Button');
+
+         // Cast child method
+         this.$refs.addAddress.submitNewAddress();
+         // it fetch post request only for person and household
+         // else get returned payload then dispatch from here (parent)
       }
    }
 }

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

@@ -18,7 +18,7 @@
             <h2 class="modal-title">{{ $t(getTextTitle) }}
                <span v-if="flag.loading" class="loading">
                   <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                  <span class="sr-only">Loading...</span>
+                  <span class="sr-only">{{ $t('loading') }}</span>
                </span>
             </h2>
          </template>
@@ -41,7 +41,7 @@
                {{ $t('action.edit')}}
             </button>
             <button class="btn btn-save"
-               @click="submitAddress">
+               @click.prevent="$emit('submitAddress')">
                {{ $t('action.save')}}
             </button>
          </template>
@@ -59,7 +59,7 @@
          v-bind:flag="this.flag"
          ref="showAddress"
          v-bind:insideModal="false" @openEditPane="openEditPane"
-         @submitAddress="submitAddress">
+         @submitAddress="$emit('submitAddress')">
       </show-address>
    </div>
 
@@ -73,7 +73,7 @@
             <h2 class="modal-title">{{ $t(getTextTitle) }}
                <span v-if="flag.loading" class="loading">
                   <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                  <span class="sr-only">Loading...</span>
+                  <span class="sr-only">{{ $t('loading') }}</span>
                </span>
             </h2>
          </template>
@@ -125,14 +125,10 @@ import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/v
 import ShowAddress from './ShowAddress.vue';
 import EditAddress from './EditAddress.vue';
 
-import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
-import { addressMessages } from '../i18n'
-const i18n = _createI18n(addressMessages);
-
 export default {
    name: "AddAddress",
    props: ['context', 'options', 'result'],
-   i18n,
+   emits: ['submitAddress'],
    components: {
       Modal,
       ShowAddress,
@@ -519,9 +515,10 @@ export default {
       *  When submit address
       *  (get out step1 show pane, submit button)
       */
-      submitAddress()
+      submitNewAddress()
       {
          let payload = {
+            entity: this.context.entity.type,
             entityId: this.context.entity.id,
             addressId: this.entity.address.address_id,
             body: {
@@ -532,25 +529,32 @@ export default {
             backUrl: this.context.backUrl
          }
 
-         console.log('@@@ CLICK button submitAddress for', this.context.entity.type, 'with payload', payload);
+         if ( payload.entity !== 'person' && payload.entity !== 'household' ) {
-         this.addDateToAddressAndAddressTo(payload, this.context.entity.type);
+
+            // just return payload to parent
+            // (changes will be patched in parent store)
+            this.initForm();
+            this.flag.showPane = false;
+            return payload;
+         }
+
+         console.log('submitNewAddress with', payload);
+         this.addDateToAddressAndAddressTo(payload);
 
          this.initForm();
          this.flag.showPane = false;
       },
 
-      addDateToAddressAndAddressTo(payload, postTo)
+      addDateToAddressAndAddressTo(payload)
       {
-         console.log('addDateToAddressAndAddressTo', postTo)
+         console.log('addDateToAddressAndAddressTo', payload.entity)
          this.flag.loading = true;
-         patchAddress(payload.addressId, payload.body)
+         return patchAddress(payload.addressId, payload.body)
             .then(address => new Promise((resolve, reject) => {
                   this.valid.from = address.validFrom;
                   resolve();
                })
-                  .then(
+               .then(this.postAddressTo(payload))
-                     this.postAddressTo(payload, postTo)
-                  )
             )
             .catch((error) => {
                this.errorMsg.push(error);
@@ -558,11 +562,11 @@ export default {
             });
       },
 
-      postAddressTo(payload, postTo)
+      postAddressTo(payload)
       {
-         console.log('postAddressTo', postTo);
+         console.log('postAddressTo', payload.entity);
          if (!this.context.edit) {
-            switch (postTo) {
+            switch (payload.entity) {
                case 'household':
                   postAddressToHousehold(payload.entityId, payload.addressId)
                      .then(household => new Promise((resolve, reject) => {
@@ -571,9 +575,7 @@ export default {
 
                         this.flag.loading = false;
                         this.flag.success = true;
-                        if (this.options.redirectToBackUrl) {
+                        window.location.assign(payload.backUrl);
-                           window.location.assign(payload.backUrl);
-                        }
                         resolve();
                      }))
                      .catch((error) => {
@@ -582,9 +584,7 @@ export default {
                      })
                   ;
                   break;
-
                case 'person':
-               default:
                   postAddressToPerson(payload.entityId, payload.addressId)
                      .then(person => new Promise((resolve, reject) => {
 
@@ -593,9 +593,7 @@ export default {
 
                         this.flag.loading = false;
                         this.flag.success = true;
-                        if (this.options.redirectToBackUrl) {
+                        window.location.assign(payload.backUrl);
-                           window.location.assign(payload.backUrl);
-                        }
                         resolve();
                      }))
                      .catch((error) => {
@@ -603,12 +601,12 @@ export default {
                         this.flag.loading = false;
                      })
                   ;
+                  break;
+               default:
+                  this.errorMsg.push('That entity is not managed by address !');
             }
-         } else {
+         } else { // address is already linked, just finish !
-            // address is already posted, just finish !
+            window.location.assign(payload.backUrl);
-            if (this.options.redirectToBackUrl) {
-               window.location.assign(payload.backUrl);
-            }
          }
       },
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js

@@ -1,11 +1,15 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import { store } from './store'
 import App from './App.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { addressMessages } from './i18n';
+
+//import { createI18n } from 'vue-i18n';
+//const i18n = createI18n();
+const i18n = _createI18n( addressMessages );
 
 const app = createApp({
     template: `<app></app>`,
 })
-.use(store)
 .use(i18n)
 .component('app', App)
 .mount('#address');

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddAddress.js

@@ -48,4 +48,32 @@ const postAddressToHousehold = (householdId, addressId) => {
 };
 
 
-export { postAddressToPerson, postAddressToHousehold };
+/*
+* Endpoint AccompanyingPeriod
+* method POST, post AccompanyingPeriod AddressLocation (temporary address)
+*
+*  @id     integer - id of AccompanyingPeriod
+*  @body   Object - dictionary with changes to post
+*/
+const patchAddressToAccompanyingPeriod = (accompanyingPeriodId, addressId) => {
+    const body = {
+        'type': 'accompanying_period',
+        'id': accompanyingPeriodId,
+        'personLocation': null,
+        'addressLocation': {
+            'id': addressId
+        }
+    };
+    const url = `/api/1.0/person/accompanying-course/${accompanyingPeriodId}.json`;
+    return fetch (url, {
+        method: 'PATCH',
+        headers: {'Content-Type': 'application/json;charset=utf-8'},
+        body: JSON.stringify(body)
+    })
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+export { postAddressToPerson, postAddressToHousehold, patchAddressToAccompanyingPeriod };