From c2c90bf53129f593c7b1e27701787ea6d81ccb42 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Wed, 23 Feb 2022 19:08:42 +0100
Subject: [PATCH] add MemberFilter

---
 assets/css/_bootstrap.scss   |  2 +-
 components/member/Filter.vue | 74 ++++++++++++++++++++++++++++++++++++
 i18n/locales/de.json         |  3 ++
 i18n/locales/en.json         |  3 ++
 i18n/locales/es.json         |  3 ++
 i18n/locales/fr.json         |  3 ++
 pages/favoris.vue            | 10 +++--
 7 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 components/member/Filter.vue

diff --git a/assets/css/_bootstrap.scss b/assets/css/_bootstrap.scss
index 814bf81..46f8b76 100644
--- a/assets/css/_bootstrap.scss
+++ b/assets/css/_bootstrap.scss
@@ -36,7 +36,7 @@
 @import "~bootstrap/scss/buttons";
 @import "~bootstrap/scss/transitions";
 // @import "~bootstrap/scss/dropdown";
-// @import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/button-group";
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
diff --git a/components/member/Filter.vue b/components/member/Filter.vue
new file mode 100644
index 0000000..94e5f40
--- /dev/null
+++ b/components/member/Filter.vue
@@ -0,0 +1,74 @@
+<template>
+	<div class="text-muted">
+		<p id="filterStatutTitle">{{ $t("filter.statut") }}&nbsp;:</p>
+		<ul class="p-0" aria-labelledby="filterStatutTitle" role="group">
+			<li class="form-check form-check-inline">
+				<input
+					class="form-check-input"
+					v-model="checkedStatus"
+					type="checkbox"
+					id="check-newcomer"
+					value="NEWCOMER" />
+				<label class="form-check-label" for="check-newcomer">{{
+					$t("statut.newcomer")
+				}}</label>
+			</li>
+			<li class="form-check form-check-inline">
+				<input
+					class="form-check-input"
+					v-model="checkedStatus"
+					type="checkbox"
+					id="check-member"
+					value="MEMBER" />
+				<label class="form-check-label" for="check-member">{{
+					$t("statut.member")
+				}}</label>
+			</li>
+			<li class="form-check form-check-inline">
+				<input
+					class="form-check-input"
+					v-model="checkedStatus"
+					type="checkbox"
+					id="check-missing"
+					value="MISSING" />
+				<label class="form-check-label" for="check-missing">{{
+					$t("statut.missing")
+				}}</label>
+			</li>
+			<li class="form-check form-check-inline">
+				<input
+					class="form-check-input"
+					v-model="checkedStatus"
+					type="checkbox"
+					id="check-revoked"
+					value="REVOKED" />
+				<label class="form-check-label" for="check-revoked">{{
+					$t("statut.revoked")
+				}}</label>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			checkedStatus: this.selectedStatus
+		}
+	},
+	props: {
+		selectedStatus: {
+			type: Array,
+			required: true
+		}
+	},
+	watch: {
+		checkedStatus: {
+			handler(n, o) {
+				this.$emit("update:selectedStatus", n)
+			}
+		}
+	}
+}
+</script>
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 1aec3d9..c4e5b30 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -117,6 +117,9 @@
 		"title": "Meine Favoriten",
 		"use": "Nur meine Favoriten"
 	},
+	"filter": {
+		"statut": "Nach Status filtern"
+	},
 	"infos": "Informationen",
 	"inout": "Bei- und Austritte des Vertrauensnetz in den 2 letzten Tagen",
 	"inpreparation": "In Vorbereitung",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 519cac0..94005d3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -118,6 +118,9 @@
 		"title": "My favourites",
 		"use": "My favorites only"
 	},
+	"filter": {
+		"statut": "Filter by status"
+	},
 	"infos": "Informations",
 	"inout": "Entries and exits of the web of trust for the last 2 days",
 	"inpreparation": "In preparation",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index a2a705c..9eb7d50 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -118,6 +118,9 @@
 		"title": "Mis favoritos",
 		"use": "Solo mis favoritos"
 	},
+	"filter": {
+		"statut": "Filtrar por estado"
+	},
 	"infos": "Informaciones",
 	"inout": "Entradas y salidas de la red de confianza en los últimos 2 días",
 	"inpreparation": "En preparación",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index 6d21732..142b23f 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -118,6 +118,9 @@
 		"title": "Mes favoris",
 		"use": "Mes favoris uniquement"
 	},
+	"filter": {
+		"statut": "Filtrer par statut"
+	},
 	"infos": "Informations",
 	"inout": "Entrées et sorties de la toile de confiance des 2 derniers jours",
 	"inpreparation": "En préparation",
diff --git a/pages/favoris.vue b/pages/favoris.vue
index eecb2b3..24c68bb 100644
--- a/pages/favoris.vue
+++ b/pages/favoris.vue
@@ -22,6 +22,7 @@
 							v-model="search"
 							:help="$t('recherche.desc.favourites')"
 							class="col-sm-7 col-md-6 col-lg-5 col-xl-4 mx-auto mb-4" />
+						<MemberFilter :selectedStatus.sync="filterStatus" />
 						<MemberList
 							defaultSort="date_membership"
 							:members="filteredFavoris"
@@ -59,13 +60,16 @@ export default {
 				}
 			],
 			search: "",
-			error: null
+			error: null,
+			filterStatus: ["NEWCOMER", "MEMBER", "MISSING", "REVOKED"]
 		}
 	},
 	computed: {
 		filteredFavoris() {
-			return this.favoris.filter((el) =>
-				el.uid.toLowerCase().includes(this.search.toLowerCase())
+			return this.favoris.filter(
+				(el) =>
+					el.uid.toLowerCase().includes(this.search.toLowerCase()) &&
+					this.filterStatus.includes(el.status)
 			)
 		}
 	},
-- 
GitLab