From 50865e8de0b8f3b9e8faa10eea4847d28f697a82 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Tue, 25 Jan 2022 17:15:33 +0100
Subject: [PATCH] create BtnSort component and improve table filters
---
components/badge/Date.vue | 14 ++-
components/btn/Sort.vue | 44 ++++++++
components/certif/List.vue | 51 ++-------
components/member/List.vue | 149 ++++++++-------------------
i18n/locales/en.json | 5 -
i18n/locales/es.json | 5 -
i18n/locales/fr.json | 5 -
pages/membres/index.vue | 2 +-
pages/previsions/futures_sorties.vue | 33 +++---
plugins/filters.js | 25 ++---
10 files changed, 132 insertions(+), 201 deletions(-)
create mode 100644 components/btn/Sort.vue
diff --git a/components/badge/Date.vue b/components/badge/Date.vue
index dccb640..c3f44dd 100644
--- a/components/badge/Date.vue
+++ b/components/badge/Date.vue
@@ -1,11 +1,9 @@
<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>
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
new file mode 100644
index 0000000..c0609aa
--- /dev/null
+++ b/components/btn/Sort.vue
@@ -0,0 +1,44 @@
+<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>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 9dd5e47..9e498f5 100644
--- a/components/certif/List.vue
+++ b/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) => ({
diff --git a/components/member/List.vue b/components/member/List.vue
index 2ac99d0..a35ff11 100644
--- a/components/member/List.vue
+++ b/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
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5048a86..bb96d8a 100644
--- a/i18n/locales/en.json
+++ b/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",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 30c63ce..2459190 100644
--- a/i18n/locales/es.json
+++ b/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",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index 131ea07..cae2dd1 100644
--- a/i18n/locales/fr.json
+++ b/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",
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 47ef31c..480e75f 100644
--- a/pages/membres/index.vue
+++ b/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>
diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue
index fbe4989..41c1069 100644
--- a/pages/previsions/futures_sorties.vue
+++ b/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")
}
}
diff --git a/plugins/filters.js b/plugins/filters.js
index 1654212..97e8c71 100644
--- a/plugins/filters.js
+++ b/plugins/filters.js
@@ -1,13 +1,14 @@
-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"
+ }
+})
--
GitLab