WIP Replace axios with fetch api
This commit is contained in:
Björn Fromme
@@ -62,13 +62,12 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { mapState, mapMutations, mapActions } from 'vuex'
|
||||
import flatpickr from 'flatpickr'
|
||||
import { German } from 'flatpickr/dist/l10n/de'
|
||||
import FormGroup from './components/FormGroup'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
FormGroup
|
||||
},
|
||||
@@ -76,15 +75,13 @@
|
||||
return {
|
||||
picker: null,
|
||||
formErrors: {},
|
||||
countries: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadFormOptions();
|
||||
this.$store.dispatch('loadAddress')
|
||||
this.loadAddress()
|
||||
.then(() => {
|
||||
this.picker.setDate(new Date(this.userData.dateOfBirth), true);
|
||||
});
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
Vue.nextTick(() => {
|
||||
@@ -99,37 +96,29 @@
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['alert', 'beginLoading', 'endLoading']),
|
||||
loadFormOptions () {
|
||||
this.beginLoading();
|
||||
return axios({
|
||||
url: '/api/countries'
|
||||
}).then(response => {
|
||||
this.countries = response.data
|
||||
}).catch(error => {
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
});
|
||||
},
|
||||
...mapMutations(['alert']),
|
||||
...mapActions(['loadAddress', 'saveAddress']),
|
||||
save () {
|
||||
this.formErrors = {};
|
||||
this.$store.dispatch('saveAddress', this.userData)
|
||||
this.formErrors = {}
|
||||
this.saveAddress(this.userData)
|
||||
.catch(error => {
|
||||
this.alert({
|
||||
message: 'Bitte überprüfe deine Eingaben.',
|
||||
success: false,
|
||||
});
|
||||
const violations = error.response.data.violations;
|
||||
if (typeof violations !== 'undefined') {
|
||||
for (let violation of violations) {
|
||||
this.$set(this.formErrors, violation.property_path, violation.message);
|
||||
})
|
||||
error.response.then(data => {
|
||||
const violations = data.violations
|
||||
if (typeof violations !== 'undefined') {
|
||||
for (let violation of violations) {
|
||||
this.$set(this.formErrors, violation.property_path, violation.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['loading', 'userData'])
|
||||
...mapState(['loading', 'userData', 'countries'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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: '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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -31,7 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
|
||||
@@ -39,12 +39,20 @@
|
||||
store,
|
||||
router,
|
||||
methods: {
|
||||
logout () {
|
||||
this.$store.dispatch('logout')
|
||||
performLogout () {
|
||||
this.logout()
|
||||
.then(() => {
|
||||
this.$router.replace({ name: 'login' })
|
||||
}).catch(error => {});
|
||||
}
|
||||
},
|
||||
...mapMutations([
|
||||
'initConfig',
|
||||
]),
|
||||
...mapActions([
|
||||
'checkLoginState',
|
||||
'loadCountries',
|
||||
'logout',
|
||||
]),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -56,11 +64,16 @@
|
||||
...mapGetters(['isLoggedIn', 'isTeamer'])
|
||||
},
|
||||
mounted () {
|
||||
this.$store.dispatch('init').then(() => {
|
||||
if (this.isLoggedIn) {
|
||||
this.$router.replace({ name: 'address' })
|
||||
}
|
||||
})
|
||||
this.initConfig()
|
||||
this.checkLoginState()
|
||||
.then(() => {
|
||||
if (this.isLoggedIn) {
|
||||
this.loadCountries()
|
||||
.then(() => {
|
||||
this.$router.replace({ name: 'address' })
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -171,8 +171,8 @@
|
||||
import ServiceSelect from './components/ServiceSelect'
|
||||
import ServicesOverview from './components/ServicesOverview'
|
||||
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)
|
||||
|
||||
@@ -222,78 +222,95 @@
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['alert', 'beginLoading', 'endLoading']),
|
||||
loadFormOptions () {
|
||||
this.beginLoading();
|
||||
return axios({
|
||||
url: '/api/countries',
|
||||
}).then(response => {
|
||||
this.countries = response.data
|
||||
}).catch(error => {
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
});
|
||||
},
|
||||
loadBookingData () {
|
||||
this.beginLoading('Lade Reise- und Buchungsdaten...')
|
||||
return axios({
|
||||
url: `/api/booking/${this.bookingId}`
|
||||
}).then(response => {
|
||||
this.bookingData = response.data.bookingData;
|
||||
this.participantData = response.data.participantData;
|
||||
this.travelData = response.data.travelData;
|
||||
}).catch(() => {
|
||||
throw new Error('Reise- und Buchungsdaten konnten nicht geladen werden.');
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/booking/${this.bookingId}`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.bookingData = data.bookingData
|
||||
this.participantData = data.participantData
|
||||
this.travelData = data.travelData
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
loadEventData () {
|
||||
this.beginLoading('Lade Vorgangsdaten...')
|
||||
return axios({
|
||||
url: `/api/event/${this.bookingData.bookingNumber}`
|
||||
}).then(response => {
|
||||
this.eventData = response.data;
|
||||
}).catch(error => {
|
||||
throw new Error(error.response.data.message);
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/event/${this.bookingData.bookingNumber}`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.eventData = data
|
||||
})
|
||||
.catch(error => {
|
||||
throw new Error(error.message)
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
loadMutableFields () {
|
||||
this.beginLoading('Lade mögliche Änderungen...')
|
||||
return axios({
|
||||
url: `/api/mutable-fields/${this.travelData.busproId}`
|
||||
}).then(response => {
|
||||
this.mutableFields = response.data;
|
||||
}).catch(() => {
|
||||
throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/mutable-fields/${this.travelData.busproId}`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.mutableFields = data
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Mögliche Änderungen konnten nicht geladen werden.');
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
loadContingents () {
|
||||
this.beginLoading('Lade Kontingente...')
|
||||
return axios({
|
||||
url: `/api/contingents/${this.travelData.busproId}`
|
||||
}).then(response => {
|
||||
this.contingents = response.data;
|
||||
}).catch(() => {
|
||||
throw new Error('Kontingente konnten nicht geladen werden.');
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/contingents/${this.travelData.busproId}`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.contingents = data
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Kontingente konnten nicht geladen werden.');
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
loadServices () {
|
||||
this.beginLoading('Lade Leistungen...')
|
||||
return axios({
|
||||
url: `/api/services/${this.travelData.busproId}`
|
||||
}).then(response => {
|
||||
this.services = response.data;
|
||||
}).catch(() => {
|
||||
throw new Error('Leistungen konnten nicht geladen werden.');
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/services/${this.travelData.busproId}`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.services = data
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Leistungen konnten nicht geladen werden.');
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
getAccommodationLabel (participant) {
|
||||
if (participant.hasOwnProperty('accommodationId') && participant.accommodationId in this.contingents) {
|
||||
@@ -423,32 +440,40 @@
|
||||
return;
|
||||
}
|
||||
this.beginLoading()
|
||||
axios({
|
||||
url: `/api/booking/${this.bookingId}`,
|
||||
method: 'put',
|
||||
data: {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
participantData: this.participantData,
|
||||
selectedTransportations: this.selectedTransportations,
|
||||
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: {
|
||||
...mapState(['loading']),
|
||||
...mapState(['config', 'loading']),
|
||||
...mapGetters(['isGroupManager']),
|
||||
availableContingents () {
|
||||
let filteredContingents = {};
|
||||
@@ -500,8 +525,7 @@
|
||||
},
|
||||
mounted () {
|
||||
this.bookingId = this.$route.params.id
|
||||
this.loadFormOptions()
|
||||
.then(() => this.loadBookingData())
|
||||
this.loadBookingData()
|
||||
.then(() => this.loadEventData())
|
||||
.then(() => this.loadMutableFields())
|
||||
.then(() => this.loadContingents())
|
||||
@@ -515,9 +539,6 @@
|
||||
success: false,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { defaultOptions, checkStatus } from './api'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@@ -62,43 +62,57 @@
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.beginLoading();
|
||||
this.beginLoading()
|
||||
|
||||
return axios({
|
||||
url: '/api/crm-selections'
|
||||
}).then(response => {
|
||||
this.crmData = response.data
|
||||
}).catch(error => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.crmData = data
|
||||
})
|
||||
.catch(() => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
}).finally(() => {
|
||||
this.endLoading()
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['beginLoading', 'endLoading', 'alert']),
|
||||
save () {
|
||||
this.beginLoading();
|
||||
this.beginLoading()
|
||||
|
||||
return axios({
|
||||
url: '/api/crm-selections',
|
||||
method: 'put',
|
||||
data: this.crmData
|
||||
}).then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
});
|
||||
}).catch(error => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
});
|
||||
}).finally(() => {
|
||||
this.endLoading();
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(this.crmData)
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/crm-selections`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
hasVisibleSelections (group) {
|
||||
if (this.hiddenSelectionGroups.indexOf(group.id) !== -1) {
|
||||
@@ -116,7 +130,7 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['loading'])
|
||||
...mapState(['config', 'loading'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -75,10 +75,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations, mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { mapState, mapMutations, mapGetters } from 'vuex'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/de'
|
||||
import { checkStatus, defaultOptions } from './api'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@@ -96,18 +96,25 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
|
||||
created () {
|
||||
this.beginLoading();
|
||||
|
||||
return axios({
|
||||
url: '/api/events'
|
||||
}).then(response => {
|
||||
this.events = response.data;
|
||||
}).catch(error => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
});
|
||||
}).finally(() => {
|
||||
this.endLoading();
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/events`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.events = data
|
||||
})
|
||||
.catch(() => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['beginLoading', 'endLoading', 'alert']),
|
||||
@@ -118,11 +125,7 @@ import {mapState, mapMutations, mapGetters} from 'vuex'
|
||||
return dayjs(date).format('DD.MM.YY')
|
||||
},
|
||||
getDownloadUrl (event, type) {
|
||||
return this.config.myEpApiBaseUrl
|
||||
+ '/api/events/'
|
||||
+ event.id
|
||||
+ '/' + type + '?token='
|
||||
+ sessionStorage.getItem('myep-auth-token');
|
||||
return `${this.config.myEpApiBaseUrl}/api/events/${event.id}/${type}`
|
||||
},
|
||||
calculateBalance (event) {
|
||||
if (!event.price) {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, mapMutations } from 'vuex'
|
||||
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
|
||||
import FormGroup from './components/FormGroup'
|
||||
|
||||
export default {
|
||||
@@ -66,6 +66,7 @@
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['alert']),
|
||||
...mapActions(['loadCountries']),
|
||||
toggleMode () {
|
||||
this.mode = this.mode === 'login' ? 'reset' : 'login';
|
||||
this.password = ''
|
||||
@@ -91,7 +92,10 @@
|
||||
email: this.email,
|
||||
password: this.password
|
||||
}).then(() => {
|
||||
this.$router.push({ name: 'address' });
|
||||
this.loadCountries()
|
||||
.then(() => {
|
||||
this.$router.replace({ name: 'address' })
|
||||
})
|
||||
}).catch(error => {
|
||||
});
|
||||
},
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { checkStatus, defaultOptions } from './api'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
@@ -28,27 +28,34 @@
|
||||
|
||||
this.beginLoading();
|
||||
|
||||
return axios({
|
||||
url: '/api/newsletter',
|
||||
method: 'put',
|
||||
data
|
||||
}).then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
});
|
||||
}).catch(error => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
});
|
||||
}).finally(() => {
|
||||
this.endLoading();
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data)
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/newsletter`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['loading', 'userData']),
|
||||
...mapState(['config', 'loading', 'userData']),
|
||||
statusMessage () {
|
||||
let message = 'Du bist aktuell';
|
||||
message += this.userData.newsletter ? ' ' : ' <strong>nicht</strong> ';
|
||||
|
||||
@@ -84,10 +84,10 @@
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import axios from 'axios'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/de'
|
||||
import FormGroup from './components/FormGroup'
|
||||
import { checkStatus, defaultOptions } from './api'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -121,42 +121,55 @@
|
||||
|
||||
this.beginLoading();
|
||||
|
||||
return axios({
|
||||
url: '/api/teamer-data',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
.then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
});
|
||||
}).catch(error => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
});
|
||||
}).finally(() => {
|
||||
this.endLoading();
|
||||
});
|
||||
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data)
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(() => {
|
||||
this.alert({
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.alert({
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
success: false,
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.beginLoading();
|
||||
|
||||
return axios({
|
||||
url: '/api/teamer-data'
|
||||
}).then(response => {
|
||||
this.abilities = response.data.abilities;
|
||||
this.timeFrames = response.data.timeFrames;
|
||||
this.jobProfiles = response.data.jobProfiles;
|
||||
}).catch(error => {
|
||||
}).finally(() => {
|
||||
this.endLoading();
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
return fetch(`${this.config.myEpApiBaseUrl}/api/teamer-data`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.abilities = data.abilities
|
||||
this.timeFrames = data.timeFrames
|
||||
this.jobProfiles = data.jobProfiles
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
this.endLoading()
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userData', 'loading'])
|
||||
...mapState(['config', 'userData', 'loading'])
|
||||
},
|
||||
filters: {
|
||||
period (timeFrame) {
|
||||
|
||||
@@ -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 }
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
{{ label }}:
|
||||
</label>
|
||||
<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 }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import axios from 'axios'
|
||||
import { checkStatus, defaultOptions } from '../api'
|
||||
|
||||
const configElement = document.getElementById('appconfig')
|
||||
const config = JSON.parse(configElement.innerHTML)
|
||||
|
||||
axios.defaults.baseURL = config.myEpApiBaseUrl
|
||||
axios.defaults.withCredentials = true
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const defaultUserData = {
|
||||
@@ -33,6 +30,7 @@ export default new Vuex.Store({
|
||||
statusMessage: '',
|
||||
authenticated: false,
|
||||
userData: defaultUserData,
|
||||
countries: [],
|
||||
alert: {
|
||||
message: '',
|
||||
success: true,
|
||||
@@ -72,125 +70,170 @@ export default new Vuex.Store({
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
init({commit}) {
|
||||
commit('initConfig');
|
||||
commit('beginLoading');
|
||||
checkLoginState({commit, state}) {
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/ping',
|
||||
method: 'get',
|
||||
}).then(response => {
|
||||
commit('login')
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
commit('endLoading');
|
||||
})
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
return fetch(`${state.config.myEpApiBaseUrl}/api/ping`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.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) {
|
||||
commit('beginLoading');
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/login',
|
||||
method: 'post',
|
||||
data: {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
username: credentials.email,
|
||||
password: credentials.password
|
||||
},
|
||||
}).then(response => {
|
||||
commit('login', response.data);
|
||||
}).catch(error => {
|
||||
commit('logout');
|
||||
commit('alert', {
|
||||
message: 'Der Login ist fehlgeschlagen :(',
|
||||
success: false,
|
||||
});
|
||||
throw error;
|
||||
}).finally(() => {
|
||||
commit('endLoading');
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
return fetch(`${config.myEpApiBaseUrl}/api/login`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
commit('login', data)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('logout')
|
||||
commit('alert', {
|
||||
message: 'Der Login ist fehlgeschlagen :(',
|
||||
success: false,
|
||||
});
|
||||
throw error
|
||||
})
|
||||
.finally(() => {
|
||||
commit('endLoading')
|
||||
})
|
||||
},
|
||||
logout({commit}) {
|
||||
commit('beginLoading');
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/logout',
|
||||
}).catch(error => {
|
||||
}).finally(() => {
|
||||
commit('logout');
|
||||
commit('endLoading');
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
return fetch(`${config.myEpApiBaseUrl}/api/logout`, options)
|
||||
.then(checkStatus)
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
commit('logout')
|
||||
commit('endLoading')
|
||||
})
|
||||
},
|
||||
resetPassword({commit}, email) {
|
||||
commit('beginLoading');
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/reset-password',
|
||||
data: {email: email},
|
||||
method: 'post'
|
||||
}).then(response => {
|
||||
return response;
|
||||
}).finally(() => {
|
||||
commit('endLoading');
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
email
|
||||
})
|
||||
}
|
||||
|
||||
return fetch(`${config.myEpApiBaseUrl}/api/reset-password`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(response => response)
|
||||
.finally(() => {
|
||||
commit('endLoading')
|
||||
})
|
||||
},
|
||||
register({commit}, userData) {
|
||||
commit('beginLoading');
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/register',
|
||||
data: userData,
|
||||
method: 'post'
|
||||
}).then(response => {
|
||||
return response;
|
||||
}).finally(() => {
|
||||
commit('endLoading');
|
||||
});
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
method: 'POST',
|
||||
body: JSON.stringify(userData)
|
||||
}
|
||||
|
||||
return fetch(`${config.myEpApiBaseUrl}/api/register`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => data)
|
||||
.finally(() => {
|
||||
commit('endLoading')
|
||||
})
|
||||
},
|
||||
loadAddress({commit}) {
|
||||
commit('beginLoading');
|
||||
commit('beginLoading')
|
||||
|
||||
return axios({
|
||||
url: '/api/address',
|
||||
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');
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
}
|
||||
|
||||
return axios({
|
||||
url: '/api/address',
|
||||
method: 'put',
|
||||
data
|
||||
}).then(() => {
|
||||
commit('alert', {
|
||||
message: 'Die Änderungen wurden gespeichert',
|
||||
success: true,
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.config.status >= 500) {
|
||||
return fetch(`${config.myEpApiBaseUrl}/api/address`, options)
|
||||
.then(checkStatus)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
commit('setUserData', data)
|
||||
if (data.watchlist) {
|
||||
commit('setWatchlist', data.watchlist)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
commit('alert', {
|
||||
message: 'Es ist ein Fehler aufgetreten :(',
|
||||
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: {
|
||||
|
||||
Reference in New Issue
Block a user