Card.vue

<template>
<div class="card member">
    <div class="card-body">
        <h2 class="card-title">
            {{ hash.uid }}
            <BadgeStatus :membre="hash" />
        </h2>
        <div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
        <table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
        <tbody>
            <tr v-if="hash.status == 'MEMBER'">
                <th scope="row">Référent :</th>
                <td :class="{'list-group-item-success': isReferent, 'list-group-item-warning': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
            </tr>
            <tr v-if="hash.status != 'NEWCOMER'">
                <th scope="row">Qualité :</th>
                <td :class="{
                    'list-group-item-success': hash.quality.ratio >= 80,
                    'list-group-item-warning': hash.quality.ratio < 80,
                }">{{ Math.round(hash.quality.ratio*100)/100 }}</td>
            </tr>
            <tr v-if="hash.status != 'NEWCOMER'">
                <th scope="row">Distance :</th>
                <td :class="{
                    'list-group-item-success': hash.distance.dist_ok,
                    'list-group-item-danger': !hash.distance.dist_ok,
                }">{{ Math.round(hash.distance.value.ratio*100)/100 }}</td>
            </tr>
            <tr>
                <th scope="row">{{ hash.status != 'MISSING' ? "Date limite d'adhésion" : "Date limite avant révocation"}} :</th>
                <td :class="hash.status != 'MISSING' ? 'list-group-item-'+ $options.filters.dateStatus(hash.limitDate) : 'list-group-item-danger'">{{ hash.limitDate | formatDate }}</td>
            </tr>
            <tr v-if="hash.status == 'MEMBER'">
                <th scope="row">Date avant de manquer de certifs :</th>
                <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ hash.received_certifications.limit | formatDate }}</td>
            </tr>
            <tr v-if="hash.status == 'MEMBER'">
                <th scope="row">Disponible pour certifier :</th>
                <td :class="{
                    'list-group-item-success': hash.minDatePassed,
                    'list-group-item-danger': !hash.minDatePassed,
                }">{{ hash.minDatePassed ? 'Oui' : 'Non'  }} <small v-if="!hash.minDatePassed">( > {{ hash.minDate | formatDate }} )</small></td>
            </tr>
            <tr v-if="hash.status == 'MEMBER'">
                <th scope="row">Nbre de certifs disponibles :</th>
                <td :class="{
                    'list-group-item-success': hash.sent_certifications.length<=80,
                    'list-group-item-warning': hash.sent_certifications.length>80,
                    'list-group-item-danger': hash.sent_certifications.length>90,
                }">{{ 100-hash.sent_certifications.length }}</td>
            </tr>
        </tbody>
        </table>
    </div>
</div>
</template>

<script>
export default {
    props: {
        hash: Object
    },
  computed: {
    isReferent () {
      const nb_certifs_referent = 5
      return this.hash.received_certifications.certifications.length > nb_certifs_referent && this.hash.sent_certifications.length > nb_certifs_referent
    }
  },
}
</script>

<style lang="sass" scoped>
.member
  th
    text-align: right
</style>