Merge branch 'improve_address' into person_renderbox_thirdparty_onthefly

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

@@ -1,22 +1,14 @@
 <template>
    <add-address
-      v-bind:key="context.entity.type"
+      v-bind:key="key"
       v-bind:context="context"
-      v-bind:options="addAddress.options"
-      v-bind:result="addAddress.result"
-      @submitAddress="submitAddress"
+      v-bind:options="options"
+      v-bind:addressChanged="submitAddress"
       ref="addAddress">
    </add-address>
 </template>
 
 <script>
-/*
-*  Address component is a uniq component for many contexts.
-*  Allow to create/attach/edit an address to
-*  - a person (new or edit address),
-*  - a household (move or edit address)
-*
-* */
 import AddAddress from './components/AddAddress.vue';
 import { patchAddress } from "./api";
 import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
@@ -26,60 +18,33 @@ export default {
    components: {
       AddAddress
    },
-   data() {
-      return {
-         context: {
-            edit: window.mode === 'edit',
-            entity: {
-               type: window.entityType,
-               id: window.entityId
-            },
-            addressId: window.addressId | null,
-            backUrl: window.backUrl,
-            valid: {
-               from: new Date()
-            },
-         },
-         addAddress: {
-            options: {
-
-               /// Options override default.
-               /// null value take default component value defined in AddAddress data()
-               button: {
-                  text:  {
-                     create: window.buttonText || null,
-                     edit: window.buttonText || null
-                  },
-                  size: window.buttonSize || null,
-                  displayText: window.buttonDisplayText   //boolean, default: true
-               },
-
-               /// Modal title text if create or edit address (trans chain, see i18n)
-               title: {
-                  create: window.modalTitle || null,
-                  edit: window.modalTitle || null
-               },
-
-               /// Display each step in page or Modal
-               bindModal: {
-                  step1: window.binModalStep1,  //boolean, default: true
-                  step2: window.binModalStep2   //boolean, default: true
-               }
-            }
-         }
+   props: ['addAddress'],
+   computed: {
+      context() {
+         return this.addAddress.context;
+      },
+      options() {
+         return this.addAddress.options;
+      },
+      key() {
+         return (this.context.edit) ? 'address_' + this.context.addressId
+            : this.context.entity.name + '_' + this.context.entity.id ;
       }
+
+   },
+   mounted() {
+      console.log('AddAddress: data context', this.context);
+      console.log('AddAddress: data options', this.options);
    },
    methods: {
       displayErrors() {
          return this.$refs.addAddress.errorMsg;
       },
-      submitAddress() {
-         console.log('@@@ click on Submit Address Button');
-         let payload = this.$refs.addAddress.submitNewAddress(); // Cast child method
-         this.addDateToAddressAndPostAddressTo(payload);
+      submitAddress(payload) {
+         console.log('@@@ click on Submit Address Button', payload);
+         this.addDateToAddressAndPostAddressTo(payload); // !!
       },
-      addDateToAddressAndPostAddressTo(payload)
-      {
+      addDateToAddressAndPostAddressTo(payload) {
          payload.body = {
             validFrom: {
                datetime: `${this.context.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
@@ -100,11 +65,9 @@ export default {
                this.$refs.addAddress.flag.loading = false;
             });
       },
-
-      postAddressTo(payload)
-      {
+      postAddressTo(payload) {
          console.log('postAddressTo', payload.entity);
-         if (!this.context.edit) {
+         if (!this.context.edit) { // !!
             switch (payload.entity) {
                case 'household':
                   postAddressToHousehold(payload.entityId, payload.addressId)
@@ -141,7 +104,7 @@ export default {
             }
          } else {
             // address is already linked, just finish !
-            window.location.assign(this.context.backUrl);
+            //window.location.assign(this.context.backUrl);
          }
       },
    }

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

@@ -57,9 +57,9 @@
          v-bind:entity="this.entity"
          v-bind:valid="this.context.valid"
          v-bind:flag="this.flag"
-         ref="showAddress"
-         v-bind:insideModal="false" @openEditPane="openEditPane"
-         @submitAddress="$emit('submitAddress')">
+         v-bind:insideModal="false"
+         @openEditPane="openEditPane"
+         ref="showAddress">
       </show-address-pane>
    </div>
 
@@ -110,7 +110,8 @@
          v-bind:default="this.default"
          v-bind:entity="this.entity"
          v-bind:flag="this.flag"
-         v-bind:insideModal="false" @closeEditPane="closeEditPane"
+         v-bind:insideModal="false"
+         @closeEditPane="closeEditPane"
          @getCities="getCities"
          @getReferenceAddresses="getReferenceAddresses">
       </edit-address-pane>
@@ -127,8 +128,7 @@ import EditAddressPane from './EditAddressPane.vue';
 
 export default {
    name: "AddAddress",
-   props: ['context', 'options', 'result'],
-   emits: ['submitAddress'],
+   props: ['context', 'options', 'addressChanged'],
    components: {
       Modal,
       ShowAddressPane,
@@ -187,6 +187,9 @@ export default {
    },
    computed: {
       step1WithModal() {
+         console.log('options displayText', this.options.button.displayText);
+         console.log('options bindModal.step1', this.options.bindModal.step1);
+         console.log('options bindModal.step2', this.options.bindModal.step2);
          return (this.options.bindModal !== null && typeof this.options.bindModal.step1 !== 'undefined') ?
             this.options.bindModal.step1 : this.default.bindModal.step1;
       },
@@ -249,7 +252,7 @@ export default {
             this.getInitialAddress(this.context.addressId);
          }
 
-         // when create new address, start first with editPane
+         // when create new address, start first with editPane !!
          if ( this.context.edit === false
             && this.flag.editPane === false
          ) {
@@ -407,10 +410,19 @@ export default {
             this.updateAddress({
                addressId: this.context.addressId,
                newAddress: newAddress
-            });
+            })
+            .then(payload => {
+                  console.log('payload', payload);
+                  this.addressChanged(payload);
+               }
+            );
+
          } else {
-            this.addNewAddress(newAddress);
+            this.addNewAddress(newAddress)
+            .then(payload => this.addressChanged(payload));
          }
+
+
       },
 
       /*
@@ -425,28 +437,33 @@ export default {
          if ('newPostcode' in payload) {
 
             let postcodeBody = payload.newPostcode;
-            if (this.context.entity.type === 'person') {
+            if (this.context.entity.name === 'person') {
                postcodeBody = Object.assign(postcodeBody, {'origin': 3});
             }
-            postPostalCode(postcodeBody)
+            return postPostalCode(postcodeBody)
                .then(postalCode =>  {
                   payload.postcode = {'id': postalCode.id };
-                  this.postNewAddress(payload);
+                  return this.postNewAddress(payload);
                });
 
          } else {
-            this.postNewAddress(payload);
+            return this.postNewAddress(payload);
          }
       },
 
       postNewAddress(payload) {
          //console.log('postNewAddress', payload);
-         postAddress(payload)
+         return postAddress(payload)
             .then(address => new Promise((resolve, reject) => {
                this.entity.address = address;
                this.flag.loading = false;
                this.flag.success = true;
-               resolve();
+               resolve({
+                  entity: this.context.entity.name,
+                  entityId: this.context.entity.id,
+                  addressId: this.entity.address.address_id
+                  }
+               );
             }))
             .catch((error) => {
                this.errorMsg.push(error);
@@ -463,31 +480,37 @@ export default {
          this.flag.loading = true;
 
          // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
-         if ('newPostcode' in payload.newAddress) {
 
+         if ('newPostcode' in payload.newAddress) {
             let postcodeBody = payload.newAddress.newPostcode;
             postcodeBody = Object.assign(postcodeBody, {'origin': 3});
 
-            postPostalCode(postcodeBody)
+            return postPostalCode(postcodeBody)
                .then(postalCode => {
+                  console.log('create new postcode', postalCode.id);
                   payload.newAddress.postcode = {'id': postalCode.id };
-                  this.patchExistingAddress(payload);
+                  return this.patchExistingAddress(payload);
                });
 
          } else {
-            this.patchExistingAddress(payload);
+            return this.patchExistingAddress(payload);
          }
       },
 
       patchExistingAddress(payload) {
          console.log('patchExistingAddress', payload);
-         patchAddress(payload.addressId, payload.newAddress)
+         return patchAddress(payload.addressId, payload.newAddress)
             .then(address => new Promise((resolve, reject) => {
-               this.entity.address = address;
-               this.flag.loading = false;
-               this.flag.success = true;
-               resolve();
-            }))
+                  this.entity.address = address;
+                  this.flag.loading = false;
+                  this.flag.success = true;
+                  return resolve({
+                     entity: this.context.entity.name,
+                     entityId: this.context.entity.id,
+                     addressId: this.entity.address.address_id
+                  });
+               })
+            )
             .catch((error) => {
                this.errorMsg.push(error);
                this.flag.loading = false;
@@ -497,11 +520,10 @@ export default {
       /*
       *  Method called by parent when submitting address
       *  (get out step1 show pane, submit button)
-      */
       submitNewAddress()
       {
          let payload = {
-            entity: this.context.entity.type,
+            entity: this.context.entity.name,
             entityId: this.context.entity.id,
             addressId: this.entity.address.address_id
          };
@@ -513,6 +535,7 @@ export default {
 
          return payload;
       }
+      */
    }
 }
 </script>

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

@@ -4,9 +4,11 @@
       <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
       <span class="sr-only">{{ $t('loading') }}</span>
    </div>
+
    <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
       {{ errorMsg }}
    </div>
+
    <div v-if="flag.success" class="alert alert-success">
       {{ $t(getSuccessText) }}
    </div>
@@ -26,23 +28,24 @@
    </div>
 
    <ul v-if="insideModal == false"
-      class="record_actions sticky-form-buttons">
+      class="record_actions">
+      <!--
       <li class="cancel">
          <a class="btn btn-cancel" v-bind:href="context.backUrl">
             {{ $t('back_to_the_list') }}</a>
-      </li>
+      </li>-->
       <li>
          <a @click.prevent="$emit('openEditPane')"
             class="btn btn-update">
             {{ $t('action.edit')}}
          </a>
       </li>
-      <li>
+      <!--<li>
          <a class="btn btn-save"
             @click.prevent="$emit('submitAddress')">
             {{ $t('action.save')}}
          </a>
-      </li>
+      </li>-->
    </ul>
 </template>
 
@@ -65,7 +68,7 @@ export default {
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane', 'submitAddress'], //?
+   emits: ['openEditPane'], // 'submitAddress'
    computed: {
       address() {
          return this.entity.address;
@@ -79,10 +82,10 @@ export default {
          }
       },
       getValidFromDateText() {
-         return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
+         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
       },
       getSuccessText() {
-         switch (this.context.entity.type) {
+         switch (this.context.entity.name) {
             /*
             case 'household':
                return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';

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

@@ -1,13 +1,59 @@
 import { createApp } from 'vue';
-import App from './App.vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import { addressMessages } from './i18n';
+import App from './App.vue';
 
 const i18n = _createI18n( addressMessages );
 
-const app = createApp({
-    template: `<app></app>`,
-})
-.use(i18n)
-.component('app', App)
-.mount('#address');
+let containers = document.querySelectorAll('.address-container');
+containers.forEach((container) => {
+
+    const app = createApp({
+        template: `<app v-bind:addAddress="this.addAddress" ></app>`,
+        data() {
+            return {
+                addAddress: {
+                    context: {
+                        entity: {
+                            name: container.dataset.targetEntityName,
+                            id: container.dataset.targetEntityId
+                        },
+                        edit: container.dataset.mode === 'edit',  //boolean
+                        addressId: container.dataset.addressId || null,
+                        backUrl: container.dataset.backUrl || null,
+                        valid: {
+                            from: new Date()
+                        },
+                    },
+                    options: {
+                        /// Options override default.
+                        /// null value take default component value defined in AddAddress data()
+                        button: {
+                            text:  {
+                                create: container.dataset.buttonText || null,
+                                edit: container.dataset.buttonText || null
+                            },
+                            size: container.dataset.buttonSize || null,
+                            displayText: container.dataset.buttonDisplayText !== 'false'  //boolean, default: true
+                        },
+                        /// Modal title text if create or edit address (trans chain, see i18n)
+                        title: {
+                            create: container.dataset.modalTitle || null,
+                            edit: container.dataset.modalTitle || null
+                        },
+                        /// Display each step in page or Modal
+                        bindModal: {
+                            step1: container.dataset.bindModalStep1 !== 'false',  //boolean, default: true
+                            step2: container.dataset.bindModalStep2 !== 'false'   //boolean, default: true
+                        }
+                    }
+                }
+            }
+        }
+    })
+    .use(i18n)
+    .component('app', App)
+    .mount(container);
+
+    console.log('container dataset', container.dataset);
+});

src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -14,54 +14,51 @@
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
     * buttonDisplayText     bool
-    * binModalStep1         bool
-    * binModalStep2         bool
+    * bindModalStep1         bool
+    * bindModalStep2         bool
 
 #}
-<div id="address"></div>
+<div class="address-container"
 
-<script type="text/javascript">
-    window.vueRootComponent = 'app';
-
-    window.entityType = '{{ targetEntity.name|e('js') }}';
-    window.entityId = '{{ targetEntity.id|e('js') }}';
+     data-target-entity-name="{{ targetEntity.name|e('html_attr') }}"
+     data-target-entity-id="{{ targetEntity.id|e('html_attr') }}"
 
     {% if 'edit' in app.request.get('_route') %}
-        window.mode = 'edit';
-        window.addressId = {{ app.request.get('address_id')|e('js') }};
+        data-mode="edit"
+        data-address-id="{{ app.request.get('address_id')|e('html_attr') }}"
     {% elseif mode is defined and mode == 'edit' %}
-        window.mode = 'edit';
-        window.addressId = {{ addressId|e('js') }};
+        data-mode="edit"
+        data-address-id="{{ addressId|e('html_attr') }}"
     {% endif %}
 
     {% if backUrl is defined %}
-        window.backUrl = '{{ backUrl|e('js') }}';
+        data-back-url="{{ backUrl|e('html_attr') }}"
     {% endif %}
 
     {% if modalTitle is defined %}
-        window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+        data-modal-title="{{ modalTitle|trans|e('html_attr') }}"
     {% endif %}
 
     {% if buttonText is defined %}
-        window.buttonText = '{{ buttonText|trans|e('js') }}';
+        data-button-text="{{ buttonText|trans|e('html_attr') }}"
     {% endif %}
 
     {% if buttonSize is defined %}
-        window.buttonSize = '{{ buttonSize|e('js') }}';
+        data-button-size="{{ buttonSize|e('html_attr') }}"
     {% endif %}
 
-    {% if buttonDisplayText is defined and buttonDisplayText == false %}
-        window.buttonDisplayText = false;
+    {% if buttonDisplayText is defined and buttonDisplayText != 1 %}
+        data-button-display-text="false"
     {% endif %}
 
-    {% if binModalStep1 is defined and binModalStep1 == false %}
-        window.binModalStep1 = false;
+    {% if bindModalStep1 is defined and bindModalStep1 != 1 %}
+        data-bind-modal-step1="false"
     {% endif %}
 
-    {% if binModalStep2 is defined and binModalStep2 == false %}
-        window.binModalStep2 = false;
+    {% if bindModalStep2 is defined and bindModalStep2 != 1 %}
+        data-bind-modal-step2="false"
     {% endif %}
-</script>
+></div>
 
 {{ encore_entry_script_tags('vue_address') }}
 {{ encore_entry_link_tags('vue_address') }}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ButtonLocation.vue

@@ -54,7 +54,7 @@ export default {
       assignAddress() {
         //console.log('assignAddress id', this.person.current_household_address);
          let payload = {
-            entity: this.context.entity.type,
+            entity: this.context.entity.name,
             entityId: this.context.entity.id,
             locationStatusTo: 'person',
             personId: this.person.id

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -41,7 +41,7 @@
                   :key="addAddress.type"
                   :options="addAddress.options"
                   :result="addAddress.result"
-                  @submitAddress="submitTemporaryAddress"
+                  :addressChanged="submitTemporaryAddress"
                   ref="addAddress">
                </add-address>
             </li>
@@ -118,7 +118,7 @@ export default {
       initAddressContext() {
          let context = {
             entity: {
-               type: this.accompanyingCourse.type,
+               name: this.accompanyingCourse.type,
                id: this.accompanyingCourse.id
             },
             edit: false,
@@ -133,7 +133,7 @@ export default {
       removeAddress() {
         //console.log('remove address');
          let payload = {
-            entity: this.context.entity.type,
+            entity: this.context.entity.name,
             entityId: this.context.entity.id,
             locationStatusTo: 'none'
          };
@@ -142,9 +142,8 @@ export default {
       displayErrors() {
          return this.$refs.addAddress.errorMsg;
       },
-      submitTemporaryAddress() {
+      submitTemporaryAddress(payload) {
         //console.log('@@@ click on Submit Temporary Address Button');
-         let payload = this.$refs.addAddress.submitNewAddress();
          payload['locationStatusTo'] = 'address'; // <== temporary, not none, not person
          this.$store.dispatch('updateLocation', payload);
          this.$store.commit('setEditContextTrue');

src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig

@@ -30,8 +30,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            binModalStep1: false,
-            binModalStep2: false,
+            bindModalStep1: false,
+            bindModalStep2: false,
         } %}
 
     {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -74,8 +74,8 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            binModalStep1: false,
-                            binModalStep2: false,
+                            bindModalStep1: false,
+                            bindModalStep2: false,
                         } %}
                     #}
 
@@ -90,8 +90,8 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            binModalStep1: false,
-                            binModalStep2: false,
+                            bindModalStep1: false,
+                            bindModalStep2: false,
                         } %}
                     #}
 

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -30,8 +30,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            binModalStep1: false,
-            binModalStep2: false,
+            bindModalStep1: false,
+            bindModalStep2: false,
         } %}
 
     {% endblock %}

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

@@ -10,8 +10,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id })
-            binModalStep1: false,
-            binModalStep2: false,
+            bindModalStep1: false,
+            bindModalStep2: false,
         } %}
     </div>
 

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

@@ -10,8 +10,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id })
-            binModalStep1: false,
-            binModalStep2: false,
+            bindModalStep1: false,
+            bindModalStep2: false,
         } %}
     </div>
 

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

@@ -37,8 +37,12 @@
                             buttonSize: 'btn-sm',
                             buttonText: 'Move household',
                             modalTitle: 'Move household',
-                            buttonDisplayText: false
+                            buttonDisplayText: false,
                         } %}
+                        {#
+                            bindModalStep1: false,
+                            bindModalStep2: true,
+                        #}
                     </li>
                     <li class="list-inline-item">
                         <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"

src/Bundle/ChillThirdPartyBundle/Resources/views/ThirdParty/show.html.twig

@@ -82,7 +82,7 @@
                     {% if thirdParty.address == null %}
                         <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
                     {%  else %}
-                        {{ thirdParty.address|chill_entity_render_box({'with_valid_from': false }) }}
+                        {{ thirdParty.address|chill_entity_render_box({'with_valid_from': false, 'extended_infos': true }) }}
                     {% endif %}
                 </dd>
 
@@ -103,7 +103,7 @@
             <ul class="record_actions sticky-form-buttons">
                 <li class="cancel">
                     <a class="btn btn-cancel" href="{{ chill_return_path_or('chill_3party_3party_index') }}">
-                        {{ 'Cancel'|trans }}
+                        {{ 'Back to the list'|trans }}
                     </a>
                 </li>