pouvoir trier les certifications sur la page d'un membre

components/certif/List.vue

 <template>
     <div class="table-responsive">
         <table class="table table-striped table-hover">
+            <thead>
+                <th @click="sort('uid')">
+                    {{ $t('membres') }}
+                    <div class="d-inline-block position-absolute ml-2">
+                        <div class="up" :class="{
+                            'sorted' : currentSortDir == 'asc' && currentSort == 'uid',
+                            'invisible' : currentSortDir == 'desc' && currentSort == 'uid'
+                        }">▲</div>
+                        <div class="down" :class="{
+                            'sorted' : currentSortDir == 'desc' && currentSort == 'uid',
+                            'invisible' : currentSortDir == 'asc' && currentSort == 'uid'
+                        }">▼</div>
+                    </div>
+                </th>
+                <th @click="sort('expires_on')">
+                    {{$t('expire')  }}
+                    <div class="d-inline-block position-absolute ml-2">
+                        <div class="up" :class="{
+                            'sorted' : currentSortDir == 'asc' && currentSort == 'expires_on',
+                            'invisible' : currentSortDir == 'desc' && currentSort == 'expires_on'
+                        }">▲</div>
+                        <div class="down" :class="{
+                            'sorted' : currentSortDir == 'desc' && currentSort == 'expires_on',
+                            'invisible' : currentSortDir == 'asc' && currentSort == 'expires_on'
+                        }">▼</div>
+                    </div>
+                </th>
+            </thead>
             <tbody>
-                <tr v-for="certif in certifsTriees" :key="getNeighbor(certif).uid"
+                <tr v-for="certif in certifsTriees" :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>
@@ -26,6 +54,12 @@
 
 <script>
 export default {
+    data() {
+        return {
+            currentSort:'expires_on',
+            currentSortDir:'asc'
+        }
+    },
     props : {
         certifs : Array,
         type : {
@@ -40,15 +74,60 @@ export default {
     methods : {
         getNeighbor(certif) {
             return this.type == "received" ? certif.from : certif.to
+        },
+        sort:function(s) {
+            if(s === this.currentSort) {
+                this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
+            }
+            this.currentSort = s;
         }
     },
     computed : {
         certifsTriees() {
             return this.certifs.sort(
-                (a, b) => a.expires_on - b.expires_on
+                (a, b) => {
+                    let modifier = this.currentSortDir === 'desc' ? -1 : 1
+
+                    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
+                }
             )
 
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+thead th {
+    position: relative;
+    cursor:pointer;
+    background: var(--background-color-secondary);
+
+    &:last-child {
+        padding-right: 1.5rem;
+        text-align: right;
+    }
+}
+
+.up, .down {
+    line-height: 10px;
+    font-size: 1.1rem;
+    transform: scale(1.5,1);
+    opacity: .3;
+}
+
+.sorted {
+    opacity: 1;
+}
+</style>
\ No newline at end of file

pages/membres/_hash.vue

@@ -8,7 +8,7 @@
       <div v-if="idFromHash">
         <div class="container-md">
           <div class="row">
-            <div class="col-lg-9 col-xl-8 mx-auto mt-3">
+            <div class="col-lg-9 col-xl-8 mx-auto my-3">
               <MemberCard :hash="idFromHash" />
             </div>
           </div>