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

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'>
-      <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>
+   <button @click.prevent="$emit('openEditPane')"
+      class="btn" :class="getClassButton"
+      type="button" name="button" :title="$t(getTextButton)">
+      <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
+   </button>
 
-   <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',
-      'insideModal'
+      'errorMsg'
    ],
-   emits: ['openEditPane'], // 'submitAddress'
+   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);
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
+            this.options.button.displayText : this.default.button.displayText;
+      },
+      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}`;
+      },
+      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;
          }
-      },
-      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';
+         return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
       },
       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;
       }
    }
 };