lexique.vue

<template>
	<main class="container">
		<div class="rech-lexique row mb-4 pt-4">
			<div class="col-md-6 mx-auto">
				<h2 class="text-center mb-5 font-weight-light">{{ $t("lexique") }}</h2>
				<div class="form-group">
					<input
						v-model="search"
						type="text"
						class="form-control"
						id="exampleFormControlInput1"
						:placeholder="$t('recherche.title')" />
				</div>
			</div>
		</div>
		<div class="table-responsive">
			<table class="table table-striped">
				<thead class="d-none d-sm-table-row">
					<th>{{ $t("mot") }}</th>
					<th>{{ $t("description") }}</th>
				</thead>
				<tbody>
					<tr v-for="mot in listeMotsTrad" :key="mot.title">
						<th scope="row" v-html="mot.title"></th>
						<td v-html="mot.desc"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</main>
</template>

<script>
export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("lexique"),
					active: true
				}
			],
			search: "",
			listeMots: [
				"dossier",
				"adhesion",
				"certification",
				"membre",
				"membre.referent",
				"membre.calculant",
				"membre.qualite",
				"membre.distance",
				"noeud",
				"revocation",
				"piscine",
				"wot",
				"dividende",
				"bloc",
				"blockchain",
				"pow",
				"centralite",
				"duniter",
				"trm",
				"cle.privee",
				"cle.publique",
				"compte.membre",
				"compte.portefeuille"
			]
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/lexique",
			en: "/lexicon",
			es: "/lexico"
		}
	},
	methods: {
		wrapSearch(str, txt) {
			if (str == "") {
				return txt
			}

			return txt.replace(new RegExp(str, "gi"), "<mark>$&</mark>")
		}
	},
	computed: {
		listeMotsTrad() {
			let retour = []
			this.listeMots.forEach((el) => {
				let isFound = false
				let desc = this.$t(el + ".desc")
				let title = this.$t(el + ".title")

				if (desc.toLowerCase().includes(this.search.toLowerCase())) {
					desc = this.wrapSearch(this.search, desc)
					isFound = true
				}

				if (title.toLowerCase().includes(this.search.toLowerCase())) {
					title = this.wrapSearch(this.search, title)
					isFound = true
				}

				if (isFound) {
					retour.push({
						desc: desc,
						title: title
					})
				}
			})
			retour.sort((a, b) => {
				if (a.title < b.title) {
					return -1
				}
				if (a.title > b.title) {
					return 1
				}
				return 0
			})
			return retour
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
	}
}
</script>

<style lang="scss" scoped>
.rech-lexique {
	position: sticky;
	top: var(--paddingTop);
	background: var(--background-color-primary);
}
th {
	min-width: 200px;
}

tr {
	display: flex;
	flex-direction: column;
}

@media (min-width: 576px) {
	tr {
		display: table-row;
	}
}
</style>