Commit 12fa7618 authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-75 feat(front) : spinner sur les chargements

parent 1f46c048
......@@ -22,8 +22,20 @@ export default class ScreenFooter extends mixins(AlertMixin) {
@Inject('frontFormService')
private frontFormService: () => FrontFormService;
public get disabled(): boolean {
return !this.$store.getters.screenValidated;
public get disablePrevious(): boolean {
return this.$store.getters.waitingPrevious || this.$store.getters.waitingNext;
}
public get disableNext(): boolean {
return !this.$store.getters.screenValidated || this.$store.getters.waitingPrevious || this.$store.getters.waitingNext;
}
public get waitingPrevious(): boolean {
return this.$store.getters.waitingPrevious;
}
public get waitingNext(): boolean {
return this.$store.getters.waitingNext;
}
public nextScreen(): void {
......
......@@ -9,11 +9,13 @@
<screen-progress v-if="progress" :current="progress.current" :max="progress.max" type="graph"></screen-progress>
</div>
<div class="form__actions-buttons">
<button v-if="hasPrevious" class="btn btn--primary" type="button" @click="previousScreen">
<button v-if="hasPrevious" :disabled="disablePrevious" class="btn btn--primary" type="button" @click="previousScreen">
<span v-if="waitingPrevious" class="btn--spinner"></span>
<span v-text="$t('formFront.screen.nav.previous')">Previous</span>
</button>
<span class="space"></span>
<button :disabled="disabled" class="btn btn--primary" type="button" @click="nextScreen">
<button :disabled="disableNext" class="btn btn--primary" type="button" @click="nextScreen">
<span v-if="waitingNext" class="btn--spinner"></span>
<span v-text="$t('formFront.screen.nav.next')">Next</span>
</button>
</div>
......
<template>
<div>
<div v-if="!currentScreen" class="wrapper__app-spinner">
<div class="app-spinner"></div>
</div>
<section class="section" v-if="currentScreen">
<screen-header :title="currentScreen.title"></screen-header>
<section class="section--items" v-for="(item, index) in currentScreen.items" :key="index">
......
......@@ -36,6 +36,7 @@ export default class FrontFormService {
this.alertService.showAlert(message, 'danger');
return false;
}
this.store.commit('waitingNext', true);
const referenceForm = this.store.getters.referenceForm;
const referenceScreen = this.store.getters.currentScreen.reference;
const answers = this.store.getters.validatedAnswers;
......@@ -44,6 +45,7 @@ export default class FrontFormService {
axios.post(apiFormsUrl, answers)
.then(res => this.retrieveScreen(res.data, resolve))
.catch(err => {
this.store.dispatch('resetWaiting');
const message = this.i18n.t('formFront.screen.error.message');
this.alertService.showAlert(message, 'danger');
reject(err);
......@@ -52,6 +54,7 @@ export default class FrontFormService {
}
public previousScreen() {
this.store.commit('waitingPrevious', true);
const referenceForm = this.store.getters.referenceForm;
const referenceScreen = this.store.getters.currentScreen.reference;
const apiFormsUrl = `${this.baseApiUrl}/${referenceForm}/${referenceScreen}/previous`;
......@@ -59,6 +62,7 @@ export default class FrontFormService {
axios.get(apiFormsUrl)
.then(res => this.retrieveScreen(res.data, resolve))
.catch(err => {
this.store.dispatch('resetWaiting');
const message = this.i18n.t('formFront.screen.error.message');
this.alertService.showAlert(message, 'danger');
reject(err);
......@@ -68,6 +72,7 @@ export default class FrontFormService {
public retrieveScreen(screen, resolve) {
this.alertService.hideAlert();
this.store.dispatch('resetWaiting');
this.store.commit('resetAnswers');
this.store.dispatch('updateMeta', {titleForm: screen.titleForm, titleScreen: screen.title, descriptionForm: screen.descriptionForm});
this.store.commit('currentScreen', screen);
......
......@@ -9,6 +9,8 @@ export const formStore: Module<any, any> = {
descriptionForm: '',
currentScreen: null,
answers: [],
waitingPrevious: false,
waitingNext: false,
},
getters: {
screenValidated: state => {
......@@ -23,6 +25,12 @@ export const formStore: Module<any, any> = {
validatedAnswers: state => {
return state.answers.filter(a => a.answer.length > 0);
},
waitingPrevious: state => {
return state.waitingPrevious;
},
waitingNext: state => {
return state.waitingNext;
},
},
actions: {
updateMeta({commit}, {titleForm, descriptionForm, titleScreen}) {
......@@ -30,6 +38,10 @@ export const formStore: Module<any, any> = {
commit('titleScreen', titleScreen);
commit('descriptionForm', descriptionForm);
},
resetWaiting({commit}) {
commit('waitingPrevious', false);
commit('waitingNext', false);
}
},
mutations: {
referenceForm(state, referenceForm) {
......@@ -58,5 +70,11 @@ export const formStore: Module<any, any> = {
const index = state.answers.findIndex(a => a.questionReference === questionReference);
state.answers[index].answer = answer;
},
waitingPrevious(state, waitingPrevious) {
state.waitingPrevious = waitingPrevious;
},
waitingNext(state, waitingNext) {
state.waitingNext = waitingNext;
},
},
};
......@@ -370,15 +370,92 @@ input[type='checkbox']:disabled + .form__label {
}
.btn--primary {
border: var(--btn-primary-border);
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
position: relative;
overflow: hidden;
}
.btn--medium {
padding: var(--btn-padding-sm);
}
/* spinner */
@keyframes progress {
0% {
left: 0;
width: 0;
background: var(--primary);
}
33% {
left: 0;
width: 50%;
background: var(--primary);
}
66% {
left: 50%;
width: 50%;
background: var(--primary);
}
100% {
left: 100%;
width: 0;
background: var(--primary);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.btn--spinner {
display: block;
top: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
height: 0.3rem;
background: rgba(255, 255, 255, 0.5);
}
.btn--spinner::before {
content: '';
position: absolute;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
-webkit-animation: progress 2s linear infinite;
animation: progress 2s linear infinite;
}
.wrapper__app-spinner {
position: relative;
display: flex;
justify-content: center;
height: 10rem;
margin: 1rem 1rem 0;
padding-top: 10rem;
background: rgba(255, 255, 255, 0.2);
}
.app-spinner {
width: 10rem;
height: 10rem;
border: .2rem solid transparent;
border-top-color: var(--primary);
border-bottom-color: var(--primary);
border-radius: 50%;
-webkit-animation: rotation 0.8s ease infinite;
animation: rotation 0.8s ease infinite;
}
.space {
display: inline-block;
height: 1em;
......
......@@ -23,9 +23,8 @@
<![endif]-->
<div id="app">
<div class="app-loading">
<div class="lds-pacman">
<div><div></div><div></div><div></div></div>
<div><div></div><div></div><div></div></div>
<div class="wrapper__app-spinner">
<div class="app-spinner"></div>
</div>
</div>
<div id="jhipster-error" style="display:none"></div>
......
Markdown is supported
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