From 6e42b0862715105b6666f6257688a485432cee5e Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 08:19:12 +0200
Subject: [PATCH 1/7] Address: remove unused file

---
 .../AddAddress/SelectHouseholdAddress.vue     | 47 -------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/SelectHouseholdAddress.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/SelectHouseholdAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/SelectHouseholdAddress.vue
deleted file mode 100644
index 74ce14c3c..000000000
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/SelectHouseholdAddress.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-   <div class="container">
-      <VueMultiselect
-         v-model="value"
-         @select="selectAddress"
-         name="field"
-         track-by="id"
-         label="value"
-         :custom-label="transName"
-         :multiple="false"
-         :placeholder="$t('select_address')"
-         :options="addresses">
-      </VueMultiselect>
-   </div>
-</template>
-
-<script>
-import VueMultiselect from 'vue-multiselect';
-
-export default {
-   name: 'SelectHouseholdAddress',
-   components: { VueMultiselect },
-   props: ['address'],
-   data() {
-      return {
-         value: null
-      }
-   },
-   computed: {
-      addresses() {
-         return this.address.loaded.addresses;
-      }
-   },
-   methods: {
-      transName(value) {
-         return `${value.text} ${value.postcode.name}`
-      },
-      selectAddress(value) {
-         this.address.selected.address = value;
-      }
-   }
-};
-</script>
-
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
-
-

From 4bafa83b65297ccf621c2c8775ceb7d5cfec3da4 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 08:27:58 +0200
Subject: [PATCH 2/7] Address: rename [Show|Edit]AddressPane files

---
 .../vuejs/Address/components/AddAddress.vue   | 24 +++++++++----------
 .../{EditAddressPane.vue => EditPane.vue}     |  2 +-
 .../{ShowAddressPane.vue => ShowPane.vue}     |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)
 rename src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/{EditAddressPane.vue => EditPane.vue} (99%)
 rename src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/{ShowAddressPane.vue => ShowPane.vue} (99%)

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 2a210e992..248e7da2b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -24,14 +24,14 @@
          </template>
 
          <template v-slot:body>
-            <show-address-pane
+            <show-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
                v-bind:flag="this.flag"
                ref="showAddress">
-            </show-address-pane>
+            </show-pane>
          </template>
 
          <template v-slot:footer>
@@ -49,7 +49,7 @@
    </teleport>
    <div class="mt-4" v-else>
 
-      <show-address-pane v-if="flag.showPane"
+      <show-pane v-if="flag.showPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -58,7 +58,7 @@
          v-bind:insideModal="false"
          @openEditPane="openEditPane"
          ref="showAddress">
-      </show-address-pane>
+      </show-pane>
    </div>
 
    <!-- step 2 -->
@@ -77,7 +77,7 @@
          </template>
 
          <template v-slot:body>
-            <edit-address-pane
+            <edit-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
                v-bind:default="this.default"
@@ -85,7 +85,7 @@
                v-bind:flag="this.flag"
                @getCities="getCities"
                @getReferenceAddresses="getReferenceAddresses">
-            </edit-address-pane>
+            </edit-pane>
          </template>
 
          <template v-slot:footer>
@@ -102,7 +102,7 @@
    </teleport>
    <div class="mt-4" v-else>
 
-      <edit-address-pane v-if="flag.editPane"
+      <edit-pane v-if="flag.editPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -112,7 +112,7 @@
          @closeEditPane="closeEditPane"
          @getCities="getCities"
          @getReferenceAddresses="getReferenceAddresses">
-      </edit-address-pane>
+      </edit-pane>
    </div>
 
 </template>
@@ -121,16 +121,16 @@
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
 import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
-import ShowAddressPane from './ShowAddressPane.vue';
-import EditAddressPane from './EditAddressPane.vue';
+import ShowPane from './ShowPane.vue';
+import EditPane from './EditPane.vue';
 
 export default {
    name: "AddAddress",
    props: ['context', 'options', 'addressChangedCallback'],
    components: {
       Modal,
-      ShowAddressPane,
-      EditAddressPane,
+      ShowPane,
+      EditPane,
    },
    data() {
       return {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
similarity index 99%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index 7bbad3db5..8cacf9981 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -85,7 +85,7 @@ import AddressMap from './AddAddress/AddressMap';
 import AddressMore from './AddAddress/AddressMore'
 
 export default {
-   name: "EditAddressPane",
+   name: "EditPane",
    components: {
       CountrySelection,
       CitySelection,
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
similarity index 99%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index 7e55f0c1b..eace3f6d2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -66,7 +66,7 @@ import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/da
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 export default {
-   name: 'ShowAddressPane',
+   name: 'ShowPane',
    components: {
       AddressRenderBox
    },

From 782f0bc3326a6ac145b9ef82afb2defc0fd33964 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 10:43:59 +0200
Subject: [PATCH 3/7] twig _insert_vue_address, rename mode create

---
 .../Resources/views/Address/_insert_vue_address.html.twig       | 2 +-
 .../ChillPersonBundle/Resources/views/Address/list.html.twig    | 2 +-
 .../Resources/views/Household/addresses.html.twig               | 2 +-
 .../Resources/views/Household/summary.html.twig                 | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
index 05f557d44..fa08286f8 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -7,7 +7,7 @@
           name:     string
           id:       integer
       }
-    * mode          string ['edit*'|'create']
+    * mode          string ['edit*'|'new']
     * addressId     integer
     * backUrl       twig route:   path('route', {parameters})
     * modalTitle    twig translated chain
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
index 3719e0ebe..ce68e4da8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
@@ -32,7 +32,7 @@
             {% 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 }),
-                mode: 'create',
+                mode: 'new',
                 buttonSize: 'btn-lg',
                 buttonText: 'Add an address',
                 modalTitle: 'Add an address',
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
index 087e8be11..3bee011dd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
@@ -18,7 +18,7 @@
                 {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
                     targetEntity: { name: 'household', id: household.id },
                     backUrl: path('chill_person_household_address_move', { 'household_id': household.id }),
-                    mode: 'create',
+                    mode: 'new',
                     buttonSize: 'btn-lg',
                     buttonText: 'Move household',
                     modalTitle: 'Move household',
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
index a680f18f2..e8b0c7b78 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
@@ -33,7 +33,7 @@
                         {% 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 }),
-                            mode: 'create',
+                            mode: 'new',
                             buttonSize: 'btn-sm',
                             buttonText: 'Move household',
                             modalTitle: 'Move household',

From 6a60758c0d322c733c39952a86b41ee373581c1d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 10:50:57 +0200
Subject: [PATCH 4/7] AddAddress: openPanesInModal, uniq option to
 enable/disable all step123 in Modal

---
 .../vuejs/Address/components/AddAddress.vue   | 25 +++++--------------
 .../Resources/public/vuejs/Address/index.js   |  7 ++----
 .../Address/_insert_vue_address.html.twig     | 10 +++-----
 .../components/CourseLocation.vue             |  4 +--
 .../Resources/views/Address/edit.html.twig    |  3 +--
 .../Resources/views/Address/list.html.twig    |  6 ++---
 .../Resources/views/Address/new.html.twig     |  3 +--
 .../views/Household/address_edit.html.twig    |  3 +--
 .../views/Household/address_move.html.twig    |  3 +--
 .../views/Household/summary.html.twig         |  3 +--
 10 files changed, 19 insertions(+), 48 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 248e7da2b..69f764284 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -9,8 +9,8 @@
    </button>
 
    <!-- step 1 -->
-   <teleport to="body" v-if="step1WithModal">
       <modal v-if="flag.showPane"
+   <teleport to="body" v-if="InModal">
          modalDialogClass="modal-dialog-scrollable modal-xl"
          @close="flag.showPane = false">
 
@@ -62,7 +62,7 @@
    </div>
 
    <!-- step 2 -->
-   <teleport to="body" v-if="step2WithModal">
+   <teleport to="body" v-if="InModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
          @close="flag.editPane = false">
@@ -147,10 +147,7 @@ export default {
                displayText: true
             },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
-            bindModal: {
-               step1: true,
-               step2: true,
-            },
+            openPanesInModal: true,
             useDate: {
                validFrom: false,
                validTo: false
@@ -192,19 +189,9 @@ export default {
       }
    },
    computed: {
-      step1WithModal() {
-         return (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step1 !== 'undefined') ?
-            this.options.bindModal.step1 : this.default.bindModal.step1;
-      },
-      step2WithModal() {
-         let step2 = (typeof this.options.bindModal !== 'undefined' && 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;
+      InModal() {
+         return (typeof this.options.openPanesInModal !== 'undefined') ?
+            this.options.openPanesInModal : this.default.openPanesInModal;
       },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
index cb628586a..4e49b2207 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
@@ -38,12 +38,9 @@ containers.forEach((container) => {
                             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 Date fields
+                        /// Display panes in Modal for step123
+                        openPanesInModal: container.dataset.openPanesInModal !== 'false',  //boolean, default: true
                         useDate: {
                             validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
                             validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
index fa08286f8..052cdbec9 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -14,9 +14,8 @@
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
     * buttonDisplayText     bool
-    * bindModalStep1         bool
-    * bindModalStep2         bool
 
+    * openPanesInModal      bool (default: true)
 #}
 <div class="address-container"
 
@@ -51,13 +50,10 @@
         data-button-display-text="false"
     {% endif %}
 
-    {% if bindModalStep1 is defined and bindModalStep1 != 1 %}
-        data-bind-modal-step1="false"
+    {% if openPanesInModal is defined and openPanesInModal != 1 %}
+        data-open-panes-in-modal="false"
     {% endif %}
 
-    {% if bindModalStep2 is defined and bindModalStep2 != 1 %}
-        data-bind-modal-step2="false"
-    {% endif %}
 
     {% if useValidFrom is defined and useValidFrom == 1 %}
         data-use-valid-from="true"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
index df2febe3f..a7638a5f1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
@@ -89,9 +89,7 @@ export default {
                   edit: 'courselocation.edit_temporary_address'
                },
                /// Display each step in page or Modal
-               bindModal: {
-                  //step1: false, step2: false
-               },
+               openPanesInModal: true,
                // Use Date fields
                useDate: {
                   validFrom: true
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
index 20713ec49..dd7679cc2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig
@@ -30,8 +30,7 @@
         {% 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 }),
-            bindModalStep1: false,
-            bindModalStep2: false,
+            openPanesInModal: false,
         } %}
 
     {% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
index ce68e4da8..205b9aab7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
@@ -74,8 +74,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
-                            bindModalStep2: false,
+                            openPanesInModal: false,
                         } %}
                     #}
 
@@ -90,8 +89,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
-                            bindModalStep2: false,
+                            openPanesInModal: false,
                         } %}
                     #}
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index d3102fda5..53c785dda 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -30,8 +30,7 @@
         {% 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 }),
-            bindModalStep1: false,
-            bindModalStep2: false,
+            openPanesInModal: false,
             useValidFrom: true,
             useValidTo: false
         } %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
index 2bc2b6cd0..2bfedaee7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
@@ -10,8 +10,7 @@
         {% 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 }),
-            bindModalStep1: false,
-            bindModalStep2: false,
+            openPanesInModal: false,
         } %}
     </div>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
index 6d65c0a7f..2b7dfa8f0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig
@@ -10,8 +10,7 @@
         {% 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 }),
-            bindModalStep1: false,
-            bindModalStep2: false,
+            openPanesInModal: false,
         } %}
     </div>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
index e8b0c7b78..d8c53dbf5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig
@@ -40,8 +40,7 @@
                             buttonDisplayText: false,
                         } %}
                         {#
-                            bindModalStep1: false,
-                            bindModalStep2: true,
+                            openPanesInModal: false
                         #}
                     </li>
                     <li class="list-inline-item">

From f048395a892b641148933b7c21c50bddfceb8229 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 10:57:13 +0200
Subject: [PATCH 5/7] AddAddress: reorganize 4 steps Pane: show, suggest, edit,
 and date

---
 .../Address/components/ActionButtons.vue      |  30 +++++
 .../vuejs/Address/components/AddAddress.vue   | 123 ++++++++++++------
 .../vuejs/Address/components/DatePane.vue     | 121 +++++++++++++++++
 .../vuejs/Address/components/EditPane.vue     |  42 +++---
 .../vuejs/Address/components/ShowPane.vue     | 101 ++++----------
 .../vuejs/Address/components/SuggestPane.vue  |  60 +++++++++
 6 files changed, 338 insertions(+), 139 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
new file mode 100644
index 000000000..94d6ab105
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -0,0 +1,30 @@
+<template>
+   <ul class="record_actions"
+      :class="{ 'sticky-form-buttons': isStickyForm }">
+
+      <li v-if="isStickyForm" class="cancel">
+         <a class="btn btn-cancel" v-bind:href="context.backUrl">
+            {{ $t('back_to_the_list') }}
+         </a>
+      </li>
+
+      <slot name="action"></slot>
+
+      <li v-if="isStickyForm">
+         <a class="btn btn-save">
+            {{ $t('action.save')}}
+         </a>
+      </li>
+   </ul>
+</template>
+
+<script>
+export default {
+   name: "ActionButtons",
+   props: [ 'options', 'default' ],
+   computed: {
+      isStickyForm() {
+      }
+   }
+}
+</script>
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 69f764284..1948535dc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -1,18 +1,21 @@
 <template>
 
-   <!-- start with a button -->
-   <button v-if="step1WithModal"
-      @click="openShowPane"
-      class="btn" :class="getClassButton"
-      type="button" name="button" :title="$t(getTextButton)">
-      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-   </button>
+   <!-- step0 -->
+   <show-pane v-if="flag.showPane"
+      v-bind:context="this.context"
+      v-bind:options="this.options"
+      v-bind:default="this.default"
+      v-bind:entity="this.entity"
+      v-bind:flag="this.flag"
+      @openEditPane="openEditPane"
+      ref="showAddress">
+   </show-pane>
 
    <!-- step 1 -->
-      <modal v-if="flag.showPane"
    <teleport to="body" v-if="InModal">
+      <modal v-if="flag.suggestPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.showPane = false">
+         @close="flag.suggestPane = false">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -24,14 +27,14 @@
          </template>
 
          <template v-slot:body>
-            <show-pane
+            <suggest-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
                v-bind:default="this.default"
                v-bind:entity="this.entity"
                v-bind:flag="this.flag"
-               ref="showAddress">
-            </show-pane>
+               ref="suggestAddress">
+            </suggest-pane>
          </template>
 
          <template v-slot:footer>
@@ -39,8 +42,7 @@
                class="btn btn-update">
                {{ $t('action.edit')}}
             </button>
-            <button class="btn btn-save"
-               @click.prevent="$emit('submitAddress')">
+            <button class="btn btn-save">
                {{ $t('action.save')}}
             </button>
          </template>
@@ -48,8 +50,7 @@
       </modal>
    </teleport>
    <div class="mt-4" v-else>
-
-      <show-pane v-if="flag.showPane"
+      <suggest-pane v-if="flag.suggestPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -57,8 +58,8 @@
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
          @openEditPane="openEditPane"
-         ref="showAddress">
-      </show-pane>
+         ref="suggestAddress">
+      </suggest-pane>
    </div>
 
    <!-- step 2 -->
@@ -101,7 +102,6 @@
       </modal>
    </teleport>
    <div class="mt-4" v-else>
-
       <edit-pane v-if="flag.editPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
@@ -115,6 +115,57 @@
       </edit-pane>
    </div>
 
+   <!-- step 3 -->
+   <teleport to="body" v-if="InModal">
+      <modal v-if="flag.datePane"
+             modalDialogClass="modal-dialog-scrollable modal-xl"
+             @close="flag.datePane = false">
+
+         <template v-slot:header>
+            <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">{{ $t('loading') }}</span>
+               </span>
+            </h2>
+         </template>
+
+         <template v-slot:body>
+            <date-pane
+               v-bind:context="this.context"
+               v-bind:options="this.options"
+               v-bind:default="this.default"
+               v-bind:entity="this.entity"
+               v-bind:flag="this.flag"
+               ref="dateAddress">
+            </date-pane>
+         </template>
+
+         <template v-slot:footer>
+            <button @click="openEditPane"
+                    class="btn btn-update">
+               {{ $t('action.edit')}}
+            </button>
+            <button class="btn btn-save">
+               {{ $t('action.save')}}
+            </button>
+         </template>
+
+      </modal>
+   </teleport>
+   <div class="mt-4" v-else>
+      <date-pane v-if="flag.datePane"
+         v-bind:context="this.context"
+         v-bind:options="this.options"
+         v-bind:default="this.default"
+         v-bind:entity="this.entity"
+         v-bind:flag="this.flag"
+         v-bind:insideModal="false"
+         @openEditPane="openEditPane"
+         ref="dateAddress">
+      </date-pane>
+   </div>
+
 </template>
 
 <script>
@@ -122,7 +173,9 @@ import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
 import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
 import ShowPane from './ShowPane.vue';
+import SuggestPane from './SuggestPane.vue';
 import EditPane from './EditPane.vue';
+import DatePane from './DatePane.vue';
 
 export default {
    name: "AddAddress",
@@ -130,13 +183,17 @@ export default {
    components: {
       Modal,
       ShowPane,
+      SuggestPane,
       EditPane,
+      DatePane
    },
    data() {
       return {
          flag: {
-            showPane: false,
+            showPane: true, // begin with showPane
+            suggestPane: false,
             editPane: false,
+            datePane: false,
             loading: false,
             success: false
          },
@@ -148,6 +205,7 @@ export default {
             },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
             openPanesInModal: true,
+            stickyActions: false,
             useDate: {
                validFrom: false,
                validTo: false
@@ -202,28 +260,9 @@ export default {
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
       },
-      getTextButton() {
-         if ( typeof this.options.button.text !== 'undefined'
-            && ( 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 type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
-         let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
-            `${this.options.button.size} ` : '';
-         return `${size}${type}`;
-      },
-      displayTextButton() {
-         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
-            this.options.button.displayText : this.default.button.displayText;
-      },
-      context() {
-         return this.context;
-      }
+      //context() {
+      //   return this.context;
+      //}
    },
    mounted() {
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
new file mode 100644
index 000000000..d91bec958
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -0,0 +1,121 @@
+<template>
+
+   <div v-if="insideModal === false" class="loading">
+      <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>
+
+   <address-render-box :address="address"></address-render-box>
+
+   <div v-if="showDateFrom" class='address-valid date-since'>
+      <h3>{{ $t(getValidFromDateText) }}</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"
+                v-bind:placeholder="$t(getValidFromDateText)"
+                v-model="validFrom"
+                aria-describedby="validFrom"
+         />
+      </div>
+   </div>
+
+   <div v-if="showDateTo" class='address-valid date-until'>
+      <h3>{{ $t(getValidToDateText) }}</h3>
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
+         <input type="date" class="form-control form-control-lg" name="validTo"
+                v-bind:placeholder="$t(getValidToDateText)"
+                v-model="validTo"
+                aria-describedby="validTo"
+         />
+      </div>
+   </div>
+
+   <action-buttons v-if="insideModal === false">
+      <template v-slot:action>
+         <li>
+            <a @click.prevent="$emit('openEditPane')"
+               class="btn btn-update">
+               {{ $t('action.edit')}}
+            </a>
+         </li>
+         <!--
+         <li>
+            <a class="btn btn-save">
+               {{ $t('action.save')}}
+            </a>
+         </li>
+         -->
+      </template>
+   </action-buttons>
+
+</template>
+
+<script>
+import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import ActionButtons from './ActionButtons.vue';
+
+export default {
+   name: "DatePane",
+   components: {
+      AddressRenderBox,
+      ActionButtons
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['openEditPane'],
+   computed: {
+      address() {
+         return this.entity.address;
+      },
+      validFrom: {
+         set(value) {
+            this.entity.selected.valid.from = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.entity.selected.valid.from);
+         }
+      },
+      validTo: {
+         set(value) {
+            this.entity.selected.valid.to = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.entity.selected.valid.from);
+         }
+      },
+      getValidFromDateText() {
+         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
+      },
+      getValidToDateText() {
+         return 'validTo';
+      },
+      showDateFrom() {
+         return !this.context.edit && this.options.useDate.validFrom;
+      },
+      showDateTo() {
+         return !this.context.edit && this.options.useDate.validTo;
+      }
+   }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index 8cacf9981..0009df622 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -2,7 +2,7 @@
    <div class="address-form">
 
       <!-- Not display in modal -->
-      <div v-if="insideModal == false" class="loading">
+      <div v-if="insideModal === false" class="loading">
          <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
          <span class="sr-only">Loading...</span>
       </div>
@@ -55,24 +55,22 @@
       </address-more>
 
       <!-- Not display in modal -->
-      <ul v-if="insideModal == false"
-          class="record_actions sticky-form-buttons">
-         <li class="cancel">
-            <a class="btn btn-cancel" v-bind:href="context.backUrl">
-               {{ $t('back_to_the_list') }}
-            </a>
-         </li>
-         <li>
-            <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
-               {{ $t('action.cancel') }}
-            </a>
-         </li>
-         <li>
-            <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
-               {{ $t('action.valid_and_see')}}
-            </a>
-         </li>
-      </ul>
+      <action-buttons v-if="insideModal === false">
+         <template v-slot:action>
+            <li>
+               <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+                  {{ $t('action.cancel') }}
+               </a>
+            </li>
+            <!--
+            <li>
+               <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
+                  {{ $t('action.valid_and_see')}}
+               </a>
+            </li>
+            -->
+         </template>
+      </action-buttons>
 
    </div>
 </template>
@@ -82,7 +80,8 @@ import CountrySelection from './AddAddress/CountrySelection';
 import CitySelection from './AddAddress/CitySelection';
 import AddressSelection from './AddAddress/AddressSelection';
 import AddressMap from './AddAddress/AddressMap';
-import AddressMore from './AddAddress/AddressMore'
+import AddressMore from './AddAddress/AddressMore';
+import ActionButtons from './ActionButtons.vue';
 
 export default {
    name: "EditPane",
@@ -91,7 +90,8 @@ export default {
       CitySelection,
       AddressSelection,
       AddressMap,
-      AddressMore
+      AddressMore,
+      ActionButtons
    },
    props: [
       'context',
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index eace3f6d2..f57340bf0 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -1,68 +1,27 @@
 <template>
 
-   <div v-if="insideModal == false" class="loading">
+   <div class="loading">
       <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>
 
    <address-render-box :address="address"></address-render-box>
 
-   <div v-if="showDateFrom" class='address-valid date-since'>
-      <h3>{{ $t(getValidFromDateText) }}</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"
-                v-bind:placeholder="$t(getValidFromDateText)"
-                v-model="validFrom"
-                aria-describedby="validFrom"
-         />
-      </div>
-   </div>
+   <button @click.prevent="$emit('openEditPane')"
+      class="btn" :class="getClassButton"
+      type="button" name="button" :title="$t(getTextButton)">
+      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+   </button>
 
-   <div v-if="showDateTo" class='address-valid date-until'>
-      <h3>{{ $t(getValidToDateText) }}</h3>
-      <div class="input-group mb-3">
-         <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
-         <input type="date" class="form-control form-control-lg" name="validTo"
-                v-bind:placeholder="$t(getValidToDateText)"
-                v-model="validTo"
-                aria-describedby="validTo"
-         />
-      </div>
-   </div>
-
-   <ul v-if="insideModal == false"
-      class="record_actions">
-      <!--
-      <li class="cancel">
-         <a class="btn btn-cancel" v-bind:href="context.backUrl">
-            {{ $t('back_to_the_list') }}</a>
-      </li>-->
-      <li>
-         <a @click.prevent="$emit('openEditPane')"
-            class="btn btn-update">
-            {{ $t('action.edit')}}
-         </a>
-      </li>
-      <!--<li>
-         <a class="btn btn-save"
-            @click.prevent="$emit('submitAddress')">
-            {{ $t('action.save')}}
-         </a>
-      </li>-->
-   </ul>
 </template>
 
 <script>
-import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 export default {
@@ -76,35 +35,31 @@ export default {
       'default',
       'flag',
       'entity',
-      'errorMsg',
-      'insideModal'
+      'errorMsg'
    ],
-   emits: ['openEditPane'], // 'submitAddress'
+   emits: ['openEditPane'],
    computed: {
       address() {
          return this.entity.address;
       },
-      validFrom: {
-         set(value) {
-            this.entity.selected.valid.from = ISOToDate(value);
-         },
-         get() {
-            return dateToISO(this.entity.selected.valid.from);
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
+            this.options.button.displayText : this.default.button.displayText;
+      },
+      getClassButton() {
+         let type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
+         let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
+            `${this.options.button.size} ` : '';
+         return `${size}${type}`;
+      },
+      getTextButton() {
+         if ( typeof this.options.button.text !== 'undefined'
+            && ( 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;
          }
-      },
-      validTo: {
-         set(value) {
-            this.entity.selected.valid.to = ISOToDate(value);
-         },
-         get() {
-            return dateToISO(this.entity.selected.valid.from);
-         }
-      },
-      getValidFromDateText() {
-         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
-      },
-      getValidToDateText() {
-         return 'validTo';
+         return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
       },
       getSuccessText() {
          switch (this.context.entity.name) {
@@ -117,12 +72,6 @@ export default {
             default:
                return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
          }
-      },
-      showDateFrom() {
-         return !this.context.edit && this.options.useDate.validFrom;
-      },
-      showDateTo() {
-         return !this.context.edit && this.options.useDate.validTo;
       }
    }
 };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
new file mode 100644
index 000000000..f276c3f96
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
@@ -0,0 +1,60 @@
+<template>
+
+   <div v-if="insideModal === false" class="loading">
+      <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>
+
+   suggestions
+
+   <action-buttons v-if="insideModal === false">
+      <template v-slot:action>
+         <li>
+            <a @click.prevent="$emit('openEditPane')"
+               class="btn btn-update">
+               {{ $t('action.edit')}}
+            </a>
+         </li>
+      </template>
+   </action-buttons>
+</template>
+
+<script>
+import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import ActionButtons from './ActionButtons.vue';
+
+export default {
+   name: "SuggestPane",
+   components: {
+      AddressRenderBox,
+      ActionButtons
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['openEditPane'],
+   computed: {
+   },
+   methods: {
+
+   }
+}
+</script>
+
+<style scoped>
+
+</style>

From 331dd286e79e7c8c395234070261b7b553227da0 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 10:59:06 +0200
Subject: [PATCH 6/7] AddAddress: adding a new stickyActions option

---
 .../public/vuejs/Address/components/ActionButtons.vue    | 1 +
 .../Resources/public/vuejs/Address/index.js              | 4 +++-
 .../views/Address/_insert_vue_address.html.twig          | 9 +++++++--
 .../Resources/views/Address/new.html.twig                | 1 +
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
index 94d6ab105..a0bb66f33 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -24,6 +24,7 @@ export default {
    props: [ 'options', 'default' ],
    computed: {
       isStickyForm() {
+         return (typeof this.options.stickyActions !== 'undefined') ? this.options.stickyActions : this.default.stickyActions;
       }
    }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
index 4e49b2207..7ecf4847a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
@@ -38,9 +38,11 @@ containers.forEach((container) => {
                             create: container.dataset.modalTitle || null,
                             edit: container.dataset.modalTitle || null
                         },
-                        // Use Date fields
                         /// Display panes in Modal for step123
                         openPanesInModal: container.dataset.openPanesInModal !== 'false',  //boolean, default: true
+                        /// Display actions buttons of panes in a sticky-form-button navbar
+                        stickyActions: container.dataset.stickyActions === 'true',  //boolean, default: false
+                        /// Use Date fields
                         useDate: {
                             validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
                             validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
index 052cdbec9..bf996f593 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig
@@ -13,9 +13,11 @@
     * modalTitle    twig translated chain
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
-    * buttonDisplayText     bool
-
+    * buttonDisplayText     bool (default: true)
     * openPanesInModal      bool (default: true)
+    * stickyActions         bool (default: false)
+    * useValidFrom          bool (default: false)
+    * useValidTo            bool (default: false)
 #}
 <div class="address-container"
 
@@ -54,6 +56,9 @@
         data-open-panes-in-modal="false"
     {% endif %}
 
+    {% if stickyActions is defined and stickyActions == 1 %}
+        data-sticky-actions="true"
+    {% endif %}
 
     {% if useValidFrom is defined and useValidFrom == 1 %}
         data-use-valid-from="true"
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index 53c785dda..235c0c7b4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -31,6 +31,7 @@
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
             openPanesInModal: false,
+            stickyActions: true,
             useValidFrom: true,
             useValidTo: false
         } %}

From 3f3b7af42b9352f251b029539616c1820213324a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 17 Sep 2021 13:09:18 +0200
Subject: [PATCH 7/7] AddAddress: adjust Open and Close methods for each step

---
 .../Resources/public/vuejs/Address/App.vue    |   4 +-
 .../Address/components/ActionButtons.vue      |  17 ++-
 .../vuejs/Address/components/AddAddress.vue   | 110 +++++++++++++-----
 .../vuejs/Address/components/DatePane.vue     |   5 +-
 .../vuejs/Address/components/EditPane.vue     |  12 +-
 .../vuejs/Address/components/ShowPane.vue     |  20 +++-
 .../vuejs/Address/components/SuggestPane.vue  |   5 +-
 .../Resources/public/vuejs/Address/index.js   |   2 +-
 .../Resources/views/Address/new.html.twig     |   5 +-
 .../views/Household/address_edit.html.twig    |   1 +
 10 files changed, 132 insertions(+), 49 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
index e4d332289..a1496e7d6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
@@ -33,8 +33,8 @@ export default {
 
    },
    mounted() {
-      console.log('AddAddress: data context', this.context);
-      console.log('AddAddress: data options', this.options);
+      //console.log('AddAddress: data context', this.context);
+      //console.log('AddAddress: data options', this.options);
    },
    methods: {
       displayErrors() {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
index a0bb66f33..afe059da6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
@@ -2,19 +2,23 @@
    <ul class="record_actions"
       :class="{ 'sticky-form-buttons': isStickyForm }">
 
+      <!--
       <li v-if="isStickyForm" class="cancel">
-         <a class="btn btn-cancel" v-bind:href="context.backUrl">
+         <a class="btn btn-cancel" @click="resetPane">
             {{ $t('back_to_the_list') }}
          </a>
       </li>
+      -->
 
       <slot name="action"></slot>
 
+      <!--
       <li v-if="isStickyForm">
          <a class="btn btn-save">
             {{ $t('action.save')}}
          </a>
       </li>
+      -->
    </ul>
 </template>
 
@@ -24,7 +28,16 @@ export default {
    props: [ 'options', 'default' ],
    computed: {
       isStickyForm() {
-         return (typeof this.options.stickyActions !== 'undefined') ? this.options.stickyActions : this.default.stickyActions;
+         return (typeof this.options.stickyActions !== 'undefined') ?
+            this.options.stickyActions : this.default.stickyActions;
+      },
+   },
+   methods: {
+      resetPane() {
+         this.flag.suggestPane = false;
+         this.flag.editPane = false;
+         this.flag.datePane = false;
+         this.flag.showPane = 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 1948535dc..259266c92 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
@@ -12,10 +12,10 @@
    </show-pane>
 
    <!-- step 1 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.suggestPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.suggestPane = false">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -42,9 +42,11 @@
                class="btn btn-update">
                {{ $t('action.edit')}}
             </button>
+            <!--
             <button class="btn btn-save">
                {{ $t('action.save')}}
             </button>
+            -->
          </template>
 
       </modal>
@@ -63,10 +65,10 @@
    </div>
 
    <!-- step 2 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.editPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.editPane = false">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -116,10 +118,10 @@
    </div>
 
    <!-- step 3 -->
-   <teleport to="body" v-if="InModal">
+   <teleport to="body" v-if="inModal">
       <modal v-if="flag.datePane"
              modalDialogClass="modal-dialog-scrollable modal-xl"
-             @close="flag.datePane = false">
+             @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -247,10 +249,24 @@ export default {
       }
    },
    computed: {
-      InModal() {
+      inModal() {
          return (typeof this.options.openPanesInModal !== 'undefined') ?
             this.options.openPanesInModal : this.default.openPanesInModal;
       },
+      useDatePane() {
+         let vFrom = (typeof this.options.useDate !== 'undefined'
+            && typeof this.options.useDate.validFrom !== 'undefined') ?
+            this.options.useDate.validFrom : this.default.useDate.validFrom ;
+         let vTo = (typeof this.options.useDate !== 'undefined'
+            && typeof this.options.useDate.validTo !== 'undefined') ?
+            this.options.useDate.validTo : this.default.useDate.validTo ;
+         return (vFrom || vTo) ? true : false;
+      },
+      hasSuggestions() {
+         // TODO
+         //return addressSuggestions.length > 0
+         return true;
+      },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'
             && ( this.options.title.edit !== null
@@ -260,22 +276,23 @@ export default {
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
       },
-      //context() {
-      //   return this.context;
-      //}
+      bypassFirstStep() {
+         // exception: passing step0 if new address and pane are not in modal
+         return !this.context.edit && !this.inModal && this.flag.editPane === false
+      }
    },
    mounted() {
 
       //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);
-      console.log('options useDate.validFrom', this.options.useDate.validFrom);
-      console.log('options useDate.validTo', this.options.useDate.validTo);
+      //console.log('options useDate.validFrom', this.options.useDate.validFrom);
+      //console.log('options useDate.validTo', this.options.useDate.validTo);
+      console.log('useDatePane', this.useDatePane);
+
+      //console.log('Mounted now !');
+      this.openShowPane();
 
-      if (!this.step1WithModal) {
-         //console.log('Mounted now !');
-         this.openShowPane();
-      }
    },
    methods: {
 
@@ -283,35 +300,72 @@ export default {
       *  Opening and closing Panes when interacting with buttons
       */
       openShowPane() {
-
          if (this.context.edit) {
+            console.log('getInitialAddress');
             this.getInitialAddress(this.context.addressId);
          }
 
-         // when create new address, start first with editPane !!
-         if ( this.context.edit === false
-            && this.flag.editPane === false
-         ) {
+         if (this.bypassFirstStep) {
+            this.closeShowPane();
             this.openEditPane();
-            this.flag.editPane = true;
 
          } else {
             this.flag.showPane = true;
-            console.log('step1: open the Show Panel');
+            console.log('step0: open the Show Panel');
          }
       },
-
+      closeShowPane() {
+         // Show pane can be closed only when openPanesInModal is false
+         if (!this.inModal) {
+            this.flag.showPane = false;
+            console.log('step0: close the Show Panel');
+         }
+      },
+      openSuggestPane() {
+         this.flag.suggestPane = true;
+         console.log('step1: open the Suggestion Panel');
+      },
+      closeSuggestPane() {
+         this.flag.suggestPane = false;
+         console.log('step1: close the Suggestion Panel');
+      },
       openEditPane() {
-         console.log('step2: open the Edit panel');
+         /*
+         if (!this.context.edit && this.hasSuggestions) {
+            this.openSuggestPane();
+         } else {
+         }
+         */
          this.initForm();
          this.getCountries();
+         this.flag.editPane = true;
+         console.log('step2: open the Edit panel');
       },
-
       closeEditPane() {
-         console.log('step2: close the Edit Panel');
          this.applyChanges();
-         this.flag.showPane = true;
          this.flag.editPane = false;
+         console.log('step2: close the Edit Panel');
+         /*
+         if (!this.context.edit && this.useDatePane) {
+            this.openDatePane();
+         } else {
+         }
+         */
+         this.openShowPane()
+      },
+      openDatePane() {
+         this.flag.datePane = true;
+         console.log('step3: open the Date Panel');
+      },
+      closeDatePane() {
+         this.flag.datePane = false;
+         console.log('step3: close the Date Panel');
+      },
+      resetPane() {
+         this.flag.suggestPane = false;
+         this.flag.editPane = false;
+         this.flag.datePane = false;
+         this.flag.showPane = true;
       },
 
       /*
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
index d91bec958..ed461ffb5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -39,7 +39,10 @@
       </div>
    </div>
 
-   <action-buttons v-if="insideModal === false">
+   <action-buttons v-if="insideModal === false"
+      :flag="this.flag"
+      :options="this.options"
+      :default="this.default">
       <template v-slot:action>
          <li>
             <a @click.prevent="$emit('openEditPane')"
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
index 0009df622..16fc335c8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
@@ -54,21 +54,21 @@
          v-bind:entity="entity">
       </address-more>
 
-      <!-- Not display in modal -->
-      <action-buttons v-if="insideModal === false">
+      <action-buttons v-if="insideModal === false"
+         :flag="this.flag"
+         :options="this.options"
+         :default="this.default">
          <template v-slot:action>
             <li>
                <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
                   {{ $t('action.cancel') }}
                </a>
             </li>
-            <!--
             <li>
-               <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
-                  {{ $t('action.valid_and_see')}}
+               <a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
+                  {{ $t('action.save')}}
                </a>
             </li>
-            -->
          </template>
       </action-buttons>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
index f57340bf0..2738f7775 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
@@ -13,21 +13,29 @@
 
    <address-render-box :address="address"></address-render-box>
 
-   <button @click.prevent="$emit('openEditPane')"
-      class="btn" :class="getClassButton"
-      type="button" name="button" :title="$t(getTextButton)">
-      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-   </button>
+   <action-buttons :flag="this.flag" :options="this.options" :default="this.default">
+      <template v-slot:action>
+         <li>
+            <button @click.prevent="$emit('openEditPane')"
+               class="btn" :class="getClassButton"
+               type="button" name="button" :title="$t(getTextButton)">
+               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+            </button>
+         </li>
+      </template>
+   </action-buttons>
 
 </template>
 
 <script>
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import ActionButtons from './ActionButtons.vue';
 
 export default {
    name: 'ShowPane',
    components: {
-      AddressRenderBox
+      AddressRenderBox,
+      ActionButtons
    },
    props: [
       'context',
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
index f276c3f96..b3abe5128 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
@@ -15,7 +15,10 @@
 
    suggestions
 
-   <action-buttons v-if="insideModal === false">
+   <action-buttons v-if="insideModal === false"
+      :flag="this.flag"
+      :options="this.options"
+      :default="this.default">
       <template v-slot:action>
          <li>
             <a @click.prevent="$emit('openEditPane')"
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
index 7ecf4847a..f54aaa407 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
@@ -56,5 +56,5 @@ containers.forEach((container) => {
     .component('app', App)
     .mount(container);
 
-    console.log('container dataset', container.dataset);
+    //console.log('container dataset', container.dataset);
 });
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
index 235c0c7b4..21e858615 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig
@@ -30,11 +30,12 @@
         {% 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 }),
+            useValidFrom: true,
             openPanesInModal: false,
             stickyActions: true,
-            useValidFrom: true,
-            useValidTo: false
         } %}
+        {#
+        #}
 
     {% endblock %}
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
index 2bfedaee7..49dad3619 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig
@@ -11,6 +11,7 @@
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
             openPanesInModal: false,
+            stickyActions: true
         } %}
     </div>