List.vue

<template>
	<div class="table-responsive">
		<table class="table table-striped table-hover">
			<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="$t('membre.datelimpertestatut')"
							: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)">
						<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
						>{{ member.uid }}
						<BadgeDanger
							:limitDate="
								Math.min(member.received_certifications.limit, member.limitDate)
							"
							:memberStatus="member.status" />
						<BadgeStatus :membre="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="
								Math.min(member.limitDate, member.received_certifications.limit)
							"
							styleDate="long" />
					</td>
					<td class="py-1 text-center">
						<button
							class="btn btn-danger"
							v-if="$favourites.list.includes(member.uid)"
							@click="$favourites.toggleFavourite(member.uid, $event)">
							X
						</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			currentSort: "uid",
			currentSortDir: "asc"
		}
	},
	props: {
		members: {
			type: Array,
			required: true
		},

		displayHead: {
			type: Boolean,
			default: true
		},
		displayPubkey: {
			type: Boolean,
			default: true
		},
		displayDate: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		redirect(hash) {
			this.$router.push(
				this.localePath({ name: "membres-hash", params: { hash } })
			)
		},
		sort(s) {
			if (s === this.currentSort) {
				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
			}
			this.currentSort = s
		}
	},
	computed: {
		membersSorted() {
			return this.members.slice().sort((a, b) => {
				let modifier = this.currentSortDir === "desc" ? -1 : 1

				if (this.currentSort == "uid") {
					if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
						return -1 * modifier
					if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
						return 1 * modifier
				} else if (this.currentSort == "pubkey") {
					if (a["pubkey"].toLowerCase() < b["pubkey"].toLowerCase())
						return -1 * modifier
					if (a["pubkey"].toLowerCase() > b["pubkey"].toLowerCase())
						return 1 * modifier
				} else if (this.currentSort == "date_sortie") {
					if (
						Math.min(a["limitDate"], a["received_certifications"]["limit"]) <
						Math.min(b["limitDate"], b["received_certifications"]["limit"])
					)
						return -1 * modifier
					if (
						Math.min(a["limitDate"], a["received_certifications"]["limit"]) >
						Math.min(b["limitDate"], b["received_certifications"]["limit"])
					)
						return 1 * modifier
				}

				return 0
			})
		}
	}
}
</script>