From 902ae9c00f1f6ce57da6d919a5d71dd355bec4af Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Sat, 22 Jan 2022 19:18:12 +0100
Subject: [PATCH] add search input for lexicon
---
pages/lexique.vue | 50 +++++++++++++++++++++++++++++++++++++++++------
1 file changed, 44 insertions(+), 6 deletions(-)
diff --git a/pages/lexique.vue b/pages/lexique.vue
index e11f8ec..5bfc7ac 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -1,6 +1,18 @@
<template>
<main class="container">
<h2 class="text-center mb-5 font-weight-light">{{ $t("lexique") }}</h2>
+ <div class="row">
+ <div class="col-md-6 mx-auto">
+ <div class="form-group">
+ <input
+ v-model="search"
+ type="text"
+ class="form-control"
+ id="exampleFormControlInput1"
+ placeholder="Votre recherche" />
+ </div>
+ </div>
+ </div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
@@ -9,8 +21,8 @@
</thead>
<tbody>
<tr v-for="mot in listeMotsTrad" :key="mot.title">
- <th scope="row">{{ mot.title }}</th>
- <td>{{ mot.desc }}</td>
+ <th scope="row" v-html="mot.title"></th>
+ <td v-html="mot.desc"></td>
</tr>
</tbody>
</table>
@@ -32,6 +44,7 @@ export default {
active: true
}
],
+ search: "",
listeMots: [
"dossier",
"adhesion",
@@ -68,14 +81,39 @@ export default {
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) => {
- retour.push({
- desc: this.$t(el + ".desc"),
- title: this.$t(el + ".title")
- })
+ 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) {
--
GitLab