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>
<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
layouts/default.vue
+ 6
− 0
View file @ 6104bc35
......@@ -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
pages/membres/_hash.vue
+ 18
− 16
View file @ 6104bc35
<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>
......
pages/membres/index.vue
+ 6
− 4
View file @ 6104bc35
......@@ -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>
......
pages/previsions/_hash.vue
+ 8
− 6
View file @ 6104bc35
<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>
......
pages/previsions/index.vue
+ 5
− 3
View file @ 6104bc35
......@@ -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>
......
pages/previsions/newcomers.vue
+ 63
− 61
View file @ 6104bc35
<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>
......
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