diff --git a/assets/css/style.scss b/assets/css/style.scss
index 896d150eba67617f538ec4ca398062bc36aa9059..63504c525028e63c3de6ba78f949260811b76aaa 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -53,6 +53,8 @@ $info: #0a8299;
}
.table {
+ table-layout: fixed;
+
&.sortable thead {
tr {
border-left: 1px solid var(--text-primary-color);
@@ -71,6 +73,10 @@ $info: #0a8299;
&-hover tbody tr {
cursor: pointer;
}
+
+ .td-date {
+ width: 160px;
+ }
}
.list-group-item {
@@ -97,20 +103,6 @@ $info: #0a8299;
}
}
-.uid {
- @extend .text-truncate;
- display: inline-block;
- max-width: 200px;
-
- @media (min-width: 576px) {
- max-width: 255px;
- }
-
- @media (min-width: 992px) {
- max-width: 205px;
- }
-}
-
.icon {
width: 1.15rem;
}
diff --git a/components/badge/Danger.vue b/components/badge/Danger.vue
index 13bc0238e6a68877bd7e1109275a42b66fa55b62..be8ee94bc2a9ff520003b351c12480e9c6f5288a 100644
--- a/components/badge/Danger.vue
+++ b/components/badge/Danger.vue
@@ -1,6 +1,5 @@
<template>
<span
- class="danger font-weight-normal"
:class="classWarning"
:title="title"
v-if="
diff --git a/components/btn/Search.vue b/components/btn/Search.vue
index 18c94c82e7d10136d3e91395214e81eb5f5a4569..9ce1721a08b1d3d5982820f92f7c4d98edc1f9c7 100644
--- a/components/btn/Search.vue
+++ b/components/btn/Search.vue
@@ -12,6 +12,7 @@
:value="value"
autocomplete="off"
@input="$emit('input', $event.target.value)"
+ @keyup="$emit('keyup', $event.keyCode)"
:placeholder="$t('recherche.title')"
:aria-label="$t('recherche.title')"
aria-describedby="rechHelp" />
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
index 54539116d99d9767f12dba88011c20cd0b03a82c..2dde70c3c844e78288b085cfe1700870ae2199e3 100644
--- a/components/btn/Sort.vue
+++ b/components/btn/Sort.vue
@@ -1,11 +1,11 @@
<template>
<div class="btn-sort px-2" tabindex="0">
- {{ title }}
+ <span>{{ title }}</span>
<outline-sort-ascending-icon
- class="ml-2 icon"
+ class="ml-2 icon flex-shrink-0"
v-if="currentSortDir == 'desc' && currentSort == fieldName" />
<outline-sort-descending-icon
- class="ml-2 icon"
+ class="ml-2 icon flex-shrink-0"
v-if="currentSortDir == 'asc' && currentSort == fieldName" />
</div>
</template>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index d92673f9fdfa42bafac0ce59a8ea76c1df1cac9e..4542a089bdd28d9ef322532e4852befad7b486d0 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,11 +1,6 @@
<template>
<div class="table-responsive" v-if="certifs.length > 0">
- <input
- type="text"
- v-if="certifs.length > 5"
- v-model="search"
- class="form-control w-75 mx-auto my-2"
- :placeholder="$t('recherche.title')" />
+ <BtnSearch v-model="search" class="col" v-if="certifs.length > 5" />
<table class="table table-striped table-hover sortable">
<thead class="thead-light">
<tr>
@@ -16,7 +11,7 @@
:currentSort="currentSort"
:currentSortDir="currentSortDir" />
</th>
- <th class="p-0" @click="sort('expires_on')">
+ <th class="p-0 td-date" @click="sort('expires_on')">
<BtnSort
class="justify-content-end"
:title="$t('expire')"
@@ -39,30 +34,25 @@
)
">
<th scope="row" class="py-1">
- <div>
- <div class="d-flex">
- <div class="uid inline-block">
- <span v-if="$favourites.list.includes(certif.uid)"
- >★ </span
- >{{ certif.uid }}
- </div>
-
- <BadgeDanger
- :limitDate="certif.received_certifications.limit"
- :memberStatus="certif.status" />
- </div>
- <BadgeStatus :membre="certif" />
- <BadgeQuality
- :quality="certif.quality.ratio"
- v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
- <BadgeDispo
- :isDispo="certif.minDatePassed"
- :dateDispo="certif.minDate"
- :certifs="certif.sent_certifications"
- v-if="certif.status == 'MEMBER'" />
+ <div class="d-flex">
+ <span v-if="$favourites.list.includes(certif.uid)">★ </span>
+ <div class="text-truncate">{{ certif.uid }}</div>
+
+ <BadgeDanger
+ :limitDate="certif.received_certifications.limit"
+ :memberStatus="certif.status" />
</div>
+ <BadgeStatus :membre="certif" />
+ <BadgeQuality
+ :quality="certif.quality.ratio"
+ v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
+ <BadgeDispo
+ :isDispo="certif.minDatePassed"
+ :dateDispo="certif.minDate"
+ :certifs="certif.sent_certifications"
+ v-if="certif.status == 'MEMBER'" />
</th>
- <td class="text-right py-1">
+ <td class="text-right py-1 td-date">
<BadgeDate :date="certif.expires_on" styleDate="short" />
<small class="d-block" v-if="certif.pending">
<span class="badge badge-secondary">{{ $t("traitement") }}</span>
diff --git a/components/member/List.vue b/components/member/List.vue
index b91ac86baf3ecaae0c1852351566e6e776f2a3b8..f56d63995c0f3d0417da206f81fd65eb87a387eb 100644
--- a/components/member/List.vue
+++ b/components/member/List.vue
@@ -28,7 +28,7 @@
</th>
<th
scope="col"
- class="d-none d-sm-table-cell p-0"
+ class="td-date d-none d-sm-table-cell p-0"
@click="sort('date_membership')"
v-if="['adhesion', 'favoris', 'search'].includes(type)">
<BtnSort
@@ -43,7 +43,7 @@
</th>
<th
scope="col"
- class="d-none p-0"
+ class="td-date d-none p-0"
:class="{
'd-sm-table-cell': type == 'certif',
'd-md-table-cell': type != 'certif'
@@ -60,31 +60,27 @@
:currentSort="currentSort"
:currentSortDir="currentSortDir" />
</th>
- <th v-if="type == 'favoris'"></th>
+ <th v-if="type == 'favoris'" style="width: 60px"></th>
</tr>
</thead>
<tbody>
<tr v-for="member in membersSorted" :key="member.uid">
<th scope="row" @click="redirect(member.hash)">
<div class="d-flex justify-content-center">
- <div class="uid inline-block">
- <span v-if="$favourites.list.includes(member.uid)">★ </span
- >{{ member.uid }}
- </div>
+ <span v-if="$favourites.list.includes(member.uid)">★ </span>
+ <div class="text-truncate">{{ member.uid }}</div>
<BadgeDanger
- :limitDate="
- Math.min(
- Math.max(member.received_certifications.limit, 1),
- member.limitDate
- )
- "
+ :limitDate="member.received_certifications.limit"
:memberStatus="member.status" />
</div>
<div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none">
- <BadgeDate :date="getDate(member)" styleDate="long" />
+ <BadgeDate :date="getDate(member)" styleDate="short" />
</div>
<BadgeStatus :membre="member" />
+ <BadgeQuality
+ :quality="member.quality.ratio"
+ v-if="!['REVOKED', 'NEWCOMER'].includes(member.status)" />
<BadgeDispo
:isDispo="member.minDatePassed"
:dateDispo="member.minDate"
@@ -98,13 +94,13 @@
{{ member.pubkey.substring(0, 10) }}
</td>
<td
- class="d-none d-sm-table-cell"
+ class="td-date d-none d-sm-table-cell"
v-if="['adhesion', 'favoris', 'search'].includes(type)"
@click="redirect(member.hash)">
- <BadgeDate :date="member.limitDate" styleDate="long" />
+ <BadgeDate :date="member.limitDate" styleDate="short" />
</td>
<td
- class="d-none"
+ class="td-date d-none"
:class="{
'd-sm-table-cell': type == 'certif',
'd-md-table-cell': type != 'certif'
@@ -113,9 +109,9 @@
@click="redirect(member.hash)">
<BadgeDate
:date="member.received_certifications.limit"
- styleDate="long" />
+ styleDate="short" />
</td>
- <td class="py-1" v-if="type == 'favoris'">
+ <td class="py-1" v-if="type == 'favoris'" style="width: 60px">
<button
class="btn btn-danger"
v-if="$favourites.list.includes(member.uid)"
diff --git a/graphql/queries.js b/graphql/queries.js
index 00715cba624268e6c97d32b9c5e4b5fd41668334..bf90f745eb4123cf0768a24b7fae5e09d171f730 100644
--- a/graphql/queries.js
+++ b/graphql/queries.js
@@ -32,6 +32,10 @@ export const LAST_EVENTS = gql`
minDatePassed
minDate
limitDate
+ quality {
+ __typename
+ ratio
+ }
history {
__typename
in
@@ -103,6 +107,10 @@ export const SEARCH_MEMBERS = gql`
minDatePassed
hash
limitDate
+ quality {
+ __typename
+ ratio
+ }
received_certifications {
__typename
limit
@@ -224,6 +232,10 @@ export const FAVORIS = gql`
limitDate
minDatePassed
minDate
+ quality {
+ __typename
+ ratio
+ }
received_certifications {
__typename
limit
@@ -247,6 +259,10 @@ export const NEXT_EXITS = gql`
minDatePassed
minDate
limitDate
+ quality {
+ __typename
+ ratio
+ }
received_certifications {
__typename
limit
@@ -281,6 +297,10 @@ export const NEXT_LOOSE_CERTS = gql`
minDatePassed
minDate
limitDate
+ quality {
+ __typename
+ ratio
+ }
received_certifications {
__typename
limit
diff --git a/pages/membre.vue b/pages/membre.vue
index 4e050069499dc1a0b3829bd4c64ebcad6bb67b1a..a3cdb42692a104aaf7785179e3b2f29e55bafac9 100644
--- a/pages/membre.vue
+++ b/pages/membre.vue
@@ -17,7 +17,7 @@
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
<div class="col-sm-10 col-md-8 col-lg-5 mb-3 mx-auto">
<h3
- class="h4 text-center"
+ class="h5 text-center"
:class="{
'text-success':
['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
@@ -43,7 +43,7 @@
<div
class="col-sm-10 col-md-8 col-lg-5 mx-auto"
v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)">
- <h3 class="h4 text-center">
+ <h3 class="h5 text-center">
{{ $t("certification.envoyees") }} ({{ nbCertifsSent
}}<span v-if="nbCertifsPendingSent != 0">{{
" + " + nbCertifsPendingSent
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index decbbb3aef466ba56346bb340a577c706e0ae108..3fe9e63313309336701efab2540d31dd3a4df466 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -3,7 +3,7 @@
<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
<div class="row mb-4">
<div class="col-sm-8 col-md-6 col-lg-5 m-auto">
- <BtnSearch v-model="param" :help="$t('recherche.desc')" />
+ <BtnSearch v-model="param" :help="$t('recherche.desc')" @keyup="save" />
</div>
</div>
<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />