slot buttons up from actionButtons to addAddress

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

@@ -4,7 +4,7 @@
    <show-pane v-if="flag.showPane"
       v-bind:context="this.context"
       v-bind:options="this.options"
-      v-bind:default="this.default"
+      v-bind:defaultz="this.defaultz"
       v-bind:entity="this.entity"
       v-bind:flag="this.flag"
       @openEditPane="openEditPane"
@@ -30,7 +30,7 @@
             <suggest-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
-               v-bind:default="this.default"
+               v-bind:defaultz="this.defaultz"
                v-bind:entity="this.entity"
                v-bind:flag="this.flag"
                ref="suggestAddress">
@@ -39,14 +39,9 @@
 
          <template v-slot:footer>
             <button @click="openEditPane"
-               class="btn btn-update">
-               {{ $t('action.edit')}}
+               class="btn btn-create">
+               {{ $t('create_a_new_address')}}
             </button>
-            <!--
-            <button class="btn btn-save">
-               {{ $t('action.save')}}
-            </button>
-            -->
          </template>
 
       </modal>
@@ -55,12 +50,26 @@
       <suggest-pane v-if="flag.suggestPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
-         v-bind:default="this.default"
+         v-bind:defaultz="this.defaultz"
          v-bind:entity="this.entity"
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
-         @openEditPane="openEditPane"
          ref="suggestAddress">
+
+         <template v-slot:before v-if="!bypassFirstStep">
+            <a class="btn btn-cancel" @click="resetPane">
+               {{ $t('action.cancel') }}
+            </a>
+         </template>
+         <template v-slot:action>
+            <li>
+               <button @click="openEditPane"
+                  class="btn btn-create">
+                  {{ $t('create_a_new_address')}}
+               </button>
+            </li>
+         </template>
+
       </suggest-pane>
    </div>
 
@@ -83,7 +92,7 @@
             <edit-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
-               v-bind:default="this.default"
+               v-bind:defaultz="this.defaultz"
                v-bind:entity="this.entity"
                v-bind:flag="this.flag"
                @getCities="getCities"
@@ -92,12 +101,11 @@
          </template>
 
          <template v-slot:footer>
-            <button class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+            <button class="btn btn-cancel change-icon" @click="resetPane">
                {{ $t('action.cancel') }}
             </button>
-            <button class="btn btn-update"
-               @click="closeEditPane">
-               {{ $t('action.valid')}}
+            <button class="btn btn-save" @click="closeEditPane">
+               {{ $t('action.save')}}
             </button>
          </template>
 
@@ -107,13 +115,26 @@
       <edit-pane v-if="flag.editPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
-         v-bind:default="this.default"
+         v-bind:defaultz="this.defaultz"
          v-bind:entity="this.entity"
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
-         @closeEditPane="closeEditPane"
          @getCities="getCities"
          @getReferenceAddresses="getReferenceAddresses">
+
+         <template v-slot:before>
+            <a class="btn btn-cancel" @click="resetPane">
+               {{ $t('action.cancel') }}
+            </a>
+         </template>
+         <template v-slot:action>
+            <li>
+               <button class="btn btn-save" @click="closeEditPane">
+                  {{ $t('action.save')}}
+               </button>
+            </li>
+         </template>
+
       </edit-pane>
    </div>
 
@@ -136,7 +157,7 @@
             <date-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
-               v-bind:default="this.default"
+               v-bind:defaultz="this.defaultz"
                v-bind:entity="this.entity"
                v-bind:flag="this.flag"
                ref="dateAddress">
@@ -144,13 +165,14 @@
          </template>
 
          <template v-slot:footer>
-            <button @click="openEditPane"
-                    class="btn btn-update">
+            <button class="btn btn-update" @click="openEditPane">
                {{ $t('action.edit')}}
             </button>
+            <!--
             <button class="btn btn-save">
                {{ $t('action.save')}}
             </button>
+            -->
          </template>
 
       </modal>
@@ -159,12 +181,20 @@
       <date-pane v-if="flag.datePane"
          v-bind:context="this.context"
          v-bind:options="this.options"
-         v-bind:default="this.default"
+         v-bind:defaultz="this.defaultz"
          v-bind:entity="this.entity"
          v-bind:flag="this.flag"
          v-bind:insideModal="false"
-         @openEditPane="openEditPane"
          ref="dateAddress">
+
+         <template v-slot:action>
+            <li>
+               <button class="btn btn-update" @click="openEditPane">
+                  {{ $t('action.edit')}}
+               </button>
+            </li>
+         </template>
+
       </date-pane>
    </div>
 
@@ -199,7 +229,7 @@ export default {
             loading: false,
             success: false
          },
-         default: {
+         defaultz: {
             button: {
                text: { create: 'add_an_address_title', edit: 'edit_address' },
                type: { create: 'btn-create', edit: 'btn-update'},
@@ -211,7 +241,9 @@ export default {
             useDate: {
                validFrom: false,
                validTo: false
-            }
+            },
+            forceRedirect: false,
+            onlyButton: false
          },
          entity: {
             address: {}, // <== loaded and returned
@@ -251,15 +283,15 @@ export default {
    computed: {
       inModal() {
          return (typeof this.options.openPanesInModal !== 'undefined') ?
-            this.options.openPanesInModal : this.default.openPanesInModal;
+            this.options.openPanesInModal : this.defaultz.openPanesInModal;
       },
       useDatePane() {
          let vFrom = (typeof this.options.useDate !== 'undefined'
             && typeof this.options.useDate.validFrom !== 'undefined') ?
-            this.options.useDate.validFrom : this.default.useDate.validFrom ;
+            this.options.useDate.validFrom : this.defaultz.useDate.validFrom ;
          let vTo = (typeof this.options.useDate !== 'undefined'
             && typeof this.options.useDate.validTo !== 'undefined') ?
-            this.options.useDate.validTo : this.default.useDate.validTo ;
+            this.options.useDate.validTo : this.defaultz.useDate.validTo ;
          return (vFrom || vTo) ? true : false;
       },
       hasSuggestions() {
@@ -267,6 +299,10 @@ export default {
          //return addressSuggestions.length > 0
          return true;
       },
+      displaySuggestions() {
+         console.log('displaySuggestions');
+         return !this.context.edit && this.hasSuggestions;
+      },
       getTextTitle() {
          if ( typeof this.options.title !== 'undefined'
             && ( this.options.title.edit !== null
@@ -274,11 +310,12 @@ export default {
             )) {
             return (this.context.edit) ? this.options.title.edit : this.options.title.create;
          }
-         return (this.context.edit) ? this.default.title.edit : this.default.title.create;
+         return (this.context.edit) ? this.defaultz.title.edit : this.defaultz.title.create;
       },
       bypassFirstStep() {
          // exception: passing step0 if new address and pane are not in modal
-         return !this.context.edit && !this.inModal && this.flag.editPane === false
+         console.log('bypassFirstStep');
+         return !this.context.edit && !this.inModal;
       }
    },
    mounted() {
@@ -290,7 +327,7 @@ export default {
       //console.log('options useDate.validTo', this.options.useDate.validTo);
       console.log('useDatePane', this.useDatePane);
 
-      //console.log('Mounted now !');
+      console.log('Mounted now !');
       this.openShowPane();
 
    },
@@ -304,7 +341,7 @@ export default {
             console.log('getInitialAddress');
             this.getInitialAddress(this.context.addressId);
          }
-         if (this.bypassFirstStep) {
+         if (this.flag.editPane === false && this.bypassFirstStep) {
             this.closeShowPane();
             this.openEditPane();
          } else {
@@ -328,28 +365,27 @@ export default {
          console.log('step1: close the Suggestion Panel');
       },
       openEditPane() {
-         /*
-         if (!this.context.edit && this.hasSuggestions) {
+         if (this.flag.suggestPane === false && this.displaySuggestions) {
             this.openSuggestPane();
          } else {
+            if (this.flag.suggestPane === true) {
+               this.closeSuggestPane();
+            }
+            this.initForm();
+            this.getCountries();
+            this.flag.editPane = true;
+            console.log('step2: open the Edit panel');
          }
-         */
-         this.initForm();
-         this.getCountries();
-         this.flag.editPane = true;
-         console.log('step2: open the Edit panel');
       },
       closeEditPane() {
          this.applyChanges();
          this.flag.editPane = false;
          console.log('step2: close the Edit Panel');
-         /*
          if (!this.context.edit && this.useDatePane) {
             this.openDatePane();
          } else {
+            this.openShowPane()
          }
-         */
-         this.openShowPane()
       },
       openDatePane() {
          this.flag.datePane = true;
@@ -363,7 +399,7 @@ export default {
          this.flag.suggestPane = false;
          this.flag.editPane = false;
          this.flag.datePane = false;
-         this.flag.showPane = true;
+         this.openShowPane();
       },
 
       /*
@@ -494,16 +530,13 @@ export default {
             });
          }
 
+         console.log('apply changes');
          if (this.context.edit) {
             this.updateAddress({
                addressId: this.context.addressId,
                newAddress: newAddress
             })
-            .then(payload => {
-                  console.log('payload', payload);
-                  this.closePaneAndCallbackSubmit(payload);
-               }
-            );
+            .then(payload => this.closePaneAndCallbackSubmit(payload));
 
          } else {
             this.addNewAddress(newAddress)