Fix missing form fields and alert styles in MyE&P SPA

This commit is contained in:
Björn Fromme
2022-08-17 18:34:10 +02:00
parent 92ea83cd5a
commit 22bb7d686b
11 changed files with 32 additions and 44 deletions
@@ -117,7 +117,7 @@
.catch(error => { .catch(error => {
this.alert({ this.alert({
message: 'Bitte überprüfe deine Eingaben.', message: 'Bitte überprüfe deine Eingaben.',
class: 'alert-danger' success: false,
}); });
const violations = error.response.data.violations; const violations = error.response.data.violations;
if (typeof violations !== 'undefined') { if (typeof violations !== 'undefined') {
@@ -17,14 +17,7 @@
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</a> </a>
</nav> </nav>
<div class="py-2" v-if="alert.message"> <div class="p-4 mb-8 text-white" :class="{'bg-emerald-600': alert.success, 'bg-red-600': !alert.success}" v-if="alert.message" v-html="alert.message"></div>
<div class="alert alert-dismissable" :class="alert.class">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ alert.message }}
</div>
</div>
<div class="relative"> <div class="relative">
<router-view></router-view> <router-view></router-view>
<div class="absolute top-0 left-0 inset-0 bg-overlay-white" v-show="loading"> <div class="absolute top-0 left-0 inset-0 bg-overlay-white" v-show="loading">
@@ -71,4 +64,3 @@
}, },
} }
</script> </script>
@@ -92,11 +92,16 @@
:mutable="mutableFields.services.mutable" :mutable="mutableFields.services.mutable"
v-on:updated="onServiceUpdated($event, index)" v-on:updated="onServiceUpdated($event, index)"
/> />
<participant-sizes-form :services="services.other"
:participant="participant"
:mutable="mutableFields.services.mutable"
v-on:updated="onParticipantDataUpdated($event, index)"/>
<pickup-select <pickup-select
:pickups="services.pickups" :pickups="services.pickups"
:participant="participant" :participant="participant"
:mutable="mutableFields.transportation.mutable" :mutable="mutableFields.transportation.mutable"
v-on:selected="onPickupSelected($event, index)" v-on:selected="onPickupSelected($event, index)"
v-if="services.pickups"
v-show="showPickups" v-show="showPickups"
/> />
</div> </div>
@@ -413,7 +418,7 @@
if (false === this.dataValid) { if (false === this.dataValid) {
this.alert({ this.alert({
message: messages.join('<br>'), message: messages.join('<br>'),
class: 'alert-danger' success: false,
}); });
return; return;
} }
@@ -429,13 +434,13 @@
}).then(response => { }).then(response => {
this.alert({ this.alert({
message: response.data.message, message: response.data.message,
class: 'alert-info' success: true,
}); });
this.dirty = false; this.dirty = false;
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: error.response.data.message, message: error.response.data.message,
class: 'alert-danger' success: false,
}) })
}).finally(() => { }).finally(() => {
this.endLoading() this.endLoading()
@@ -507,7 +512,7 @@
.catch(error => { .catch(error => {
this.alert({ this.alert({
message: error.message, message: error.message,
class: 'alert-danger' success: false,
}); });
}) })
.finally(() => { .finally(() => {
@@ -71,7 +71,7 @@
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}) })
}).finally(() => { }).finally(() => {
this.endLoading() this.endLoading()
@@ -89,12 +89,12 @@
}).then(() => { }).then(() => {
this.alert({ this.alert({
message: 'Die Änderungen wurden gespeichert', message: 'Die Änderungen wurden gespeichert',
class: 'alert-success' success: true,
}); });
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
}).finally(() => { }).finally(() => {
this.endLoading(); this.endLoading();
@@ -103,7 +103,7 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
}).finally(() => { }).finally(() => {
this.endLoading(); this.endLoading();
@@ -83,7 +83,7 @@
if (!this.email || !this.password) { if (!this.email || !this.password) {
this.alert({ this.alert({
message: 'Bitte E-Mail und Passwort eingeben', message: 'Bitte E-Mail und Passwort eingeben',
class: 'alert-danger' success: false,
}); });
return return
} }
@@ -100,7 +100,7 @@
if (!this.email) { if (!this.email) {
this.alert({ this.alert({
message: 'Bitte die E-Mail Adresse angeben', message: 'Bitte die E-Mail Adresse angeben',
class: 'alert-danger' success: false,
}); });
return; return;
} }
@@ -111,18 +111,18 @@
if (response.data.success) { if (response.data.success) {
this.alert({ this.alert({
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.', message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success' success: true,
}) })
} else { } else {
this.alert({ this.alert({
message: 'Diese E-Mail Adresse konnte nicht gefunden werden.', message: 'Diese E-Mail Adresse konnte nicht gefunden werden.',
class: 'alert-danger' success: false,
}) })
} }
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Bitte überprüfe deine Eingaben.', message: 'Bitte überprüfe deine Eingaben.',
class: 'alert-danger' success: false,
}); });
const violations = error.response.data.violations; const violations = error.response.data.violations;
if (typeof violations !== 'undefined') { if (typeof violations !== 'undefined') {
@@ -35,12 +35,12 @@
}).then(() => { }).then(() => {
this.alert({ this.alert({
message: 'Die Änderungen wurden gespeichert', message: 'Die Änderungen wurden gespeichert',
class: 'alert-success' success: true,
}); });
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
}).finally(() => { }).finally(() => {
this.endLoading(); this.endLoading();
@@ -63,7 +63,7 @@
if (response.data.success) { if (response.data.success) {
this.alert({ this.alert({
message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.', message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success' success: true,
}); });
this.userData = { this.userData = {
lastName: '', lastName: '',
@@ -75,7 +75,7 @@
} else { } else {
this.alert({ this.alert({
message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.', message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
class: 'alert-danger' success: false,
}); });
} }
}).catch(error => { }).catch(error => {
@@ -129,12 +129,12 @@
.then(() => { .then(() => {
this.alert({ this.alert({
message: 'Die Änderungen wurden gespeichert', message: 'Die Änderungen wurden gespeichert',
class: 'alert-success' success: true,
}); });
}).catch(error => { }).catch(error => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
}).finally(() => { }).finally(() => {
this.endLoading(); this.endLoading();
@@ -63,12 +63,3 @@
} }
} }
</script> </script>
<style scoped>
.dropdown {
margin: 0 2px 2px 0;
}
.dropdown-menu {
padding: 5px;
}
</style>
@@ -35,7 +35,7 @@ export default new Vuex.Store({
userData: defaultUserData, userData: defaultUserData,
alert: { alert: {
message: '', message: '',
class: '' success: true,
} }
}, },
mutations: { mutations: {
@@ -61,7 +61,7 @@ export default new Vuex.Store({
beginLoading(state, statusMessage) { beginLoading(state, statusMessage) {
state.loading = true state.loading = true
state.statusMessage = statusMessage state.statusMessage = statusMessage
state.alert = {message: '', class: ''} state.alert = {message: '', success: true}
}, },
endLoading(state) { endLoading(state) {
state.loading = false state.loading = false
@@ -102,7 +102,7 @@ export default new Vuex.Store({
commit('logout'); commit('logout');
commit('alert', { commit('alert', {
message: 'Der Login ist fehlgeschlagen :(', message: 'Der Login ist fehlgeschlagen :(',
class: 'alert-danger' success: false,
}); });
throw error; throw error;
}).finally(() => { }).finally(() => {
@@ -160,7 +160,7 @@ export default new Vuex.Store({
}).catch(() => { }).catch(() => {
commit('alert', { commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
}).finally(() => { }).finally(() => {
commit('endLoading'); commit('endLoading');
@@ -176,14 +176,14 @@ export default new Vuex.Store({
}).then(() => { }).then(() => {
commit('alert', { commit('alert', {
message: 'Die Änderungen wurden gespeichert', message: 'Die Änderungen wurden gespeichert',
class: 'alert-success' success: true,
}); });
}) })
.catch(error => { .catch(error => {
if (error.config.status >= 500) { if (error.config.status >= 500) {
commit('alert', { commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger' success: false,
}); });
} else { } else {
throw error; throw error;