Merge branch 'improve_address' into person_renderbox_thirdparty_onthefly

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 context', this.context);
-      console.log('AddAddress: data options', this.options);
+      //console.log('AddAddress: data options', this.options);
    },
    methods: {
       displayErrors() {

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

@@ -0,0 +1,44 @@
+<template>
+   <ul class="record_actions"
+      :class="{ 'sticky-form-buttons': isStickyForm }">
+
+      <!--
+      <li v-if="isStickyForm" class="cancel">
+         <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>
+
+<script>
+export default {
+   name: "ActionButtons",
+   props: [ 'options', 'default' ],
+   computed: {
+      isStickyForm() {
+         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;
+      }
+   }
+}
+</script>

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

@@ -1,18 +1,21 @@
 <template>
 
-   <!-- start with a button -->
+   <!-- step0 -->
-   <button v-if="step1WithModal"
+   <show-pane v-if="flag.showPane"
-      @click="openShowPane"
+      v-bind:context="this.context"
-      class="btn" :class="getClassButton"
+      v-bind:options="this.options"
-      type="button" name="button" :title="$t(getTextButton)">
+      v-bind:default="this.default"
-      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+      v-bind:entity="this.entity"
-   </button>
+      v-bind:flag="this.flag"
+      @openEditPane="openEditPane"
+      ref="showAddress">
+   </show-pane>
 
    <!-- step 1 -->
-   <teleport to="body" v-if="step1WithModal">
+   <teleport to="body" v-if="inModal">
-      <modal v-if="flag.showPane"
+      <modal v-if="flag.suggestPane"
          modalDialogClass="modal-dialog-scrollable modal-xl"
-         @close="flag.showPane = false">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -24,14 +27,14 @@
          </template>
 
          <template v-slot:body>
-            <show-address-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">
+               ref="suggestAddress">
-            </show-address-pane>
+            </suggest-pane>
          </template>
 
          <template v-slot:footer>
@@ -39,17 +42,17 @@
                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>
 
       </modal>
    </teleport>
    <div class="mt-4" v-else>
-
+      <suggest-pane v-if="flag.suggestPane"
-      <show-address-pane v-if="flag.showPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -57,15 +60,15 @@
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
          @openEditPane="openEditPane"
-         ref="showAddress">
+         ref="suggestAddress">
-      </show-address-pane>
+      </suggest-pane>
    </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">
+         @close="resetPane">
 
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(getTextTitle) }}
@@ -77,7 +80,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 +88,7 @@
                v-bind:flag="this.flag"
                @getCities="getCities"
                @getReferenceAddresses="getReferenceAddresses">
-            </edit-address-pane>
+            </edit-pane>
          </template>
 
          <template v-slot:footer>
@@ -101,8 +104,7 @@
       </modal>
    </teleport>
    <div class="mt-4" v-else>
-
+      <edit-pane v-if="flag.editPane"
-      <edit-address-pane v-if="flag.editPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -112,7 +114,58 @@
          @closeEditPane="closeEditPane"
          @getCities="getCities"
          @getReferenceAddresses="getReferenceAddresses">
-      </edit-address-pane>
+      </edit-pane>
+   </div>
+
+   <!-- step 3 -->
+   <teleport to="body" v-if="inModal">
+      <modal v-if="flag.datePane"
+             modalDialogClass="modal-dialog-scrollable modal-xl"
+             @close="resetPane">
+
+         <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>
@@ -121,22 +174,28 @@
 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 ShowPane from './ShowPane.vue';
-import EditAddressPane from './EditAddressPane.vue';
+import SuggestPane from './SuggestPane.vue';
+import EditPane from './EditPane.vue';
+import DatePane from './DatePane.vue';
 
 export default {
    name: "AddAddress",
    props: ['context', 'options', 'addressChangedCallback'],
    components: {
       Modal,
-      ShowAddressPane,
+      ShowPane,
-      EditAddressPane,
+      SuggestPane,
+      EditPane,
+      DatePane
    },
    data() {
       return {
          flag: {
-            showPane: false,
+            showPane: true, // begin with showPane
+            suggestPane: false,
             editPane: false,
+            datePane: false,
             loading: false,
             success: false
          },
@@ -147,10 +206,8 @@ export default {
                displayText: true
             },
             title: { create: 'add_an_address_title', edit: 'edit_address' },
-            bindModal: {
+            openPanesInModal: true,
-               step1: true,
+            stickyActions: false,
-               step2: true,
-            },
             useDate: {
                validFrom: false,
                validTo: false
@@ -192,19 +249,23 @@ export default {
       }
    },
    computed: {
-      step1WithModal() {
+      inModal() {
-         return (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step1 !== 'undefined') ?
+         return (typeof this.options.openPanesInModal !== 'undefined') ?
-            this.options.bindModal.step1 : this.default.bindModal.step1;
+            this.options.openPanesInModal : this.default.openPanesInModal;
       },
-      step2WithModal() {
+      useDatePane() {
-         let step2 = (typeof this.options.bindModal !== 'undefined' && typeof this.options.bindModal.step2 !== 'undefined') ?
+         let vFrom = (typeof this.options.useDate !== 'undefined'
-            this.options.bindModal.step2 : this.default.bindModal.step2;
+            && typeof this.options.useDate.validFrom !== 'undefined') ?
-
+            this.options.useDate.validFrom : this.default.useDate.validFrom ;
-         if (step2 === false && this.step1WithModal === true) {
+         let vTo = (typeof this.options.useDate !== 'undefined'
-            console.log("step2 must open in a Modal");
+            && typeof this.options.useDate.validTo !== 'undefined') ?
-            return true;
+            this.options.useDate.validTo : this.default.useDate.validTo ;
-         }
+         return (vFrom || vTo) ? true : false;
-         return step2;
+      },
+      hasSuggestions() {
+         // TODO
+         //return addressSuggestions.length > 0
+         return true;
       },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'
@@ -215,27 +276,9 @@ export default {
          }
          return (this.context.edit) ? this.default.title.edit : this.default.title.create;
       },
-      getTextButton() {
+      bypassFirstStep() {
-         if ( typeof this.options.button.text !== 'undefined'
+         // exception: passing step0 if new address and pane are not in modal
-            && ( this.options.button.text.edit !== null
+         return !this.context.edit && !this.inModal && this.flag.editPane === false
-               || 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;
       }
    },
    mounted() {
@@ -243,13 +286,13 @@ export default {
       //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.validFrom', this.options.useDate.validFrom);
-      console.log('options useDate.validTo', this.options.useDate.validTo);
+      //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: {
 
@@ -257,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.bypassFirstStep) {
-         if ( this.context.edit === false
+            this.closeShowPane();
-            && this.flag.editPane === false
-         ) {
             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;
       },
 
       /*

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

@@ -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>
-
-

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

@@ -1,6 +1,6 @@
 <template>
 
-   <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">{{ $t('loading') }}</span>
    </div>
@@ -39,36 +39,39 @@
       </div>
    </div>
 
-   <ul v-if="insideModal == false"
+   <action-buttons v-if="insideModal === false"
-      class="record_actions">
+      :flag="this.flag"
-      <!--
+      :options="this.options"
-      <li class="cancel">
+      :default="this.default">
-         <a class="btn btn-cancel" v-bind:href="context.backUrl">
+      <template v-slot:action>
-            {{ $t('back_to_the_list') }}</a>
+         <li>
-      </li>-->
+            <a @click.prevent="$emit('openEditPane')"
-      <li>
+               class="btn btn-update">
-         <a @click.prevent="$emit('openEditPane')"
+               {{ $t('action.edit')}}
-            class="btn btn-update">
+            </a>
-            {{ $t('action.edit')}}
+         </li>
-         </a>
+         <!--
-      </li>
+         <li>
-      <!--<li>
+            <a class="btn btn-save">
-         <a class="btn btn-save"
+               {{ $t('action.save')}}
-            @click.prevent="$emit('submitAddress')">
+            </a>
-            {{ $t('action.save')}}
+         </li>
-         </a>
+         -->
-      </li>-->
+      </template>
-   </ul>
+   </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: 'ShowAddressPane',
+   name: "DatePane",
    components: {
-      AddressRenderBox
+      AddressRenderBox,
+      ActionButtons
    },
    props: [
       'context',
@@ -79,7 +82,7 @@ export default {
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane'], // 'submitAddress'
+   emits: ['openEditPane'],
    computed: {
       address() {
          return this.entity.address;
@@ -106,18 +109,6 @@ export default {
       getValidToDateText() {
          return 'validTo';
       },
-      getSuccessText() {
-         switch (this.context.entity.name) {
-            /*
-            case 'household':
-               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
-            case 'person':
-               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
-            */
-            default:
-               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
-         }
-      },
       showDateFrom() {
          return !this.context.edit && this.options.useDate.validFrom;
       },
@@ -125,5 +116,9 @@ export default {
          return !this.context.edit && this.options.useDate.validTo;
       }
    }
-};
+}
 </script>
+
+<style scoped>
+
+</style>

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>
@@ -54,25 +54,23 @@
          v-bind:entity="entity">
       </address-more>
 
-      <!-- Not display in modal -->
+      <action-buttons v-if="insideModal === false"
-      <ul v-if="insideModal == false"
+         :flag="this.flag"
-          class="record_actions sticky-form-buttons">
+         :options="this.options"
-         <li class="cancel">
+         :default="this.default">
-            <a class="btn btn-cancel" v-bind:href="context.backUrl">
+         <template v-slot:action>
-               {{ $t('back_to_the_list') }}
+            <li>
-            </a>
+               <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
-         </li>
+                  {{ $t('action.cancel') }}
-         <li>
+               </a>
-            <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+            </li>
-               {{ $t('action.cancel') }}
+            <li>
-            </a>
+               <a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
-         </li>
+                  {{ $t('action.save')}}
-         <li>
+               </a>
-            <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
+            </li>
-               {{ $t('action.valid_and_see')}}
+         </template>
-            </a>
+      </action-buttons>
-         </li>
-      </ul>
 
    </div>
 </template>
@@ -82,16 +80,18 @@ 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: "EditAddressPane",
+   name: "EditPane",
    components: {
       CountrySelection,
       CitySelection,
       AddressSelection,
       AddressMap,
-      AddressMore
+      AddressMore,
+      ActionButtons
    },
    props: [
       'context',

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

@@ -0,0 +1,86 @@
+<template>
+
+   <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>
+
+   <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,
+      ActionButtons
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg'
+   ],
+   emits: ['openEditPane'],
+   computed: {
+      address() {
+         return this.entity.address;
+      },
+      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;
+         }
+         return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
+      },
+      getSuccessText() {
+         switch (this.context.entity.name) {
+            /*
+            case 'household':
+               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
+            case 'person':
+               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
+            */
+            default:
+               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
+         }
+      }
+   }
+};
+</script>

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

@@ -0,0 +1,63 @@
+<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"
+      :flag="this.flag"
+      :options="this.options"
+      :default="this.default">
+      <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>

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

@@ -38,12 +38,11 @@ containers.forEach((container) => {
                             create: container.dataset.modalTitle || null,
                             edit: container.dataset.modalTitle || null
                         },
-                        /// Display each step in page or Modal
+                        /// Display panes in Modal for step123
-                        bindModal: {
+                        openPanesInModal: container.dataset.openPanesInModal !== 'false',  //boolean, default: true
-                            step1: container.dataset.bindModalStep1 !== 'false',  //boolean, default: true
+                        /// Display actions buttons of panes in a sticky-form-button navbar
-                            step2: container.dataset.bindModalStep2 !== 'false'   //boolean, default: true
+                        stickyActions: container.dataset.stickyActions === 'true',  //boolean, default: false
-                        },
+                        /// Use Date fields
-                        // Use Date fields
                         useDate: {
                             validFrom: container.dataset.useValidFrom === 'true',  //boolean, default: false
                             validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
@@ -57,5 +56,5 @@ containers.forEach((container) => {
     .component('app', App)
     .mount(container);
 
-    console.log('container dataset', container.dataset);
+    //console.log('container dataset', container.dataset);
 });

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

@@ -7,16 +7,17 @@
           name:     string
           id:       integer
       }
-    * mode          string ['edit*'|'create']
+    * mode          string ['edit*'|'new']
     * addressId     integer
     * backUrl       twig route:   path('route', {parameters})
     * modalTitle    twig translated chain
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
-    * buttonDisplayText     bool
+    * buttonDisplayText     bool (default: true)
-    * bindModalStep1         bool
+    * openPanesInModal      bool (default: true)
-    * bindModalStep2         bool
+    * stickyActions         bool (default: false)
-
+    * useValidFrom          bool (default: false)
+    * useValidTo            bool (default: false)
 #}
 <div class="address-container"
 
@@ -51,12 +52,12 @@
         data-button-display-text="false"
     {% endif %}
 
-    {% if bindModalStep1 is defined and bindModalStep1 != 1 %}
+    {% if openPanesInModal is defined and openPanesInModal != 1 %}
-        data-bind-modal-step1="false"
+        data-open-panes-in-modal="false"
     {% endif %}
 
-    {% if bindModalStep2 is defined and bindModalStep2 != 1 %}
+    {% if stickyActions is defined and stickyActions == 1 %}
-        data-bind-modal-step2="false"
+        data-sticky-actions="true"
     {% endif %}
 
     {% if useValidFrom is defined and useValidFrom == 1 %}

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

@@ -88,9 +88,7 @@ export default {
                   edit: 'courselocation.edit_temporary_address'
                },
                /// Display each step in page or Modal
-               bindModal: {
+               openPanesInModal: true,
-                  //step1: false, step2: false
-               },
                // Use Date fields
                useDate: {
                   validFrom: true

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,
+            openPanesInModal: false,
-            bindModalStep2: false,
         } %}
 
     {% endblock %}

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',
@@ -74,8 +74,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
+                            openPanesInModal: false,
-                            bindModalStep2: false,
                         } %}
                     #}
 
@@ -90,8 +89,7 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            bindModalStep1: false,
+                            openPanesInModal: false,
-                            bindModalStep2: false,
                         } %}
                     #}
 

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 }),
-            bindModalStep1: false,
-            bindModalStep2: false,
             useValidFrom: true,
-            useValidTo: false
+            openPanesInModal: false,
+            stickyActions: true,
         } %}
+        {#
+        #}
 
     {% endblock %}
 

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

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

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,
+            openPanesInModal: false,
-            bindModalStep2: false,
         } %}
     </div>
 

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',

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

@@ -33,15 +33,14 @@
                         {% 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',
                             buttonDisplayText: false,
                         } %}
                         {#
-                            bindModalStep1: false,
+                            openPanesInModal: false
-                            bindModalStep2: true,
                         #}
                     </li>
                     <li class="list-inline-item">