add MemberFilter

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";

components/member/Filter.vue

+<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>

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",

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",

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",

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",

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)
 			)
 		}
 	},