diff --git a/components/certif/List.vue b/components/certif/List.vue index 434aa38c6bd095d1c3511411d0b9f8d14a6271fc..07c863de79901491536f996ab9e0cdfe544274ec 100644 --- a/components/certif/List.vue +++ b/components/certif/List.vue @@ -1,8 +1,36 @@ <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 diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue index 1dc59a03621af9534046dff850740e246f988c61..db563a0a31417dcc00565dac1f0efbfb827d8a4d 100644 --- a/pages/membres/_hash.vue +++ b/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>