Display dates of losing membership and certs in MemberList

assets/css/style.scss

@@ -87,3 +87,17 @@ thead.sortable th {
 		}
 	}
 }
+
+.uid {
+	@extend .text-truncate;
+	display: inline-block;
+	max-width: 200px;
+
+	@media (min-width: 576px) {
+		max-width: 255px;
+	}
+
+	@media (min-width: 992px) {
+		max-width: 205px;
+	}
+}

components/certif/List.vue

@@ -39,7 +39,7 @@
 					<th scope="row" class="py-1">
 						<div>
 							<div class="d-flex">
-								<div class="uid inline-block text-truncate">
+								<div class="uid inline-block">
 									<span v-if="$favourites.list.includes(certif.uid)"
 										>★&nbsp;</span
 									>{{ certif.uid }}
@@ -140,16 +140,4 @@ thead th:last-child {
 	padding-right: 1.5rem;
 	text-align: right;
 }
-
-.uid {
-	max-width: 130px;
-
-	@media (min-width: 576px) {
-		max-width: 255px;
-	}
-
-	@media (min-width: 992px) {
-		max-width: 205px;
-	}
-}
 </style>

components/member/Card.vue

 <template>
 	<div class="card member">
 		<div class="card-body">
-			<div class="uid d-flex align-items-center justify-content-between mb-4">
+			<div
+				class="uid-wrapper d-flex align-items-center justify-content-between mb-4">
 				<h2 class="card-title text-center">
-					{{ hash.uid }}
+					<span class="text-truncate d-inline-block">
+						{{ hash.uid }}
+					</span>
 					<BadgeStatus :membre="hash" />
 				</h2>
 				<button
@@ -143,9 +146,13 @@ export default {
 </script>
 
 <style lang="scss">
-.uid {
+.uid-wrapper {
 	flex-direction: column;
 
+	.text-truncate {
+		max-width: 300px;
+	}
+
 	@media (min-width: 576px) {
 		flex-direction: row;
 	}

components/member/List.vue

 <template>
 	<div class="table-responsive pb-3">
 		<table class="table table-striped table-hover text-center">
-			<thead class="thead-light sortable" v-if="displayHead">
+			<thead class="thead-light sortable">
 				<tr>
 					<th class="position-relative" scope="col" @click="sort('uid')">
 						<BtnSort
@@ -14,7 +14,7 @@
 						scope="col"
 						class="d-none d-md-table-cell position-relative"
 						@click="sort('pubkey')"
-						v-if="displayPubkey">
+						v-if="['search', 'favoris'].includes(type)">
 						<BtnSort
 							fieldName="pubkey"
 							:title="$t('cle.publique.title')"
@@ -24,11 +24,22 @@
 					<th
 						scope="col"
 						class="d-none d-sm-table-cell position-relative"
-						@click="sort('date_sortie')"
-						v-if="displayDate">
+						@click="sort('date_membership')"
+						v-if="['adhesion', 'favoris'].includes(type)">
 						<BtnSort
-							fieldName="date_sortie"
-							:title="getTitleDate"
+							fieldName="date_membership"
+							:title="$t('membre.datelimpertestatut')"
+							:currentSort="currentSort"
+							:currentSortDir="currentSortDir" />
+					</th>
+					<th
+						scope="col"
+						class="d-none d-lg-table-cell position-relative"
+						@click="sort('date_certs')"
+						v-if="['certif', 'favoris'].includes(type)">
+						<BtnSort
+							fieldName="date_certs"
+							:title="$t('membre.datemanquecertifs')"
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
@@ -38,9 +49,12 @@
 			<tbody>
 				<tr v-for="member in membersSorted" :key="member.uid">
 					<th scope="row" @click="redirect(member.hash)">
-						<div>
-							<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
-							>{{ member.uid }}
+						<div class="d-flex justify-content-center">
+							<div class="uid inline-block">
+								<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
+								>{{ member.uid }}
+							</div>
+							&nbsp;
 							<BadgeDanger
 								:limitDate="
 									Math.min(
@@ -51,7 +65,7 @@
 								:memberStatus="member.status" />
 						</div>
 						<div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none">
-							<BadgeDate :date="date(member)" styleDate="long" />
+							<BadgeDate :date="getDate(member)" styleDate="long" />
 						</div>
 						<BadgeStatus :membre="member" />
 						<BadgeDispo
@@ -62,15 +76,23 @@
 					</th>
 					<td
 						class="d-none d-md-table-cell"
-						v-if="displayPubkey"
+						v-if="['search', 'favoris'].includes(type)"
 						@click="redirect(member.hash)">
 						{{ member.pubkey.substring(0, 10) }}
 					</td>
 					<td
 						class="d-none d-sm-table-cell"
-						v-if="displayDate"
+						v-if="['adhesion', 'favoris'].includes(type)"
+						@click="redirect(member.hash)">
+						<BadgeDate :date="member.limitDate" styleDate="long" />
+					</td>
+					<td
+						class="d-none d-lg-table-cell"
+						v-if="['certif', 'favoris'].includes(type)"
 						@click="redirect(member.hash)">
-						<BadgeDate :date="date(member)" styleDate="long" />
+						<BadgeDate
+							:date="member.received_certifications.limit"
+							styleDate="long" />
 					</td>
 					<td class="py-1">
 						<button
@@ -106,23 +128,15 @@ export default {
 			type: Array,
 			required: true
 		},
-		displayHead: {
-			type: Boolean,
-			default: true
-		},
-		displayPubkey: {
-			type: Boolean,
-			default: true
-		},
-		displayDate: {
-			type: Boolean,
-			default: true
-		},
 		type: {
 			type: String,
 			default: "default",
 			validator: function (value) {
-				return ["adhesion", "certif", "default"].indexOf(value) !== -1
+				return (
+					["adhesion", "certif", "favoris", "search", "default"].indexOf(
+						value
+					) !== -1
+				)
 			}
 		},
 		defaultSortDir: {
@@ -144,7 +158,7 @@ export default {
 			}
 			this.currentSort = s
 		},
-		date(member) {
+		getDate(member) {
 			if (this.type == "adhesion") return member.limitDate
 			if (this.type == "certif") return member.received_certifications.limit
 			return Math.min(member.limitDate, member.received_certifications.limit)
@@ -173,26 +187,14 @@ export default {
 							b["pubkey"].toLowerCase(),
 							modifier
 						)
-					} else if (this.currentSort == "date_sortie") {
-						if (this.type == "adhesion") {
-							return this.getOrder(a["limitDate"], b["limitDate"], modifier)
-						} else if (this.type == "certif") {
-							return this.getOrder(
-								a["received_certifications"]["limit"],
-								b["received_certifications"]["limit"],
-								modifier
-							)
-						} else {
-							let minA = Math.min(
-								a["limitDate"],
-								a["received_certifications"]["limit"]
-							)
-							let minB = Math.min(
-								b["limitDate"],
-								b["received_certifications"]["limit"]
-							)
-							return this.getOrder(minA, minB, modifier)
-						}
+					} else if (this.currentSort == "date_membership") {
+						return this.getOrder(a["limitDate"], b["limitDate"], modifier)
+					} else if (this.currentSort == "date_certs") {
+						return this.getOrder(
+							a["received_certifications"]["limit"],
+							b["received_certifications"]["limit"],
+							modifier
+						)
 					}
 					return 0
 				})
@@ -201,13 +203,6 @@ export default {
 					let end = this.currentPage * this.pageSize
 					if (index >= start && index < end) return true
 				})
-		},
-		getTitleDate() {
-			if (["adhesion", "certif"].includes(this.type)) {
-				return this.$t("date")
-			} else {
-				return this.$t("membre.datelimpertestatut")
-			}
 		}
 	}
 }

i18n/locales/fr.json

@@ -96,7 +96,7 @@
 			"title": "Membre calculant"
 		},
 		"datelimadhesion": "Date limite d'adhésion",
-		"datelimpertestatut": "Perte du statut de membre",
+		"datelimpertestatut": "Perte d'adhesion",
 		"datelimrevoc": "Date limite avant révocation ",
 		"datemanquecertifs": "Date avant de manquer de certifs",
 		"desc": "Individu dont l'adhésion est en cours et ayant reçu les 5 certifications nécessaires lui permettant de respecter la règle de distance. Ce qui lui permet d'être co-créateur de la monnaie via son Dividende Universel",

pages/favoris.vue

@@ -11,8 +11,9 @@
 				</transition>
 				<transition name="fade">
 					<MemberList
-						defaultSort="date_sortie"
+						defaultSort="date_membership"
 						:members="favoris"
+						type="favoris"
 						v-if="
 							!$apollo.queries.favoris.loading && favoris && favoris.length != 0
 						" />

pages/index.vue

@@ -10,27 +10,15 @@
 				<div class="row text-center">
 					<div class="col-md-6 col-lg-4">
 						<h2 class="h4 text-success">{{ $t("bienvenue") }}</h2>
-						<MemberList
-							:members="newMembers['entrees']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+						<MemberList :members="newMembers['entrees']" />
 					</div>
 					<div class="col-md-6 col-lg-4">
 						<h2 class="h4 text-danger">{{ $t("aurevoir") }}</h2>
-						<MemberList
-							:members="newMembers['sorties']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+						<MemberList :members="newMembers['sorties']" />
 					</div>
 					<div class="col-lg-4">
 						<h2 class="h4 text-info">{{ $t("revoila") }}</h2>
-						<MemberList
-							:members="newMembers['renew']"
-							:displayPubkey="false"
-							:displayHead="false"
-							:displayDate="false" />
+						<MemberList :members="newMembers['renew']" />
 					</div>
 				</div>
 			</div>

pages/membres/index.vue

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

pages/previsions/futures_sorties.vue

@@ -22,7 +22,6 @@
 					<MemberList
 						defaultSort="date_sortie"
 						:members="memEnds"
-						:displayPubkey="false"
 						type="adhesion" />
 				</div>
 				<div class="col-lg-6" v-if="certEnds">
@@ -32,7 +31,6 @@
 					<MemberList
 						defaultSort="date_sortie"
 						:members="certEnds"
-						:displayPubkey="false"
 						type="certif" />
 				</div>
 			</div>