From 41b4e753c299e3a1e1ecb97870e338841fec156d Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 31 Jan 2022 18:46:00 +0100
Subject: [PATCH] factorisation de CertifList dans un nouveau composant
CertifGroup
---
components/certif/Group.vue | 41 +++++++++++++++++
components/certif/List.vue | 90 +++++--------------------------------
pages/membre.vue | 4 +-
3 files changed, 53 insertions(+), 82 deletions(-)
create mode 100644 components/certif/Group.vue
diff --git a/components/certif/Group.vue b/components/certif/Group.vue
new file mode 100644
index 0000000..115deb6
--- /dev/null
+++ b/components/certif/Group.vue
@@ -0,0 +1,41 @@
+<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>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 35941ba..52f89b6 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,54 +1,5 @@
<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)"
- >★ </span
- >{{ certif.uid }}
- </div>
-
- <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)
- }))
}
}
}
diff --git a/pages/membre.vue b/pages/membre.vue
index b721a36..4e05006 100644
--- a/pages/membre.vue
+++ b/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>
--
GitLab