List.vue

<template>
	<div class="table-responsive pb-3">
		<table class="table table-striped table-hover text-center">
			<thead class="thead-light sortable" v-if="displayHead">
				<tr>
					<th class="position-relative" scope="col" @click="sort('uid')">
						<BtnSort
							fieldName="uid"
							title="UID"
							:currentSort="currentSort"
							:currentSortDir="currentSortDir" />
					</th>
					<th
						scope="col"
						class="d-none d-md-table-cell position-relative"
						@click="sort('pubkey')"
						v-if="displayPubkey">
						<BtnSort
							fieldName="pubkey"
							:title="$t('cle.publique.title')"
							:currentSort="currentSort"
							:currentSortDir="currentSortDir" />
					</th>
					<th
						scope="col"
						class="d-none d-sm-table-cell position-relative"
						@click="sort('date_sortie')"
						v-if="displayDate">
						<BtnSort
							fieldName="date_sortie"
							:title="getTitleDate"
							:currentSort="currentSort"
							:currentSortDir="currentSortDir" />
					</th>
					<th class="position-relative"></th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="member in membersSorted" :key="member.uid">
					<th scope="row" @click="redirect(member.hash)">
						<div>
							<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
							>{{ member.uid }}
							<BadgeDanger
								:limitDate="
									Math.min(
										Math.max(member.received_certifications.limit, 1),
										member.limitDate
									)
								"
								:memberStatus="member.status" />
						</div>
						<BadgeStatus :membre="member" />
						<BadgeDispo
							:isDispo="member.minDatePassed"
							:dateDispo="member.minDate"
							:certifs="member.sent_certifications"
							v-if="member.status == 'MEMBER'" />
					</th>
					<td
						class="d-none d-md-table-cell"
						v-if="displayPubkey"
						@click="redirect(member.hash)">
						{{ member.pubkey.substring(0, 10) }}
					</td>
					<td
						class="d-none d-sm-table-cell"
						v-if="displayDate"
						@click="redirect(member.hash)">
						<BadgeDate :date="date(member)" styleDate="long" />
					</td>
					<td class="py-1">
						<button
							class="btn btn-danger"
							v-if="$favourites.list.includes(member.uid)"
							@click="$favourites.toggleFavourite(member.uid, $event)"
							:title="$t('favoris.supprimer')">
							X
						</button>
					</td>
				</tr>
			</tbody>
		</table>
		<BtnPagination
			:currentPage.sync="currentPage"
			:pageSize="pageSize"
			:arrayLength="members.length" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			currentSort: this.defaultSort,
			currentSortDir: this.defaultSortDir,
			pageSize: 5,
			currentPage: 1
		}
	},
	props: {
		members: {
			type: Array,
			required: true
		},

		displayHead: {
			type: Boolean,
			default: true
		},
		displayPubkey: {
			type: Boolean,
			default: true
		},
		displayDate: {
			type: Boolean,
			default: true
		},
		adhesion: {
			type: Boolean,
			default: false
		},
		certif: {
			type: Boolean,
			default: false
		},
		defaultSortDir: {
			type: String,
			default: "asc"
		},
		defaultSort: {
			type: String,
			default: "uid"
		}
	},
	methods: {
		redirect(hash) {
			this.$router.push(this.localePath({ name: "membre", query: { hash } }))
		},
		sort(s) {
			if (s === this.currentSort) {
				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
			}
			this.currentSort = s
		},
		date(member) {
			if (this.adhesion) return member.limitDate
			if (this.certif) return member.received_certifications.limit
			return Math.min(member.limitDate, member.received_certifications.limit)
		},
		getOrder(a, b, order) {
			if (a < b) return -1 * order
			if (a > b) return 1 * order
			return 0
		}
	},
	computed: {
		membersSorted() {
			return this.members
				.sort((a, b) => {
					let modifier = this.currentSortDir === "desc" ? -1 : 1

					if (this.currentSort == "uid") {
						return this.getOrder(
							a["uid"].toLowerCase(),
							b["uid"].toLowerCase(),
							modifier
						)
					} else if (this.currentSort == "pubkey") {
						return this.getOrder(
							a["pubkey"].toLowerCase(),
							b["pubkey"].toLowerCase(),
							modifier
						)
					} else if (this.currentSort == "date_sortie") {
						if (this.adhesion) {
							return this.getOrder(a["limitDate"], b["limitDate"], modifier)
						} else if (this.certif) {
							return this.getOrder(
								a["received_certifications"]["limit"],
								b["received_certifications"]["limit"],
								modifier
							)
						} else {
							let minA = Math.min(
								a["limitDate"],
								a["received_certifications"]["limit"]
							)
							let minB = Math.min(
								b["limitDate"],
								b["received_certifications"]["limit"]
							)
							return this.getOrder(minA, minB, 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
				})
		},
		getTitleDate() {
			if (this.adhesion || this.certif) {
				return this.$t("date")
			} else {
				return this.$t("membre.datelimpertestatut")
			}
		}
	}
}
</script>