From 07800c05d1f0416e5149d79a2043061c3c345f60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 1 Oct 2019 22:06:06 +0200
Subject: [PATCH] WIP Improve js code

---
 .../Private/Assets/js/myep/Address.vue        | 133 ++++++------------
 .../Resources/Private/Assets/js/myep/App.vue  |  16 +--
 .../Private/Assets/js/myep/Registration.vue   |  89 +++++-------
 .../Private/Assets/js/myep/Teamer.vue         |  39 +++--
 .../js/myep/components/FormCheckbox.vue       |  20 +++
 .../Assets/js/myep/components/FormGroup.vue   |  23 +++
 6 files changed, 139 insertions(+), 181 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormCheckbox.vue
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
index 6d5a4fa1..22ba82b8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Address.vue
@@ -4,94 +4,51 @@
         <form @submit.prevent="save()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group">
-                        <label for="gender" class="control-label">
-                            Gender:
-                        </label>
-                        <select id="gender" v-model="userData.gender" class="form-control">
+                    <form-group label="Gender">
+                        <select v-model="userData.gender" class="form-control">
                             <option value="w">W</option>
                             <option value="m">M</option>
                             <option value="d">D</option>
                         </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="title" class="control-label">
-                            Titel:
-                        </label>
-                        <input id="title" type="text" v-model="userData.title" class="form-control">
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.lastName }">
-                        <label for="name" class="control-label">
-                            Name:
-                        </label>
-                        <input id="name" type="text" v-model="userData.lastName" class="form-control">
-                        <span class="help-block">{{ formErrors.lastName }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.firstName }">
-                        <label for="firstName" class="control-label">
-                            Vorname:
-                        </label>
-                        <input id="firstName" type="text" v-model="userData.firstName" class="form-control">
-                        <span class="help-block">{{ formErrors.firstName }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label class="control-label">
-                            Geburtsdatum:
-                        </label>
+                    </form-group>
+                    <form-group label="Title">
+                        <input type="text" v-model="userData.title" class="form-control">
+                    </form-group>
+                    <form-group label="Name" :error="formErrors.lastName">
+                        <input type="text" v-model="userData.lastName" class="form-control">
+                    </form-group>
+                    <form-group label="Vorname" :error="formErrors.firstName">
+                        <input type="text" v-model="userData.firstName" class="form-control">
+                    </form-group>
+                    <form-group label="Geburtsdatum">
                         <span ref="picker"></span>
-                    </div>
+                    </form-group>
                 </div>
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.street }">
-                        <label for="street" class="control-label">
-                            Straße:
-                        </label>
-                        <input id="street" type="text" v-model="userData.street" class="form-control">
-                        <span class="help-block">{{ formErrors.street }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.zipCode }">
-                        <label for="zipCode" class="control-label">
-                            PLZ:
-                        </label>
-                        <input id="zipCode" type="text" v-model="userData.zipCode" class="form-control">
-                        <span class="help-block">{{ formErrors.zipCode }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.city }">
-                        <label for="city" class="control-label">
-                            Stadt:
-                        </label>
-                        <input id="city" type="text" v-model="userData.city" class="form-control">
-                        <span class="help-block">{{ formErrors.city }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.country }">
-                        <label for="country" class="control-label">
-                            Land:
-                        </label>
-                        <select id="country" v-model="userData.country" class="form-control">
+                    <form-group label="Straße" :error="formErrors.street">
+                        <input type="text" v-model="userData.street" class="form-control">
+                    </form-group>
+                    <form-group label="PLZ" :error="formErrors.zipCode">
+                        <input type="text" v-model="userData.zipCode" class="form-control">
+                    </form-group>
+                    <form-group label="Stadt" :error="formErrors.city">
+                        <input type="text" v-model="userData.city" class="form-control">
+                    </form-group>
+                    <form-group label="Land" :error="formErrors.country">
+                        <select v-model="userData.country" class="form-control">
                             <option v-for="country in countries"
                                     :value="country['code']">{{ country['name'] }}</option>
                         </select>
-                        <span class="help-block">{{ formErrors.country }}</span>
-                    </div>
-                    <div class="form-group" :class="{'has-error': formErrors.email }">
-                        <label for="email" class="control-label">
-                            E-Mail:
-                        </label>
-                        <input id="email" type="text" v-model="userData.email" class="form-control">
-                        <span class="help-block">{{ formErrors.email }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label for="phone" class="control-label">
-                            Telefon:
-                        </label>
-                        <input id="phone" type="text" v-model="userData.phonePrivate" class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <label for="mobile" class="control-label">
-                            Mobil:
-                        </label>
-                        <input id="mobile" type="text" v-model="userData.phoneMobile" class="form-control">
-                    </div>
+                    </form-group>
+                    <form-group label="E-Mail" :error="formErrors.email">
+                        <input type="text" v-model="userData.email" class="form-control">
+                    </form-group>
+                    <form-group label="Telefon" :error="formErrors.phonePrivate">
+                        <input type="text" v-model="userData.phonePrivate" class="form-control">
+                    </form-group>
+                    <form-group label="Mobil" :error="formErrors.phoneMobile">
+                        <input type="text" v-model="userData.phoneMobile" class="form-control">
+                    </form-group>
                 </div>
                 <div class="col-xs-12">
                     <div class="form-group">
@@ -111,8 +68,12 @@
     import axios from 'axios'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
+    import FormGroup from './components/FormGroup';
 
 	export default {
+	    components: {
+	        FormGroup
+        },
 	    data () {
 	        return {
 	            picker: null,
@@ -121,7 +82,6 @@
 			}
         },
 		created () {
-            this.initFormErrors();
             this.loadFormOptions();
             this.$store.dispatch('loadAddress')
                 .then(() => {
@@ -142,19 +102,6 @@
         },
         methods: {
 	        ...mapMutations(['alert', 'beginLoading', 'endLoading']),
-            initFormErrors () {
-                this.formErrors = {
-                    lastName: null,
-                    firstName: null,
-                    dateOfBirth: null,
-                    email: null,
-                    gender: null,
-                    street: null,
-                    zipCode: null,
-                    city: null,
-                    country: null
-                }
-            },
             loadFormOptions () {
                 this.beginLoading();
                 return axios({
@@ -167,7 +114,7 @@
                     });
             },
             save () {
-                this.initFormErrors();
+                this.formErrors = {};
                 this.$store.dispatch('saveAddress', this.userData)
                     .catch(error => {
                         this.alert({
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
index 15611b0b..f5d6183d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/App.vue
@@ -2,7 +2,8 @@
     <div id="app">
         <nav class="navbar navbar-default" v-if="isLoggedIn">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
+                <button type="button" class="navbar-toggle collapsed"
+                        data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
@@ -12,11 +13,11 @@
             </div>
             <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: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Mein Profil</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>
+                    <router-link :to="{ name: 'address' }" tag="li" active-class="active" :class="{ disabled: loading }">Adressdaten</router-link>
+                    <router-link :to="{ name: 'newsletter' }" tag="li" active-class="active" :class="{ disabled: loading }">Newsletter</router-link>
+                    <router-link :to="{ name: 'profile' }" tag="li" active-class="active" :class="{ disabled: loading }">Mein Profil</router-link>
+                    <router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }">Reise-Historie</router-link>
+                    <router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer">Teamer</router-link>
                 </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
@@ -53,8 +54,7 @@
                 this.$store.dispatch('logout')
                     .then(() => {
                         this.$router.push({ name: 'login' })
-                    }).catch(error => {
-                    });
+                    }).catch(error => {});
             }
         },
         computed: {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
index 7d1bbe4f..579fb715 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Registration.vue
@@ -1,49 +1,33 @@
 <template>
     <div class="form-wrapper form--border" id="myep-main">
         <h1>Registrierung MyE&amp;P</h1>
-        <form @submit.prevent="submit()">
+        <form @submit.prevent="register()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.firstName }">
-                        <label for="firstname" class="control-label">
-                            Vorname
-                        </label>
-                        <input id="firstname" type="text" v-model="userData.firstName" class="form-control">
-                        <span class="help-block">{{ formErrors.firstName }}</span>
-                    </div>
+                    <form-group label="Vorname" :error="formErrors.firstName">
+                        <input type="text" v-model="userData.firstName" class="form-control">
+                    </form-group>
                 </div>
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.lastName }">
-                        <label for="name" class="control-label">
-                            Name
-                        </label>
-                        <input id="name" type="text" v-model="userData.lastName" class="form-control">
-                        <span class="help-block">{{ formErrors.lastName }}</span>
-                    </div>
+                    <form-group label="Name" :error="formErrors.lastName">
+                        <input type="text" v-model="userData.lastName" class="form-control">
+                    </form-group>
                 </div>
             </div>
             <div class="row">
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.email }">
-                        <label for="email" class="control-label">
-                            E-Mail
-                        </label>
-                        <input id="email" type="text" v-model="userData.email" class="form-control">
-                        <span class="help-block">{{ formErrors.email }}</span>
-                    </div>
+                    <form-group label="E-Mail" :error="formErrors.email">
+                        <input type="text" v-model="userData.email" class="form-control">
+                    </form-group>
                 </div>
                 <div class="col-xs-12 col-md-6">
-                    <div class="form-group" :class="{'has-error': formErrors.gender }">
-                        <label for="gender" class="control-label">
-                            Gender
-                        </label>
-                        <select id="gender" v-model="userData.gender" class="form-control">
+                    <form-group label="Gender" :error="formErrors.gender">
+                        <select v-model="userData.gender" class="form-control">
                             <option value="M">M</option>
                             <option value="W">W</option>
                             <option value="D">D</option>
                         </select>
-                        <span class="help-block">{{ formErrors.gender }}</span>
-                    </div>
+                    </form-group>
                 </div>
             </div>
             <div class="row">
@@ -66,22 +50,28 @@
 
 <script>
     import { mapState, mapMutations } from 'vuex'
+    import FormGroup from './components/FormGroup';
 
 	export default {
+	    components: {
+	        FormGroup
+        },
 	    data () {
 	        return {
-	            userData: {},
+	            userData: {
+                    lastName: '',
+                    firstName: '',
+                    email: '',
+                    gender: 'M'
+                },
                 formErrors: {}
             }
         },
         methods: {
             ...mapMutations(['alert']),
-	        submit () {
-	            this.message = '';
-                this.register();
-            },
             register () {
-                this.initFormErrors();
+                this.message = '';
+                this.formErrors = {};
                 this.$store.dispatch('register', this.userData)
                     .then(response => {
                         if (response.data.success) {
@@ -89,8 +79,13 @@
                                 message: 'Du erhältst in Kürze eine E-Mail mit einem Link zum (Zurück)setzen deines Passworts.',
                                 class: 'alert-success'
                             });
-                            this.initFormData();
-                            this.initFormErrors();
+                            this.userData = {
+                                lastName: '',
+                                firstName: '',
+                                email: '',
+                                gender: 'M'
+                            };
+                            this.formErrors = {};
                         } else {
                             this.alert({
                                 message: 'Du bist bereits registriert. Bitte nutze die Passwort vergessen Funktion.',
@@ -103,28 +98,8 @@
                             this.formErrors[violation.property_path] = violation.message;
                         }
                     });
-            },
-            initFormData () {
-	            this.userData = {
-                    lastName: '',
-                    firstName: '',
-                    email: '',
-                    gender: 'M'
-                }
-            },
-            initFormErrors () {
-	            this.formErrors = {
-                    lastName: null,
-                    firstName: null,
-                    email: null,
-                    gender: null
-                }
             }
         },
-        created () {
-	        this.initFormData();
-	        this.initFormErrors();
-        },
         computed: {
 	        ...mapState(['loading'])
         }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
index 4f584c14..df6ab141 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Teamer.vue
@@ -36,28 +36,19 @@
                             </label>
                         </div>
                     </div>
-                    <div class="form-group">
-                        <label for="status" class="control-label">
-                            Status:
-                        </label>
+                    <form-group label="Status">
                         <select id="status" v-model="userData.seniority" class="form-control">
                             <option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
                         </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="jacketsize" class="control-label">
-                            Jackengröße:
-                        </label>
-                        <select id="jacketsize" v-model="userData.jacketSize" class="form-control">
+                    </form-group>
+                    <form-group label="Jackengröße">
+                        <select v-model="userData.jacketSize" class="form-control">
                             <option v-for="size of this.sizes" :value="size">{{ size }}</option>
                         </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="jacketsize" class="control-label">
-                            Wünsche:
-                        </label>
+                    </form-group>
+                    <form-group label="Wünsche">
                         <textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
-                    </div>
+                    </form-group>
                 </div>
                 <div class="col-xs-12 col-md-6">
                     <h4>Verfügbarkeiten</h4>
@@ -69,13 +60,9 @@
                             {{ timeFrame | period }}
                         </label>
                     </div>
-                    <div class="checkbox">
-                        <label>
-                            <input type="checkbox" class="form-control" v-model="userData.monthLong"/>
-                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                            Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
-                        </label>
-                    </div>
+                    <form-checkbox :value.sync="userData.monthLong">
+                        Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.
+                    </form-checkbox>
                 </div>
             </div>
             <div class="row">
@@ -96,8 +83,14 @@
     import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    import FormGroup from './components/FormGroup';
+    import FormCheckbox from './components/FormCheckbox';
 
     export default {
+        components: {
+            FormGroup,
+            FormCheckbox
+        },
         data () {
             return {
                 sizes: [ 'S', 'M', 'L', 'XL', 'XXL' ],
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormCheckbox.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormCheckbox.vue
new file mode 100644
index 00000000..62e95d16
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormCheckbox.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="checkbox">
+        <label>
+            <input type="checkbox" class="form-control" v-model="value" @change="$emit('update:value', value);"/>
+            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+            <slot></slot>
+        </label>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormCheckbox',
+        props: {
+            value: {
+                required: true
+            }
+        }
+    }
+</script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
new file mode 100644
index 00000000..8fc6df05
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/FormGroup.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="form-group" :class="{'has-error': error }">
+        <label class="control-label">{{ label }}:</label>
+        <slot></slot>
+        <span class="help-block">{{ error }}</span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormGroup',
+        props: {
+            label: {
+                type: String,
+                required: true
+            },
+            error: {
+                type: String,
+                default: null
+            }
+        }
+    }
+</script>
\ No newline at end of file