From 33d20a19991745e6aca6ab217bdb0dcda1f400db Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 20 Dec 2021 06:48:27 +0100
Subject: [PATCH] =?UTF-8?q?encore=20des=20am=C3=A9liorations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/style.scss           |  1 -
 components/certif/List.vue      | 12 +++----
 components/navigation/Bar.vue   |  6 +++-
 layouts/default.vue             |  4 +--
 pages/hash/_hash.vue            | 55 +++++++++++++++++++++------------
 pages/{soin.vue => membres.vue} |  2 +-
 6 files changed, 49 insertions(+), 31 deletions(-)
 rename pages/{soin.vue => membres.vue} (97%)

diff --git a/assets/css/style.scss b/assets/css/style.scss
index 5a6a721..bef49d0 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -22,7 +22,6 @@ $breadcrumb-divider-color: var(--text-primary-color);
 // List-groups
 $list-group-bg: var(--background-color-primary);
 $list-group-action-active-bg: transparent;
-$list-group-hover-bg: transparent;
 $list-group-action-color: var(--text-primary-color);
 
 @import 'font';
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 81a1875..63b4e29 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,10 +1,10 @@
 <template>
-<ul class="list-group">
-    <li class="list-group-item" v-for="certif in certifs">
-        <div>{{ getNeighbor(certif) }}</div>
+<div class="list-group">
+    <NuxtLink :to="'/hash/'+getNeighbor(certif).hash" class="list-group-item list-group-item-action" v-for="certif in certifs" :key="getNeighbor(certif).uid">
+        {{ getNeighbor(certif).uid }}
         <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
-    </li>
-</ul>
+    </NuxtLink>
+</div>
 </template>
 
 <script>
@@ -22,7 +22,7 @@ export default {
     },
     methods : {
         getNeighbor(certif) {
-            return this.type == "recieved" ? certif.from.uid : certif.to.uid
+            return this.type == "recieved" ? certif.from : certif.to
         }
     }
 }
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 70f17e5..91047c7 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -103,7 +103,10 @@ nav.breadcrumb {
 
   h1 {color: var(--text-primary-color);}
 
-  .list-group-item div {
+  .list-group-item {
+    &-action:not(.active):hover {background: transparent;}
+
+    div {
       transition: left .3s ease-in-out;
       left: 0;
 
@@ -117,6 +120,7 @@ nav.breadcrumb {
         left: .5em;
       }
     }
+  }
 
   .open & {
     left: 0;
diff --git a/layouts/default.vue b/layouts/default.vue
index 6ea2fbb..b6f799f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="app">
         <NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
-        <Nuxt />
+        <Nuxt keep-alive />
     </div>
 </template>
 
@@ -16,7 +16,7 @@ export default {
           items : [
               {path: '/appolo',title: 'Appolo'},
               {path: '/chartjs',title: 'ChartJS'},
-              {path: '/soin',title: 'Prendre soin de ses contacts'}
+              {path: '/membres',title: 'Prendre soin de ses contacts'}
           ]},
           {
           title: 'Un menu',
diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue
index 9621541..a563c0f 100644
--- a/pages/hash/_hash.vue
+++ b/pages/hash/_hash.vue
@@ -1,29 +1,26 @@
 <template>
   <main class="content container">
-    <div
-      class="spinner-border text-primary mx-auto d-block mb-3"
-      role="status"
-      v-if="$apollo.queries.idFromHash.loading">
-      <span class="sr-only">Loading...</span>
-    </div>
+    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
         <div class="col-6 mx-auto mt-3">
           <div class="card">
             <div class="card-body">
               <h2 class="card-title">{{ idFromHash.uid }} <small><span class="badge badge-secondary">{{ idFromHash.status }}</span></small></h2>
-              <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div>
-              <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div>
-              <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div>
-              <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div>
-              <div> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div>
-              <div> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div>
-              <div> Nbre de certifs disponibles  : {{ 100-idFromHash.sent_certifications.length }}</div>
+              <div v-if="idFromHash.status != 'REVOKED'">
+                <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div>
+                <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div>
+                <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div>
+                <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div>
+                <div v-if="idFromHash.status != 'NEWCOMER'"> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div>
+                <div v-if="idFromHash.status != 'NEWCOMER'"> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div>
+                <div> Nbre de certifs disponibles  : {{ 100-idFromHash.sent_certifications.length }}</div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="row mt-3">
+      <div class="row mt-3"  v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
         <div class="col-6">
           <h3>Certifications reçues</h3>
           <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
@@ -43,11 +40,25 @@ import gql from "graphql-tag"
 export default {
   data() {
     // Variables locales
-    return {};
+    return {
+      breadcrumb: [
+        {
+          text: 'Accueil',
+          to: '/'
+        },
+        {
+          text: 'Membres',
+          to: '/membres'
+        },
+        {
+          text: '',
+          active: true
+        }
+      ]
+    };
   },
   // Fonctions locales
   methods: {
-
   },
   apollo: {
     idFromHash: {
@@ -102,15 +113,19 @@ export default {
       },
     },
   },
-  mounted() {
-    // Mise à jour du fil d'ariane au chargement
-    $nuxt.$emit("changeRoute", this.breadcrumb);
-  },
   computed: {
     isReferent () {
       const nb_certifs_referent = 5
       return this.idFromHash.received_certifications.certifications.length > nb_certifs_referent && this.idFromHash.sent_certifications.length > nb_certifs_referent
     }
+  },
+  watch: {
+    idFromHash: {
+      handler(n,o) {
+          this.breadcrumb[2].text = this.idFromHash.uid
+          $nuxt.$emit("changeRoute", this.breadcrumb);
+      }
+    }
   }
 };
 </script>
diff --git a/pages/soin.vue b/pages/membres.vue
similarity index 97%
rename from pages/soin.vue
rename to pages/membres.vue
index e8d99b8..520968f 100644
--- a/pages/soin.vue
+++ b/pages/membres.vue
@@ -1,6 +1,6 @@
 <template>
 <main class="content">
-  <h2 class="display-2 text-center mb-5">Prendre soin de ses contacts</h2>
+  <h2 class="display-2 text-center mb-5">Membres</h2>
   <div class="row mb-4">
     <div class="col-6 m-auto text-center">
       <label for="rech" class="form-label">Votre recherche</label>
-- 
GitLab