Dispo.vue

<template>
	<span
		class="badge"
		:class="{
			'bg-success': isDispo,
			'bg-danger': !isDispo
		}">
		<span v-if="isDispo">{{ $t("membre.dispo") }}</span>
		<span v-else
			>⏱&nbsp;{{
				dateDispo == null
					? "N/A"
					: nbPendingCertifs +
					  " (&nbsp;" +
					  $d(new Date(dateDispo * 1000)) +
					  ")"
			}}
		</span>
	</span>
</template>

<script>
export default {
	props: {
		isDispo: {
			type: Boolean
		},
		dateDispo: {
			type: Number
		},
		certifs: {
			type: Array,
			required: true
		}
	},
	computed: {
		nbPendingCertifs() {
			return this.certifs.filter((el) => {
				return el.pending == true
			}).length
		}
	}
}
</script>