encore des améliorations

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';

components/certif/List.vue

 <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
         }
     }
 }

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;

layouts/default.vue

 <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',

pages/hash/_hash.vue

 <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>

pages/soin.vue → pages/membres.vue

 <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>