From 01cc2301367f0d835445b5dad5223d0d2b378d85 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 5 Aug 2021 22:04:41 +0200
Subject: [PATCH 1/8] Submitting address, and validFrom field

---
 .../Resources/public/vuejs/Address/App.vue    | 29 +++---
 .../vuejs/Address/components/AddAddress.vue   | 75 +++++++++++----
 .../vuejs/Address/components/ShowAddress.vue  | 95 ++++++++++++-------
 3 files changed, 134 insertions(+), 65 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index a820c253d..efe444075 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/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 }) {
-         console.log('@@@ CLICK button submitAddress');
-
-         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;
+      displayErrors() {
+         return this.$refs.addAddress.errorMsg;
       }
    }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index fc38f630b..0199dff4d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/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'],
-   emits: ['submitAddress'],
+   props: ['context', 'options', 'result'],
    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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
index c59104aca..e19c4f333 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
+++ b/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">
-         <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 v-if="!context.edit" class='person-address__valid'>
+         <h2>{{ $t('date') }}</h2>
+         <div class="input-group mb-3">
+            <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
+            <input type="date" class="form-control form-control-lg" name="validFrom"
+               v-bind:placeholder="$t('validFrom')"
+               v-model="validFrom"
+               aria-describedby="validFrom"
+            />
+         </div>
+         <!--div v-if="errorMsg.length > 0">
+            {{ errors }}
+         </div-->
+         <div v-if="flag.loading">
+            {{ $t('loading') }}
+         </div>
+         <div v-if="flag.success">
+            {{ $t('person_address_creation_success') }}
+         </div>
       </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];
       }
    }
 };

From 9f3ceb94f08851470a29bb21c5437a7d69eb982a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 15:53:50 +0200
Subject: [PATCH 2/8] adding options to custom button, and improve
 stepWithModal options

---
 .../Resources/public/vuejs/Address/App.vue    | 17 ++++---
 .../vuejs/Address/components/AddAddress.vue   | 49 +++++++++++++------
 .../translations/messages.fr.yml              |  1 +
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index efe444075..a2eec127d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -4,11 +4,6 @@
       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"
@@ -39,13 +34,21 @@ export default {
                /// Options override default
 
                /// First button text if create or edit address (trans chain, see i18n)
-               //textButton: { create: 'bim', edit: 'bam' },
+               button: {
+                  //text:  { create: 'bim', edit: 'bam' },
+                  type: 'btn-update',
+                  size: 'btn-sm',
+                  display: false
+               },
 
                /// Modal title text if create or edit address (trans chain, see i18n)
                //title: { create: 'boum', edit: 'pan' },
 
                /// Display each step in page or Modal
-               //bindModal: { step1: false, step2: false } //TODO true-false must not be possible
+               bindModal: {
+                  step1: false,
+                  step2: false
+               }
             },
             type: 'person',
             result: null // <== returned from addAddress component
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index 0199dff4d..b4fc037a1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -2,10 +2,12 @@
 
    <button v-if="step1WithModal"
       @click="openShowPane"
-      class="btn btn-create mt-4" type="button" name="button">
-      {{ $t(getTextButton) }}
+      class="btn mt-4" :class="getClassButton"
+      type="button" name="button" :title="$t(getTextButton)">
+      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
    </button>
 
+   <!-- step 1 -->
    <teleport to="body" v-if="step1WithModal">
       <modal v-if="flag.showPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
@@ -58,6 +60,7 @@
       </show-address>
    </div>
 
+   <!-- step 2 -->
    <teleport to="body" v-if="step2WithModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
@@ -139,7 +142,11 @@ export default {
             success: false
          },
          default: {
-            textButton: { create: 'add_an_address_title', edit: 'edit_address' },
+            button: {
+               text: { create: 'add_an_address_title', edit: 'edit_address' },
+               type: 'btn-create',
+               display: true
+            },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
             bindModal: {
                step1: true,
@@ -182,28 +189,42 @@ export default {
       }
    },
    computed: {
-
-      // TODO improve: props options must override data default
       step1WithModal() {
-         return (this.options.bindModal) ? this.options.bindModal.step1 : this.default.bindModal.step1;
+         return (this.options.bindModal && typeof this.options.bindModal.step1 !== 'undefined') ?
+            this.options.bindModal.step1 : this.default.bindModal.step1;
       },
       step2WithModal() {
-         return (this.options.bindModal) ? this.options.bindModal.step2 : this.default.bindModal.step2;
+         let step2 = (this.options.bindModal && typeof this.options.bindModal.step2 !== 'undefined') ?
+            this.options.bindModal.step2 : this.default.bindModal.step2;
+
+         if (step2 === false && this.step1WithModal === true) {
+            console.log("step2 must open in a Modal");
+            return true;
+         }
+         return step2;
       },
 
-      getTextButton() {
-         if (this.options.textButton) {
-            return (this.context.edit) ? this.options.textButton.edit : this.options.textButton.create;
-         }
-         return (this.context.edit) ? this.default.textButton.edit : this.default.textButton.create;
-      },
       getTextTitle() {
          if (this.options.title) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
+      },
+      getTextButton() {
+         if (this.options.button && this.options.button.text) {
+            return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
+         }
+         return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
+      },
+      getClassButton() {
+         let size = (this.options.button && this.options.button.size) ? this.options.button.size : '';
+         let type = (this.options.button && this.options.button.type) ? this.options.button.type : this.default.button.type;
+         return size ? size + ' ' + type : type;
+      },
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+            this.options.button.display : this.default.button.display;
       }
-
    },
    mounted() {
       if (!this.step1WithModal) {
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index d030d9dc8..d8cd87626 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -208,6 +208,7 @@ The address has been successfully updated: L'adresse a été mise à jour avec s
 Update address for %name%: Mettre à jour une adresse pour %name%
 Modify address for %name%: Modifier une adresse pour %name%
 Edit an address: Modifier une adresse
+Edit address: Modifier l'adresse
 Addresses history for %name%: Historique des adresses de %name%
 Addresses history: Historique des adresses
 New address : Nouvelle adresse

From 6c0ab6f25e3d07d5352913d9f36708ce4faa8761 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 16:25:04 +0200
Subject: [PATCH 3/8] when creating new address, start first with edit panel

---
 .../public/vuejs/Address/components/AddAddress.vue   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index b4fc037a1..f543bccc1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -203,7 +203,6 @@ export default {
          }
          return step2;
       },
-
       getTextTitle() {
          if (this.options.title) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
@@ -242,7 +241,16 @@ export default {
          if (this.context.addressId) {
             this.getInitialAddress(this.context.addressId);
          }
-         this.flag.showPane = true;
+         // when create new address, start first with editPane
+         if ( this.context.edit === false
+            && this.flag.editPane === false
+         ) {
+            this.openEditPane();
+            this.flag.editPane = true;
+
+         } else {
+            this.flag.showPane = true;
+         }
       },
 
       openEditPane() {

From b62597426c3a2e0146cd1e58976d829f1e41b22d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 16:30:48 +0200
Subject: [PATCH 4/8] classes for address-valid

---
 .../Resources/public/chill/scss/render_box.scss               | 4 ++--
 .../Resources/public/vuejs/Address/components/ShowAddress.vue | 4 ++--
 .../ChillMainBundle/Resources/views/Entity/address.html.twig  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
index 68bbe2afc..cd57ba3cd 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
@@ -94,8 +94,8 @@ section.chill-entity {
         }
 
         span.address-valid {
-            &.address-since {}
-            &.address-until {}
+            &.date-since {}
+            &.date-until {}
         }
     }
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
index e19c4f333..07e4617d3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
@@ -58,8 +58,8 @@
          </div>
       </div>
 
-      <div v-if="!context.edit" class='person-address__valid'>
-         <h2>{{ $t('date') }}</h2>
+      <div v-if="!context.edit" class='address-valid date-since'>
+         <h3>{{ $t('date') }}</h3>
          <div class="input-group mb-3">
             <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
             <input type="date" class="form-control form-control-lg" name="validFrom"
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
index 7e1c47da4..4628e3cb5 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@@ -71,12 +71,12 @@
 
 {% macro validity(address, options) %}
     {%- if options['with_valid_from'] == true -%}
-        <span class="address-valid address-since">
+        <span class="address-valid date-since">
             {{ 'Since %date%'|trans( { '%date%' : address.validFrom|format_date('long') } ) }}
         </span>
     {%- endif -%}
     {%- if options['with_valid_to'] == true -%}
-        <span class="address-valid address-until">
+        <span class="address-valid date-until">
             {{ 'Until %date%'|trans( { '%date%' : address.validTo|format_date('long') } ) }}
         </span>
     {%- endif -%}

From da09e10fb1c2b5e06e115324d4b7086d2ea29afb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 17:36:19 +0200
Subject: [PATCH 5/8] adding options in root component to see result or
 redirect (not working)

---
 .../Resources/public/vuejs/Address/App.vue    | 28 +++++++++++++++----
 .../vuejs/Address/components/AddAddress.vue   |  7 +++--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index a2eec127d..fa7bd5e95 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -1,9 +1,23 @@
 <template>
 
-   <div v-for="error in displayErrors"
-      class="alert alert-danger my-2">
+   <div v-for="error in displayErrors" class="alert alert-danger my-2">
       {{ 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="addAddress.type"
       v-bind:context="context"
@@ -46,9 +60,13 @@ export default {
 
                /// Display each step in page or Modal
                bindModal: {
-                  step1: false,
-                  step2: false
-               }
+                  //step1: false,
+                  //step2: false
+               },
+
+               // Options only for root parent component
+               displayResult: true,
+               redirectToBackUrl: false
             },
             type: 'person',
             result: null // <== returned from addAddress component
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index f543bccc1..96371aec3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -511,11 +511,14 @@ export default {
                   .then(person => new Promise((resolve, reject) => {
 
                      console.log('commit addAddressToPerson !!!', person);
-                     this.result = person;
+                     this.$props.result = person;
 
                      this.flag.loading = false;
                      this.flag.success = true;
-                     window.location.assign(payload.backUrl);
+
+                     if (this.options.redirectToBackUrl) {
+                        window.location.assign(payload.backUrl);
+                     }
                      resolve();
                   }))
                   .catch((error) => {

From 24714227b8dea010b861a0bc68d9b6f937b454e2 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 21:20:59 +0200
Subject: [PATCH 6/8] transmit all options from a twig include template

---
 .../Resources/public/vuejs/Address/App.vue    | 28 +++++++++++--------
 .../vuejs/Address/components/AddAddress.vue   | 18 ++++++------
 .../Address/_insert_vue_address.html.twig     | 28 +++++++++++++++++++
 .../Resources/views/Address/edit.html.twig    | 21 ++++----------
 .../Resources/views/Address/list.html.twig    | 24 +++++++++++++---
 .../Resources/views/Person/view.html.twig     | 14 +++++++---
 6 files changed, 89 insertions(+), 44 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index fa7bd5e95..1ef9b0186 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -41,32 +41,36 @@ export default {
             edit: window.mode === 'edit',
             personId: window.personId,
             addressId: window.addressId,
-            backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
+            backUrl: window.backUrl,
          },
          addAddress: {
             options: {
-               /// Options override default
 
-               /// First button text if create or edit address (trans chain, see i18n)
+               /// Options override default.
+               /// null value take default component value
                button: {
-                  //text:  { create: 'bim', edit: 'bam' },
-                  type: 'btn-update',
-                  size: 'btn-sm',
-                  display: false
+                  text:  {
+                     /// if create or edit address
+                     create: window.buttonText || null,
+                     edit: window.buttonText || null
+                  },
+                  type: window.button.type || null,
+                  size: window.button.size || null,
+                  display: window.button.display
                },
-
                /// Modal title text if create or edit address (trans chain, see i18n)
-               //title: { create: 'boum', edit: 'pan' },
-
+               title: {
+                  create: window.modalTitle || null,
+                  edit: window.modalTitle || null
+               },
                /// Display each step in page or Modal
                bindModal: {
                   //step1: false,
                   //step2: false
                },
-
                // Options only for root parent component
                displayResult: true,
-               redirectToBackUrl: false
+               redirectToBackUrl: true
             },
             type: 'person',
             result: null // <== returned from addAddress component
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index 96371aec3..fce900142 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -2,7 +2,7 @@
 
    <button v-if="step1WithModal"
       @click="openShowPane"
-      class="btn mt-4" :class="getClassButton"
+      class="btn" :class="getClassButton"
       type="button" name="button" :title="$t(getTextButton)">
       <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
    </button>
@@ -14,7 +14,7 @@
          @close="flag.showPane = false">
 
          <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+            <h2 class="modal-title">{{ 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>
@@ -67,7 +67,7 @@
          @close="flag.editPane = false">
 
          <template v-slot:header>
-            <h2 class="modal-title">{{ $t(getTextTitle) }}
+            <h2 class="modal-title">{{ 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>
@@ -204,24 +204,24 @@ export default {
          return step2;
       },
       getTextTitle() {
-         if (this.options.title) {
+         if (this.options.title && (this.options.title.edit !== null || this.options.title.create !== null)) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
-         return (this.context.edit) ? this.default.title.edit : this.default.title.create;
+         return (this.context.edit) ? this.$t(this.default.title.edit) : this.$t(this.default.title.create);
       },
       getTextButton() {
-         if (this.options.button && this.options.button.text) {
+         if (this.options.button && this.options.button.text && (this.options.button.text.edit !== null || this.options.button.text.create !== null)) {
             return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
          }
          return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
       },
       getClassButton() {
-         let size = (this.options.button && this.options.button.size) ? this.options.button.size : '';
-         let type = (this.options.button && this.options.button.type) ? this.options.button.type : this.default.button.type;
+         let size = (this.options.button && this.options.button.size !== null) ? this.options.button.size : '';
+         let type = (this.options.button && this.options.button.type !== null) ? this.options.button.type : this.default.button.type;
          return size ? size + ' ' + type : type;
       },
       displayTextButton() {
-         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+         return (this.options.button !== null && typeof this.options.button.display !== 'undefined') ?
             this.options.button.display : this.default.button.display;
       }
    },
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
new file mode 100644
index 000000000..fc231c02f
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -0,0 +1,28 @@
+<div id="address"></div>{# <== vue_address component #}
+
+<script type="text/javascript">
+    window.vueRootComponent = 'app';
+    window.mode = '{{ mode|e('js') }}';
+    window.personId = {{ person.id|e('js') }};
+    window.addressId = {{ address_id|e('js') }};
+    window.backUrl = '{{ path('chill_person_view', { 'person_id': person.id })|e('js') }}';
+{% if modalTitle is defined %}
+    window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+{% endif %}
+    window.button = {};
+{% if buttonText is defined %}
+    window.buttonText = '{{ buttonText|trans|e('js') }}';
+{% endif %}
+{% if buttonType is defined %}
+    window.button.type = '{{ buttonType|e('js') }}';
+{% endif %}
+{% if buttonSize is defined %}
+    window.button.size = '{{ buttonSize|e('js') }}';
+{% endif %}
+{% if buttonDisplay is defined and buttonDisplay == false %}
+    window.button.display = false;
+{% endif %}
+</script>
+
+{{ encore_entry_script_tags('vue_address') }}
+{{ encore_entry_link_tags('vue_address') }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
index 1868bd9de..366ec5b64 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
@@ -25,22 +25,13 @@
 
     {% block content %}
         <h1>{{ block('title') }}</h1>
-        <div id="address"></div>
+
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            address_id: person.lastAddress.id,
+            mode: 'edit'
+        } %}
+
     {% endblock %}
 
 </div>
 {% endblock %}
-
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.addressId = {{ address.id|e('js') }};
-        window.mode = 'edit';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
index 60de27e37..ae29af486 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
@@ -27,10 +27,16 @@
 
     <ul class="record_actions my-3">
         <li style="margin: auto;">
-            <a class="btn btn-lg btn-create"
-               href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
-                {{ 'Add an address'|trans }}
-            </a>
+
+            {# include vue_address component #}
+            {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                address_id: person.lastAddress.id,
+                mode: 'new',
+                buttonSize: 'btn-lg',
+                buttonText: 'Add an address',
+                modalTitle: 'Add an address',
+            } %}
+
         </li>
     </ul>
 
@@ -58,10 +64,16 @@
             {% set row = row + 1 %}
             {% if address.validTo is not empty and address.validTo < previousRowFrom %}
                 <div class="{{ 'row' ~ row ~ ' ' }}col-a action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                 <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="date">
                     {% if address.validTo is not empty %}
                         {{ address.validTo|format_date('short') }}
@@ -81,7 +93,10 @@
                         'has_no_address': true
                     }) }}
                     <ul class="record_actions">
+
+                        {# include vue_address component #}
                         <li><a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a></li>
+
                     </ul>
                 </div>
             {# endif #}
@@ -130,6 +145,7 @@
             </a>
         </li>
         <li>
+            {# include vue_address component #}
             <a class="btn btn-create"
                 href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
                 {{ 'Add an address'|trans }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
index db81ec320..5e5169575 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
@@ -200,10 +200,16 @@ This view should receive those arguments:
 
                         <ul class="list-inline text-right mt-2">
                             <li class="list-inline-item">
-                                <a class="btn btn-warning btn-sm" title="{{ 'Edit'|trans }}"
-                                   href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
-                                    <i class="fa fa-pencil fa-fw"></i>
-                                </a>
+                                {# include vue_address component #}
+                                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                                    address_id: person.lastAddress.id,
+                                    mode: 'edit',
+                                    modalTitle: 'Edit address',
+                                    buttonText: 'Edit address',
+                                    buttonType: 'btn-update',
+                                    buttonSize: 'btn-sm',
+                                    buttonDisplay: false
+                                } %}
                             </li>
                             <li class="list-inline-item">
                                 <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"

From cdbd97e59587ad37be2418015ce8335b78653335 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 21:32:10 +0200
Subject: [PATCH 7/8] passing option binModalStep from twig include template

---
 .../Resources/public/vuejs/Address/App.vue    |  4 ++--
 .../vuejs/Address/components/AddAddress.vue   |  4 ++--
 .../Address/_insert_vue_address.html.twig     |  6 ++++++
 .../Resources/views/Address/edit.html.twig    |  4 +++-
 .../Resources/views/Address/new.html.twig     | 21 +++++++------------
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index 1ef9b0186..c6a2ed8c8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -65,8 +65,8 @@ export default {
                },
                /// Display each step in page or Modal
                bindModal: {
-                  //step1: false,
-                  //step2: false
+                  step1: window.binModalStep1,
+                  step2: window.binModalStep2
                },
                // Options only for root parent component
                displayResult: true,
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
index fce900142..be5e7038a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -190,11 +190,11 @@ export default {
    },
    computed: {
       step1WithModal() {
-         return (this.options.bindModal && typeof this.options.bindModal.step1 !== 'undefined') ?
+         return (this.options.bindModal !== null && typeof this.options.bindModal.step1 !== 'undefined') ?
             this.options.bindModal.step1 : this.default.bindModal.step1;
       },
       step2WithModal() {
-         let step2 = (this.options.bindModal && typeof this.options.bindModal.step2 !== 'undefined') ?
+         let step2 = (this.options.bindModal !== null && typeof this.options.bindModal.step2 !== 'undefined') ?
             this.options.bindModal.step2 : this.default.bindModal.step2;
 
          if (step2 === false && this.step1WithModal === true) {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
index fc231c02f..bb70a976a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -22,6 +22,12 @@
 {% if buttonDisplay is defined and buttonDisplay == false %}
     window.button.display = false;
 {% endif %}
+{% if binModalStep1 is defined and binModalStep1 == false %}
+    window.binModalStep1 = false
+{% endif %}
+{% if binModalStep2 is defined and binModalStep2 == false %}
+    window.binModalStep2 = false
+{% endif %}
 </script>
 
 {{ encore_entry_script_tags('vue_address') }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
index 366ec5b64..1fb7607d5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
@@ -28,7 +28,9 @@
 
         {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
             address_id: person.lastAddress.id,
-            mode: 'edit'
+            mode: 'edit',
+            binModalStep1: false,
+            binModalStep2: false,
         } %}
 
     {% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index cd45d66ea..2bb1654f6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -25,21 +25,16 @@
 
     {% block content %}
         <h1>{{ block('title') }}</h1>
-        <div id="address"></div>
+
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            address_id: person.lastAddress.id,
+            mode: 'new',
+            binModalStep1: false,
+            binModalStep2: false,
+        } %}
+
     {% endblock %}
 
 </div>
 {% endblock %}
 
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.mode = 'new';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}

From 47d704b52149afe34e07c446da244eca02ef07f7 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 6 Aug 2021 21:46:10 +0200
Subject: [PATCH 8/8] passing option backUrl from include template twig

---
 .../views/Address/_insert_vue_address.html.twig       | 11 ++++++++---
 .../Resources/views/Person/view.html.twig             |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
index bb70a976a..17c111e06 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -5,7 +5,12 @@
     window.mode = '{{ mode|e('js') }}';
     window.personId = {{ person.id|e('js') }};
     window.addressId = {{ address_id|e('js') }};
-    window.backUrl = '{{ path('chill_person_view', { 'person_id': person.id })|e('js') }}';
+{% if backUrl is defined %}
+    window.backUrl = '{{ backUrl|e('js') }}';
+{% else %}
+    window.backUrl = '{{ path('chill_person_address_list', { 'person_id': person.id })|e('js') }}';
+{% endif %}
+
 {% if modalTitle is defined %}
     window.modalTitle = '{{ modalTitle|trans|e('js') }}';
 {% endif %}
@@ -23,10 +28,10 @@
     window.button.display = false;
 {% endif %}
 {% if binModalStep1 is defined and binModalStep1 == false %}
-    window.binModalStep1 = false
+    window.binModalStep1 = false;
 {% endif %}
 {% if binModalStep2 is defined and binModalStep2 == false %}
-    window.binModalStep2 = false
+    window.binModalStep2 = false;
 {% endif %}
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
index 5e5169575..53166ab9e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig
@@ -203,6 +203,7 @@ This view should receive those arguments:
                                 {# include vue_address component #}
                                 {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
                                     address_id: person.lastAddress.id,
+                                    backUrl: path('chill_person_view', { 'person_id': person.id }),
                                     mode: 'edit',
                                     modalTitle: 'Edit address',
                                     buttonText: 'Edit address',