Fix api errors not being displayed properly

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue

@@ -145,8 +145,8 @@
                 </template>
             </collapsible-panel>
         </div>
-        <div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading">
-            <button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()" v-if="initialized">
+        <div class="py-4 lg:flex lg:justify-between space-y-1 lg:space-y-0" v-show="!loading" v-if="initialized">
+            <button class="button bg-button" :disabled="!dirty" @click.prevent="storeBookingData()">
                 Buchung aktualisieren
             </button>
             <router-link :to="{ name: 'events' }" class="button bg-button">
@@ -157,7 +157,6 @@
 </template>
 
 <script>
-    import Vue from 'vue'
     import AccommodationSelect from './components/AccommodationSelect'
     import ContingentsOverview from './components/ContingentsOverview'
     import MutableFields from './components/MutableFields'
@@ -171,7 +170,7 @@
     import ServicesOverview from './components/ServicesOverview'
     import TransportationSelect from './components/TransportationSelect'
     import { mapGetters, mapMutations, mapState } from 'vuex'
-    import {checkStatus, defaultOptions, handleError} from './api'
+    import {checkStatus, defaultOptions} from './api'
 
     export default {
         name: 'BookingEdit',
@@ -232,7 +231,6 @@
                         this.participantData = data.participantData
                         this.travelData = data.travelData
                     })
-                    .catch(handleError)
                     .finally(() => {
                         this.endLoading()
                     })
@@ -533,9 +531,9 @@
                 })
                 .catch(error => {
                     this.alert({
-                      message: error.message,
+                        message: 'Es ist ein Fehler aufgetreten: ' + error.message,
                         success: false,
-                    });
+                    })
                 })
         }
     }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js

@@ -9,17 +9,12 @@ function checkStatus(response) {
     if (response.ok) {
         return response
     } else {
-        const error = new Error(response.statusText)
-        error.response = response.json()
-        throw error
+        return response
+            .json()
+            .then(error => {
+                throw Error(error.message)
+            })
     }
 }
 
-function handleError() {
-    commit('alert', {
-        message: 'Es ist ein Fehler aufgetreten :(',
-        success: false,
-    })
-}
-
-export { checkStatus, handleError, defaultOptions }
+export { checkStatus, defaultOptions }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js

@@ -101,7 +101,12 @@ export default new Vuex.Store({
                 .then(data => {
                     commit('setCountries', data)
                 })
-                .catch(handleError)
+                .catch(error => {
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten: ' + error.message,
+                        success: false,
+                    })
+                })
                 .finally(() => {
                     commit('endLoading')
                 })
@@ -184,7 +189,12 @@ export default new Vuex.Store({
                 .then(checkStatus)
                 .then(response => response.json())
                 .then(data => data)
-                .catch(handleError)
+                .catch(error => {
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten: ' + error.message,
+                        success: false,
+                    })
+                })
                 .finally(() => {
                     commit('endLoading')
                 })
@@ -205,7 +215,12 @@ export default new Vuex.Store({
                         commit('setWatchlist', data.watchlist)
                     }
                 })
-                .catch(handleError)
+                .catch(error => {
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten: ' + error.message,
+                        success: false,
+                    })
+                })
                 .finally(() => {
                     commit('endLoading')
                 })
@@ -228,7 +243,12 @@ export default new Vuex.Store({
                         success: true,
                     })
                 })
-                .catch(handleError)
+                .catch(error => {
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten: ' + error.message,
+                        success: false,
+                    })
+                })
                 .finally(() => {
                     commit('endLoading')
                 })