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

<template>
   <div class="chill-entity entity-address">

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

      <div class="address multiline">
         <p v-if="address.text"
            class="street">
            {{ address.text }}
         </p>
         <p v-if="address.postcode"
            class="postcode">
            {{ address.postcode.code }} {{ address.postcode.name }}
         </p>
         <p v-if="address.country"
            class="country">
            {{ address.country.name.fr }}
         </p>
      </div>
      <div>
         <div v-if="address.floor">
            <span class="floor">
               <b>{{ $t('floor') }}</b>: {{ address.floor }}
            </span>
         </div>
         <div v-if="address.corridor">
            <span class="corridor">
               <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
            </span>
         </div>
         <div v-if="address.steps">
            <span class="steps">
               <b>{{ $t('steps') }}</b>: {{ address.steps }}
            </span>
         </div>
         <div v-if="address.flat">
            <span class="flat">
               <b>{{ $t('flat') }}</b>: {{ address.flat }}
            </span>
         </div>
         <div v-if="address.buildingName">
            <span class="buildingName">
               <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
            </span>
         </div>
         <div v-if="address.extra">
            <span class="extra">
               <b>{{ $t('extra') }}</b>: {{ address.extra }}
            </span>
         </div>
         <div v-if="address.distribution">
            <span class="distribution">
               <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
            </span>
         </div>
      </div>

      <div v-if="!context.edit" 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>

   <ul v-if="insideModal == false"
      class="record_actions sticky-form-buttons">
      <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', { getSubmited , flag })">
            {{ $t('action.save')}}
         </a>
      </li>
   </ul>
</template>

<script>
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';

export default {
   name: 'ShowAddress',
   props: [
      'context',
      'options',
      'default',
      'flag',
      'entity',
      'valid',
      'errorMsg',
      'insideModal'
   ],
   emits: ['openEditPane', 'submitAddress'], //?
   computed: {
      address() {
         return this.entity.address;
      },
      loaded() {
         return this.entity.loaded;
      },
      selected() {
         return this.entity.selected;
      },
      addressMap() {
         return this.entity.addressMap;
      },
      getSubmited() {
         return this.entity.address;
      },
      validFrom: {
         set(value) {
            this.valid.from = ISOToDate(value);

            //new Date().toISOString().split('T')[0];
         },
         get() {
            return dateToISO(this.valid.from);
         }
      },
      getValidFromDateText() {
         return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
      },
      getSuccessText() {
         switch (this.context.entity.type) {
            /*
            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';
         }
      }
   }
};
</script>