index.vue

<template>
	<main class="container">
		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
		<transition name="fade">
			<Alerte type="danger" :error="error" />
		</transition>
		<transition name="fade">
			<div v-if="wwResult">
				<h2 class="text-center my-5 font-weight-light">
					{{ $t("previsions.title") }}
					<small
						><span class="badge badge-secondary">{{
							$tc("dossier.attente", wwResult.dossiers_nb)
						}}</span></small
					>
				</h2>
				<div class="row">
					<div class="col-12 text-center mb-4">
						<div class="form-check form-check-inline">
							<input
								class="form-check-input"
								type="radio"
								id="forecastsByNames"
								value="forecastsByNames"
								checked
								v-model="display"
								@change="save" />
							<label class="form-check-label" for="forecastsByNames">
								{{ $t("tri.parmembres") }}
							</label>
						</div>
						<div class="form-check form-check-inline">
							<input
								class="form-check-input"
								type="radio"
								id="forecastsByDates"
								value="forecastsByDates"
								v-model="display"
								@change="save" />
							<label class="form-check-label" for="forecastsByDates">
								{{ $t("tri.pardate") }}
							</label>
						</div>
					</div>
					<div class="col-lg-8 m-auto">
						<div v-if="display == 'forecastsByNames'">
							<h3>{{ $t("previsions.parmembre") }}</h3>
							<div class="table-responsive">
								<table class="table table-striped table-hover">
									<tbody>
										<tr
											v-for="forecast in wwResult.forecastsByNames"
											:key="forecast.member.uid"
											@click="
												$router.push(
													localePath({
														name: 'membre',
														query: { hash: forecast.member.hash }
													})
												)
											">
											<th scope="row">
												<span
													v-if="$favourites.list.includes(forecast.member.uid)"
													>★&nbsp;</span
												>
												{{ forecast.member.uid }}
												<BadgeStatus :membre="forecast.member" />
											</th>
											<td class="p-0">
												<div
													class="d-flex justify-content-between p-3"
													v-for="date in forecast.forecasts"
													:key="date.date">
													<div
														class="forecast_date me-3"
														v-if="date.date < 9999999999">
														{{ $d(new Date(date.date * 1000), "short") }}
														{{ $t("time.a") }}
														{{
															$d(new Date(date.date * 1000), "hour").replace(
																" ",
																"&nbsp;"
															)
														}}
													</div>
													<div class="forecast_date me-3" v-else>N/A</div>
													<div>{{ Math.round(date.proba * 100) }}&nbsp;%</div>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div v-if="display == 'forecastsByDates'">
							<h3>{{ $t("previsions.pardate") }}</h3>
							<div class="table-responsive">
								<table class="table table-striped">
									<tbody>
										<tr
											v-for="forecast in wwResult.forecastsByDates"
											:key="forecast.date">
											<th
												scope="row"
												class="forecast_date"
												v-if="forecast.date < 9999999999">
												{{ $d(new Date(forecast.date * 1000), "short") }}
												{{ $t("time.a") }}
												{{ $d(new Date(forecast.date * 1000), "hour") }}
											</th>
											<th scope="row" class="forecast_date" v-else>N/A</th>
											<td class="p-0">
												<div class="list-group rounded-0">
													<nuxt-link
														class="list-group-item list-group-item-action border-0 d-flex justify-content-between p-3"
														:to="
															localePath('/membre/?hash=' + member.member.hash)
														"
														v-for="member in forecast.forecasts"
														:key="member.member.uid">
														<div class="me-3">
															<span
																v-if="
																	$favourites.list.includes(member.member.uid)
																"
																>★&nbsp;</span
															>
															{{ member.member.uid }}
															<BadgeStatus :membre="member.member" />
														</div>
														<div>
															{{ Math.round(member.proba * 100) }}&nbsp;%
														</div>
													</nuxt-link>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</main>
</template>

<script>
import { NEWCOMERS } from "@/graphql/queries"

export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("previsions.title"),
					active: true
				}
			],
			error: null,
			display: ""
		}
	},
	methods: {
		save() {
			localStorage.previsions = this.display
		}
	},
	apollo: {
		wwResult: {
			query: NEWCOMERS,
			update(data) {
				let result = { byName: [], byDate: [] }
				let forecasts = data.wwResult.forecastsByNames

				for (let i = 0; i < forecasts.length; i++) {
					let member = forecasts[i].member

					// On traite les forecasts par nom
					if (
						result["byName"].filter(function (e) {
							return e.member && e.member.uid === member.uid
						}).length == 0
					) {
						result["byName"].push({
							member: member,
							forecasts: [
								{
									date: forecasts[i].date,
									after: forecasts[i].after,
									proba: forecasts[i].proba
								}
							]
						})
					} else {
						result["byName"]
							.filter(function (e) {
								return e.member && e.member.uid === member.uid
							})[0]
							.forecasts.push({
								date: forecasts[i].date,
								after: forecasts[i].after,
								proba: forecasts[i].proba
							})
					}

					// On traite les forecasts par date
					if (
						result["byDate"].filter(function (e) {
							return e.date === forecasts[i].date
						}).length == 0
					) {
						result["byDate"].push({
							date: forecasts[i].date,
							forecasts: [
								{
									member: member,
									after: forecasts[i].after,
									proba: forecasts[i].proba
								}
							]
						})
					} else {
						result["byDate"]
							.filter(function (e) {
								return e.date === forecasts[i].date
							})[0]
							.forecasts.push({
								member: member,
								after: forecasts[i].after,
								proba: forecasts[i].proba
							})
					}
				}

				result["byDate"].sort((a, b) => (a.date > b.date ? 1 : -1))

				return {
					permutations_nb: data.wwResult.permutations_nb,
					dossiers_nb: data.wwResult.dossiers_nb,
					certifs_nb: data.wwResult.certifs_nb,
					forecastsByNames: result["byName"],
					forecastsByDates: result["byDate"]
				}
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/previsions",
			en: "/forecasts",
			es: "/pronosticos"
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
		this.display = localStorage.previsions
			? localStorage.previsions
			: "forecastsByNames"
	}
}
</script>

<style lang="scss" scoped>
.list-group-item {
	background: transparent;
	&:hover {
		background: rgba(0, 0, 255, 0.075);
		color: var(--text-primary-color);
	}
}

.forecast_date {
	min-width: 150px;
}
</style>