AddAddress: reorganize 4 steps Pane: show, suggest, edit, and date

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() {