create BtnSort component and improve table filters

components/badge/Date.vue

 <template>
 	<small>
-        <span
-            class="badge"
-            :class="'badge-' + $options.filters.dateStatus(date)">
-            {{ $d(new Date(date * 1000), styleDate) }}
-        </span>
-    </small>
+		<span class="badge" :class="'badge-' + $options.filters.dateStatus(date)">
+			{{ date == 0 ? "N/A" : $d(new Date(date * 1000), styleDate) }}
+		</span>
+	</small>
 </template>
 
 <script>
@@ -18,7 +16,7 @@ export default {
 		styleDate: {
 			type: String,
 			required: true
-		},
-    }
+		}
+	}
 }
 </script>

components/btn/Sort.vue

+<template>
+	<div class="d-inline-block position-absolute ml-2">
+		<div
+			class="up"
+			:class="{
+				sorted: currentSortDir == 'desc' && currentSort == fieldName,
+				invisible: currentSortDir == 'asc' && currentSort == fieldName
+			}">
+			▲
+		</div>
+		<div
+			class="down"
+			:class="{
+				sorted: currentSortDir == 'asc' && currentSort == fieldName,
+				invisible: currentSortDir == 'desc' && currentSort == fieldName
+			}">
+			▼
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		fieldName: {
+			type: String,
+			required: true
+		},
+		currentSort: {
+			type: String,
+			required: true
+		},
+		currentSortDir: {
+			type: String,
+			required: true,
+			validator: function (value) {
+				return ["asc", "desc"].indexOf(value) !== -1
+			}
+		}
+	},
+	created() {
+		console.log("created")
+	}
+}
+</script>

components/certif/List.vue

@@ -34,7 +34,7 @@
 						</div>
 					</th>
 					<td class="text-right py-1">
-						<BadgeDate :date="certif.expires_on" :styleDate="'short'" />
+						<BadgeDate :date="certif.expires_on" styleDate="short" />
 						<small class="d-block">
 							<span class="badge badge-secondary">{{ $t("traitement") }}</span>
 						</small>
@@ -49,47 +49,17 @@
 			<thead class="thead-light sortable">
 				<th class="position-relative" @click="sort('uid')">
 					{{ $t("membres") }}
-					<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>
+					<BtnSort
+						fieldName="uid"
+						:currentSort="currentSort"
+						:currentSortDir="currentSortDir" />
 				</th>
 				<th class="position-relative" @click="sort('expires_on')">
 					{{ $t("expire") }}
-					<div class="d-inline-block position-absolute ml-2">
-						<div
-							class="up"
-							:class="{
-								sorted: currentSortDir == 'desc' && currentSort == 'expires_on',
-								invisible:
-									currentSortDir == 'asc' && currentSort == 'expires_on'
-							}">
-							▲
-						</div>
-						<div
-							class="down"
-							:class="{
-								sorted: currentSortDir == 'asc' && currentSort == 'expires_on',
-								invisible:
-									currentSortDir == 'desc' && currentSort == 'expires_on'
-							}">
-							▼
-						</div>
-					</div>
+					<BtnSort
+						fieldName="expires_on"
+						:currentSort="currentSort"
+						:currentSortDir="currentSortDir" />
 				</th>
 			</thead>
 			<tbody>
@@ -124,7 +94,7 @@
 						</div>
 					</th>
 					<td class="text-right py-1">
-						<BadgeDate :date="certif.expires_on" :styleDate="'long'" />
+						<BadgeDate :date="certif.expires_on" styleDate="long" />
 					</td>
 				</tr>
 			</tbody>
@@ -186,6 +156,7 @@ export default {
 		},
 		certifsPending() {
 			return this.certifs
+				.slice()
 				.sort((a, b) => a.expires_on - b.expires_on)
 				.filter((el) => el.pending == true)
 				.map((certif) => ({

components/member/List.vue

@@ -5,65 +5,32 @@
 				<tr>
 					<th class="position-relative" 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>
+						<BtnSort
+							fieldName="uid"
+							:currentSort="currentSort"
+							:currentSortDir="currentSortDir" />
 					</th>
 					<th
 						scope="col"
-						class="d-none d-xl-table-cell position-relative"
-						v-if="displayPubkey && !displayOnlyDate">
+						class="d-none d-md-table-cell position-relative"
+						@click="sort('pubkey')"
+						v-if="displayPubkey">
 						{{ $t("cle.publique.title") }}
-					</th>
-					<th
-						scope="col"
-						class="d-none d-xl-table-cell position-relative"
-						@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>
+						<BtnSort
+							fieldName="pubkey"
+							:currentSort="currentSort"
+							:currentSortDir="currentSortDir" />
 					</th>
 					<th
 						scope="col"
 						class="d-none d-sm-table-cell position-relative"
+						@click="sort('date_sortie')"
 						v-if="displayDate">
 						{{ $t("membre.datelimpertestatut") }}
+						<BtnSort
+							fieldName="date_sortie"
+							:currentSort="currentSort"
+							:currentSortDir="currentSortDir" />
 					</th>
 				</tr>
 			</thead>
@@ -78,26 +45,20 @@
 							:limitDate="
 								Math.min(member.received_certifications.limit, member.limitDate)
 							"
-							:memberStatus="member.status"
-							v-if="!displayOnlyDate" />
-						<BadgeStatus :membre="member" v-if="!displayOnlyDate" />
+							:memberStatus="member.status" />
+						<BadgeStatus :membre="member" />
 					</th>
-					<td class="d-none d-xl-table-cell" v-if="displayOnlyDate">
+					<td class="d-none d-md-table-cell" v-if="displayPubkey">
+						{{ member.pubkey.substring(0, 10) }}
+					</td>
+					<td class="d-none d-sm-table-cell" v-if="displayDate">
 						<BadgeDate
 							:date="
-								adhesion
-									? member.limitDate
-									: member.received_certifications.limit
+								Math.min(member.limitDate, member.received_certifications.limit)
 							"
-							:styleDate="'long'" />
-					</td>
-					<td class="d-none d-xl-table-cell" v-if="displayPubkey">
-						{{ member.pubkey.substring(0, 10) }}
+							styleDate="long"
+							class="d-block text-center" />
 					</td>
-					<td
-						class="d-none d-sm-table-cell"
-						v-if="displayDate"
-						v-html="getDatePerteStatus(member)"></td>
 				</tr>
 			</tbody>
 		</table>
@@ -117,23 +78,16 @@ export default {
 			type: Array,
 			required: true
 		},
-		displayPubkey: {
-			type: Boolean,
-			default: true
-		},
+
 		displayHead: {
 			type: Boolean,
 			default: true
 		},
-		displayDate: {
+		displayPubkey: {
 			type: Boolean,
 			default: true
 		},
-		displayOnlyDate: {
-			type: Boolean,
-			default: false
-		},
-		adhesion: {
+		displayDate: {
 			type: Boolean,
 			default: true
 		}
@@ -144,19 +98,6 @@ export default {
 				this.localePath({ name: "membres-hash", params: { hash } })
 			)
 		},
-		getDatePerteStatus(member) {
-			let date = Math.min(
-				member.limitDate,
-				member.received_certifications.limit
-			)
-			return date == 0
-				? "N/A"
-				: "<span class='badge badge-" +
-						this.$options.filters.dateStatus(date) +
-						"'>" +
-						this.$d(new Date(date * 1000), "long") +
-						"</span>"
-		},
 		sort(s) {
 			if (s === this.currentSort) {
 				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
@@ -169,27 +110,27 @@ export default {
 			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 (this.currentSort == "uid") {
 					if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
 						return -1 * modifier
 					if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
 						return 1 * modifier
+				} else if (this.currentSort == "pubkey") {
+					if (a["pubkey"].toLowerCase() < b["pubkey"].toLowerCase())
+						return -1 * modifier
+					if (a["pubkey"].toLowerCase() > b["pubkey"].toLowerCase())
+						return 1 * modifier
+				} else if (this.currentSort == "date_sortie") {
+					if (
+						Math.min(a["limitDate"], a["received_certifications"]["limit"]) <
+						Math.min(b["limitDate"], b["received_certifications"]["limit"])
+					)
+						return -1 * modifier
+					if (
+						Math.min(a["limitDate"], a["received_certifications"]["limit"]) >
+						Math.min(b["limitDate"], b["received_certifications"]["limit"])
+					)
+						return 1 * modifier
 				}
 
 				return 0

i18n/locales/en.json

@@ -62,10 +62,6 @@
 		"title": "Duniter"
 	},
 	"expire": "Expires",
-	"error": {
-		"tooSmall": "{0} is too small. It must be between {1} and {2}. The value used is {1}",
-		"tooBig": "{0} is too big. It must be between {1} and {2}. The value used is {1}"
-	},
 	"favoris": {
 		"enregistre": "Saved to favorites !",
 		"none": "You don't have any favorites yet",
@@ -79,7 +75,6 @@
 	"inpreparation": "In preparation",
 	"jours": "0 days | 1 day | {n} days",
 	"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",

i18n/locales/es.json

@@ -62,10 +62,6 @@
 		"title": "Duniter"
 	},
 	"expire": "Expira el",
-	"error": {
-		"tooSmall": "{0} es demasiado pequeño. Debe estar entre {1} y {2}. El valor utilizado es {1}",
-		"tooBig": "{0} es demasiado grande. Debe estar entre {1} y {2}. El valor utilizado es {1}"
-	},
 	"favoris": {
 		"enregistre": "¡Guardado en favoritos!",
 		"none": "Aún no tienes favoritos",
@@ -79,7 +75,6 @@
 	"inpreparation": "En preparación",
 	"jours": "0 días | 1 día | {n} días",
 	"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",

i18n/locales/fr.json

@@ -62,10 +62,6 @@
 		"title": "Duniter"
 	},
 	"expire": "Expire le",
-	"error": {
-		"tooSmall": "{0} est trop petit. Il doit être compris entre {1} et {2}. La valeur utilisée est {1}",
-		"tooBig": "{0} est trop grand. Il doit être compris entre {1} et {2}. La valeur utilisée est {2}"
-	},
 	"favoris": {
 		"enregistre": "Enregistré dans les favoris !",
 		"none": "Vous n'avez pas encore de favoris",
@@ -79,7 +75,6 @@
 	"inpreparation": "En préparation",
 	"jours": "0 jours | 1 jour | {n} jours",
 	"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",

pages/membres/index.vue

@@ -28,7 +28,7 @@
 					idSearch && param.length > 2 && !$apollo.queries.idSearch.loading
 				">
 				<div class="col-8 m-auto">
-					<MemberList :members="idSearch.ids" />
+					<MemberList :members="idSearch.ids" :displayDate="false" />
 				</div>
 			</div>
 		</transition>

pages/previsions/futures_sorties.vue

@@ -6,7 +6,6 @@
 				<label for="period" class="form-label">{{
 					$t("previsions.period.title")
 				}}</label>
-
 				<select
 					class="form-control"
 					id="period"
@@ -17,7 +16,6 @@
 						{{ $tc("jours", index) }}
 					</option>
 				</select>
-
 				<small id="periodHelp" class="form-text text-muted">{{
 					$t("previsions.period.desc")
 				}}</small>
@@ -38,20 +36,15 @@
 						<h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2>
 						<MemberList
 							:members="wwResult['membership']"
-							:displayPubkey="false"
-							:displayOnlyDate="true"
-							:displayDate="false" />
+							:displayPubkey="false" />
 					</div>
 					<div class="col-md-6 col-lg-6">
 						<h2 class="h4 text-danger text-center">
-							{{ $t("statut.manquecertif") }}
+							{{ $t("statut.bientotmanquecertif") }}
 						</h2>
 						<MemberList
 							:members="wwResult['outOfCerts']"
-							:displayPubkey="false"
-							:displayOnlyDate="true"
-							:displayDate="false"
-							:adhesion="false" />
+							:displayPubkey="false" />
 					</div>
 				</div>
 			</div>
@@ -83,14 +76,12 @@ export default {
 				}
 			],
 			error: null,
-			period: 30,
-			display: "forecastsByNames"
+			period: 30
 		}
 	},
 	methods: {
 		save() {
 			this.error = null
-			localStorage.setItem("previsions_sorties", this.display)
 			localStorage.setItem("previsions_period", this.getPeriod() / day)
 		},
 		addValue(arr, val) {
@@ -128,25 +119,26 @@ export default {
 			update(data) {
 				let result = { membership: [], outOfCerts: [] }
 
-				for (let i = 0; i < data.memEnds.length; i++) {
-					let identity = data.memEnds[i]
+				data.memEnds.forEach((member) => {
 					if (
 						["danger", "warning"].includes(
-							this.$options.filters.dateStatus(identity.limitDate)
+							this.$options.filters.dateStatus(member.limitDate)
 						)
 					) {
-						this.addValue(result["membership"], identity)
+						result.membership.push(member)
 					}
+
 					if (
 						["danger", "warning"].includes(
 							this.$options.filters.dateStatus(
-								identity.received_certifications.limit
+								member.received_certifications.limit
 							)
 						)
 					) {
-						this.addValue(result["outOfCerts"], identity)
+						result.outOfCerts.push(member)
 					}
-				}
+				})
+
 				return result
 			},
 			error(err) {
@@ -164,7 +156,6 @@ export default {
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
 		if (localStorage.previsions_sorties) {
-			this.display = localStorage.getItem("previsions_sorties")
 			this.period = localStorage.getItem("previsions_period")
 		}
 	}

plugins/filters.js

-import Vue from 'vue'
+import Vue from "vue"
 
-Vue.filter('dateStatus', (val) => {
-    const diff = val - (Date.now() / 1000)
-    switch (true) {
-        case diff < 0:
-            return 'danger'
-        case diff < 2635200:
-            return 'warning'
-        case diff >= 2635200:
-            return 'success'
-    }
-})
\ No newline at end of file
+Vue.filter("dateStatus", (val) => {
+	if (val == 0) return "info"
+	const diff = val - Date.now() / 1000
+	switch (true) {
+		case diff < 0:
+			return "danger"
+		case diff < 2635200:
+			return "warning"
+		case diff >= 2635200:
+			return "success"
+	}
+})