Move api related code to store

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js

@@ -8,21 +8,24 @@ export default new Vuex.Store({
     state: {
         config: {},
         loading: false,
-        isLoggedIn: !!sessionStorage.getItem('token'),
+        loggedIn: !!sessionStorage.getItem('token'),
         countries: []
     },
     mutations: {
         loginSuccess (state) {
-            state.isLoggedIn = true;
+            state.loggedIn = true;
         },
         loginFailure (state) {
-            state.isLoggedIn = false;
+            state.loggedIn = false;
         },
         logout (state) {
-            state.isLoggedIn = false;
+            state.loggedIn = false;
         },
-        loading (state, loading) {
-            state.loading = loading;
+        loadingBegin (state) {
+            state.loading = true;
+        },
+        loadingFinish (state) {
+            state.loading = false;
         },
         setCountries (state, countries) {
             state.countries = countries;
@@ -33,7 +36,7 @@ export default new Vuex.Store({
     },
     actions: {
         login({ commit }, credentials) {
-            commit('loading', true);
+            commit('loadingBegin');
             const formData = new FormData();
             formData.append('_username', credentials.email);
             formData.append('_password', credentials.password);
@@ -44,10 +47,10 @@ export default new Vuex.Store({
             }).then((response) => {
                 sessionStorage.setItem('token', response.data.token);
                 commit('loginSuccess');
-                commit('loading', false);
+                commit('loadingFinish');
             }).catch((error) => {
                 commit('loginFailure');
-                commit('loading', false);
+                commit('loadingFinish');
                 throw error;
             });
         },
@@ -68,6 +71,84 @@ export default new Vuex.Store({
             }).then((response) => {
                 commit('setCountries', response.data);
             })
+        },
+        loadAddress ({ commit }) {
+            commit('loadingBegin');
+            return axios({
+                url: '/api/addresses',
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                }
+            }).then((response) => {
+                commit('loadingFinish');
+                return response.data[0];
+            }).catch((error) => {
+                commit('loadingFinish');
+                throw error;
+            });
+        },
+        saveAddress ({ commit }, data) {
+            commit('loadingBegin');
+            return axios({
+                url: '/api/addresses/' + data.id,
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                },
+                method: 'PUT',
+                data: data
+            }).then(() => {
+                commit('loadingFinish');
+            })
+            .catch((error) => {
+                commit('loadingFinish');
+                throw error;
+            });
+        },
+        loadEvents ({ commit }) {
+            commit('loadingBegin');
+            return axios({
+                url: '/api/events',
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                }
+                }).then((response) => {
+                    commit('loadingFinish');
+                    return response.data;
+                }).catch((error) => {
+                    commit('loadingFinish');
+                    throw error;
+                });
+        },
+        loadCrmData ({ commit }) {
+            commit('loadingBegin');
+            return axios({
+                url: '/api/crm-selections',
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                }
+            }).then((response) => {
+                commit('loadingFinish');
+                return response.data[0];
+            }).catch((error) => {
+                commit('loadingFinish');
+                throw error;
+            });
+        },
+        saveCrmData ({ commit }, data) {
+            commit('loadingBegin');
+            return axios({
+                url: '/api/crm-selections/' + this.crmData.id,
+                headers: {
+                    'x-auth-token': sessionStorage.getItem('token')
+                },
+                method: 'PUT',
+                data: data
+            }).then(() => {
+                commit('loadingFinish');
+            }).catch((error) => {
+                commit('loadingFinish');
+                throw error;
+            });
         }
     },
     getters: {
@@ -75,7 +156,7 @@ export default new Vuex.Store({
             return state.loading;
         },
         isLoggedIn: state => {
-            return state.isLoggedIn;
+            return state.loggedIn;
         },
         authToken () {
             return sessionStorage.getItem('token')

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue

@@ -2,7 +2,9 @@
     <div class="form-wrapper form--border" id="myep-main">
 	    <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>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
             {{ message }}
         </div>
         <img :src="loaderUrl" alt="" v-show="loading">
@@ -86,7 +88,6 @@
 <script>
     import Vue from 'vue'
 	import $ from 'jquery'
-    import axios from 'axios'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
     import EventBus from '../../_bus'
@@ -116,43 +117,29 @@
         },
         methods: {
             fetchAddress () {
-                this.$store.commit('loading', true);
-                axios({
-                    url: '/api/addresses',
-                    headers: {
-                        'x-auth-token': this.$store.getters.authToken
-                    }
-                }).then((response) => {
-                    this.address = response.data[0];
-                    this.picker.setDate(new Date(this.address.dateOfBirth), true);
-                    this.message = '';
-                }).catch(() => {
-                    this.message = 'Es ist ein Fehler aufgetreten :(';
-                    this.messageClass = 'alert-danger';
-                }).then(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                    this.$store.commit('loading', false);
-                });
+                this.$store.dispatch('loadAddress')
+                    .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';
+                    }).then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
             },
             saveAddress () {
-                this.loading = true;
-                axios({
-                    url: '/api/addresses/' + this.address.id,
-                    headers: {
-                        'x-auth-token': this.$store.getters.authToken
-                    },
-                    method: 'PUT',
-                    data: this.address
-                }).then(() => {
-                    this.message = 'Die Änderungen wurden gespeichert';
-                    this.messageClass = 'alert-success';
-                }).catch(() => {
-                    this.message = 'Es ist ein Fehler aufgetreten :(';
-                    this.messageClass = 'alert-danger';
-                }).then(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                    this.loading = false;
-                });
+                this.$store.dispatch('saveAddress', this.address)
+                    .then(() => {
+                        this.message = 'Die Änderungen wurden gespeichert';
+                        this.messageClass = 'alert-success';
+                    }).catch(() => {
+                        this.message = 'Es ist ein Fehler aufgetreten :(';
+                        this.messageClass = 'alert-danger';
+                    }).then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
             }
         },
         computed: {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue

@@ -2,7 +2,9 @@
     <div id="myep-main">
         <h1>CRM Merkmale</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>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
             {{ message }}
         </div>
         <img :src="loaderUrl" alt="" v-if="loading">
@@ -37,7 +39,6 @@
 </template>
 
 <script>
-    import axios from 'axios'
     import EventBus from '../../_bus'
 
     export default {
@@ -54,42 +55,27 @@
         },
         methods: {
             fetchSelections () {
-                this.$store.commit('loading', true);
-                axios({
-                    url: '/api/crm-selections',
-                    headers: {
-                        'x-auth-token': this.$store.getters.authToken
-                    }
-                }).then((response) => {
-                    this.crmData = response.data[0];
-                    this.loaded = true;
-                }).catch(() => {
-                    this.message = 'Es ist ein Fehler aufgetreten :(';
-                    this.messageClass = 'alert-danger';
-                }).then(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                    this.$store.commit('loading', false);
-                });
+                this.$store.dispatch('loadCrmData')
+                    .then((data) => {
+                        this.crmData = data;
+                    }).catch(() => {
+                        this.message = 'Es ist ein Fehler aufgetreten :(';
+                        this.messageClass = 'alert-danger';
+                    }).then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
             },
             saveSelections () {
-                this.$store.commit('loading', true);
-                axios({
-                    url: '/api/crm-selections/' + this.crmData.id,
-                    headers: {
-                        'x-auth-token': this.$store.getters.authToken
-                    },
-                    method: 'PUT',
-                    data: this.crmData
-                }).then(() => {
-                    this.message = 'Die Änderungen wurden gespeichert';
-                    this.messageClass = 'alert-success';
-                }).catch(() => {
-                    this.message = 'Es ist ein Fehler aufgetreten :(';
-                    this.messageClass = 'alert-danger';
-                }).then(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                    this.$store.commit('loading', false);
-                });
+                this.$store.dispatch('saveCrmData', this.crmData)
+                    .then(() => {
+                        this.message = 'Die Änderungen wurden gespeichert';
+                        this.messageClass = 'alert-success';
+                    }).catch(() => {
+                        this.message = 'Es ist ein Fehler aufgetreten :(';
+                        this.messageClass = 'alert-danger';
+                    }).then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
             }
         },
         computed: {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue

@@ -2,6 +2,9 @@
     <div id="myep-main">
         <h1>Vorgänge</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="loaderUrl" alt="" v-if="loading">
@@ -30,7 +33,7 @@
                         </td>
                         <td>{{ event.preis }} EUR</td>
                         <td>{{ status[event.status] }}</td>
-                        <td><a :href="$store.state.config.myEpApiBaseUrl + '/api/events/' + event.id + '/confirmation?token=' + $store.getters.authToken" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
+                        <td><a :href="getDownloadUrl(event)" target="_blank"><i class="fa fa-file-pdf-o"></i></a></td>
                     </tr>
                 </tbody>
             </table>
@@ -39,7 +42,6 @@
 </template>
 
 <script>
-    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
     import EventBus from '../../_bus'
@@ -63,26 +65,27 @@
         },
         methods: {
             fetchEvents () {
-                this.$store.commit('loading', true);
-                axios({
-                    url: '/api/events',
-                    headers: {
-                        'x-auth-token': this.$store.getters.authToken
-                    }
-                }).then((response) => {
-                    this.events = response.data;
-                }).catch(() => {
-                    this.message = 'Es ist ein Fehler aufgetreten :(';
-                }).then(() => {
-                    EventBus.$emit('scrollTo', '#myep-main');
-                    this.$store.commit('loading', false);
-                });
+                this.$store.dispatch('loadEvents')
+                    .then((events) => {
+                        this.events = events;
+                    }).catch(() => {
+                        this.message = 'Es ist ein Fehler aufgetreten :(';
+                    }).then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
             },
             formatBookingDate (date) {
                 if (!date) {
                     return '-';
                 }
                 return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr';
+            },
+            getDownloadUrl (event) {
+                return this.$store.state.config.myEpApiBaseUrl
+                    + '/api/events/'
+                    + event.id
+                    + '/confirmation?token='
+                    + this.$store.getters.authToken;
             }
         },
         computed: {