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">Loading...</span>
      </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='person-address__valid'>
         <h2>{{ $t('date') }}</h2>
         <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('validFrom')"
               v-model="validFrom"
               aria-describedby="validFrom"
            />
         </div>
         <!--div v-if="errorMsg.length > 0">
            {{ errors }}
         </div-->
         <div v-if="flag.loading">
            {{ $t('loading') }}
         </div>
         <div v-if="flag.success">
            {{ $t('person_address_creation_success') }}
         </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>

export default {
   name: 'ShowAddress',
   props: [
      'context',
      'options',
      'default',
      'flag',
      'entity',
      'errorMsg',
      'insideModal'
   ],
   emits: ['openEditPane', 'submitAddress', 'validFrom'],
   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() {
         return new Date().toISOString().split('T')[0];
      }
   }
};
</script>