Card.vue

<template>
<div class="card member">
    <div class="card-body">
        <h2 class="card-title text-center">
            {{ hash.uid }}
            <BadgeStatus :membre="hash" />
        </h2>
        <div class="card-subtitle mb-2 text-muted text-center">{{ hash.pubkey }}</div>
        <div class="table-responsive">
            <table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
            <tbody>
                <tr v-if="hash.status == 'MEMBER'">
                    <th scope="row">{{ $t('membre.referent') }}&nbsp;:</th>
                    <td :class="{'list-group-item-success': hash.sentry, 'list-group-item-warning': !hash.sentry}">{{ hash.sentry ? $t('oui') : $t('non') }}</td>
                </tr>
                <tr v-if="hash.status != 'NEWCOMER'">
                    <th scope="row">{{ $t('membre.qualite') }}&nbsp;:</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>
                    <th scope="row">{{ $t('membre.distance') }}&nbsp;:</th>
                    <td :class="{
                        'list-group-item-success':  hash.status != 'NEWCOMER' ? hash.distance.dist_ok : hash.distanceE.dist_ok,
                        'list-group-item-danger': hash.status != 'NEWCOMER' ? !hash.distance.dist_ok : !hash.distanceE.dist_ok,
                    }">{{ hash.status != 'NEWCOMER' ? Math.round(hash.distance.value.ratio*100)/100 : Math.round(hash.distanceE.value.ratio*100)/100 }}</td>
                </tr>
                <tr>
                    <th scope="row">{{ hash.status != 'MISSING' ? $t('membre.datelimadhesion') : $t('membre.datelimrevoc')}}&nbsp;:</th>
                    <td :class="hash.status != 'MISSING' ? 'list-group-item-'+ $options.filters.dateStatus(hash.limitDate) : 'list-group-item-danger'">{{ $d(new Date(hash.limitDate*1000), 'long') }}</td>
                </tr>
                <tr v-if="hash.status == 'MEMBER'">
                    <th scope="row">{{ $t('membre.datemanquecertifs') }}&nbsp;:</th>
                    <td :class="'list-group-item-'+ $options.filters.dateStatus(hash.received_certifications.limit)">{{ $d(new Date(hash.received_certifications.limit*1000), 'long') }}</td>
                </tr>
                <tr v-if="hash.status == 'MEMBER'">
                    <th scope="row">{{ $t('membre.dispocertif') }}&nbsp;:</th>
                    <td :class="{
                        'list-group-item-success': hash.minDatePassed,
                        'list-group-item-danger': !hash.minDatePassed,
                    }">{{ hash.minDatePassed ? $t('oui') : $t('non')  }} <small v-if="!hash.minDatePassed">( > {{ $d(new Date(hash.minDate*1000), 'long') }} )</small></td>
                </tr>
                <tr v-if="hash.status == 'MEMBER'">
                    <th scope="row">{{ $t('membre.nb_certifs') }}&nbsp;:</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>
</div>
</template>

<script>
export default {
    props: {
        hash: Object
    }
}
</script>

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

.table
    width: auto
    margin: auto
    td
        min-width: 200px
    th
        min-width: 250px
</style>