Card.vue

<template>
	<div class="card member">
		<div class="card-body">
			<div
				class="uid-wrapper d-flex align-items-center justify-content-between mb-4">
				<h2 class="h3 card-title text-center d-flex align-items-center">
					<span class="text-truncate d-inline-block">
						{{ hash.uid }}
					</span>
					<small><BadgeStatus class="ms-2" :membre="hash" /></small>
				</h2>
				<button
					id="favori"
					class="btn btn-info"
					@click="$favourites.toggleFavourite(hash.uid, $event)">
					<outline-user-add-icon
						class="icon"
						v-if="!$favourites.list.includes(hash.uid)" />
					<outline-user-remove-icon
						class="icon"
						v-if="$favourites.list.includes(hash.uid)" />
				</button>
			</div>
			<BtnClipboard :textContent="hash.pubkey" />
			<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.title") }}&nbsp;:</th>
							<td
								:class="{
									'table-success': hash.sentry,
									'table-warning': !hash.sentry
								}">
								{{ hash.sentry ? $t("oui") : $t("non") }}
							</td>
						</tr>
						<tr v-if="hash.status != 'NEWCOMER'">
							<th scope="row">{{ $t("membre.qualite.title") }}&nbsp;:</th>
							<td
								:class="{
									'table-success': hash.quality.ratio >= 80,
									'table-warning': hash.quality.ratio < 80
								}">
								{{ Math.round(hash.quality.ratio * 100) / 100 }}
							</td>
						</tr>
						<tr>
							<th scope="row">{{ $t("membre.distance.title") }}&nbsp;:</th>
							<td
								:class="{
									'table-success':
										hash.status != 'NEWCOMER'
											? hash.distance.dist_ok
											: hash.distanceE.dist_ok,
									'table-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'
										? 'table-' + $options.filters.dateStatus(hash.limitDate)
										: 'table-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="
									'table-' + $options.filters.dateStatus(hash.certsLimit)
								">
								{{ $d(new Date(hash.certsLimit * 1000), "long") }}
							</td>
						</tr>
						<tr v-if="hash.status == 'MEMBER'">
							<th scope="row">{{ $t("membre.dispocertif") }}&nbsp;:</th>
							<td
								:class="{
									'table-success': hash.minDatePassed,
									'table-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="{
									'table-success': hash.sent_certifications.length <= 80,
									'table-warning': hash.sent_certifications.length > 80,
									'table-danger': hash.sent_certifications.length > 90
								}">
								{{ 100 - hash.sent_certifications.length }}
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			favourites: []
		}
	},
	props: {
		hash: Object
	}
}
</script>

<style lang="scss">
.uid-wrapper {
	flex-direction: column;

	.text-truncate {
		max-width: 300px;
	}

	@media (min-width: 576px) {
		flex-direction: row;
	}
}

#favori {
	width: 50px;
	height: 50px;
}

.member {
	.table {
		text-align: center;
		width: auto;
		margin: auto;

		tr {
			display: flex;
			flex-direction: column;
		}
	}
}

@media (min-width: 576px) {
	.member {
		.table {
			tr {
				display: table-row;
			}
			th {
				text-align: right;
			}
			td {
				text-align: left;
			}
		}
	}
}
</style>