index.vue

<template>
	<main class="container">
		<h2 class="text-center my-5 font-weight-light">
			<solid-home-icon style="width: 1.5rem" aria-hidden="true" />&nbsp;{{
				$t("inout")
			}}
		</h2>
		<NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
		<transition name="fade">
			<AlertDefault type="danger" v-if="error">{{ error }}</AlertDefault>
		</transition>
		<transition name="fade">
			<div class="result" v-if="newMembers">
				<p class="lead text-center">
					{{ $t("actuellement.debut") }}
					<span class="badge bg-secondary">{{ newMembers.totalMembers }}</span>
					{{ $t("actuellement.fin") }}
				</p>
				<div class="row text-center">
					<div class="col-md-6 col-lg-4 mb-5">
						<h2 class="h4 text-success">
							<solid-login-icon class="icon" aria-hidden="true" />&nbsp;{{
								$t("bienvenue")
							}}
						</h2>
						<MemberList id="entrees" :members="newMembers['entrees']" />
					</div>
					<div class="col-md-6 col-lg-4 mb-5">
						<h2 class="h4 text-danger">
							<solid-logout-icon class="icon" aria-hidden="true" />&nbsp;{{
								$t("aurevoir")
							}}
						</h2>
						<MemberList id="sorties" :members="newMembers['sorties']" />
					</div>
					<div class="col-lg-4 mb-5">
						<h2 class="h4 text-info">
							<solid-reply-icon class="icon" aria-hidden="true" />&nbsp;{{
								$t("revoila")
							}}
						</h2>
						<MemberList id="renew" :members="newMembers['renew']" />
					</div>
				</div>
			</div>
		</transition>
	</main>
</template>

<script>
import { LAST_EVENTS } from "@/graphql/queries.js"

const today = Math.round(Date.now() / 1000)

export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				}
			],
			error: null
		}
	},
	methods: {
		addValue(arr, val) {
			if (
				arr.filter(function (e) {
					return e.uid === val.uid
				}).length == 0
			) {
				arr.push(val)
			}
			return arr
		}
	},
	apollo: {
		$client() {
			return this.getApolloClient
		},
		newMembers: {
			query: LAST_EVENTS,
			variables() {
				return { start: today - 86400 * 2, end: today }
			},
			update(data) {
				let result = { entrees: [], sorties: [], renew: [] }
				let users = []
				let totalMembers = 0

				for (let i = 0; i < data.membersCount.length; i++) {
					if (i == data.membersCount.length - 1)
						totalMembers = data.membersCount[i].number

					for (let j = 0; j < data.membersCount[i].idList.length; j++) {
						let member = data.membersCount[i].idList[j]
						member.member.inOut = member.inOut

						if (!users.includes(member.member.uid)) {
							if (member.member.history.length == 1) {
								this.addValue(result["entrees"], member.member)
							} else if (member.inOut || member.member.status === "MEMBER") {
								this.addValue(result["renew"], member.member)
							} else {
								this.addValue(result["sorties"], member.member)
							}
						}

						users.push(member.member.uid)
					}
				}

				for (let list in result) {
					result[list].sort((a, b) =>
						a.uid.toLowerCase() > b.uid.toLowerCase() ? 1 : -1
					)
				}

				return {
					...result,
					totalMembers: totalMembers
				}
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
	}
}
</script>

<style lang="scss">
.result .table-responsive tbody {
	max-height: 56vh;
}
</style>