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

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

@@ -0,0 +1,30 @@
+<template>
+   <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">
+            {{ $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() {
+      }
+   }
+}
+</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 -->
-      <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">
+               ref="suggestAddress">
-            </show-pane>
+            </suggest-pane>
          </template>
 
          <template v-slot:footer>
@@ -39,8 +42,7 @@
                class="btn btn-update">
                {{ $t('action.edit')}}
             </button>
-            <button class="btn btn-save"
+            <button class="btn btn-save">
-               @click.prevent="$emit('submitAddress')">
                {{ $t('action.save')}}
             </button>
          </template>
@@ -48,8 +50,7 @@
       </modal>
    </teleport>
    <div class="mt-4" v-else>
-
+      <suggest-pane v-if="flag.suggestPane"
-      <show-pane v-if="flag.showPane"
          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">
+         ref="suggestAddress">
-      </show-pane>
+      </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() {
+      //context() {
-         if ( typeof this.options.button.text !== 'undefined'
+      //   return this.context;
-            && ( 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;
-      }
    },
    mounted() {
 

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

@@ -0,0 +1,121 @@
+<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>
+
+   <address-render-box :address="address"></address-render-box>
+
+   <div v-if="showDateFrom" class='address-valid date-since'>
+      <h3>{{ $t(getValidFromDateText) }}</h3>
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
+         <input type="date" class="form-control form-control-lg" name="validFrom"
+                v-bind:placeholder="$t(getValidFromDateText)"
+                v-model="validFrom"
+                aria-describedby="validFrom"
+         />
+      </div>
+   </div>
+
+   <div v-if="showDateTo" class='address-valid date-until'>
+      <h3>{{ $t(getValidToDateText) }}</h3>
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
+         <input type="date" class="form-control form-control-lg" name="validTo"
+                v-bind:placeholder="$t(getValidToDateText)"
+                v-model="validTo"
+                aria-describedby="validTo"
+         />
+      </div>
+   </div>
+
+   <action-buttons v-if="insideModal === false">
+      <template v-slot:action>
+         <li>
+            <a @click.prevent="$emit('openEditPane')"
+               class="btn btn-update">
+               {{ $t('action.edit')}}
+            </a>
+         </li>
+         <!--
+         <li>
+            <a class="btn btn-save">
+               {{ $t('action.save')}}
+            </a>
+         </li>
+         -->
+      </template>
+   </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: "DatePane",
+   components: {
+      AddressRenderBox,
+      ActionButtons
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['openEditPane'],
+   computed: {
+      address() {
+         return this.entity.address;
+      },
+      validFrom: {
+         set(value) {
+            this.entity.selected.valid.from = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.entity.selected.valid.from);
+         }
+      },
+      validTo: {
+         set(value) {
+            this.entity.selected.valid.to = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.entity.selected.valid.from);
+         }
+      },
+      getValidFromDateText() {
+         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
+      },
+      getValidToDateText() {
+         return 'validTo';
+      },
+      showDateFrom() {
+         return !this.context.edit && this.options.useDate.validFrom;
+      },
+      showDateTo() {
+         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>
@@ -55,24 +55,22 @@
       </address-more>
 
       <!-- Not display in modal -->
-      <ul v-if="insideModal == false"
+      <action-buttons v-if="insideModal === false">
-          class="record_actions sticky-form-buttons">
+         <template v-slot:action>
-         <li class="cancel">
+            <li>
-            <a class="btn btn-cancel" v-bind:href="context.backUrl">
+               <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
-               {{ $t('back_to_the_list') }}
+                  {{ $t('action.cancel') }}
-            </a>
+               </a>
-         </li>
+            </li>
-         <li>
+            <!--
-            <a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
+            <li>
-               {{ $t('action.cancel') }}
+               <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
-            </a>
+                  {{ $t('action.valid_and_see')}}
-         </li>
+               </a>
-         <li>
+            </li>
-            <a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
+            -->
-               {{ $t('action.valid_and_see')}}
+         </template>
-            </a>
+      </action-buttons>
-         </li>
-      </ul>
 
    </div>
 </template>
@@ -82,7 +80,8 @@ 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: "EditPane",
@@ -91,7 +90,8 @@ export default {
       CitySelection,
       AddressSelection,
       AddressMap,
-      AddressMore
+      AddressMore,
+      ActionButtons
    },
    props: [
       'context',

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

@@ -1,68 +1,27 @@
 <template>
 
-   <div v-if="insideModal == false" class="loading">
+   <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>
 
-   <div v-if="showDateFrom" class='address-valid date-since'>
+   <button @click.prevent="$emit('openEditPane')"
-      <h3>{{ $t(getValidFromDateText) }}</h3>
+      class="btn" :class="getClassButton"
-      <div class="input-group mb-3">
+      type="button" name="button" :title="$t(getTextButton)">
-         <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
+      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
-         <input type="date" class="form-control form-control-lg" name="validFrom"
+   </button>
-                v-bind:placeholder="$t(getValidFromDateText)"
-                v-model="validFrom"
-                aria-describedby="validFrom"
-         />
-      </div>
-   </div>
 
-   <div v-if="showDateTo" class='address-valid date-until'>
-      <h3>{{ $t(getValidToDateText) }}</h3>
-      <div class="input-group mb-3">
-         <span class="input-group-text" id="validTo"><i class="fa fa-fw fa-calendar"></i></span>
-         <input type="date" class="form-control form-control-lg" name="validTo"
-                v-bind:placeholder="$t(getValidToDateText)"
-                v-model="validTo"
-                aria-describedby="validTo"
-         />
-      </div>
-   </div>
-
-   <ul v-if="insideModal == false"
-      class="record_actions">
-      <!--
-      <li class="cancel">
-         <a class="btn btn-cancel" v-bind:href="context.backUrl">
-            {{ $t('back_to_the_list') }}</a>
-      </li>-->
-      <li>
-         <a @click.prevent="$emit('openEditPane')"
-            class="btn btn-update">
-            {{ $t('action.edit')}}
-         </a>
-      </li>
-      <!--<li>
-         <a class="btn btn-save"
-            @click.prevent="$emit('submitAddress')">
-            {{ $t('action.save')}}
-         </a>
-      </li>-->
-   </ul>
 </template>
 
 <script>
-import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
 export default {
@@ -76,35 +35,31 @@ export default {
       'default',
       'flag',
       'entity',
-      'errorMsg',
+      'errorMsg'
-      'insideModal'
    ],
-   emits: ['openEditPane'], // 'submitAddress'
+   emits: ['openEditPane'],
    computed: {
       address() {
          return this.entity.address;
       },
-      validFrom: {
+      displayTextButton() {
-         set(value) {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
-            this.entity.selected.valid.from = ISOToDate(value);
+            this.options.button.displayText : this.default.button.displayText;
-         },
+      },
-         get() {
+      getClassButton() {
-            return dateToISO(this.entity.selected.valid.from);
+         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;
-      validTo: {
-         set(value) {
-            this.entity.selected.valid.to = ISOToDate(value);
-         },
-         get() {
-            return dateToISO(this.entity.selected.valid.from);
-         }
-      },
-      getValidFromDateText() {
-         return (this.context.entity.name === 'household') ? 'move_date' : 'validFrom';
-      },
-      getValidToDateText() {
-         return 'validTo';
       },
       getSuccessText() {
          switch (this.context.entity.name) {
@@ -117,12 +72,6 @@ export default {
             default:
                return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
          }
-      },
-      showDateFrom() {
-         return !this.context.edit && this.options.useDate.validFrom;
-      },
-      showDateTo() {
-         return !this.context.edit && this.options.useDate.validTo;
       }
    }
 };

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

@@ -0,0 +1,60 @@
+<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">
+      <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>