List.vue

<template>
	<div class="table-responsive" v-if="certifs.length > 0">
		<BtnSearch v-model="search" class="col" v-if="certifs.length > 5" />
		<table class="table table-striped table-hover table-fixed sortable">
			<thead class="thead-light">
				<tr>
					<th class="p-0" @click="sort('uid')">
						<BtnSort
							:title="$t('membres')"
							fieldName="uid"
							:currentSort="currentSort"
							:currentSortDir="currentSortDir" />
					</th>
					<th class="p-0 td-date" @click="sort('expires_on')">
						<BtnSort
							class="justify-content-end"
							:title="$t('expire')"
							fieldName="expires_on"
							:currentSort="currentSort"
							:currentSortDir="currentSortDir" />
					</th>
				</tr>
			</thead>
			<tbody>
				<tr
					v-for="certif in certifsTriees"
					:key="certif.uid"
					@click="
						$router.push(
							localePath({
								name: 'membre',
								query: { hash: certif.hash }
							})
						)
					">
					<th scope="row" 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
								:limitDate="certif.received_certifications.limit"
								: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'" />
					</th>
					<td class="text-right py-1">
						<BadgeDate :date="certif.expires_on" styleDate="short" />
						<span class="badge badge-secondary" v-if="certif.pending">{{
							$t("traitement")
						}}</span>
					</td>
				</tr>
			</tbody>
		</table>
		<BtnPagination
			:currentPage.sync="currentPage"
			:pageSize="pageSize"
			:arrayLength="certifsFiltrees.length"
			v-if="certifsFiltrees.length > pageSize" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			search: "",
			currentSort: "expires_on",
			currentSortDir: "asc",
			currentPage: 1,
			pageSize: 5
		}
	},
	props: {
		certifs: Array
	},
	methods: {
		sort(s) {
			if (s === this.currentSort) {
				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
			}
			this.currentSort = s
		}
	},
	computed: {
		certifsFiltrees() {
			return this.certifs.filter((row, index) => {
				return (
					this.search == "" ||
					row.uid.toLowerCase().includes(this.search.toLowerCase())
				)
			})
		},
		certifsTriees() {
			return this.certifsFiltrees
				.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
				})
				.filter((row, index) => {
					let start = (this.currentPage - 1) * this.pageSize
					let end = this.currentPage * this.pageSize
					if (index >= start && index < end) return true
				})
		}
	},
	watch: {
		certifs: {
			handler(n, o) {
				this.search = ""
			}
		}
	}
}
</script>

<style lang="scss" scoped>
thead th:last-child {
	padding-right: 1.5rem;
	text-align: right;
}
</style>