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

WIP Replace axios with fetch api

Browse Source
This commit is contained in:
Björn Fromme
2022-08-20 17:44:45 +02:00
parent 2c26fd81e7
commit 40a2df44ad
11 changed files with 452 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+18 -29
View File
@@ -62,13 +62,12 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations, mapActions } from 'vuex'
import axios from 'axios'
import flatpickr from 'flatpickr' import flatpickr from 'flatpickr'
import { German } from 'flatpickr/dist/l10n/de' import { German } from 'flatpickr/dist/l10n/de'
import FormGroup from './components/FormGroup' import FormGroup from './components/FormGroup'
export default { export default {
components: { components: {
FormGroup FormGroup
}, },
@@ -76,15 +75,13 @@
return { return {
picker: null, picker: null,
formErrors: {}, formErrors: {},
countries: []
} }
}, },
created () { created () {
this.loadFormOptions(); this.loadAddress()
this.$store.dispatch('loadAddress')
.then(() => { .then(() => {
this.picker.setDate(new Date(this.userData.dateOfBirth), true); this.picker.setDate(new Date(this.userData.dateOfBirth), true);
}); })
}, },
mounted () { mounted () {
Vue.nextTick(() => { Vue.nextTick(() => {
@@ -99,37 +96,29 @@
}) })
}, },
methods: { methods: {
...mapMutations(['alert', 'beginLoading', 'endLoading']), ...mapMutations(['alert']),
loadFormOptions () { ...mapActions(['loadAddress', 'saveAddress']),
this.beginLoading();
return axios({
url: '/api/countries'
}).then(response => {
this.countries = response.data
}).catch(error => {
}).finally(() => {
this.endLoading()
});
},
save () { save () {
this.formErrors = {}; this.formErrors = {}
this.$store.dispatch('saveAddress', this.userData) this.saveAddress(this.userData)
.catch(error => { .catch(error => {
this.alert({ this.alert({
message: 'Bitte überprüfe deine Eingaben.', message: 'Bitte überprüfe deine Eingaben.',
success: false, success: false,
}); })
const violations = error.response.data.violations; error.response.then(data => {
if (typeof violations !== 'undefined') { const violations = data.violations
for (let violation of violations) { if (typeof violations !== 'undefined') {
this.$set(this.formErrors, violation.property_path, violation.message); for (let violation of violations) {
this.$set(this.formErrors, violation.property_path, violation.message)
}
} }
} })
}); })
} }
}, },
computed: { computed: {
...mapState(['loading', 'userData']) ...mapState(['loading', 'userData', 'countries'])
} }
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+23 -10
View File
@@ -11,7 +11,7 @@
<router-link @click.native="navVisible = false" :to="{ name: 'events' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Buchungen</router-link> <router-link @click.native="navVisible = false" :to="{ name: 'events' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Buchungen</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'teamer' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800" v-if="isTeamer">Teamer</router-link> <router-link @click.native="navVisible = false" :to="{ name: 'teamer' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800" v-if="isTeamer">Teamer</router-link>
</div> </div>
<a class="block px-4 py-4 text-black hover:bg-zinc-400 hover:text-zinc-800" href="#" @click.prevent="logout()">Logout</a> <a class="block px-4 py-4 text-black hover:bg-zinc-400 hover:text-zinc-800" href="#" @click.prevent="performLogout()">Logout</a>
</div> </div>
<a href="#" class="lg:hidden p-4 text-black hover:text-zinc-800" :class="{ 'rotate-90': navVisible }" @click.prevent="navVisible = !navVisible"> <a href="#" class="lg:hidden p-4 text-black hover:text-zinc-800" :class="{ 'rotate-90': navVisible }" @click.prevent="navVisible = !navVisible">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@@ -31,7 +31,7 @@
</template> </template>
<script> <script>
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
import store from './store' import store from './store'
import router from './router' import router from './router'
@@ -39,12 +39,20 @@
store, store,
router, router,
methods: { methods: {
logout () { performLogout () {
this.$store.dispatch('logout') this.logout()
.then(() => { .then(() => {
this.$router.replace({ name: 'login' }) this.$router.replace({ name: 'login' })
}).catch(error => {}); }).catch(error => {});
} },
...mapMutations([
'initConfig',
]),
...mapActions([
'checkLoginState',
'loadCountries',
'logout',
]),
}, },
data () { data () {
return { return {
@@ -56,11 +64,16 @@
...mapGetters(['isLoggedIn', 'isTeamer']) ...mapGetters(['isLoggedIn', 'isTeamer'])
}, },
mounted () { mounted () {
this.$store.dispatch('init').then(() => { this.initConfig()
if (this.isLoggedIn) { this.checkLoginState()
this.$router.replace({ name: 'address' }) .then(() => {
} if (this.isLoggedIn) {
}) this.loadCountries()
.then(() => {
this.$router.replace({ name: 'address' })
})
}
})
}, },
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+105 -84
View File
@@ -171,8 +171,8 @@
import ServiceSelect from './components/ServiceSelect' import ServiceSelect from './components/ServiceSelect'
import ServicesOverview from './components/ServicesOverview' import ServicesOverview from './components/ServicesOverview'
import TransportationSelect from './components/TransportationSelect' import TransportationSelect from './components/TransportationSelect'
import axios from 'axios' import { mapGetters, mapMutations, mapState } from 'vuex'
import {mapGetters, mapMutations, mapState} from 'vuex' import { checkStatus, defaultOptions } from './api'
Vue.use(VueScrollTo) Vue.use(VueScrollTo)
@@ -222,78 +222,95 @@
}, },
methods: { methods: {
...mapMutations(['alert', 'beginLoading', 'endLoading']), ...mapMutations(['alert', 'beginLoading', 'endLoading']),
loadFormOptions () {
this.beginLoading();
return axios({
url: '/api/countries',
}).then(response => {
this.countries = response.data
}).catch(error => {
}).finally(() => {
this.endLoading()
});
},
loadBookingData () { loadBookingData () {
this.beginLoading('Lade Reise- und Buchungsdaten...') this.beginLoading('Lade Reise- und Buchungsdaten...')
return axios({ const options = {
url: `/api/booking/${this.bookingId}` ...defaultOptions
}).then(response => { }
this.bookingData = response.data.bookingData; return fetch(`${this.config.myEpApiBaseUrl}/api/booking/${this.bookingId}`, options)
this.participantData = response.data.participantData; .then(checkStatus)
this.travelData = response.data.travelData; .then(response => response.json())
}).catch(() => { .then(data => {
throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.'); this.bookingData = data.bookingData
}).finally(() => { this.participantData = data.participantData
this.endLoading() this.travelData = data.travelData
}) })
.catch(() => {})
.finally(() => {
this.endLoading()
})
}, },
loadEventData () { loadEventData () {
this.beginLoading('Lade Vorgangsdaten...') this.beginLoading('Lade Vorgangsdaten...')
return axios({ const options = {
url: `/api/event/${this.bookingData.bookingNumber}` ...defaultOptions
}).then(response => { }
this.eventData = response.data; return fetch(`${this.config.myEpApiBaseUrl}/api/event/${this.bookingData.bookingNumber}`, options)
}).catch(error => { .then(checkStatus)
throw new Error(error.response.data.message); .then(response => response.json())
}).finally(() => { .then(data => {
this.endLoading() this.eventData = data
}) })
.catch(error => {
throw new Error(error.message)
})
.finally(() => {
this.endLoading()
})
}, },
loadMutableFields () { loadMutableFields () {
this.beginLoading('Lade mögliche Änderungen...') this.beginLoading('Lade mögliche Änderungen...')
return axios({ const options = {
url: `/api/mutable-fields/${this.travelData.busproId}` ...defaultOptions
}).then(response => { }
this.mutableFields = response.data; return fetch(`${this.config.myEpApiBaseUrl}/api/mutable-fields/${this.travelData.busproId}`, options)
}).catch(() => { .then(checkStatus)
throw new Error('Mögliche Änderungen konnten nicht geladen werden.'); .then(response => response.json())
}).finally(() => { .then(data => {
this.endLoading() this.mutableFields = data
}) })
.catch(() => {
throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
})
.finally(() => {
this.endLoading()
})
}, },
loadContingents () { loadContingents () {
this.beginLoading('Lade Kontingente...') this.beginLoading('Lade Kontingente...')
return axios({ const options = {
url: `/api/contingents/${this.travelData.busproId}` ...defaultOptions
}).then(response => { }
this.contingents = response.data; return fetch(`${this.config.myEpApiBaseUrl}/api/contingents/${this.travelData.busproId}`, options)
}).catch(() => { .then(checkStatus)
throw new Error('Kontingente konnten nicht geladen werden.'); .then(response => response.json())
}).finally(() => { .then(data => {
this.endLoading() this.contingents = data
}) })
.catch(() => {
throw new Error('Kontingente konnten nicht geladen werden.');
})
.finally(() => {
this.endLoading()
})
}, },
loadServices () { loadServices () {
this.beginLoading('Lade Leistungen...') this.beginLoading('Lade Leistungen...')
return axios({ const options = {
url: `/api/services/${this.travelData.busproId}` ...defaultOptions
}).then(response => { }
this.services = response.data; return fetch(`${this.config.myEpApiBaseUrl}/api/services/${this.travelData.busproId}`, options)
}).catch(() => { .then(checkStatus)
throw new Error('Leistungen konnten nicht geladen werden.'); .then(response => response.json())
}).finally(() => { .then(data => {
this.endLoading() this.services = data
}) })
.catch(() => {
throw new Error('Leistungen konnten nicht geladen werden.');
})
.finally(() => {
this.endLoading()
})
}, },
getAccommodationLabel (participant) { getAccommodationLabel (participant) {
if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) { if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) {
@@ -423,32 +440,40 @@
return; return;
} }
this.beginLoading() this.beginLoading()
axios({ const options = {
url: `/api/booking/${this.bookingId}`, ...defaultOptions,
method: 'put', method: 'PUT',
data: { body: JSON.stringify({
participantData: this.participantData, participantData: this.participantData,
selectedTransportations: this.selectedTransportations, selectedTransportations: this.selectedTransportations,
remarks: this.bookingData.remarks, remarks: this.bookingData.remarks,
},
}).then(response => {
this.alert({
message: response.data.message,
success: true,
});
this.dirty = false;
}).catch(error => {
this.alert({
message: error.response.data.message,
success: false,
}) })
}).finally(() => { }
this.endLoading() fetch(`${this.config.myEpApiBaseUrl}/api/booking/${this.bookingId}`, options)
}) .then(checkStatus)
.then(response => response.json())
.then(data => {
this.alert({
message: data.message,
success: true,
})
this.dirty = false
})
.catch(error => {
error.response.then(data => {
this.alert({
message: data.message,
success: false,
})
})
})
.finally(() => {
this.endLoading()
})
} }
}, },
computed: { computed: {
...mapState(['loading']), ...mapState(['config', 'loading']),
...mapGetters(['isGroupManager']), ...mapGetters(['isGroupManager']),
availableContingents () { availableContingents () {
let filteredContingents = {}; let filteredContingents = {};
@@ -500,8 +525,7 @@
}, },
mounted () { mounted () {
this.bookingId = this.$route.params.id this.bookingId = this.$route.params.id
this.loadFormOptions() this.loadBookingData()
.then(() => this.loadBookingData())
.then(() => this.loadEventData()) .then(() => this.loadEventData())
.then(() => this.loadMutableFields()) .then(() => this.loadMutableFields())
.then(() => this.loadContingents()) .then(() => this.loadContingents())
@@ -515,9 +539,6 @@
success: false, success: false,
}); });
}) })
.finally(() => {
this.endLoading()
})
} }
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/CrmData.vue
+46 -32
View File
@@ -51,7 +51,7 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import axios from 'axios' import { defaultOptions, checkStatus } from './api'
export default { export default {
data () { data () {
@@ -62,43 +62,57 @@
} }
}, },
created () { created () {
this.beginLoading(); this.beginLoading()
return axios({ const options = {
url: '/api/crm-selections' ...defaultOptions
}).then(response => { }
this.crmData = response.data
}).catch(error => { return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
this.alert({ .then(checkStatus)
message: 'Es ist ein Fehler aufgetreten :(', .then(response => response.json())
success: false, .then(data => {
this.crmData = data
})
.catch(() => {
this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
})
})
.finally(() => {
this.endLoading()
}) })
}).finally(() => {
this.endLoading()
});
}, },
methods: { methods: {
...mapMutations(['beginLoading', 'endLoading', 'alert']), ...mapMutations(['beginLoading', 'endLoading', 'alert']),
save () { save () {
this.beginLoading(); this.beginLoading()
return axios({ const options = {
url: '/api/crm-selections', ...defaultOptions,
method: 'put', method: 'PUT',
data: this.crmData body: JSON.stringify(this.crmData)
}).then(() => { }
this.alert({
message: 'Die Änderungen wurden gespeichert', return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
success: true, .then(checkStatus)
}); .then(response => response.json())
}).catch(error => { .then(() => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Die Änderungen wurden gespeichert',
success: false, success: true,
}); })
}).finally(() => { })
this.endLoading(); .catch(() => {
}); this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
})
})
.finally(() => {
this.endLoading()
})
}, },
hasVisibleSelections (group) { hasVisibleSelections (group) {
if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) { if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) {
@@ -116,7 +130,7 @@
} }
}, },
computed: { computed: {
...mapState(['loading']) ...mapState(['config', 'loading'])
} }
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+22 -19
View File
@@ -75,10 +75,10 @@
</template> </template>
<script> <script>
import {mapState, mapMutations, mapGetters} from 'vuex' import { mapState, mapMutations, mapGetters } from 'vuex'
import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import { checkStatus, defaultOptions } from './api'
export default { export default {
data () { data () {
@@ -96,18 +96,25 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
created () { created () {
this.beginLoading(); this.beginLoading();
return axios({ const options = {
url: '/api/events' ...defaultOptions
}).then(response => { }
this.events = response.data;
}).catch(error => { return fetch(`${this.config.myEpApiBaseUrl}/api/events`, options)
this.alert({ .then(checkStatus)
message: 'Es ist ein Fehler aufgetreten :(', .then(response => response.json())
success: false, .then(data => {
}); this.events = data
}).finally(() => { })
this.endLoading(); .catch(() => {
}); this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
})
})
.finally(() => {
this.endLoading()
})
}, },
methods: { methods: {
...mapMutations(['beginLoading', 'endLoading', 'alert']), ...mapMutations(['beginLoading', 'endLoading', 'alert']),
@@ -118,11 +125,7 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
return dayjs(date).format('DD.MM.YY') return dayjs(date).format('DD.MM.YY')
}, },
getDownloadUrl (event, type) { getDownloadUrl (event, type) {
return this.config.myEpApiBaseUrl return `${this.config.myEpApiBaseUrl}/api/events/${event.id}/${type}`
+ '/api/events/'
+ event.id
+ '/' + type + '?token='
+ sessionStorage.getItem('myep-auth-token');
}, },
calculateBalance (event) { calculateBalance (event) {
if (!event.price) { if (!event.price) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Login.vue
+6 -2
View File
@@ -51,7 +51,7 @@
</template> </template>
<script> <script>
import { mapState, mapGetters, mapMutations } from 'vuex' import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import FormGroup from './components/FormGroup' import FormGroup from './components/FormGroup'
export default { export default {
@@ -66,6 +66,7 @@
}, },
methods: { methods: {
...mapMutations(['alert']), ...mapMutations(['alert']),
...mapActions(['loadCountries']),
toggleMode () { toggleMode () {
this.mode = this.mode === 'login' ? 'reset' : 'login'; this.mode = this.mode === 'login' ? 'reset' : 'login';
this.password = '' this.password = ''
@@ -91,7 +92,10 @@
email: this.email, email: this.email,
password: this.password password: this.password
}).then(() => { }).then(() => {
this.$router.push({ name: 'address' }); this.loadCountries()
.then(() => {
this.$router.replace({ name: 'address' })
})
}).catch(error => { }).catch(error => {
}); });
}, },
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Newsletter.vue
+26 -19
View File
@@ -12,7 +12,7 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import axios from 'axios' import { checkStatus, defaultOptions } from './api'
export default { export default {
methods: { methods: {
@@ -28,27 +28,34 @@
this.beginLoading(); this.beginLoading();
return axios({ const options = {
url: '/api/newsletter', ...defaultOptions,
method: 'put', method: 'PUT',
data body: JSON.stringify(data)
}).then(() => { }
this.alert({
message: 'Die Änderungen wurden gespeichert', return fetch(`${this.config.myEpApiBaseUrl}/api/newsletter`, options)
success: true, .then(checkStatus)
}); .then(response => response.json())
}).catch(error => { .then(() => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Die Änderungen wurden gespeichert',
success: false, success: true,
}); })
}).finally(() => { })
this.endLoading(); .catch(() => {
}); this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
})
})
.finally(() => {
this.endLoading()
})
} }
}, },
computed: { computed: {
...mapState(['loading', 'userData']), ...mapState(['config', 'loading', 'userData']),
statusMessage () { statusMessage () {
let message = 'Du bist aktuell'; let message = 'Du bist aktuell';
message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> '; message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+43 -30
View File
@@ -84,10 +84,10 @@
<script> <script>
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import FormGroup from './components/FormGroup' import FormGroup from './components/FormGroup'
import { checkStatus, defaultOptions } from './api'
export default { export default {
components: { components: {
@@ -121,42 +121,55 @@
this.beginLoading(); this.beginLoading();
return axios({
url: '/api/teamer-data', const options = {
method: 'put', ...defaultOptions,
data method: 'PUT',
}) body: JSON.stringify(data)
.then(() => { }
this.alert({
message: 'Die Änderungen wurden gespeichert', return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
success: true, .then(checkStatus)
}); .then(response => response.json())
}).catch(error => { .then(() => {
this.alert({ this.alert({
message: 'Es ist ein Fehler aufgetreten :(', message: 'Die Änderungen wurden gespeichert',
success: false, success: true,
}); })
}).finally(() => { })
this.endLoading(); .catch(() => {
}); this.alert({
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
})
})
.finally(() => {
this.endLoading()
})
} }
}, },
created () { created () {
this.beginLoading(); this.beginLoading();
return axios({ const options = {
url: '/api/teamer-data' ...defaultOptions
}).then(response => { }
this.abilities = response.data.abilities;
this.timeFrames = response.data.timeFrames; return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
this.jobProfiles = response.data.jobProfiles; .then(checkStatus)
}).catch(error => { .then(response => response.json())
}).finally(() => { .then(data => {
this.endLoading(); this.abilities = data.abilities
}); this.timeFrames = data.timeFrames
this.jobProfiles = data.jobProfiles
})
.catch(() => {})
.finally(() => {
this.endLoading()
})
}, },
computed: { computed: {
...mapState(['userData', 'loading']) ...mapState(['config', 'userData', 'loading'])
}, },
filters: { filters: {
period (timeFrame) { period (timeFrame) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/api/index.js
+18
View File
@@ -0,0 +1,18 @@
const defaultOptions = {
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
}
function checkStatus(response) {
if (response.ok) {
return response
} else {
const error = new Error(response.status)
error.response = response.json()
throw error
}
}
export { checkStatus, defaultOptions }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
+1 -1
View File
@@ -4,7 +4,7 @@
{{ label }}: {{ label }}:
</label> </label>
<slot></slot> <slot></slot>
<span class="block text-sm mt-1" v-show="error"> <span class="block text-sm mt-1 text-red-500" v-show="error">
{{ error }} {{ error }}
</span> </span>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/store/index.js
+144 -101
View File
@@ -1,13 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import axios from 'axios' import { checkStatus, defaultOptions } from '../api'
const configElement = document.getElementById('appconfig') const configElement = document.getElementById('appconfig')
const config = JSON.parse(configElement.innerHTML) const config = JSON.parse(configElement.innerHTML)
axios.defaults.baseURL = config.myEpApiBaseUrl
axios.defaults.withCredentials = true
Vue.use(Vuex) Vue.use(Vuex)
const defaultUserData = { const defaultUserData = {
@@ -33,6 +30,7 @@ export default new Vuex.Store({
statusMessage: '', statusMessage: '',
authenticated: false, authenticated: false,
userData: defaultUserData, userData: defaultUserData,
countries: [],
alert: { alert: {
message: '', message: '',
success: true, success: true,
@@ -72,125 +70,170 @@ export default new Vuex.Store({
} }
}, },
actions: { actions: {
init({commit}) { checkLoginState({commit, state}) {
commit('initConfig'); commit('beginLoading')
commit('beginLoading');
return axios({ const options = {
url: '/api/ping', ...defaultOptions
method: 'get', }
}).then(response => {
commit('login') return fetch(`${state.config.myEpApiBaseUrl}/api/ping`, options)
}).catch(() => { .then(checkStatus)
}).finally(() => { .then(response => response.json())
commit('endLoading'); .then(() => {
}) commit('login')
})
.catch(() => {})
.finally(() => {
commit('endLoading')
})
},
loadCountries({commit, state}) {
commit('beginLoading')
const options = {
...defaultOptions
}
return fetch(`${state.config.myEpApiBaseUrl}/api/countries`, options)
.then(checkStatus)
.then(response => response.json())
.then(data => {
commit('setCountries', data)
})
.catch(() => {})
.finally(() => {
commit('endLoading')
})
}, },
login({commit}, credentials) { login({commit}, credentials) {
commit('beginLoading'); commit('beginLoading')
return axios({ const options = {
url: '/api/login', ...defaultOptions,
method: 'post', method: 'POST',
data: { body: JSON.stringify({
username: credentials.email, username: credentials.email,
password: credentials.password password: credentials.password
}, })
}).then(response => { }
commit('login', response.data);
}).catch(error => { return fetch(`${config.myEpApiBaseUrl}/api/login`, options)
commit('logout'); .then(checkStatus)
commit('alert', { .then(response => response.json())
message: 'Der Login ist fehlgeschlagen :(', .then(data => {
success: false, commit('login', data)
}); })
throw error; .catch(error => {
}).finally(() => { commit('logout')
commit('endLoading'); commit('alert', {
}); message: 'Der Login ist fehlgeschlagen :(',
success: false,
});
throw error
})
.finally(() => {
commit('endLoading')
})
}, },
logout({commit}) { logout({commit}) {
commit('beginLoading'); commit('beginLoading')
return axios({ const options = {
url: '/api/logout', ...defaultOptions
}).catch(error => { }
}).finally(() => {
commit('logout'); return fetch(`${config.myEpApiBaseUrl}/api/logout`, options)
commit('endLoading'); .then(checkStatus)
}); .catch(() => {})
.finally(() => {
commit('logout')
commit('endLoading')
})
}, },
resetPassword({commit}, email) { resetPassword({commit}, email) {
commit('beginLoading'); commit('beginLoading')
return axios({ const options = {
url: '/api/reset-password', ...defaultOptions,
data: {email: email}, method: 'POST',
method: 'post' body: JSON.stringify({
}).then(response => { email
return response; })
}).finally(() => { }
commit('endLoading');
}); return fetch(`${config.myEpApiBaseUrl}/api/reset-password`, options)
.then(checkStatus)
.then(response => response.json())
.then(response => response)
.finally(() => {
commit('endLoading')
})
}, },
register({commit}, userData) { register({commit}, userData) {
commit('beginLoading'); commit('beginLoading')
return axios({ const options = {
url: '/api/register', ...defaultOptions,
data: userData, method: 'POST',
method: 'post' body: JSON.stringify(userData)
}).then(response => { }
return response;
}).finally(() => { return fetch(`${config.myEpApiBaseUrl}/api/register`, options)
commit('endLoading'); .then(checkStatus)
}); .then(response => response.json())
.then(data => data)
.finally(() => {
commit('endLoading')
})
}, },
loadAddress({commit}) { loadAddress({commit}) {
commit('beginLoading'); commit('beginLoading')
return axios({ const options = {
url: '/api/address', ...defaultOptions,
method: 'get', }
}).then(response => {
commit('setUserData', response.data);
if (response.data.watchlist) {
commit('setWatchlist', response.data.watchlist);
}
}).catch(() => {
commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(',
success: false,
});
}).finally(() => {
commit('endLoading');
});
},
saveAddress({commit, state}, data) {
commit('beginLoading');
return axios({ return fetch(`${config.myEpApiBaseUrl}/api/address`, options)
url: '/api/address', .then(checkStatus)
method: 'put', .then(response => response.json())
data .then(data => {
}).then(() => { commit('setUserData', data)
commit('alert', { if (data.watchlist) {
message: 'Die Änderungen wurden gespeichert', commit('setWatchlist', data.watchlist)
success: true, }
}); })
}) .catch(() => {
.catch(error => {
if (error.config.status >= 500) {
commit('alert', { commit('alert', {
message: 'Es ist ein Fehler aufgetreten :(', message: 'Es ist ein Fehler aufgetreten :(',
success: false, success: false,
}); })
} else { })
throw error; .finally(() => {
} commit('endLoading')
}).finally(() => { })
commit('endLoading'); },
}); saveAddress({commit, state}, data) {
commit('beginLoading')
const options = {
...defaultOptions,
method: 'PUT',
body: JSON.stringify(data)
}
return fetch(`${config.myEpApiBaseUrl}/api/address`, options)
.then(checkStatus)
.then(response => response.json())
.then(() => {
commit('alert', {
message: 'Die Änderungen wurden gespeichert',
success: true,
})
})
.finally(() => {
commit('endLoading')
})
} }
}, },
getters: { getters: {