diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
index 82d80f7085355e2f375568a72063926a26efc521..1d534e09732695cc68be4ac24113e8e21f196d26 100644
--- a/components/navigation/Loader.vue
+++ b/components/navigation/Loader.vue
@@ -1,26 +1,15 @@
<template>
-<div class="loader overflow-hidden text-center position-absolute" :class="state">
- <img src="~@/assets/img/loader.gif">
- <div class="text-center font-weight-bold my-3">Chargement...</div>
-</div>
-
+<transition name="fade">
+ <div class="loader overflow-hidden text-center position-absolute" v-if="isLoading">
+ <img src="~@/assets/img/loader.gif">
+ <div class="text-center font-weight-bold my-3">Chargement...</div>
+ </div>
+</transition>
</template>
<script>
export default {
- data() {
- return {
- state: ''
- }
- },
- props: {isLoading: Boolean},
- watch: {
- isLoading: {
- handler(n,o) {
- this.state = "hidden"
- }
- }
- }
+ props: {isLoading: Boolean}
}
</script>
@@ -32,10 +21,4 @@ export default {
--color: #391855;
color: var(--color);
}
-.result, .loader {
- transition: opacity .3s linear;
-}
-.hidden {
- opacity: 0;
-}
</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 95b9bdb0d0cb8a083d2a905c330df5b3266cb326..382a848148f6314bcd227c67fe9b3a923ee56382 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -63,4 +63,10 @@ main {
padding-top: 5rem;
position: relative;
}
+.fade-enter-active, .fade-leave-active {
+ transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+ opacity: 0;
+}
</style>
\ No newline at end of file
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index c0bfe3f9ddcb0317d51345eb0912859b6c911b2d..b1336be3263a2644829b074206ce9af317691b62 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -1,25 +1,27 @@
<template>
<main class="content container">
<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
- <div v-if="!$apollo.queries.idFromHash.loading">
- <div class="row">
- <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
- <MemberCard :hash="idFromHash" />
+ <transition name="fade">
+ <div v-if="idFromHash">
+ <div class="row">
+ <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
+ <MemberCard :hash="idFromHash" />
+ </div>
</div>
- </div>
- <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
- <div class="col-12 col-md-6 mb-3">
- <h3>Certifications reçues
- <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
- </h3>
- <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
- </div>
- <div class="col-12 col-md-6">
- <h3>Certifications envoyées</h3>
- <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
+ <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
+ <div class="col-12 col-md-6 mb-3">
+ <h3>Certifications reçues
+ <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
+ </h3>
+ <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
+ </div>
+ <div class="col-12 col-md-6">
+ <h3>Certifications envoyées</h3>
+ <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
+ </div>
</div>
</div>
- </div>
+ </transition>
</main>
</template>
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 4632a2195436bf6bdfd243686162e356fad8eedf..f12720d41387d794ee7d63c5729a9dcc81029b3c 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -9,11 +9,13 @@
</div>
</div>
<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
- <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
- <div class="col-8 m-auto">
- <MemberList :members="idSearch.ids"/>
+ <transition name="fade">
+ <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
+ <div class="col-8 m-auto">
+ <MemberList :members="idSearch.ids"/>
+ </div>
</div>
- </div>
+ </transition>
</main>
</template>
diff --git a/pages/previsions/_hash.vue b/pages/previsions/_hash.vue
index 7c0c250280bf08a197066a0f6594c89f0d058ac6..352623476a0b6be05f8b86b098c67002192c4568 100644
--- a/pages/previsions/_hash.vue
+++ b/pages/previsions/_hash.vue
@@ -1,14 +1,16 @@
<template>
<main class="content container">
<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
- <div v-if="!$apollo.queries.idFromHash.loading">
- <div class="row">
- <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
- <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ idFromHash.uid }}</span></small></h2>
- <MemberCard :hash="idFromHash" />
+ <transition name="fade">
+ <div v-if="!$apollo.queries.idFromHash.loading">
+ <div class="row">
+ <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
+ <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ idFromHash.uid }}</span></small></h2>
+ <MemberCard :hash="idFromHash" />
+ </div>
</div>
</div>
- </div>
+ </transition>
</main>
</template>
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index a7e776df6fbb850bda96fbccd6bfbf5e7533889e..a24a77f1cabe81502885220788d1bee5667a252f 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -3,9 +3,11 @@
<h2 class="text-center mb-5 font-weight-light">En préparation</h2>
<b-alert variant="danger" show>En développement</b-alert>
<NavigationLoader :isLoading="$apollo.queries.test.loading" />
- <div v-if="test">
- {{ test }}
- </div>
+ <transition name="fade">
+ <div v-if="test">
+ {{ test }}
+ </div>
+ </transition>
</main>
</template>
diff --git a/pages/previsions/newcomers.vue b/pages/previsions/newcomers.vue
index 49e32716bd19be64a90dda586c512b0d23e9735a..17d568655b1df9977564eb56ed24adf78a01e42a 100644
--- a/pages/previsions/newcomers.vue
+++ b/pages/previsions/newcomers.vue
@@ -1,74 +1,76 @@
<template>
<main class="container">
<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
- <div v-if="!$apollo.queries.wwResult.loading">
- <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ wwResult.dossiers_nb }} dossiers en attente</span></small></h2>
- <div class="alert alert-info" role="alert">
- <ul class="list-unstyled m-0">
- <li>{{ wwResult.certifs_nb }} certifications internes</li>
- <li>{{ wwResult.permutations_nb }} permutations</li>
- </ul>
- </div>
- <div class="row">
- <div class="col-12 text-center mb-4">
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" id="forecastsByNames" value="forecastsByNames" checked v-model="display" @change="save">
- <label class="form-check-label" for="forecastsByNames">
- Tri par membres
- </label>
- </div>
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" id="forecastsByDates" value="forecastsByDates" v-model="display" @change="save">
- <label class="form-check-label" for="forecastsByDates">
- Tri par dates
- </label>
- </div>
+ <transition name="fade">
+ <div v-if="!$apollo.queries.wwResult.loading">
+ <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ wwResult.dossiers_nb }} dossiers en attente</span></small></h2>
+ <div class="alert alert-info" role="alert">
+ <ul class="list-unstyled m-0">
+ <li>{{ wwResult.certifs_nb }} certifications internes</li>
+ <li>{{ wwResult.permutations_nb }} permutations</li>
+ </ul>
</div>
- <div class="col-lg-8 m-auto">
- <div v-if="display=='forecastsByNames'">
- <h3>Prévisions par membres</h3>
- <div class="table-responsive">
- <table class="table table-striped table-hover">
- <tbody>
- <tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid" @click="$router.push({ path: '/previsions/' + forecast.member.hash })">
- <th scope="row">
- {{ forecast.member.uid }}
- <BadgeStatus :membre="forecast.member" />
- </th>
- <td class="p-0">
- <div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
- <div>{{ date.date | formatDateHeure }}</div>
- <div>{{ date.proba * 100 }} %</div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="row">
+ <div class="col-12 text-center mb-4">
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="radio" id="forecastsByNames" value="forecastsByNames" checked v-model="display" @change="save">
+ <label class="form-check-label" for="forecastsByNames">
+ Tri par membres
+ </label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="radio" id="forecastsByDates" value="forecastsByDates" v-model="display" @change="save">
+ <label class="form-check-label" for="forecastsByDates">
+ Tri par dates
+ </label>
</div>
</div>
- <div v-if="display=='forecastsByDates'">
- <h3>Prévisions par dates</h3>
- <div class="table-responsive">
- <table class="table table-striped">
- <tbody>
- <tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date">
- <th scope="row">{{ forecast.date | formatDateHeure }}</th>
- <td class="p-0">
- <div class="list-group rounded-0">
- <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="'/membres/' + member.member.hash" v-for="member in forecast.forecasts" :key="member.member.uid">
- <div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
- <div>{{ member.proba * 100 }} %</div>
- </nuxt-link>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="col-lg-8 m-auto">
+ <div v-if="display=='forecastsByNames'">
+ <h3>Prévisions par membres</h3>
+ <div class="table-responsive">
+ <table class="table table-striped table-hover">
+ <tbody>
+ <tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid" @click="$router.push({ path: '/previsions/' + forecast.member.hash })">
+ <th scope="row">
+ {{ forecast.member.uid }}
+ <BadgeStatus :membre="forecast.member" />
+ </th>
+ <td class="p-0">
+ <div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
+ <div>{{ date.date | formatDateHeure }}</div>
+ <div>{{ date.proba * 100 }} %</div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div v-if="display=='forecastsByDates'">
+ <h3>Prévisions par dates</h3>
+ <div class="table-responsive">
+ <table class="table table-striped">
+ <tbody>
+ <tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date">
+ <th scope="row">{{ forecast.date | formatDateHeure }}</th>
+ <td class="p-0">
+ <div class="list-group rounded-0">
+ <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="'/membres/' + member.member.hash" v-for="member in forecast.forecasts" :key="member.member.uid">
+ <div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
+ <div>{{ member.proba * 100 }} %</div>
+ </nuxt-link>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
</div>
- </div>
+ </transition>
</main>
</template>