From 30b0653dd2066ddf7bde1233730275bafe35635a Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Fri, 24 Dec 2021 01:32:48 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20l'interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/css/style.scss | 1 +
components/badge/Status.vue | 46 ++++++++++++++++++++++---------------
components/certif/List.vue | 2 +-
components/member/Card.vue | 4 ++--
layouts/default.vue | 2 +-
pages/hash/_hash.vue | 9 ++++++--
pages/membres.vue | 17 ++++----------
plugins/filters.js | 17 --------------
8 files changed, 44 insertions(+), 54 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 4dfd2f2..4d6868a 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -14,6 +14,7 @@ $body-color: var(--text-primary-color);
$table-bg: var(--background-color-primary);
$table-color: var(--text-primary-color);
$table-head-bg: red;
+$table-hover-bg: rgba(0, 0, 255, 0.075);
// Breadcrumb
$breadcrumb-bg: var(--background-color-secondary);
diff --git a/components/badge/Status.vue b/components/badge/Status.vue
index b9fa364..8585e09 100644
--- a/components/badge/Status.vue
+++ b/components/badge/Status.vue
@@ -1,30 +1,38 @@
<template>
<small>
- <span class="badge badge-secondary"
- :class="{
- 'badge-danger' : statut == 'REVOKED',
- 'badge-success' : statut == 'MEMBER',
- 'badge-info' : statut == 'NEWCOMER',
- 'badge-warning' : statut == 'MISSING'
- }">{{ this.statut | formatStatus }}</span>
+ <span class="badge"
+ :class="'badge-'+ this.displayStatus(membre).class">
+ {{ this.displayStatus(membre).str }}
+ </span>
</small>
</template>
<script>
-const statuses = [
- 'NEWCOMER',
- 'MISSING',
- 'MEMBER',
- 'REVOKED'
-]
-
export default {
props: {
- statut: {
- type: String,
- required: true,
- validator: function (value) {
- return statuses.indexOf(value) !== -1
+ membre: {
+ type: Object,
+ required: true
+ }
+ },
+ methods: {
+ displayStatus: function(member){
+ console.log(member.limitDate)
+ switch (member.status) {
+ case 'NEWCOMER':
+ return {str: 'Futur membre',class: 'info'}
+ case 'MISSING':
+ return {str: 'Adhésion perdue',class: 'danger'}
+ case 'MEMBER':
+ if (this.$options.filters.dateStatus(member.limitDate) == 'warning') {
+ return {str: 'Adhésion à renouveler',class: 'warning'}
+ } else {
+ return {str: 'Membre',class: 'success'}
+ }
+ case 'REVOKED':
+ return {str: 'Membre revoqué',class: 'secondary'}
+ default:
+ return 'N/A'
}
}
}
diff --git a/components/certif/List.vue b/components/certif/List.vue
index c2f9e59..ac9c293 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -8,7 +8,7 @@
:key="getNeighbor(certif).uid">
<div>
{{ getNeighbor(certif).uid }}
- <BadgeStatus :statut="getNeighbor(certif).status" />
+ <BadgeStatus :membre="getNeighbor(certif)" />
</div>
<small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
</NuxtLink>
diff --git a/components/member/Card.vue b/components/member/Card.vue
index ab70e66..f38ffb3 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -3,14 +3,14 @@
<div class="card-body">
<h2 class="card-title">
{{ hash.uid }}
- <BadgeStatus :statut="hash.status" />
+ <BadgeStatus :membre="hash" />
</h2>
<div class="card-subtitle mb-2 text-muted">{{ hash.pubkey }}</div>
<table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
<tbody>
<tr v-if="hash.status == 'MEMBER'">
<th scope="row">Référent :</th>
- <td :class="{'list-group-item-success': isReferent, 'list-group-item-danger': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
+ <td :class="{'list-group-item-success': isReferent, 'list-group-item-warning': !isReferent}">{{ isReferent ? 'Oui' : 'Non' }}</td>
</tr>
<tr v-if="hash.status != 'NEWCOMER'">
<th scope="row">Qualité :</th>
diff --git a/layouts/default.vue b/layouts/default.vue
index 85cdfec..26bacf5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
<template>
<div class="app">
<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
- <Nuxt keep-alive />
+ <Nuxt />
</div>
</template>
diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue
index cbbb41b..8f84c30 100644
--- a/pages/hash/_hash.vue
+++ b/pages/hash/_hash.vue
@@ -7,9 +7,14 @@
<MemberCard :hash="idFromHash" />
</div>
</div>
- <div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
+ <div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
<div class="col-12 col-md-6 mb-3">
- <h3>Certifications reçues</h3>
+ <h3>Certifications reçues
+ <span v-if="($options.filters.dateStatus(idFromHash.received_certifications.limit) == 'warning')">âš
+ <span class="sr-only" v-if="idFromHash.status == 'MEMBER'">Bientôt en manque de certifications</span>
+ <span class="sr-only" v-else>En manque de certifications</span>
+ </span>
+ </h3>
<CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
</div>
<div class="col-12 col-md-6">
diff --git a/pages/membres.vue b/pages/membres.vue
index 296e5e5..31dad84 100644
--- a/pages/membres.vue
+++ b/pages/membres.vue
@@ -12,26 +12,18 @@
<div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
<div class="col-8 m-auto">
<div class="table-responsive">
- <table class="table striped">
+ <table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">UID</th>
<th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
- <th scope="col" class="d-none d-sm-table-cell">STATUT</th>
</tr>
</thead>
<tbody>
<tr v-for="member in idSearch.ids" :key="member.uid"
- @click="redirect('/hash/' + member.hash)"
- :class="{
- 'table-danger' : member.status == 'REVOKED',
- 'table-success' : member.status == 'MEMBER',
- 'table-warning' : member.status == 'MISSING',
- 'table-info' : member.status == 'NEWCOMER'
- }">
- <th scope="row">{{ member.uid }}</th>
+ @click="redirect('/hash/' + member.hash)">
+ <th scope="row">{{ member.uid }} <BadgeStatus :membre="member" /></th>
<td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
- <td class="d-none d-sm-table-cell">{{ member.status | formatStatus }}</td>
</tr>
</tbody>
</table>
@@ -79,6 +71,7 @@ export default {
uid
status
hash
+ limitDate
}
}
} `,
@@ -95,7 +88,7 @@ export default {
<style lang="sass" scoped>
// CSS Lié au composant
-.table.striped tbody
+.table.table-striped tbody
color: var(--dark)
tr
opacity: .9
diff --git a/plugins/filters.js b/plugins/filters.js
index c491b1c..6e78a2e 100644
--- a/plugins/filters.js
+++ b/plugins/filters.js
@@ -11,26 +11,9 @@ Vue.filter('formatDate', (val) => {
Vue.filter('dateStatus', (val) => {
const diff = val - dayjs().unix()
switch (true) {
- case diff<2592000:
- return 'danger'
case diff<5184000:
return 'warning'
case diff>=5184000:
return 'success'
}
-})
-
-Vue.filter('formatStatus', (val) => {
- switch (val) {
- case 'NEWCOMER':
- return 'Futur membre'
- case 'MISSING':
- return 'Adhésion perdue'
- case 'MEMBER':
- return 'Membre'
- case 'REVOKED':
- return 'Membre revoqué'
- default:
- return 'N/A'
- }
})
\ No newline at end of file
--
GitLab