List.vue

<template>
	<div class="certifList" v-if="certifs.length > 0">
		<button
			:title="
				isOpen ? $t('certification.masquer') : $t('certification.afficher')
			"
			@click="isOpen = !isOpen"
			class="btn w-100 m-auto d-block rounded-0"
			:class="btnClass"
			type="button"
			data-bs-toggle="collapse"
			:data-bs-target="'#' + collapseId"
			aria-expanded="false"
			:aria-controls="collapseId">
			<span v-if="!isOpen">
				<solid-eye-icon class="icon" aria-hidden="true" />
			</span>
			<span v-else>
				<solid-eye-off-icon class="icon" aria-hidden="true" />
			</span>
			<h4 class="d-inline align-middle">
				{{ title }}&nbsp;&nbsp;
				<span class="badge rounded-pill bg-white opacity-75 text-dark">{{
					certifs.length
				}}</span>
			</h4>
		</button>
		<div
			:id="collapseId"
			class="table-responsive collapse p-3"
			:class="collapseClass">
			<BtnSearch
				@erase="search = ''"
				v-model="search"
				class="px-2"
				v-if="certifs.length > 5" />
			<table
				class="table table-striped table-hover table-fixed sortable border m-0">
				<thead class="thead-light">
					<tr>
						<th class="p-0">
							<BtnSort
								:title="$t('membre.title')"
								fieldName="uid"
								:tableName="collapseId"
								:currentSort="currentSort"
								:currentSortDir="currentSortDir" />
						</th>
						<th class="p-0 col-4">
							<BtnSort
								:title="$t('expire')"
								fieldName="expires_on"
								:tableName="collapseId"
								:currentSort="currentSort"
								:currentSortDir="currentSortDir" />
						</th>
					</tr>
				</thead>
				<tbody>
					<tr
						v-for="certif in certifsTriees"
						:key="certif.uid"
						tabindex="0"
						:title="$t('membre.voirinfos')"
						@click="
							$router.push(
								localePath({
									name: 'membres-profil',
									query: { hash: certif.hash }
								})
							)
						"
						@keyup.enter="
							$router.push(
								localePath({
									name: 'membres-profil',
									query: { hash: certif.hash }
								})
							)
						">
						<td class="py-1">
							<div class="d-flex">
								<span v-if="$favourites.list.includes(certif.uid)"
									>★&nbsp;</span
								>
								<div class="text-truncate">{{ certif.uid }}</div>
								&nbsp;
								<BadgeDanger
									style="width: 1.2rem"
									:limitDate="certif.certsLimit"
									:memberStatus="certif.status" />
							</div>
							<BadgeStatus :membre="certif" />
							<BadgeQuality
								:quality="certif.quality.ratio"
								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
							<BadgeDispo
								:isDispo="certif.minDatePassed"
								:dateDispo="certif.minDate"
								:certifs="certif.sent_certifications"
								v-if="certif.status == 'MEMBER'" />
						</td>
						<td class="p-0 text-center col-4">
							<div class="d-inline-flex flex-column gap-1">
								<BadgeDate :date="certif.expires_on" />
								<span
									class="badge bg-secondary text-truncate d-block"
									v-if="certif.pending"
									>{{ $t("traitement") }}</span
								>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			search: "",
			currentSort: "expires_on",
			currentSortDir: "asc",
			isOpen: this.openDefault
		}
	},
	props: {
		certifs: Array,
		certifStatus: String,
		collapseId: String,
		title: String,
		openDefault: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		certifsFiltrees() {
			return this.certifs.filter((row, index) => {
				return (
					this.search == "" ||
					row.uid.toLowerCase().includes(this.search.toLowerCase())
				)
			})
		},
		certifsTriees() {
			return this.certifsFiltrees
				.map((el) => {
					el.status =
						this.$options.filters.dateStatus(el.limitDate) == "warning"
							? "RENEW"
							: el.status
					return el
				})
				.sort((a, b) => {
					let modifier = this.currentSortDir === "desc" ? -1 : 1

					if (this.currentSort == "expires_on") {
						if (a["expires_on"] < b["expires_on"]) return -1 * modifier
						if (a["expires_on"] > b["expires_on"]) return 1 * modifier
					} else {
						if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
							return -1 * modifier
						if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
							return 1 * modifier
					}

					return 0
				})
		},
		collapseClass() {
			if (this.collapseId.includes("entraitement")) return "bg-secondary"
			if (this.collapseId.includes("perimees")) return "bg-warning"
			if (this.collapseId == "sent-encours") return "bg-info"
			return {
				"bg-success": this.certifStatus == "success",
				"bg-warning": this.certifStatus == "warning",
				"bg-danger": this.certifStatus == "danger"
			}
		},
		btnClass() {
			if (this.collapseId.includes("entraitement")) return "btn-secondary"
			if (this.collapseId.includes("perimees")) return "btn-warning"
			if (this.collapseId == "sent-encours") return "btn-info"
			return {
				"btn-success": this.certifStatus == "success",
				"btn-warning": this.certifStatus == "warning",
				"btn-danger": this.certifStatus == "danger"
			}
		}
	},
	mounted() {
		if (this.openDefault && this.certifs.length > 0) {
			document.querySelector("#" + this.collapseId).classList.add("show")
		}
	},
	watch: {
		certifs: {
			handler(n, o) {
				this.search = ""
			}
		}
	}
}
</script>

<style lang="scss">
.certifList {
	.table-responsive tbody {
		max-height: 456px;
	}

	tbody tr {
		height: 80px;
	}

	@media (min-width: 576px) {
		button {
			font-size: 1.3rem;
		}

		tbody tr {
			height: initial;
		}
	}
}
</style>