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

<template>

   <div v-if="!onlyButton">
      <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) }}
         <span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
      </div>

      <div v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')" class="mt-5">
         <div class="no-address-yet">
            <i class="fa fa-map-marker" aria-hidden="true"></i>
            <p class="chill-no-data-statement">
               {{ $t('not_yet_address') }}
            </p>

            <action-buttons
               :options="this.options"
               :defaultz="this.defaultz"
               class="add-address-btn">
               <template v-slot:action>
                  <button @click.prevent="$emit('openEditPane')"
                     class="btn" :class="getClassButton"
                     type="button" name="button" :title="$t(getTextButton)">
                     <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
                  </button>
               </template>
            </action-buttons>
         </div>
      </div>

      <div v-if="this.context.edit" class="mb-3 row">
         <div class="col-sm-4"></div>
         <div class="address-container col-sm-8">
            <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
         </div>
      </div>

      <div v-if="this.context.target.name === 'household' || this.context.edit">
         <action-buttons
            :options="this.options"
            :defaultz="this.defaultz">
            <template v-slot:action>
               <button @click.prevent="$emit('openEditPane')"
                  class="btn btn-sm" :class="getClassButton"
                  type="button" name="button" :title="$t(getTextButton)">
                  <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
               </button>
            </template>
         </action-buttons>
      </div>

      <div v-if="!this.context.edit">
         <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
      </div>

   </div>

   <div v-if="onlyButton">
      <action-buttons
         :options="this.options"
         :defaultz="this.defaultz"
         class="add-address-btn">
         <template v-slot:action>
            <button @click.prevent="$emit('openEditPane')"
               class="btn" :class="getClassButton"
               type="button" name="button" :title="$t(getTextButton)">
               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
            </button>
         </template>
      </action-buttons>
   </div>

</template>

<script>
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';

export default {
   name: 'ShowPane',
   components: {
      AddressRenderBox,
      ActionButtons
   },
   props: [
      'context',
      'defaultz',
      'options',
      'flag',
      'entity',
      'errorMsg',
      'useDatePane'
   ],
   emits: ['openEditPane'],
   mounted() {
      //console.log('context', this.context)
   },
   computed: {
      address() {
         return this.entity.address;
      },
      displayTextButton() {
         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
            this.options.button.displayText : this.defaultz.button.displayText;
      },
      getClassButton() {
         let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.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.defaultz.button.text.edit : this.defaultz.button.text.create;
      },
      getSuccessText() {
         return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
      },
      onlyButton() {
         return (typeof this.options.onlyButton !== 'undefined') ?
            this.options.onlyButton : this.defaultz.onlyButton;
      },
      forceRedirect() {
         return (!(this.context.backUrl === null || typeof this.context.backUrl === 'undefined'));
      },
      // showMessageWhenNoAddress() {
      //     let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
      //     if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
      //         return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
      //     }
      //    return !this.context.edit && !this.address.id && this.options.stickyActions;
      // }
   }
};
</script>

<style lang="scss">
.address-container {
   display:flex;
   justify-content:flex-end;
   border-radius: 5px;
}
.no-address-yet {
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   padding:1.5rem;
   margin-bottom:2rem;
   i {
      font-size:2rem;
      margin-bottom:2rem;
   }
   .add-address-btn {
      display: block
   }

}
</style>