From 034306f0321cd85df373a3d21e27cc782b6d2362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Wed, 31 Oct 2018 09:46:18 +0100
Subject: [PATCH] Move api message display to main app component

---
 .../Private/Assets/js/myep/_store.js          | 12 ++++++-
 .../Assets/js/myep/components/Address.vue     | 32 ++++++++-----------
 .../Private/Assets/js/myep/components/App.vue | 18 +++++++++++
 .../Assets/js/myep/components/CrmData.vue     | 31 ++++++++----------
 .../Assets/js/myep/components/Events.vue      | 17 ++++------
 .../Assets/js/myep/components/Login.vue       | 31 ++++++++++--------
 .../Assets/js/myep/components/Teamer.vue      | 25 ++++++---------
 7 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
index c64484bf..c00af1dc 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
@@ -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;
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index c68aed67..3dfc2fa0 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -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');
                     });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
index 03cfdb50..2798ab5e 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
@@ -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>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
index b77d1948..8d4bad91 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
@@ -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');
                     });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
index c919e0a6..59070d48 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
@@ -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');
                     });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index 8b078fcd..df93d158 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -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');
                 });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
index 90fda919..41ae029c 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
@@ -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');
                 });