diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3bfa7011c7b1d93ef0c55866799db1e381bf4e01..a2855b36da97931503fc9d34a30c603ee97cad1f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -13,7 +13,7 @@ $body-color: var(--text-primary-color);
// Tables
$table-bg: var(--background-color-primary);
$table-color: var(--text-primary-color);
-$table-head-bg: red;
+$table-head-bg: var(--background-color-secondary);
$table-hover-bg: rgba(0, 0, 255, 0.075);
// Breadcrumb
@@ -43,6 +43,19 @@ $mark-bg: yellow;
@import "font";
@import "bootstrap";
-.table-hover tbody tr {
+.table-hover tbody tr,
+thead.sortable th {
cursor: pointer;
}
+
+.up,
+.down {
+ line-height: 10px;
+ font-size: 1.1rem;
+ transform: scale(1.5, 1);
+ opacity: 0.3;
+}
+
+.sorted {
+ opacity: 1;
+}
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 03abdc2266011756a459b44f9d0c6cdab032434c..9dd5e47adc589b6a863d42bc6ad48fe814983b1c 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -34,11 +34,9 @@
</div>
</th>
<td class="text-right py-1">
- <BadgeDate
- :date="certif.expires_on"
- :styleDate="'short'" />
+ <BadgeDate :date="certif.expires_on" :styleDate="'short'" />
<small class="d-block">
- <span class="badge badge-secondary">{{ $t("traitement")}}</span>
+ <span class="badge badge-secondary">{{ $t("traitement") }}</span>
</small>
</td>
</tr>
@@ -48,8 +46,8 @@
<table
class="table table-striped table-hover"
v-if="certifsTriees.length > 0">
- <thead>
- <th @click="sort('uid')">
+ <thead class="thead-light sortable">
+ <th class="position-relative" @click="sort('uid')">
{{ $t("membres") }}
<div class="d-inline-block position-absolute ml-2">
<div
@@ -70,7 +68,7 @@
</div>
</div>
</th>
- <th @click="sort('expires_on')">
+ <th class="position-relative" @click="sort('expires_on')">
{{ $t("expire") }}
<div class="d-inline-block position-absolute ml-2">
<div
@@ -126,9 +124,7 @@
</div>
</th>
<td class="text-right py-1">
- <BadgeDate
- :date="certif.expires_on"
- :styleDate="'long'" />
+ <BadgeDate :date="certif.expires_on" :styleDate="'long'" />
</td>
</tr>
</tbody>
@@ -183,18 +179,18 @@ export default {
return 0
})
.filter((el) => el.pending == false)
- .map(certif => ({
+ .map((certif) => ({
...certif,
- ...(this.type === 'received' ? certif.from : certif.to)
+ ...(this.type === "received" ? certif.from : certif.to)
}))
},
certifsPending() {
return this.certifs
.sort((a, b) => a.expires_on - b.expires_on)
.filter((el) => el.pending == true)
- .map(certif => ({
+ .map((certif) => ({
...certif,
- ...(this.type === 'received' ? certif.from : certif.to)
+ ...(this.type === "received" ? certif.from : certif.to)
}))
}
}
@@ -202,26 +198,8 @@ export default {
</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: 0.3;
-}
-
-.sorted {
- opacity: 1;
+thead th:last-child {
+ padding-right: 1.5rem;
+ text-align: right;
}
</style>
diff --git a/components/member/List.vue b/components/member/List.vue
index 1ed5ac898a1c48259f0db25cbd4daa693665c91e..2ac99d029d40af7865cfd1a455aa94b54fde269d 100644
--- a/components/member/List.vue
+++ b/components/member/List.vue
@@ -1,9 +1,9 @@
<template>
<div class="table-responsive">
<table class="table table-striped table-hover">
- <thead v-if="displayHead">
+ <thead class="thead-light sortable" v-if="displayHead">
<tr>
- <th scope="col" @click="sort('uid')">
+ <th class="position-relative" scope="col" @click="sort('uid')">
UID
<div class="d-inline-block position-absolute ml-2">
<div
@@ -24,32 +24,45 @@
</div>
</div>
</th>
- <th scope="col" class="d-none d-xl-table-cell" v-if="displayPubkey && !displayOnlyDate">
+ <th
+ scope="col"
+ class="d-none d-xl-table-cell position-relative"
+ v-if="displayPubkey && !displayOnlyDate">
{{ $t("cle.publique.title") }}
</th>
- <th scope="col" class="d-none d-xl-table-cell"
- @click="sort('limit_date')" v-if="displayOnlyDate">
+ <th
+ scope="col"
+ class="d-none d-xl-table-cell position-relative"
+ @click="sort('limit_date')"
+ v-if="displayOnlyDate">
{{ $t("limitDate") }}
<div class="d-inline-block position-absolute ml-2">
<div
class="up"
:class="{
- sorted: currentSortDir == 'desc' && currentSort == 'limit_date',
- invisible: currentSortDir == 'asc' && currentSort == 'limit_date'
+ sorted:
+ currentSortDir == 'desc' && currentSort == 'limit_date',
+ invisible:
+ currentSortDir == 'asc' && currentSort == 'limit_date'
}">
â–²
</div>
<div
class="down"
:class="{
- sorted: currentSortDir == 'asc' && currentSort == 'limit_date',
- invisible: currentSortDir == 'desc' && currentSort == 'limit_date'
+ sorted:
+ currentSortDir == 'asc' && currentSort == 'limit_date',
+ invisible:
+ currentSortDir == 'desc' && currentSort == 'limit_date'
}">
â–¼
</div>
</div>
</th>
- <th scope="col" class="d-none d-sm-table-cell" v-if="displayDate">
+ <th
+ scope="col"
+ class="d-none d-sm-table-cell position-relative"
+ v-if="displayDate">
{{ $t("membre.datelimpertestatut") }}
</th>
</tr>
@@ -67,11 +80,15 @@
"
:memberStatus="member.status"
v-if="!displayOnlyDate" />
- <BadgeStatus :membre="member" v-if="!displayOnlyDate"/>
+ <BadgeStatus :membre="member" v-if="!displayOnlyDate" />
</th>
<td class="d-none d-xl-table-cell" v-if="displayOnlyDate">
<BadgeDate
- :date="adhesion ? member.limitDate : member.received_certifications.limit"
+ :date="
+ adhesion
+ ? member.limitDate
+ : member.received_certifications.limit
+ "
:styleDate="'long'" />
</td>
<td class="d-none d-xl-table-cell" v-if="displayPubkey">
@@ -119,7 +136,7 @@ export default {
adhesion: {
type: Boolean,
default: true
- },
+ }
},
methods: {
redirect(hash) {
@@ -149,54 +166,35 @@ export default {
},
computed: {
membersSorted() {
- return this.members
- .slice()
- .sort((a, b) => {
- let modifier = this.currentSortDir === "desc" ? -1 : 1
+ return this.members.slice().sort((a, b) => {
+ let modifier = this.currentSortDir === "desc" ? -1 : 1
- if (this.currentSort == "limit_date") {
- if(this.adhesion) {
- if (a["limitDate"] < b["limitDate"]) return -1 * modifier
- if (a["limitDate"] > b["limitDate"]) return 1 * modifier
- } else {
- if (a["received_certifications"]["limit"] < b["received_certifications"]["limit"]) return -1 * modifier
- if (a["received_certifications"]["limit"] > b["received_certifications"]["limit"]) return 1 * modifier
- }
+ if (this.currentSort == "limit_date") {
+ if (this.adhesion) {
+ if (a["limitDate"] < b["limitDate"]) return -1 * modifier
+ if (a["limitDate"] > b["limitDate"]) return 1 * modifier
} else {
- if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
+ if (
+ a["received_certifications"]["limit"] <
+ b["received_certifications"]["limit"]
+ )
return -1 * modifier
- if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
+ if (
+ a["received_certifications"]["limit"] >
+ b["received_certifications"]["limit"]
+ )
return 1 * modifier
}
+ } else {
+ if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
+ return -1 * modifier
+ if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
+ return 1 * modifier
+ }
- return 0
- })
+ return 0
+ })
}
}
}
</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: 0.3;
-}
-
-.sorted {
- opacity: 1;
-}
-</style>
diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue
index ef8adfb4fe125b16586007ce0505547999b9b4bc..c6a1a3a41b92650d14662ddcc69ef9f4b77a22dd 100644
--- a/pages/previsions/futures_sorties.vue
+++ b/pages/previsions/futures_sorties.vue
@@ -3,29 +3,38 @@
<h2 class="text-center my-5 font-weight-light">{{ $t("futureexits") }}</h2>
<div class="row mb-4">
<div class="col-6 m-auto text-center">
- <label for="period" class="form-label">{{ $t("previsions.period.title") }}</label>
+ <label for="period" class="form-label">{{
+ $t("previsions.period.title")
+ }}</label>
<input
type="number"
class="form-control"
- :class="{ invalid:periodIsInvalid() }"
+ :class="{ 'is-invalid': periodIsInvalid() }"
id="period"
aria-describedby="periodHelp"
v-model="period"
autocomplete="off"
- min="1" max="30"
+ min="1"
+ max="30"
@keyup="save" />
- <small id="periodHelp" class="form-text text-muted">{{ $t("previsions.period.desc") }}</small>
+ <small id="periodHelp" class="form-text text-muted">{{
+ $t("previsions.period.desc")
+ }}</small>
</div>
</div>
<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
<transition name="fade">
- <div class="alert alert-danger" v-if="error && !$apollo.queries.wwResult.loading">{{ error }}</div>
+ <div
+ class="alert alert-danger"
+ v-if="error && !$apollo.queries.wwResult.loading">
+ {{ error }}
+ </div>
</transition>
<transition name="fade">
<div v-if="wwResult && !$apollo.queries.wwResult.loading">
- <div class="row text-center">
+ <div class="row">
<div class="col-md-6 col-lg-6">
- <h2 class="h4 text-danger">{{ $t("statut.renew") }}</h2>
+ <h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2>
<MemberList
:members="wwResult['membership']"
:displayPubkey="false"
@@ -33,7 +42,9 @@
:displayDate="false" />
</div>
<div class="col-md-6 col-lg-6">
- <h2 class="h4 text-danger">{{ $t("statut.manquecertif") }}</h2>
+ <h2 class="h4 text-danger text-center">
+ {{ $t("statut.manquecertif") }}
+ </h2>
<MemberList
:members="wwResult['outOfCerts']"
:displayPubkey="false"
@@ -50,36 +61,36 @@
<script>
import { NEXT_EXITS } from "@/graphql/queries.js"
-const day = 24*60*60
-const defaultPeriod = 30*day
+const day = 24 * 60 * 60
+const defaultPeriod = 30 * day
export default {
- data() {
+ data() {
return {
breadcrumb: [
{
- text: this.$t('accueil'),
- to: '/'
+ text: this.$t("accueil"),
+ to: "/"
},
{
- text: this.$t('previsions.title'),
- to: '/previsions'
+ text: this.$t("previsions.title"),
+ to: "/previsions"
},
{
- text: this.$t('futureexits'),
+ text: this.$t("futureexits"),
active: true
}
],
error: null,
period: 30,
- display: 'forecastsByNames'
+ display: "forecastsByNames"
}
},
methods: {
save() {
this.error = null
- localStorage.setItem('previsions_sorties', this.display)
- localStorage.setItem('previsions_period', this.getPeriod()/day)
+ localStorage.setItem("previsions_sorties", this.display)
+ localStorage.setItem("previsions_period", this.getPeriod() / day)
},
addValue(arr, val) {
if (
@@ -92,17 +103,17 @@ export default {
return arr
},
getPeriod() {
- if( this.period != "") {
+ if (this.period != "") {
let tempPeriod = parseInt(this.period)
- if(tempPeriod < 1) {
- this.error = this.$t("error.tooSmall", [ tempPeriod, 1, 30 ])
+ if (tempPeriod < 1) {
+ this.error = this.$t("error.tooSmall", [tempPeriod, 1, 30])
return day
}
- if(tempPeriod > 30) {
- this.error = this.$t('error.tooBig', [ tempPeriod, 1, 30 ])
+ if (tempPeriod > 30) {
+ this.error = this.$t("error.tooBig", [tempPeriod, 1, 30])
return 30 * day
}
- return this.period*day
+ return this.period * day
}
return defaultPeriod
},
@@ -111,59 +122,53 @@ export default {
}
},
apollo: {
- wwResult : {
+ wwResult: {
query: NEXT_EXITS,
variables() {
- return { period: this.getPeriod()}
+ return { period: this.getPeriod() }
},
- update (data) {
+ update(data) {
let result = { membership: [], outOfCerts: [] }
for (let i = 0; i < data.memEnds.length; i++) {
let identity = data.memEnds[i]
- if(['danger', 'warning'].includes(this.$options.filters.dateStatus(identity.limitDate))) {
+ if (
+ ["danger", "warning"].includes(
+ this.$options.filters.dateStatus(identity.limitDate)
+ )
+ ) {
this.addValue(result["membership"], identity)
}
- if(['danger', 'warning'].includes(this.$options.filters.dateStatus(identity.received_certifications.limit))) {
+ if (
+ ["danger", "warning"].includes(
+ this.$options.filters.dateStatus(
+ identity.received_certifications.limit
+ )
+ )
+ ) {
this.addValue(result["outOfCerts"], identity)
}
}
return result
},
- error (err) {this.error = err.message}
+ error(err) {
+ this.error = err.message
+ }
}
},
nuxtI18n: {
paths: {
- fr: '/previsions/futures_sorties',
- en: '/forecasts/future_exits',
- es: '/pronosticos/futuras_salidas'
+ fr: "/previsions/futures_sorties",
+ en: "/forecasts/future_exits",
+ es: "/pronosticos/futuras_salidas"
}
},
- mounted () {
- $nuxt.$emit('changeRoute',this.breadcrumb)
+ mounted() {
+ $nuxt.$emit("changeRoute", this.breadcrumb)
if (localStorage.previsions_sorties) {
- this.display = localStorage.getItem('previsions_sorties')
- this.period = localStorage.getItem('previsions_period')
+ this.display = localStorage.getItem("previsions_sorties")
+ this.period = localStorage.getItem("previsions_period")
}
}
}
</script>
-
-<style lang="scss" scoped>
-.list-group-item {
- background: transparent;
- &:hover {
- background: rgba(0, 0, 255, 0.075);
- color: var(--text-primary-color);
- }
-}
-
-.forecast_date {
- min-width: 150px;
-}
-
-.invalid {
- border: 4px solid #ec0404;
-}
-</style>