AddAddress: adjust Open and Close methods for each step

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

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

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() {
+      bypassFirstStep() {
-      //   return this.context;
+         // 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.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: {
 
@@ -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.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/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')"

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')">
+               <a class="btn btn-save" @click.prevent="$emit('closeEditPane')">
-                  {{ $t('action.valid_and_see')}}
+                  {{ $t('action.save')}}
                </a>
             </li>
-            -->
          </template>
       </action-buttons>
 

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')"
+   <action-buttons :flag="this.flag" :options="this.options" :default="this.default">
-      class="btn" :class="getClassButton"
+      <template v-slot:action>
-      type="button" name="button" :title="$t(getTextButton)">
+         <li>
-      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+            <button @click.prevent="$emit('openEditPane')"
-   </button>
+               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',

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')"

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);
 });

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 %}
 

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>