EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move api message display to main app component

Browse Source
This commit is contained in:
Björn Fromme
2018-10-31 09:46:18 +01:00
parent 30822e477b
commit 034306f032
7 changed files with 90 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+11 -1
View File
@@ -29,7 +29,11 @@ export default new Vuex.Store({
countries: [], countries: [],
abilities: [], abilities: [],
timeFrames: [], timeFrames: [],
jobProfiles: [] jobProfiles: [],
message: {
text: '',
class: ''
}
}, },
mutations: { mutations: {
loginSuccess (state) { loginSuccess (state) {
@@ -42,11 +46,17 @@ export default new Vuex.Store({
state.loggedIn = false; state.loggedIn = false;
state.teamer = false; state.teamer = false;
}, },
setMessage (state, payload) {
state.message.text = payload.message;
state.message.class = payload.class;
},
isTeamer (state) { isTeamer (state) {
state.teamer = true; state.teamer = true;
}, },
loadingBegin (state) { loadingBegin (state) {
state.loading = true; state.loading = true;
state.message.text = '';
state.message.class = '';
}, },
loadingFinish (state) { loadingFinish (state) {
state.loading = false; state.loading = false;
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+14 -18
View File
@@ -1,14 +1,7 @@
<template> <template>
<div class="form-wrapper form--border" id="myep-main"> <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
<h1>Adressdaten</h1> <h1>Adressdaten</h1>
<div v-if="message" class="alert alert-dismissable" :class="messageClass"> <div class="row">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ message }}
</div>
<img :src="$store.state.config.loaderUrl" alt="" v-show="loading">
<div class="row" v-show="!loading">
<form @submit.prevent="saveAddress()"> <form @submit.prevent="saveAddress()">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
@@ -115,8 +108,6 @@
data () { data () {
return { return {
picker: null, picker: null,
message: '',
messageClass: '',
address: {} address: {}
} }
}, },
@@ -141,10 +132,11 @@
.then((data) => { .then((data) => {
this.address = data; this.address = data;
this.picker.setDate(new Date(this.address.dateOfBirth), true); this.picker.setDate(new Date(this.address.dateOfBirth), true);
this.message = '';
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
@@ -152,11 +144,15 @@
saveAddress () { saveAddress () {
this.$store.dispatch('address/save', this.address) this.$store.dispatch('address/save', this.address)
.then(() => { .then(() => {
this.message = 'Die Änderungen wurden gespeichert'; EventBus.$emit('alert', {
this.messageClass = 'alert-success'; message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
});
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+18
View File
@@ -6,6 +6,21 @@
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" v-if="isTeamer"><a>Teamer</a></router-link> <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" v-if="isTeamer"><a>Teamer</a></router-link>
<li role="presentation"><a href="#" @click.prevent="logout()" class="button">Logout</a></li> <li role="presentation"><a href="#" @click.prevent="logout()" class="button">Logout</a></li>
</ul> </ul>
<div class="row" v-if="$store.state.message.text">
<div class="col-xs-12">
<div class="alert alert-dismissable" :class="$store.state.message.class">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ $store.state.message.text }}
</div>
</div>
</div>
<div class="row" v-show="loading">
<div class="col-xs-12">
<img :src="$store.state.config.loaderUrl" alt="">
</div>
</div>
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
@@ -45,6 +60,9 @@
EventBus.$on('forcedLogout', () => { EventBus.$on('forcedLogout', () => {
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
}); });
EventBus.$on('alert', (payload) => {
this.$store.commit('setMessage', payload);
})
} }
} }
</script> </script>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+14 -17
View File
@@ -1,14 +1,7 @@
<template> <template>
<div id="myep-main"> <div id="myep-main" v-if="loaded">
<h1>Mein Profil</h1> <h1>Mein Profil</h1>
<div v-if="message" class="alert alert-dismissible" :class="messageClass"> <div class="row">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ message }}
</div>
<img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
<div class="row" v-if="loaded">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<template v-for="selectionGroup in this.crmData.selectionGroups" <template v-for="selectionGroup in this.crmData.selectionGroups"
v-if="hasVisibleSelections(selectionGroup)"> v-if="hasVisibleSelections(selectionGroup)">
@@ -47,8 +40,6 @@
data () { data () {
return { return {
loaded: false, loaded: false,
message: '',
messageClass: '',
crmData: [], crmData: [],
hiddenSelectionGroups: [ 10 ] hiddenSelectionGroups: [ 10 ]
} }
@@ -62,8 +53,10 @@
.then((data) => { .then((data) => {
this.crmData = data; this.crmData = data;
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
this.loaded = true; this.loaded = true;
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
@@ -72,11 +65,15 @@
saveSelections () { saveSelections () {
this.$store.dispatch('crmdata/save', this.crmData) this.$store.dispatch('crmdata/save', this.crmData)
.then(() => { .then(() => {
this.message = 'Die Änderungen wurden gespeichert'; EventBus.$emit('alert', {
this.messageClass = 'alert-success'; message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
});
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+6 -11
View File
@@ -1,14 +1,7 @@
<template> <template>
<div id="myep-main"> <div id="myep-main" v-if="!loading">
<h1>Reise-Historie</h1> <h1>Reise-Historie</h1>
<div v-if="message" class="alert alert-danger"> <div class="table-responsive">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ message }}
</div>
<img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
<div class="table-responsive" v-if="!loading">
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
<thead> <thead>
<tr> <tr>
@@ -56,7 +49,6 @@
'O': 'Option', 'O': 'Option',
'U': 'Umbuchung', 'U': 'Umbuchung',
}, },
message: '',
events: [] events: []
} }
}, },
@@ -69,7 +61,10 @@
.then((events) => { .then((events) => {
this.events = events; this.events = events;
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+17 -14
View File
@@ -1,9 +1,6 @@
<template> <template>
<div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main"> <div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main">
<h1>Login MyE&amp;P<img :src="$store.state.config.loaderUrl" alt="" v-if="loading"></h1> <h1>Login MyE&amp;P</h1>
<div v-if="message" class="alert" :class="messageClass">
{{ message }}
</div>
<form @submit.prevent="submit()"> <form @submit.prevent="submit()">
<div class="form-group"> <div class="form-group">
<label for="email" class="control-label"> <label for="email" class="control-label">
@@ -38,8 +35,6 @@
data () { data () {
return { return {
mode: 'login', mode: 'login',
messageClass: '',
message: '',
email: '', email: '',
password: '' password: ''
} }
@@ -58,8 +53,10 @@
}, },
login () { login () {
if (!this.email || !this.password) { if (!this.email || !this.password) {
this.message = 'Bitte E-Mail und Passwort angeben'; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Bitte E-Mail und Passwort eingeben',
class: 'alert-danger'
});
return; return;
} }
this.$store.dispatch('login', { this.$store.dispatch('login', {
@@ -68,24 +65,30 @@
}).then(() => { }).then(() => {
this.$router.push({ name: 'address' }); this.$router.push({ name: 'address' });
}).catch(() => { }).catch(() => {
this.message = 'Der Login ist fehlgeschlagen :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Der Login ist fehlgeschlagen :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
resetPassword () { resetPassword () {
if (!this.email) { if (!this.email) {
this.message = 'Bitte E-Mail Adresse angeben'; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Bitte die E-Mail Adresse angeben',
class: 'alert-danger'
});
return; return;
} }
this.$store.dispatch('resetPassword', this.$store.dispatch('resetPassword',
this.email this.email
).then(() => { ).then(() => {
this.email = ''; this.email = '';
this.message = 'Du erhälts in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts'; EventBus.$emit('alert', {
this.messageClass = 'alert-success'; message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
class: 'alert-success'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
+10 -15
View File
@@ -1,14 +1,7 @@
<template> <template>
<div class="form-wrapper form--border" id="myep-main"> <div class="form-wrapper form--border" id="myep-main" v-if="loaded">
<h1>Teamer</h1> <h1>Teamer</h1>
<div v-if="message" class="alert alert-dismissible" :class="messageClass"> <form @submit="saveTeamerData()">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ message }}
</div>
<img :src="$store.state.config.loaderUrl" alt="" v-if="loading">
<form @submit="saveTeamerData()" v-if="loaded">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<h4>Fährst du Ski oder Board?</h4> <h4>Fährst du Ski oder Board?</h4>
@@ -107,8 +100,6 @@
data () { data () {
return { return {
loaded: false, loaded: false,
message: '',
messageClass: '',
sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ], sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ],
status: [ status: [
{ value: 'jr', label: 'Neuteamer' }, { value: 'jr', label: 'Neuteamer' },
@@ -130,11 +121,15 @@
saveTeamerData () { saveTeamerData () {
this.$store.dispatch('teamer/save', this.teamerData) this.$store.dispatch('teamer/save', this.teamerData)
.then(() => { .then(() => {
this.message = 'Die Änderungen wurden gespeichert'; EventBus.$emit('alert', {
this.messageClass = 'alert-success'; message: 'Die Änderungen wurden gespeichert',
class: 'alert-success'
});
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; EventBus.$emit('alert', {
this.messageClass = 'alert-danger'; message: 'Es ist ein Fehler aufgetreten :(',
class: 'alert-danger'
});
}).then(() => { }).then(() => {
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });