From 28e6af343920224f53a3ebe190d49c25ef630a95 Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Sat, 16 Oct 2021 18:34:11 +0200
Subject: [PATCH] [faq] add filtering

---
 locale/pl/translations.suml |  2 +-
 routes/faq.vue              | 29 +++++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 0befc92e..acaddece 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -532,7 +532,7 @@ faq:
                     Osoby mogące zajść w ciążę <em>przesadzają</em> chcąc praw reprodukcyjnych niebędących kompromisem między prawicą a skrajną prawicą.
                     Osoby czarnoskóre <em>przesadzają</em> z tą walką z rasizmem, nie wystarczy im zniesienie niewolnictwa?
                 - >
-                    Oprawcy lubią zrzucać winę na ofiary. Zgrywać dobrotliwych stróżów praw człowieka
+                    Opresorzy lubią zrzucać winę na ofiary. Zgrywać dobrotliwych stróżów praw człowieka
                     pilnujących, by <em>nieodpowiednim</em> ludziom się ich za dużo nie dostało.
                     Ale prawa człowieka nie powinny być negocjowalne ani warunkowe.
                 - >
diff --git a/routes/faq.vue b/routes/faq.vue
index ee416c3c..ffe4be8f 100644
--- a/routes/faq.vue
+++ b/routes/faq.vue
@@ -2,12 +2,24 @@
     <div>
         <LinksNav v-if="config.links.enabled"/>
 
-        <h2>
+        <h2 class="mb-4">
             <Icon v="map-marker-question"/>
             <T>faq.headerLong</T>
         </h2>
 
-        <details class="border mb-3" open>
+        <section>
+            <div class="input-group mb-3 bg-white">
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
+                <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
+            </div>
+        </section>
+
+        <details class="border mb-3" open v-show="!filter || $t('home.mission.header').toLowerCase().includes(filter.toLowerCase())">
             <summary class="d-none"/>
             <div class="px-3">
                 <Mission/>
@@ -18,6 +30,9 @@
                 :question="question"
                 :id="question" :ref="question.replace(/-/g, '_')"
                 @click="setHash('', question)"
+                v-show="!filter
+                     || $t(`faq.questions.${question}.question`).toLowerCase().includes(filter.toLowerCase())
+                     || $t(`faq.questions.${question}.answer`).join('|').toLowerCase().includes(filter.toLowerCase())"
         />
 
         <section>
@@ -32,6 +47,11 @@
 
     export default {
         mixins: [ hash ],
+        data() {
+            return {
+                filter: '',
+            }
+        },
         mounted() {
             this.handleHash('', hash => {
                 const $component = this.$refs[hash.replace(/-/g, '_')];
@@ -56,9 +76,14 @@
 </script>
 
 <style lang="scss" scoped>
+    @import "assets/variables";
+
     details {
         summary {
             font-weight: bold;
         }
+        &[open] {
+            box-shadow: $box-shadow;
+        }
     }
 </style>