From ce0e98fb92e4ffaee10009ab85dd230c0e0b6fa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 1 Nov 2018 16:54:33 +0100
Subject: [PATCH] Streamline form handling

---
 .../Assets/js/myep/components/CrmData.vue     | 58 +++++++++++--------
 .../Assets/js/myep/components/Teamer.vue      |  2 +-
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
index f516d7d4..c566c0ce 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
@@ -1,35 +1,45 @@
 <template>
     <div id="myep-main" v-show="!loading">
         <h1>Mein Profil</h1>
-        <div class="row">
-            <div class="col-xs-12 col-md-6">
-                <template v-for="selectionGroup in this.crmData.selectionGroups"
-                          v-if="hasVisibleSelections(selectionGroup)">
-                    <h3>{{ selectionGroup.name}}</h3>
-                    <div class="checkbox" v-for="selection in selectionGroup.selections"
-                         v-if="selection.changeable === true">
-                        <label :class="{ disabled: !selection.changeable}">
-                            <input type="checkbox" class="form-control" v-model="selection.value"
-                                   :disabled="!selection.changeable" @change="saveSelections()"/>
+        <form @submit.prevent="saveSelections()">
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <template v-for="selectionGroup in this.crmData.selectionGroups"
+                              v-if="hasVisibleSelections(selectionGroup)">
+                        <h3>{{ selectionGroup.name}}</h3>
+                        <div class="checkbox" v-for="selection in selectionGroup.selections"
+                             v-if="selection.changeable === true">
+                            <label :class="{ disabled: !selection.changeable}">
+                                <input type="checkbox" class="form-control" v-model="selection.value"
+                                       :disabled="!selection.changeable"/>
+                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
+                                {{ selection.name }}
+                            </label>
+                        </div>
+                    </template>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <div class="checkbox" v-for="action in this.crmData.actions"
+                         v-if="action.changeable === true">
+                        <label :class="{ disabled: !action.changeable}">
+                            <input type="checkbox" class="form-control"
+                                   v-model="action.value" :disabled="!action.changeable"/>
                             <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                            {{ selection.name }}
+                            {{ action.name }}
                         </label>
                     </div>
-                </template>
-            </div>
-            <div class="col-xs-12 col-md-6">
-                <div class="checkbox" v-for="action in this.crmData.actions"
-                     v-if="action.changeable === true">
-                    <label :class="{ disabled: !action.changeable}">
-                        <input type="checkbox" class="form-control"
-                               v-model="action.value" :disabled="!action.changeable"
-                               @change="saveSelections()"/>
-                        <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                        {{ action.name }}
-                    </label>
                 </div>
             </div>
-        </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="form-group">
+                        <button type="submit" class="button" :disabled="loading">
+                            Speichern
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
     </div>
 </template>
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
index ace53e5c..93c97b0c 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Teamer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
         <h1>Teamer</h1>
-        <form @submit="saveTeamerData()">
+        <form @submit.prevent="saveTeamerData()">
             <div class="row">
                 <div class="col-xs-12 col-md-6">
                     <h4>Fährst du Ski oder Board?</h4>