Skip to content
Snippets Groups Projects
Commit 6104bc35 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER
Browse files

loader improvements #2

parent 62cbac68
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/navigation/Loader.vue
+ 7
− 24
View file @ 6104bc35
<template> <template>
<div class="loader overflow-hidden text-center position-absolute" :class="state"> <transition name="fade">
<img src="~@/assets/img/loader.gif"> <div class="loader overflow-hidden text-center position-absolute" v-if="isLoading">
<div class="text-center font-weight-bold my-3">Chargement...</div> <img src="~@/assets/img/loader.gif">
</div> <div class="text-center font-weight-bold my-3">Chargement...</div>
</div>
</transition>
</template> </template>
<script> <script>
export default { export default {
data() { props: {isLoading: Boolean}
return {
state: ''
}
},
props: {isLoading: Boolean},
watch: {
isLoading: {
handler(n,o) {
this.state = "hidden"
}
}
}
} }
</script> </script>
...@@ -32,10 +21,4 @@ export default { ...@@ -32,10 +21,4 @@ export default {
--color: #391855; --color: #391855;
color: var(--color); color: var(--color);
} }
.result, .loader {
transition: opacity .3s linear;
}
.hidden {
opacity: 0;
}
</style> </style>
\ No newline at end of file
layouts/default.vue
+ 6
− 0
View file @ 6104bc35
...@@ -63,4 +63,10 @@ main { ...@@ -63,4 +63,10 @@ main {
padding-top: 5rem; padding-top: 5rem;
position: relative; position: relative;
} }
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style> </style>
\ No newline at end of file
pages/membres/_hash.vue
+ 18
− 16
View file @ 6104bc35
<template> <template>
<main class="content container"> <main class="content container">
<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" /> <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
<div v-if="!$apollo.queries.idFromHash.loading"> <transition name="fade">
<div class="row"> <div v-if="idFromHash">
<div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3"> <div class="row">
<MemberCard :hash="idFromHash" /> <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
<MemberCard :hash="idFromHash" />
</div>
</div> </div>
</div> <div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'"> <div class="col-12 col-md-6 mb-3">
<div class="col-12 col-md-6 mb-3"> <h3>Certifications reçues
<h3>Certifications reçues <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
<BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" /> </h3>
</h3> <CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
<CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" /> </div>
</div> <div class="col-12 col-md-6">
<div class="col-12 col-md-6"> <h3>Certifications envoyées</h3>
<h3>Certifications envoyées</h3> <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
<CertifList :certifs="idFromHash.sent_certifications" type="sent" /> </div>
</div> </div>
</div> </div>
</div> </transition>
</main> </main>
</template> </template>
......
pages/membres/index.vue
+ 6
− 4
View file @ 6104bc35
...@@ -9,11 +9,13 @@ ...@@ -9,11 +9,13 @@
</div> </div>
</div> </div>
<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" /> <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
<div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2"> <transition name="fade">
<div class="col-8 m-auto"> <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
<MemberList :members="idSearch.ids"/> <div class="col-8 m-auto">
<MemberList :members="idSearch.ids"/>
</div>
</div> </div>
</div> </transition>
</main> </main>
</template> </template>
......
pages/previsions/_hash.vue
+ 8
− 6
View file @ 6104bc35
<template> <template>
<main class="content container"> <main class="content container">
<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" /> <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
<div v-if="!$apollo.queries.idFromHash.loading"> <transition name="fade">
<div class="row"> <div v-if="!$apollo.queries.idFromHash.loading">
<div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3"> <div class="row">
<h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ idFromHash.uid }}</span></small></h2> <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">
<MemberCard :hash="idFromHash" /> <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> </div>
</div> </transition>
</main> </main>
</template> </template>
......
pages/previsions/index.vue
+ 5
− 3
View file @ 6104bc35
...@@ -3,9 +3,11 @@ ...@@ -3,9 +3,11 @@
<h2 class="text-center mb-5 font-weight-light">En préparation</h2> <h2 class="text-center mb-5 font-weight-light">En préparation</h2>
<b-alert variant="danger" show>En développement</b-alert> <b-alert variant="danger" show>En développement</b-alert>
<NavigationLoader :isLoading="$apollo.queries.test.loading" /> <NavigationLoader :isLoading="$apollo.queries.test.loading" />
<div v-if="test"> <transition name="fade">
{{ test }} <div v-if="test">
</div> {{ test }}
</div>
</transition>
</main> </main>
</template> </template>
......
pages/previsions/newcomers.vue
+ 63
− 61
View file @ 6104bc35
<template> <template>
<main class="container"> <main class="container">
<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" /> <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
<div v-if="!$apollo.queries.wwResult.loading"> <transition name="fade">
<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 v-if="!$apollo.queries.wwResult.loading">
<div class="alert alert-info" role="alert"> <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>
<ul class="list-unstyled m-0"> <div class="alert alert-info" role="alert">
<li>{{ wwResult.certifs_nb }} certifications internes</li> <ul class="list-unstyled m-0">
<li>{{ wwResult.permutations_nb }} permutations</li> <li>{{ wwResult.certifs_nb }} certifications internes</li>
</ul> <li>{{ wwResult.permutations_nb }} permutations</li>
</div> </ul>
<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>
<div class="col-lg-8 m-auto"> <div class="row">
<div v-if="display=='forecastsByNames'"> <div class="col-12 text-center mb-4">
<h3>Prévisions par membres</h3> <div class="form-check form-check-inline">
<div class="table-responsive"> <input class="form-check-input" type="radio" id="forecastsByNames" value="forecastsByNames" checked v-model="display" @change="save">
<table class="table table-striped table-hover"> <label class="form-check-label" for="forecastsByNames">
<tbody> Tri par membres
<tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid" @click="$router.push({ path: '/previsions/' + forecast.member.hash })"> </label>
<th scope="row"> </div>
{{ forecast.member.uid }} <div class="form-check form-check-inline">
<BadgeStatus :membre="forecast.member" /> <input class="form-check-input" type="radio" id="forecastsByDates" value="forecastsByDates" v-model="display" @change="save">
</th> <label class="form-check-label" for="forecastsByDates">
<td class="p-0"> Tri par dates
<div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date"> </label>
<div>{{ date.date | formatDateHeure }}</div>
<div>{{ date.proba * 100 }} %</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<div v-if="display=='forecastsByDates'"> <div class="col-lg-8 m-auto">
<h3>Prévisions par dates</h3> <div v-if="display=='forecastsByNames'">
<div class="table-responsive"> <h3>Prévisions par membres</h3>
<table class="table table-striped"> <div class="table-responsive">
<tbody> <table class="table table-striped table-hover">
<tr v-for="forecast in wwResult.forecastsByDates" :key="forecast.date"> <tbody>
<th scope="row">{{ forecast.date | formatDateHeure }}</th> <tr v-for="forecast in wwResult.forecastsByNames" :key="forecast.member.uid" @click="$router.push({ path: '/previsions/' + forecast.member.hash })">
<td class="p-0"> <th scope="row">
<div class="list-group rounded-0"> {{ forecast.member.uid }}
<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"> <BadgeStatus :membre="forecast.member" />
<div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div> </th>
<div>{{ member.proba * 100 }} %</div> <td class="p-0">
</nuxt-link> <div class="d-flex justify-content-between p-3" v-for="date in forecast.forecasts" :key="date.date">
</div> <div>{{ date.date | formatDateHeure }}</div>
</td> <div>{{ date.proba * 100 }} %</div>
</tr> </div>
</tbody> </td>
</table> </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> </div>
</div> </div>
</div> </transition>
</main> </main>
</template> </template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment