From 6104bc35bae013cb384506f3f7cd6904cadea75d Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Fri, 31 Dec 2021 04:32:26 +0100
Subject: [PATCH] loader improvements #2
---
components/navigation/Loader.vue | 31 ++------
layouts/default.vue | 6 ++
pages/membres/_hash.vue | 34 +++++----
pages/membres/index.vue | 10 ++-
pages/previsions/_hash.vue | 14 ++--
pages/previsions/index.vue | 8 +-
pages/previsions/newcomers.vue | 124 ++++++++++++++++---------------
7 files changed, 113 insertions(+), 114 deletions(-)
diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
index 82d80f7..1d534e0 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 95b9bdb..382a848 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 c0bfe3f..b1336be 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 4632a21..f12720d 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 7c0c250..3526234 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 a7e776d..a24a77f 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 49e3271..17d5686 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>
--
GitLab