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

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

   <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 {
   name: 'ShowPane',
   components: {
      AddressRenderBox
   },
   props: [
      'context',
      'options',
      'default',
      'flag',
      'entity',
      'errorMsg',
      'insideModal'
   ],
   emits: ['openEditPane'], // 'submitAddress'
   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';
      },
      getSuccessText() {
         switch (this.context.entity.name) {
            /*
            case 'household':
               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
            case 'person':
               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
            */
            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;
      }
   }
};
</script>