separating pending certifs

components/badge/CertifStatus.vue

@@ -14,13 +14,13 @@ export default {
         memberStatus : String
     },
     computed: {
-        classWarning: function() {
+        classWarning() {
             return {
                 'text-danger' : this.$options.filters.dateStatus(this.limitDate) == 'danger',
                 'text-warning' : this.$options.filters.dateStatus(this.limitDate) == 'warning'
             }
         },
-        textWarning: function() {
+        textWarning() {
             return (this.$options.filters.dateStatus(this.limitDate) == 'danger') ? this.$i18n.t('statut.manquecertif') : this.$i18n.t('statut.bientotmanquecertif')
         }
     }

components/certif/List.vue

 <template>
     <div class="table-responsive">
-        <table class="table table-striped table-hover">
+        <table class="table table-striped table-hover" v-if="certifsPending.length > 0">
+            <tbody>
+                <tr v-for="certif in certifsPending" :key="getNeighbor(certif).uid + certif.expires_on"
+                    @click="$router.push(localePath({name:'membres-hash', params: {hash: getNeighbor(certif).hash}}))">
+                    <th scope="row" class="py-1">
+                        <div>
+                            {{ getNeighbor(certif).uid }}
+                            <BadgeCertifStatus :limitDate="getNeighbor(certif).received_certifications.limit" :memberStatus="getNeighbor(certif).status" />
+                            <BadgeQuality :quality="getNeighbor(certif).quality.ratio" v-if="getNeighbor(certif).status != 'REVOKED'" />
+                        </div>
+                        <div>
+                            <BadgeStatus :membre="getNeighbor(certif)" />
+                            <BadgeDispo :isDispo="getNeighbor(certif).minDatePassed" :dateDispo="getNeighbor(certif).minDate" v-if="getNeighbor(certif).status == 'MEMBER'" />
+                        </div>
+                    </th>
+                    <td class="text-right py-1">
+                        <small><span class="badge" :class="'badge-'+ $options.filters.dateStatus(certif.expires_on)">{{ $d(new Date(certif.expires_on*1000), 'short') }}</span></small>
+                        <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)" />
+        <table class="table table-striped table-hover" v-if="certifsTriees.length > 0">
             <thead>
                 <th @click="sort('uid')">
                     {{ $t('membres') }}
@@ -16,7 +39,7 @@
                     </div>
                 </th>
                 <th @click="sort('expires_on')">
-                    {{$t('expire')  }}
+                    {{ $t('expire') }}
                     <div class="d-inline-block position-absolute ml-2">
                         <div class="up" :class="{
                             'sorted' : currentSortDir == 'asc' && currentSort == 'expires_on',
@@ -44,7 +67,7 @@
                         </div>
                     </th>
                     <td class="text-right py-1">
-                        <small><span class="badge" :class="'badge-'+ $options.filters.dateStatus(certif.expires_on)">{{ $t('expire') }} {{ $d(new Date(certif.expires_on*1000), 'short') }}</span></small>
+                        <small><span class="badge" :class="'badge-'+ $options.filters.dateStatus(certif.expires_on)">{{ $d(new Date(certif.expires_on*1000), 'long') }}</span></small>
                     </td>
                 </tr>
             </tbody>
@@ -75,7 +98,7 @@ export default {
         getNeighbor(certif) {
             return this.type == "received" ? certif.from : certif.to
         },
-        sort:function(s) {
+        sort(s) {
             if(s === this.currentSort) {
                 this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
             }
@@ -84,25 +107,23 @@ export default {
     },
     computed : {
         certifsTriees() {
-            return this.certifs.sort(
-                (a, b) => {
-                    let modifier = this.currentSortDir === 'desc' ? -1 : 1
+            return this.certifs.slice().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 (this.type == 'received') {
-                        if(a['from']['uid'] < b['from']['uid']) return -1 * modifier
-                        if(a['from']['uid'] > b['from']['uid']) return 1 * modifier
-                    } else if (this.type == 'sent') {
-                        if(a['to']['uid'] < b['to']['uid']) return -1 * modifier
-                        if(a['to']['uid'] > b['to']['uid']) return 1 * modifier
-                    }
-
-                    return 0
+                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()) return -1 * modifier
+                    if(a[sens]['uid'].toLowerCase() > b[sens]['uid'].toLowerCase()) return 1 * modifier
                 }
-            )
 
+                return 0
+            }).filter((el) => {return el.pending == false})
+        },
+        certifsPending() {
+            return this.certifs.slice().sort((a, b) => a.expires_on - b.expires_on).filter((el) => {return el.pending == true})
         }
     }
 }

graphql/queries.js

@@ -193,6 +193,7 @@ export const SEARCH_MEMBER = gql`query SearchMemberWithHash($hash: Hash!) {
               ...attr
             }
             expires_on
+            pending
           }
         }
         sent_certifications {
@@ -201,6 +202,7 @@ export const SEARCH_MEMBER = gql`query SearchMemberWithHash($hash: Hash!) {
             ...attr
           }
           expires_on
+          pending
         }
     }
 }

i18n/locales/en.json

@@ -58,6 +58,7 @@
     "time": {
         "a": "at"
     },
+    "traitement": "Ongoing treatment",
     "tri": {
         "pardate": "Sort by date",
         "parmembres": "Sort by members"

i18n/locales/es.json

@@ -58,6 +58,7 @@
     "time": {
         "a": "a"
     },
+    "traitement": "Tratamiento en curso",
     "tri": {
         "pardate": "Ordenar por fecha",
         "parmembres": "Clasificar por miembros"

i18n/locales/fr.json

@@ -58,6 +58,7 @@
     "time": {
         "a": "à"
     },
+    "traitement": "En cours de traitement",
     "tri": {
         "pardate": "Tri par date",
         "parmembres": "Tri par membres"

pages/membres/_hash.vue

@@ -19,13 +19,13 @@
               <h3 class="h4 text-center" :class="{
                 'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
                 'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
-              }">{{ $t('certifications.recues') }} ({{ idFromHash.received_certifications.certifications.length }})
+              }">{{ $t('certifications.recues') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ ' + ' + nbCertifsPending('received') }}</span>)
                 <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
               </h3>
               <CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
             </div>
             <div class="col-sm-10 col-md-7 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
-              <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{ idFromHash.sent_certifications.length }})</h3>
+              <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ ' + ' + nbCertifsPending('sent') }}</span>)</h3>
               <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
             </div>
           </div>
@@ -60,7 +60,14 @@ export default {
       error: null
     };
   },
-  methods: {},
+  methods: {
+    nbCertifs(sens) {
+      return sens == "received" ? this.idFromHash.received_certifications.certifications.filter((el) => {return el.pending == false}).length : this.idFromHash.sent_certifications.filter((el) => {return el.pending == false}).length
+    },
+    nbCertifsPending(sens) {
+      return sens == "received" ? this.idFromHash.received_certifications.certifications.filter((el) => {return el.pending == true}).length : this.idFromHash.sent_certifications.filter((el) => {return el.pending == true}).length
+    }
+  },
   apollo: {
     idFromHash: {
       query: SEARCH_MEMBER,
@@ -76,7 +83,7 @@ export default {
     }
   },
   computed: {
-    classWarning: function() {
+    classWarning() {
       return {
         'text-danger' : !this.idFromHash.received_certifications.limit,
         'text-warning' : this.$options.filters.dateStatus(this.idFromHash.received_certifications.limit) == 'warning'

pages/parametres.vue

@@ -48,27 +48,9 @@ export default {
       error: null
     }
   },
-  // methods: {
-  //   myFunction() {
-      
-  //   }
-  // },
-  // computed: {
-  //   myComputedValue : function() {
-  //     return this.var * 3
-  //   }
-  // },
   apollo: {
-    // Use {{ myresponse }} in the template. If update is omitted, this name should correspond to the Query Type !
     allParameters : {
       query: PARAMS,
-      // Optional : this is for parametered queries
-      // variables() {return {param1:value1,param2:value2}},
-      // Optional : treat the response before display. If omitted, the query name must correspond to the Query Type !
-      // update (data) {
-        
-      //   return data
-      // },
       error (err) {this.error = err.message}
     }
   },