factorisation de CertifList dans un nouveau composant CertifGroup

components/certif/Group.vue

+<template>
+	<div>
+		<CertifList :certifs="certifsPending" :type="type" />
+		<hr v-if="certifsPending.length > 0 && certifsNotPending.length > 0" />
+		<CertifList
+			:certifs="certifsNotPending"
+			:type="type"
+			class="pb-3"
+			:class="{ 'pt-3': certifsPending.length > 0 }" />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		certifs: Array,
+		type: {
+			type: String,
+			required: true,
+			validator: function (value) {
+				const types = ["received", "sent"]
+				return types.indexOf(value) !== -1
+			}
+		}
+	},
+	computed: {
+		certifsMapped() {
+			return this.certifs.map((certif) => ({
+				...certif,
+				...(this.type === "received" ? certif.from : certif.to)
+			}))
+		},
+		certifsNotPending() {
+			return this.certifsMapped.filter((el) => el.pending == false)
+		},
+		certifsPending() {
+			return this.certifsMapped.filter((el) => el.pending == true)
+		}
+	}
+}
+</script>

components/certif/List.vue

 <template>
-	<div class="table-responsive pb-3">
-		<table
-			class="table table-striped table-hover"
-			v-if="certifsPending.length > 0">
-			<tbody>
-				<tr
-					v-for="certif in certifsPending"
-					:key="certif.uid + certif.expires_on"
-					@click="
-						$router.push(
-							localePath({
-								name: 'membre',
-								query: { hash: certif.hash }
-							})
-						)
-					">
-					<th scope="row" class="py-1">
-						<div>
-							<div class="d-flex">
-								<div class="uid inline-block text-truncate">
-									<span v-if="$favourites.list.includes(certif.uid)"
-										>★&nbsp;</span
-									>{{ certif.uid }}
-								</div>
-								&nbsp;
-								<BadgeDanger
-									:limitDate="certif.received_certifications.limit"
-									:memberStatus="certif.status" />
-							</div>
-							<BadgeStatus :membre="certif" />
-							<BadgeQuality
-								:quality="certif.quality.ratio"
-								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
-							<BadgeDispo
-								:isDispo="certif.minDatePassed"
-								:dateDispo="certif.minDate"
-								:certifs="certif.sent_certifications"
-								v-if="certif.status == 'MEMBER'" />
-						</div>
-					</th>
-					<td class="text-right py-1">
-						<BadgeDate :date="certif.expires_on" styleDate="short" />
-						<small class="d-block">
-							<span class="badge badge-secondary">{{ $t("traitement") }}</span>
-						</small>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-		<hr v-if="certifsPending.length > 0 && certifsTriees.length > 0" />
+	<div class="table-responsive">
 		<table
 			class="table table-striped table-hover"
 			v-if="certifsTriees.length > 0">
@@ -72,7 +23,7 @@
 			<tbody>
 				<tr
 					v-for="certif in certifsTriees"
-					:key="certif.uid + certif.expires_on"
+					:key="certif.uid"
 					@click="
 						$router.push(
 							localePath({
@@ -97,7 +48,7 @@
 							<BadgeStatus :membre="certif" />
 							<BadgeQuality
 								:quality="certif.quality.ratio"
-								v-if="certif.status != 'REVOKED'" />
+								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
 							<BadgeDispo
 								:isDispo="certif.minDatePassed"
 								:dateDispo="certif.minDate"
@@ -107,6 +58,9 @@
 					</th>
 					<td class="text-right py-1">
 						<BadgeDate :date="certif.expires_on" styleDate="short" />
+						<small class="d-block" v-if="certif.pending">
+							<span class="badge badge-secondary">{{ $t("traitement") }}</span>
+						</small>
 					</td>
 				</tr>
 			</tbody>
@@ -114,7 +68,7 @@
 		<BtnPagination
 			:currentPage.sync="currentPage"
 			:pageSize="pageSize"
-			:arrayLength="certifs.length - certifsPending.length" />
+			:arrayLength="certifs.length" />
 	</div>
 </template>
 
@@ -129,15 +83,7 @@ export default {
 		}
 	},
 	props: {
-		certifs: Array,
-		type: {
-			type: String,
-			required: true,
-			validator: function (value) {
-				const types = ["received", "sent"]
-				return types.indexOf(value) !== -1
-			}
-		}
+		certifs: Array
 	},
 	methods: {
 		sort(s) {
@@ -152,40 +98,24 @@ export default {
 			return this.certifs
 				.sort((a, b) => {
 					let modifier = this.currentSortDir === "desc" ? -1 : 1
-					let sens = this.type == "received" ? "from" : "to"
 
 					if (this.currentSort == "expires_on") {
 						if (a["expires_on"] < b["expires_on"]) return -1 * modifier
 						if (a["expires_on"] > b["expires_on"]) return 1 * modifier
 					} else {
-						if (a[sens]["uid"].toLowerCase() < b[sens]["uid"].toLowerCase())
+						if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
 							return -1 * modifier
-						if (a[sens]["uid"].toLowerCase() > b[sens]["uid"].toLowerCase())
+						if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
 							return 1 * modifier
 					}
 
 					return 0
 				})
-				.filter((el) => el.pending == false)
 				.filter((row, index) => {
 					let start = (this.currentPage - 1) * this.pageSize
 					let end = this.currentPage * this.pageSize
 					if (index >= start && index < end) return true
 				})
-				.map((certif) => ({
-					...certif,
-					...(this.type === "received" ? certif.from : certif.to)
-				}))
-		},
-		certifsPending() {
-			return this.certifs
-				.slice()
-				.sort((a, b) => a.expires_on - b.expires_on)
-				.filter((el) => el.pending == true)
-				.map((certif) => ({
-					...certif,
-					...(this.type === "received" ? certif.from : certif.to)
-				}))
 		}
 	}
 }

pages/membre.vue

@@ -36,7 +36,7 @@
 									:limitDate="idFromHash.received_certifications.limit"
 									:memberStatus="idFromHash.status" />
 							</h3>
-							<CertifList
+							<CertifGroup
 								:certifs="idFromHash.received_certifications.certifications"
 								type="received" />
 						</div>
@@ -50,7 +50,7 @@
 								}}</span
 								>)
 							</h3>
-							<CertifList
+							<CertifGroup
 								:certifs="idFromHash.sent_certifications"
 								type="sent" />
 						</div>