_hash.vue

<template>
  <main>
    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
    <transition name="fade">
      <div class="alert alert-danger" v-if="error">{{ error }}</div>
    </transition>
    <transition name="fade">
      <div v-if="idFromHash">
        <div class="container-md">
          <div class="row">
            <div class="col-lg-9 col-xl-8 mx-auto my-3">
              <MemberCard :hash="idFromHash" />
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
            <div class="col-sm-10 col-md-7 col-lg-5 mb-3 mx-auto">
              <h3 class="h4 text-center" :class="{
                'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
                'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
              }">{{ $t('certifications.recues') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ '&nbsp;+&nbsp;' + nbCertifsPending('received') }}</span>)
                <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
              </h3>
              <CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
            </div>
            <div class="col-sm-10 col-md-7 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
              <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ '&nbsp;+&nbsp;' + nbCertifsPending('sent') }}</span>)</h3>
              <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
            </div>
          </div>
        </div>
      </div>
    </transition>
  </main>
</template>

<script>
import {SEARCH_MEMBER} from "@/graphql/queries"
import CertifStatus from '~/components/badge/CertifStatus.vue';

export default {
  components: { CertifStatus },
  data() {
    return {
      breadcrumb: [
        {
          text: this.$t('accueil'),
          to: '/'
        },
        {
          text: this.$t('membres'),
          to: '/membres'
        },
        {
          text: '',
          active: true
        }
      ],
      error: null
    };
  },
  methods: {
    nbCertifs(sens) {
      return sens == "received" ? this.idFromHash.received_certifications.certifications.filter((el) => {return el.pending == false}).length : this.idFromHash.sent_certifications.filter((el) => {return el.pending == false}).length
    },
    nbCertifsPending(sens) {
      return sens == "received" ? this.idFromHash.received_certifications.certifications.filter((el) => {return el.pending == true}).length : this.idFromHash.sent_certifications.filter((el) => {return el.pending == true}).length
    }
  },
  apollo: {
    idFromHash: {
      query: SEARCH_MEMBER,
      variables() {return { hash: this.$route.params.hash }},
      error (err) {this.error = err.message}
    }
  },
  nuxtI18n: {
    paths: {
      fr: '/membres/:hash',
      en: '/members/:hash',
      es: '/miembros/:hash'
    }
  },
  computed: {
    classWarning() {
      return {
        'text-danger' : !this.idFromHash.received_certifications.limit,
        'text-warning' : this.$options.filters.dateStatus(this.idFromHash.received_certifications.limit) == 'warning'
      }
    }
  },
  mounted() {
    $nuxt.$emit("changeRoute", this.breadcrumb)
  },
  watch: {
    idFromHash: {
      handler(n,o) {
          this.breadcrumb[2].text = this.idFromHash.uid
          $nuxt.$emit("changeRoute", this.breadcrumb)
      }
    }
  }
};
</script>