Card.vue

<template>
	<div class="card member">
		<button
			id="favori"
			class="btn btn-light position-absolute"
			:class="{
				add: !$favourites.list.includes(hash.uid),
				remove: $favourites.list.includes(hash.uid)
			}"
			@click="$favourites.toggleFavourite(hash.uid, $event)"></button>
		<div class="card-body">
			<h2 class="card-title text-center mb-4">
				{{ hash.uid }}
				<BadgeStatus :membre="hash" />
			</h2>
			<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="{
									'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.title") }}&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.title") }}&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 {
	data() {
		return {
			favourites: []
		}
	},
	props: {
		hash: Object
	}
}
</script>

<style lang="scss">
#favori {
	top: 1.25rem;
	left: 1.25rem;
	background-color: var(--light);
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	width: 50px;
	height: 50px;

	&.add {
		background-image: url("~/assets/img/favori_add.png");
	}

	&.remove {
		background-image: url("~/assets/img/favori_remove.png");
	}
}

.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>