slot buttons up from actionButtons to addAddress

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

@@ -10,7 +10,6 @@
 
 <script>
 import AddAddress from './components/AddAddress.vue';
-import { patchAddress } from "./api";
 import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
 
 export default {
@@ -30,7 +29,6 @@ export default {
          return (this.context.edit) ? 'address_' + this.context.addressId
             : this.context.entity.name + '_' + this.context.entity.id ;
       }
-
    },
    mounted() {
       //console.log('AddAddress: data context', this.context);

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

@@ -2,43 +2,30 @@
    <ul class="record_actions"
       :class="{ 'sticky-form-buttons': isStickyForm }">
 
-      <!--
       <li v-if="isStickyForm" class="cancel">
-         <a class="btn btn-cancel" @click="resetPane">
+         <slot name="before"></slot>
-            {{ $t('back_to_the_list') }}
-         </a>
       </li>
-      -->
 
       <slot name="action"></slot>
 
-      <!--
       <li v-if="isStickyForm">
-         <a class="btn btn-save">
+         <slot name="after"></slot>
-            {{ $t('action.save')}}
-         </a>
       </li>
-      -->
    </ul>
 </template>
 
 <script>
 export default {
    name: "ActionButtons",
-   props: [ 'options', 'default' ],
+   props: ['options', 'defaultz'],
    computed: {
       isStickyForm() {
          return (typeof this.options.stickyActions !== 'undefined') ?
-            this.options.stickyActions : this.default.stickyActions;
+            this.options.stickyActions : this.defaultz.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

@@ -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">
+               class="btn btn-create">
-               {{ $t('action.edit')}}
+               {{ $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"
+            <button class="btn btn-save" @click="closeEditPane">
-               @click="closeEditPane">
+               {{ $t('action.save')}}
-               {{ $t('action.valid')}}
             </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"
+            <button class="btn btn-update" @click="openEditPane">
-                    class="btn btn-update">
                {{ $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.flag.suggestPane === false && this.displaySuggestions) {
-         if (!this.context.edit && this.hasSuggestions) {
             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 => {
+            .then(payload => this.closePaneAndCallbackSubmit(payload));
-                  console.log('payload', payload);
-                  this.closePaneAndCallbackSubmit(payload);
-               }
-            );
 
          } else {
             this.addNewAddress(newAddress)

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

@@ -1,4 +1,4 @@
-<template>
+<template>step3
 
    <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>
@@ -40,23 +40,16 @@
    </div>
 
    <action-buttons v-if="insideModal === false"
-      :flag="this.flag"
       :options="this.options"
-      :default="this.default">
+      :defaultz="this.defaultz">
+      <template v-slot:before>
+         <slot name="before"></slot>
+      </template>
       <template v-slot:action>
-         <li>
+         <slot name="action"></slot>
-            <a @click.prevent="$emit('openEditPane')"
+      </template>
-               class="btn btn-update">
+      <template v-slot:after>
-               {{ $t('action.edit')}}
+         <slot name="after"></slot>
-            </a>
-         </li>
-         <!--
-         <li>
-            <a class="btn btn-save">
-               {{ $t('action.save')}}
-            </a>
-         </li>
-         -->
       </template>
    </action-buttons>
 
@@ -76,13 +69,12 @@ export default {
    props: [
       'context',
       'options',
-      'default',
+      'defaultz',
       'flag',
       'entity',
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane'],
    computed: {
       address() {
          return this.entity.address;

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

@@ -1,4 +1,4 @@
-<template>
+<template>step2
    <div class="address-form">
 
       <!-- Not display in modal -->
@@ -55,20 +55,16 @@
       </address-more>
 
       <action-buttons v-if="insideModal === false"
-         :flag="this.flag"
          :options="this.options"
-         :default="this.default">
+         :defaultz="this.defaultz">
+         <template v-slot:before>
+            <slot name="before"></slot>
+         </template>
          <template v-slot:action>
-            <li>
+            <slot name="action"></slot>
-               <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+         </template>
-                  {{ $t('action.cancel') }}
+         <template v-slot:after>
-               </a>
+            <slot name="after"></slot>
-            </li>
-            <li>
-               <a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
-                  {{ $t('action.save')}}
-               </a>
-            </li>
          </template>
       </action-buttons>
 
@@ -96,13 +92,13 @@ export default {
    props: [
       'context',
       'options',
-      'default',
+      'defaultz',
       'flag',
       'entity',
       'errorMsg',
       'insideModal'
    ],
-   emits: ['closeEditPane', 'getCities', 'getReferenceAddresses'],
+   emits: ['getCities', 'getReferenceAddresses'],
    data() {
       return {
          value: false

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

@@ -11,9 +11,11 @@
       {{ $t(getSuccessText) }}
    </div>
 
-   <address-render-box :address="address"></address-render-box>
+   <address-render-box v-if="!onlyButton" :address="address"></address-render-box>
 
-   <action-buttons :flag="this.flag" :options="this.options" :default="this.default">
+   <action-buttons
+      :options="this.options"
+      :defaultz="this.defaultz">
       <template v-slot:action>
          <li>
             <button @click.prevent="$emit('openEditPane')"
@@ -40,7 +42,7 @@ export default {
    props: [
       'context',
       'options',
-      'default',
+      'defaultz',
       'flag',
       'entity',
       'errorMsg'
@@ -52,10 +54,10 @@ export default {
       },
       displayTextButton() {
          return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
-            this.options.button.displayText : this.default.button.displayText;
+            this.options.button.displayText : this.defaultz.button.displayText;
       },
       getClassButton() {
-         let type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
+         let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
          let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
             `${this.options.button.size} ` : '';
          return `${size}${type}`;
@@ -67,7 +69,7 @@ export default {
             )) {
             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;
+         return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
       },
       getSuccessText() {
          switch (this.context.entity.name) {
@@ -80,6 +82,10 @@ export default {
             default:
                return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
          }
+      },
+      onlyButton() {
+         return (typeof this.options.onlyButton !== 'undefined') ?
+            this.options.onlyButton : this.defaultz.onlyButton;
       }
    }
 };

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

@@ -1,33 +1,30 @@
-<template>
+<template>step1
 
    <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">
+   <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">{{ errorMsg }}</div>
-      {{ errorMsg }}
-   </div>
 
-   <div v-if="flag.success" class="alert alert-success">
+   <div v-if="flag.success" class="alert alert-success">{{ $t(getSuccessText) }}</div>
-      {{ $t(getSuccessText) }}
-   </div>
 
-   suggestions
+   <h3>{{ $t('address_suggestions') }}</h3>
 
    <action-buttons v-if="insideModal === false"
-      :flag="this.flag"
       :options="this.options"
-      :default="this.default">
+      :defaultz="this.defaultz">
+      <template v-slot:before>
+         <slot name="before"></slot>
+      </template>
       <template v-slot:action>
-         <li>
+         <slot name="action"></slot>
-            <a @click.prevent="$emit('openEditPane')"
+      </template>
-               class="btn btn-update">
+      <template v-slot:after>
-               {{ $t('action.edit')}}
+         <slot name="after"></slot>
-            </a>
-         </li>
       </template>
    </action-buttons>
+
 </template>
 
 <script>
@@ -43,21 +40,13 @@ export default {
    props: [
       'context',
       'options',
-      'default',
+      'defaultz',
       'flag',
       'entity',
       'errorMsg',
       'insideModal'
    ],
-   emits: ['openEditPane'],
+   computed: {},
-   computed: {
+   methods: {}
-   },
-   methods: {
-
-   }
 }
 </script>
-
-<style scoped>
-
-</style>

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

@@ -33,6 +33,7 @@ const addressMessages = {
         validTo: "L'adresse est valable jusqu'au",
         back_to_the_list: 'Retour à la liste',
         loading: 'chargement en cours...',
+        address_suggestions: "Suggestion d'adresses",
         address_new_success: 'La nouvelle adresse est enregistrée',
         address_edit_success: 'L\'adresse a été mise à jour',
 

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

@@ -48,7 +48,9 @@ containers.forEach((container) => {
                             validTo: container.dataset.useValidTo === 'true'       //boolean, default: false
                         },
                         /// Force redirection after last step (cfr. backUrl)
-                        forceRedirect: container.dataset.forceRedirect === 'true'  //boolean, default: false
+                        forceRedirect: container.dataset.forceRedirect === 'true',  //boolean, default: false
+                        /// Don't display show renderbox Address
+                        onlyButton: container.dataset.onlyButton === 'true'         //boolean, default: false
                     }
                 }
             }

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

@@ -93,7 +93,8 @@ export default {
                // Use Date fields
                useDate: {
                   validFrom: true
-               }
+               },
+               onlyButton: true
             }
          }
       }

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

@@ -10,9 +10,11 @@
         {% 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 }),
-            openPanesInModal: false,
-            stickyActions: true
         } %}
+        {#
+            stickyActions: true
+            openPanesInModal: false,
+        #}
     </div>
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.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>
 

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

@@ -17,8 +17,10 @@
                 {# include vue_address component #}
                 {% 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 }),
+                    backUrl: path('chill_person_household_addresses', { 'household_id': household.id }),
+                    forceRedirect: true,
                     mode: 'new',
+                    useValidFrom: true,
                     buttonSize: 'btn-lg',
                     buttonText: 'Move household',
                     modalTitle: 'Move household',