Ajout tri par nom ou date

components/member/List.vue

@@ -3,10 +3,52 @@
 		<table class="table table-striped table-hover">
 			<thead v-if="displayHead">
 				<tr>
-					<th scope="col">UID</th>
-					<th scope="col" class="d-none d-xl-table-cell" v-if="displayPubkey">
+					<th scope="col" @click="sort('uid')">
+						UID
+						<div class="d-inline-block position-absolute ml-2">
+							<div
+								class="up"
+								:class="{
+									sorted: currentSortDir == 'desc' && currentSort == 'uid',
+									invisible: currentSortDir == 'asc' && currentSort == 'uid'
+								}">
+								▲
+							</div>
+							<div
+								class="down"
+								:class="{
+									sorted: currentSortDir == 'asc' && currentSort == 'uid',
+									invisible: currentSortDir == 'desc' && currentSort == 'uid'
+								}">
+								▼
+							</div>
+						</div>
+					</th>
+					<th scope="col" class="d-none d-xl-table-cell" v-if="displayPubkey && !displayOnlyDate">
 						{{ $t("cle.publique.title") }}
 					</th>
+					<th scope="col" class="d-none d-xl-table-cell"
+						@click="sort('limit_date')" v-if="displayOnlyDate">
+						{{ $t("limitDate") }}
+						<div class="d-inline-block position-absolute ml-2">
+							<div
+								class="up"
+								:class="{
+									sorted: currentSortDir == 'desc' && currentSort == 'limit_date',
+									invisible: currentSortDir == 'asc' && currentSort == 'limit_date'
+								}">
+								▲
+							</div>
+							<div
+								class="down"
+								:class="{
+									sorted: currentSortDir == 'asc' && currentSort == 'limit_date',
+									invisible: currentSortDir == 'desc' && currentSort == 'limit_date'
+								}">
+								▼
+							</div>
+						</div>
+					</th>
 					<th scope="col" class="d-none d-sm-table-cell" v-if="displayDate">
 						{{ $t("membre.datelimpertestatut") }}
 					</th>
@@ -14,7 +56,7 @@
 			</thead>
 			<tbody>
 				<tr
-					v-for="member in members"
+					v-for="member in membersSorted"
 					:key="member.uid"
 					@click="redirect(member.hash)">
 					<th scope="row">
@@ -47,6 +89,12 @@
 
 <script>
 export default {
+	data() {
+		return {
+			currentSort: "uid",
+			currentSortDir: "asc"
+		}
+	},
 	props: {
 		members: {
 			type: Array,
@@ -91,7 +139,64 @@ export default {
 						"'>" +
 						this.$d(new Date(date * 1000), "long") +
 						"</span>"
+		},
+		sort(s) {
+			if (s === this.currentSort) {
+				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
+			}
+			this.currentSort = s
+		}
+	},
+	computed: {
+		membersSorted() {
+			return this.members
+				.slice()
+				.sort((a, b) => {
+					let modifier = this.currentSortDir === "desc" ? -1 : 1
+
+					if (this.currentSort == "limit_date") {
+						if(this.adhesion) {
+							if (a["limitDate"] < b["limitDate"]) return -1 * modifier
+							if (a["limitDate"] > b["limitDate"]) return 1 * modifier
+						} else {
+							if (a["received_certifications"]["limit"] < b["received_certifications"]["limit"]) return -1 * modifier
+							if (a["received_certifications"]["limit"] > b["received_certifications"]["limit"]) return 1 * modifier
+						}
+					} else {
+						if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
+							return -1 * modifier
+						if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
+							return 1 * modifier
+					}
+
+					return 0
+				})
 		}
 	}
 }
 </script>
+
+<style lang="scss" scoped>
+thead th {
+	position: relative;
+	cursor: pointer;
+	background: var(--background-color-secondary);
+
+	&:last-child {
+		padding-right: 1.5rem;
+		text-align: right;
+	}
+}
+
+.up,
+.down {
+	line-height: 10px;
+	font-size: 1.1rem;
+	transform: scale(1.5, 1);
+	opacity: 0.3;
+}
+
+.sorted {
+	opacity: 1;
+}
+</style>

i18n/locales/en.json

@@ -74,6 +74,7 @@
 	"inout": "Entries and exits of the web of trust for the last 2 days",
 	"inpreparation": "In preparation",
 	"lexique": "Lexicon",
+	"limitDate": "Deadline",
 	"membre": {
 		"calculant": {
 			"desc": "Member using his private key to forge blocks thanks to Duniter installed on a node accessible on the Internet network",
@@ -153,6 +154,7 @@
 		"parmembre": "Forecasts by members",
 		"title": "Forecasts"
 	},
+	"pubkey": "Public key",
 	"recherche": {
 		"desc": "Enter the start of a nickname or public key",
 		"title": "Your search"
@@ -185,6 +187,7 @@
 		"title": "Relative Theory of Money (RTM)"
 	},
 	"type": "Type",
+	"uid": "Unique identifier",
 	"valeur": "Value",
 	"wot": {
 		"desc": "Set of the individuals recognized as such by their peers including the links that bind them together through certifications",

i18n/locales/es.json

@@ -74,6 +74,7 @@
 	"inout": "Entradas y salidas de la red de confianza en los últimos 2 días",
 	"inpreparation": "En preparación",
 	"lexique": "Léxico",
+	"limitDate": "Fecha límite",
 	"membre": {
 		"calculant": {
 			"desc": "Miembro usando su clave privada para falsificar bloques gracias a Duniter instalado en un nodo accesible en la red de Internet",
@@ -153,6 +154,7 @@
 		"parmembre": "Previsiones por miembros",
 		"title": "Pronósticos"
 	},
+	"pubkey": "Llave pública",
 	"recherche": {
 		"desc": "Introduce el comienzo de un pseudónimo o llave pública",
 		"title": "Buscar"
@@ -185,6 +187,7 @@
 		"title": "Teoría relativa del dinero (TRD)"
 	},
 	"type": "Tipo",
+	"uid": "Identificador único",
 	"valeur": "Valor",
 	"wot": {
 		"desc": "Conjunto de las personas reconocidas como tales por sus pares incluyendo los vínculos que las unen a través de certificaciones",

i18n/locales/fr.json

@@ -74,6 +74,7 @@
 	"inout": "Entrées et sorties de la toile de confiance des 2 derniers jours",
 	"inpreparation": "En préparation",
 	"lexique": "Lexique",
+	"limitDate": "Date limite",
 	"membre": {
 		"calculant": {
 			"desc": "Membre utilisant sa clé privée pour forger des blocs grâce à Duniter installé sur un noeud accessible sur le réseau Internet",
@@ -153,6 +154,7 @@
 		"parmembre": "Prévisions par membres",
 		"title": "Prévisions"
 	},
+	"pubkey": "Clef publique",
 	"recherche": {
 		"desc": "Saisissez le début d'un pseudo ou d'une clé publique",
 		"title": "Votre recherche"
@@ -185,6 +187,7 @@
 		"title": "Théorie Relative de la Monnaie (TRM)"
 	},
 	"type": "Type",
+	"uid": "Identifiant unique",
 	"valeur": "Valeur",
 	"wot": {
 		"desc": "Ensemble des membres et des certifications qui les relient entre eux",

pages/previsions/futures_sorties.vue

@@ -13,7 +13,6 @@
 						<MemberList
 							:members="wwResult['membership']"
 							:displayPubkey="false"
-							:displayHead="false"
 							:displayOnlyDate="true"
 							:displayDate="false" />
 					</div>
@@ -22,7 +21,6 @@
 						<MemberList
 							:members="wwResult['outOfCerts']"
 							:displayPubkey="false"
-							:displayHead="false"
 							:displayOnlyDate="true"
 							:displayDate="false"
 							:adhesion="false" />