améliorer la vue d'un membre

assets/css/_bootstrap.scss

@@ -18,10 +18,10 @@
 //  @import "~bootstrap/scss/custom-forms";
  @import "~bootstrap/scss/nav";
  @import "~bootstrap/scss/navbar";
-//  @import "~bootstrap/scss/card";
+ @import "~bootstrap/scss/card";
  @import "~bootstrap/scss/breadcrumb";
 //  @import "~bootstrap/scss/pagination";
-//  @import "~bootstrap/scss/badge";
+ @import "~bootstrap/scss/badge";
 //  @import "~bootstrap/scss/jumbotron";
 //  @import "~bootstrap/scss/alert";
 //  @import "~bootstrap/scss/progress";

components/certif/List.vue

+<template>
+<ul class="list-group">
+    <li class="list-group-item" v-for="certif in certifs">
+        <div>{{ getNeighbor(certif) }}</div>
+        <small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
+    </li>
+</ul>
+</template>
+
+<script>
+export default {
+    props : {
+        certifs : Array,
+        type : {
+            type: String,
+            required: true,
+            validator: function (value) {
+                const types = ['recieved','sent']
+                return types.indexOf(value) !== -1
+            }
+        }
+    },
+    methods : {
+        getNeighbor(certif) {
+            return this.type == "recieved" ? certif.from.uid : certif.to.uid
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

layouts/default.vue

@@ -16,6 +16,7 @@ export default {
           items : [
               {path: '/appolo',title: 'Appolo'},
               {path: '/chartjs',title: 'ChartJS'},
+              {path: '/soin',title: 'Prendre soin de ses contacts'}
           ]},
           {
           title: 'Un menu',

nuxt.config.js

@@ -26,6 +26,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '~plugins/filters.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package-lock.json

@@ -13,6 +13,7 @@
         "bootstrap": "^4.6.0",
         "chart.js": "^3.6.2",
         "core-js": "^3.15.1",
+        "dayjs": "^1.10.7",
         "graphql-tag": "^2.12.6",
         "nuxt": "^2.15.8",
         "nuxt-purgecss": "^1.0.0"
@@ -9590,6 +9591,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -29164,6 +29170,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "bootstrap": "^4.6.0",
     "chart.js": "^3.6.2",
     "core-js": "^3.15.1",
+    "dayjs": "^1.10.7",
     "graphql-tag": "^2.12.6",
     "nuxt": "^2.15.8",
     "nuxt-purgecss": "^1.0.0"

pages/hash/_hash.vue

 <template>
-  <main class="content">
+  <main class="content container">
     <div
       class="spinner-border text-primary mx-auto d-block mb-3"
       role="status"
@@ -7,31 +7,38 @@
       <span class="sr-only">Loading...</span>
     </div>
     <div v-if="!$apollo.queries.idFromHash.loading">
-      <h2 class="display-2 text-center mb-5">{{ idFromHash.uid }}</h2>
       <div class="row">
-        <div class="col-8 m-auto">
-          <div class="table-responsive">
-            <table class="table striped">
-              <thead>
-                <th>Champ</th>
-                <th>Valeur</th>
-              </thead>
-              <tbody>
-                <tr v-for="(value, propertyName) in idFromHash" :key="propertyName">
-                  <td>{{ propertyName }}</td>
-                  <td>{{ value }}</td>
-                </tr>
-              </tbody>
-            </table>
+        <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>
           </div>
         </div>
       </div>
+      <div class="row mt-3">
+        <div class="col-6">
+          <h3>Certifications reçues</h3>
+          <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
+        </div>
+        <div class="col-6">
+          <h3>Certifications envoyées</h3>
+          <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
 <script>
-import gql from "graphql-tag";
+import gql from "graphql-tag"
 
 export default {
   data() {
@@ -39,53 +46,53 @@ export default {
     return {};
   },
   // Fonctions locales
-  methods: {},
+  methods: {
+
+  },
   apollo: {
     idFromHash: {
       query: gql`
         query Search($hash: Hash!) {
           idFromHash(hash: $hash) {
+            ...memberAttributes
             pubkey
-            uid
-            status
-            hash
-            membership_pending
-            membership_pending_block {
-              number
-            }
-            membership_pending_limitDate
-            id_written_block {
-              number
-            }
-            lastApplication {
-              number
-            }
-            limitDate
             isLeaving
             sentry
-            received_certifications {
-              limit
+            minDate
+            minDatePassed
+            membership_pending
+            limitDate
+            quality {
+              ratio
             }
             distance {
               value {
                 ratio
               }
+              dist_ok
             }
-            distanceE {
-              value {
-                ratio
+            received_certifications {
+              limit
+              certifications {
+                from {
+                  ...memberAttributes
                 }
+                expires_on
               }
-            quality {
-              ratio
             }
-            qualityE {
-              ratio
+            sent_certifications {
+              to {
+                ...memberAttributes
+              }
+              expires_on
             }
-            minDate
-            minDatePassed
           }
         }
+        fragment memberAttributes on Identity {
+          uid
+          hash
+          status
+        }
       `,
       variables() {
         return { hash: this.$route.params.hash };
@@ -99,6 +106,12 @@ export default {
     // 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
+    }
+  }
 };
 </script>
 

pages/soin.vue

+<template>
+<main class="content">
+  <h2 class="display-2 text-center mb-5">Prendre soin de ses contacts</h2>
+  <div class="row mb-4">
+    <div class="col-6 m-auto text-center">
+      <label for="rech" class="form-label">Votre recherche</label>
+      <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="param" autocomplete="off">
+      <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
+    </div>
+  </div>
+  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
+  <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">
+          <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">STATUS</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-info' : member.status == 'NEWCOMER',
+                'table-warning' : member.status == 'MISSING',
+            }">
+              <th scope="row">{{ member.uid }}</th>
+              <td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
+              <td class="d-none d-sm-table-cell">{{ member.status }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</main>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  data() {
+    // Variables locales
+    return {
+      // Fil d'ariane
+      breadcrumb: [
+        {
+          text: 'Accueil',
+          to: '/'
+        },
+        {
+          text: 'Prendre soin de ses contacts',
+          active: true
+        }
+      ],
+      // Requête graphQL
+      param: '',
+    }
+  },
+  // Fonctions locales
+  methods: {
+    redirect(path) {
+      this.$router.push({ path: path })
+    }
+  },
+  apollo: {
+    idSearch : {
+      query: gql`
+      query Search($hint: String) {
+        idSearch(with: {hint: $hint}) {
+          ids {
+            pubkey
+            uid
+            status
+            hash
+          }
+        }
+      } `,
+      variables(){return {hint:this.param}},
+      skip() {return this.param.length < 3}
+    } 
+  },
+  mounted () {
+    // Mise à jour du fil d'ariane au chargement
+    $nuxt.$emit('changeRoute',this.breadcrumb)
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+// CSS Lié au composant
+.table.striped tbody
+  color: var(--dark)
+  tr
+    opacity: .9
+    cursor: pointer
+
+  &:nth-child(2n+1)
+    opacity: .7
+
+  &:hover
+    opacity: 1
+</style>
\ No newline at end of file

plugins/filters.js

+import Vue from 'vue'
+import dayjs from 'dayjs'
+import 'dayjs/locale/fr'
+
+dayjs.locale('fr')
+
+Vue.filter('formatDate', (value) => {
+    return dayjs(value*1000).format('D MMMM YYYY')
+})
\ No newline at end of file