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