_hash.vue

<template>
  <main class="content container">
    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
    <div v-if="!$apollo.queries.idFromHash.loading">
      <div class="row">
        <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
          <MemberCard :hash="idFromHash" />
        </div>
      </div>
      <div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
        <div class="col-12 col-md-6 mb-3">
          <h3>Certifications reçues 
            <span :class="classWarning" v-if="($options.filters.dateStatus(idFromHash.received_certifications.limit) == 'warning') || (!idFromHash.received_certifications.limit)">⚠
              <span class="sr-only" v-if="$options.filters.dateStatus(idFromHash.received_certifications.limit) == 'danger'">En manque de certifications</span>
              <span class="sr-only" v-else>Bientôt en manque de certifications</span>
            </span>
          </h3>
          <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
        </div>
        <div class="col-12 col-md-6">
          <h3>Certifications envoyées</h3>
          <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import gql from "graphql-tag"

export default {
  data() {
    // Variables locales
    return {
      breadcrumb: [
        {
          text: 'Accueil',
          to: '/'
        },
        {
          text: 'Membres',
          to: '/membres'
        },
        {
          text: '',
          active: true
        }
      ]
    };
  },
  // Fonctions locales
  methods: {},
  apollo: {
    idFromHash: {
      query: gql`
        query Search($hash: Hash!) {
          idFromHash(hash: $hash) {
            ...memberAttributes
            pubkey
            isLeaving
            sentry
            minDate
            minDatePassed
            membership_pending
            limitDate
            distance {
              value {
                ratio
              }
              dist_ok
            }
            received_certifications {
              limit
              certifications {
                from {
                  ...memberAttributes
                }
                expires_on
              }
            }
            sent_certifications {
              to {
                ...memberAttributes
              }
              expires_on
            }
          }
        }
        fragment memberAttributes on Identity {
          uid
          hash
          status
          quality {
            ratio
          }
        }
      `,
      variables() {
        return { hash: this.$route.params.hash };
      },
      skip() {
        return false;
      },
    },
  },
  computed: {
    classWarning: function() {
      return {
        'text-danger' : !this.idFromHash.received_certifications.limit,
        'text-warning' : this.$options.filters.dateStatus(this.idFromHash.received_certifications.limit) == 'warning'
      }
    }
  },
  watch: {
    idFromHash: {
      handler(n,o) {
          this.breadcrumb[2].text = this.idFromHash.uid
          $nuxt.$emit("changeRoute", this.breadcrumb);
      }
    }
  }
};
</script>

<style lang="sass">

</style>