Implement Newsletter un/registration into MyE&P

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

@@ -22,6 +22,7 @@ import Address from './components/Address.vue'
 import Events from './components/Events.vue'
 import Login from './components/Login.vue'
 import Teamer from './components/Teamer.vue'
+import Newsletter from './components/Newsletter.vue'
 
 export default new VueRouter({
     routes: [
@@ -43,6 +44,12 @@ export default new VueRouter({
             component: Address,
             beforeEnter: guard
         },
+        {
+            name: 'newsletter',
+            path: '/newsletter',
+            component: Newsletter,
+            beforeEnter: guard
+        },
         {
             name: 'events',
             path: '/vorgaenge',

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

@@ -6,6 +6,7 @@ import AddressStore from './stores/address'
 import CrmDataStore from './stores/crmdata'
 import TeamerStore from './stores/teamer'
 import EventsStore from './stores/events'
+import NewsletterStore from './stores/newsletter'
 
 const configElement = document.getElementById('appconfig');
 const config = JSON.parse(configElement.innerHTML);
@@ -19,7 +20,8 @@ export default new Vuex.Store({
         address: AddressStore,
         crmdata: CrmDataStore,
         teamer: TeamerStore,
-        events: EventsStore
+        events: EventsStore,
+        newsletter: NewsletterStore
     },
     state: {
         config: config,

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

@@ -13,6 +13,7 @@
             <div class="collapse navbar-collapse" id="myep-navbar">
                 <ul class="nav navbar-nav">
                     <router-link :to="{ name: 'address' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Adressdaten</a></router-link>
+                    <router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Newsletter</a></router-link>
                     <router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Reise-Historie</a></router-link>
                     <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer"><a>Teamer</a></router-link>
                 </ul>

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

@@ -0,0 +1,60 @@
+<template>
+    <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
+	    <h1>Newsletter</h1>
+        <div class="row">
+            <div class="col-xs-12">
+                <p v-html="statusMessage"></p>
+                <button type="submit" class="button" :disabled="loading" @click.prevent="toggleReqistration()">
+                    {{ address.newsletter ? 'Abmelden' : 'Anmelden' }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import EventBus from '../../_bus'
+
+	export default {
+	    data () {
+	        return {
+	            address: {}
+			}
+        },
+		created () {
+	        this.fetchAddress();
+        },
+        methods: {
+            fetchAddress () {
+                this.$store.dispatch('address/load')
+                    .then((data) => {
+                        this.address = data;
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
+            },
+            toggleReqistration () {
+                this.address.newsletter = !this.address.newsletter;
+                const data = {
+                    id: this.address.id,
+                    email: this.address.email,
+                    registration: this.address.newsletter
+                };
+                this.$store.dispatch('newsletter/registration', data)
+                    .then(() => {
+                        EventBus.$emit('scrollTo', '#myep-main');
+                    });
+            }
+        },
+        computed: {
+            loading () {
+	            return this.$store.state.loading;
+            },
+            statusMessage () {
+                let message = 'Du bist aktuell';
+                message += this.address.newsletter ? ' ' : ' <strong>nicht</strong> ';
+                message += 'zum Newsletter angemeldet.';
+                return message;
+            }
+        }
+    }
+</script>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/newsletter.js

@@ -0,0 +1,37 @@
+import EventBus from '../../_bus';
+import axios from 'axios';
+
+export default {
+    namespaced: true,
+    state: {},
+    actions: {
+        registration ({ commit }, data) {
+            commit('loadingBegin', null, { root: true });
+
+            const client = axios.create({
+                headers: {
+                    'X-Auth-Token': sessionStorage.getItem('token')
+                }
+            });
+
+            return client.put('/api/newsletters/' + data.id, data)
+                .then(() => {
+                    commit('loadingFinish', null, { root: true });
+                    commit('alert', {
+                        message: 'Die Änderungen wurden gespeichert',
+                        class: 'alert-success'
+                    }, { root: true });
+                })
+                .catch((error) => {
+                    commit('loadingFinish', null, { root: true });
+                    commit('alert', {
+                        message: 'Es ist ein Fehler aufgetreten :(',
+                        class: 'alert-danger'
+                    }, { root: true });
+                    commit('logout', null, { root: true });
+                    EventBus.$emit('forcedLogout');
+                    throw error;
+                });
+        }
+    }
+}