index.vue

<template>
	<main class="container">
		<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
		<div class="row mb-4">
			<div class="col-6 m-auto text-center">
				<label for="rech" class="form-label">{{ $t("recherche.title") }}</label>
				<input
					type="text"
					class="form-control"
					id="rech"
					aria-describedby="rechHelp"
					v-model="param"
					autocomplete="off"
					@keyup="save" />
				<small id="rechHelp" class="form-text text-muted">{{
					$t("recherche.desc")
				}}</small>
			</div>
		</div>
		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
		<transition name="fade">
			<div class="alert alert-danger" v-if="error">{{ error }}</div>
		</transition>
		<transition name="fade">
			<div
				class="row"
				v-if="
					idSearch && param.length > 2 && !$apollo.queries.idSearch.loading
				">
				<div class="col-8 m-auto">
					<MemberList :members="idSearch.ids" :displayDate="false" />
				</div>
			</div>
		</transition>
	</main>
</template>

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

export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("membres"),
					active: true
				}
			],
			param: "",
			error: null
		}
	},
	methods: {
		save() {
			localStorage.setItem("search", this.param)
		}
	},
	apollo: {
		idSearch: {
			query: SEARCH_MEMBERS,
			variables() {
				return { hint: this.param }
			},
			skip() {
				return this.param.length < 3
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/membres",
			en: "/members",
			es: "/miembros"
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
		// Rechargement du input
		if (localStorage.search) {
			this.param = localStorage.getItem("search")
		}
	}
}
</script>