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="showMessageWhenNoAddress" class="mt-5">
         <p class="chill-no-data-statement">
            {{ $t('not_yet_address') }}
         </p>
      </div>

      <address-render-box :address="address" :useDatePane="useDatePane"></address-render-box>
   </div>

   <action-buttons
      :options="this.options"
      :defaultz="this.defaultz">
      <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>

</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'],
   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>