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

Move api related code to store

Browse Source
This commit is contained in:
Björn Fromme
2018-10-16 17:45:00 +02:00
parent 716dfcb67a
commit 3b6b73cf91
4 changed files with 156 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+91 -10
View File
@@ -8,21 +8,24 @@ export default new Vuex.Store({
state: { state: {
config: {}, config: {},
loading: false, loading: false,
isLoggedIn: !!sessionStorage.getItem('token'), loggedIn: !!sessionStorage.getItem('token'),
countries: [] countries: []
}, },
mutations: { mutations: {
loginSuccess (state) { loginSuccess (state) {
state.isLoggedIn = true; state.loggedIn = true;
}, },
loginFailure (state) { loginFailure (state) {
state.isLoggedIn = false; state.loggedIn = false;
}, },
logout (state) { logout (state) {
state.isLoggedIn = false; state.loggedIn = false;
}, },
loading (state, loading) { loadingBegin (state) {
state.loading = loading; state.loading = true;
},
loadingFinish (state) {
state.loading = false;
}, },
setCountries (state, countries) { setCountries (state, countries) {
state.countries = countries; state.countries = countries;
@@ -33,7 +36,7 @@ export default new Vuex.Store({
}, },
actions: { actions: {
login({ commit }, credentials) { login({ commit }, credentials) {
commit('loading', true); commit('loadingBegin');
const formData = new FormData(); const formData = new FormData();
formData.append('_username', credentials.email); formData.append('_username', credentials.email);
formData.append('_password', credentials.password); formData.append('_password', credentials.password);
@@ -44,10 +47,10 @@ export default new Vuex.Store({
}).then((response) => { }).then((response) => {
sessionStorage.setItem('token', response.data.token); sessionStorage.setItem('token', response.data.token);
commit('loginSuccess'); commit('loginSuccess');
commit('loading', false); commit('loadingFinish');
}).catch((error) => { }).catch((error) => {
commit('loginFailure'); commit('loginFailure');
commit('loading', false); commit('loadingFinish');
throw error; throw error;
}); });
}, },
@@ -68,6 +71,84 @@ export default new Vuex.Store({
}).then((response) => { }).then((response) => {
commit('setCountries', response.data); 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: { getters: {
@@ -75,7 +156,7 @@ export default new Vuex.Store({
return state.loading; return state.loading;
}, },
isLoggedIn: state => { isLoggedIn: state => {
return state.isLoggedIn; return state.loggedIn;
}, },
authToken () { authToken () {
return sessionStorage.getItem('token') return sessionStorage.getItem('token')
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+24 -37
View File
@@ -2,7 +2,9 @@
<div class="form-wrapper form--border" id="myep-main"> <div class="form-wrapper form--border" id="myep-main">
<h1>Adressdaten</h1> <h1>Adressdaten</h1>
<div v-if="message" class="alert alert-dismissable" :class="messageClass"> <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 }} {{ message }}
</div> </div>
<img :src="loaderUrl" alt="" v-show="loading"> <img :src="loaderUrl" alt="" v-show="loading">
@@ -86,7 +88,6 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import $ from 'jquery' import $ from 'jquery'
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 EventBus from '../../_bus' import EventBus from '../../_bus'
@@ -116,43 +117,29 @@
}, },
methods: { methods: {
fetchAddress () { fetchAddress () {
this.$store.commit('loading', true); this.$store.dispatch('loadAddress')
axios({ .then((data) => {
url: '/api/addresses', this.address = data;
headers: { this.picker.setDate(new Date(this.address.dateOfBirth), true);
'x-auth-token': this.$store.getters.authToken this.message = '';
} }).catch(() => {
}).then((response) => { this.message = 'Es ist ein Fehler aufgetreten :(';
this.address = response.data[0]; this.messageClass = 'alert-danger';
this.picker.setDate(new Date(this.address.dateOfBirth), true); }).then(() => {
this.message = ''; EventBus.$emit('scrollTo', '#myep-main');
}).catch(() => { });
this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger';
}).then(() => {
EventBus.$emit('scrollTo', '#myep-main');
this.$store.commit('loading', false);
});
}, },
saveAddress () { saveAddress () {
this.loading = true; this.$store.dispatch('saveAddress', this.address)
axios({ .then(() => {
url: '/api/addresses/' + this.address.id, this.message = 'Die Änderungen wurden gespeichert';
headers: { this.messageClass = 'alert-success';
'x-auth-token': this.$store.getters.authToken }).catch(() => {
}, this.message = 'Es ist ein Fehler aufgetreten :(';
method: 'PUT', this.messageClass = 'alert-danger';
data: this.address }).then(() => {
}).then(() => { EventBus.$emit('scrollTo', '#myep-main');
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;
});
} }
}, },
computed: { computed: {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+22 -36
View File
@@ -2,7 +2,9 @@
<div id="myep-main"> <div id="myep-main">
<h1>CRM Merkmale</h1> <h1>CRM Merkmale</h1>
<div v-if="message" class="alert alert-dismissible" :class="messageClass"> <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 }} {{ message }}
</div> </div>
<img :src="loaderUrl" alt="" v-if="loading"> <img :src="loaderUrl" alt="" v-if="loading">
@@ -37,7 +39,6 @@
</template> </template>
<script> <script>
import axios from 'axios'
import EventBus from '../../_bus' import EventBus from '../../_bus'
export default { export default {
@@ -54,42 +55,27 @@
}, },
methods: { methods: {
fetchSelections () { fetchSelections () {
this.$store.commit('loading', true); this.$store.dispatch('loadCrmData')
axios({ .then((data) => {
url: '/api/crm-selections', this.crmData = data;
headers: { }).catch(() => {
'x-auth-token': this.$store.getters.authToken this.message = 'Es ist ein Fehler aufgetreten :(';
} this.messageClass = 'alert-danger';
}).then((response) => { }).then(() => {
this.crmData = response.data[0]; EventBus.$emit('scrollTo', '#myep-main');
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);
});
}, },
saveSelections () { saveSelections () {
this.$store.commit('loading', true); this.$store.dispatch('saveCrmData', this.crmData)
axios({ .then(() => {
url: '/api/crm-selections/' + this.crmData.id, this.message = 'Die Änderungen wurden gespeichert';
headers: { this.messageClass = 'alert-success';
'x-auth-token': this.$store.getters.authToken }).catch(() => {
}, this.message = 'Es ist ein Fehler aufgetreten :(';
method: 'PUT', this.messageClass = 'alert-danger';
data: this.crmData }).then(() => {
}).then(() => { EventBus.$emit('scrollTo', '#myep-main');
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);
});
} }
}, },
computed: { computed: {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Events.vue
+19 -16
View File
@@ -2,6 +2,9 @@
<div id="myep-main"> <div id="myep-main">
<h1>Vorgänge</h1> <h1>Vorgänge</h1>
<div v-if="message" class="alert alert-danger"> <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 }} {{ message }}
</div> </div>
<img :src="loaderUrl" alt="" v-if="loading"> <img :src="loaderUrl" alt="" v-if="loading">
@@ -30,7 +33,7 @@
</td> </td>
<td>{{ event.preis }} EUR</td> <td>{{ event.preis }} EUR</td>
<td>{{ status[event.status] }}</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> </tr>
</tbody> </tbody>
</table> </table>
@@ -39,7 +42,6 @@
</template> </template>
<script> <script>
import axios from 'axios'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import EventBus from '../../_bus' import EventBus from '../../_bus'
@@ -63,26 +65,27 @@
}, },
methods: { methods: {
fetchEvents () { fetchEvents () {
this.$store.commit('loading', true); this.$store.dispatch('loadEvents')
axios({ .then((events) => {
url: '/api/events', this.events = events;
headers: { }).catch(() => {
'x-auth-token': this.$store.getters.authToken this.message = 'Es ist ein Fehler aufgetreten :(';
} }).then(() => {
}).then((response) => { EventBus.$emit('scrollTo', '#myep-main');
this.events = response.data; });
}).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :(';
}).then(() => {
EventBus.$emit('scrollTo', '#myep-main');
this.$store.commit('loading', false);
});
}, },
formatBookingDate (date) { formatBookingDate (date) {
if (!date) { if (!date) {
return '-'; return '-';
} }
return dayjs(date).format('DD.MM.YYYY, HH:mm') + ' Uhr'; 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: { computed: {