From 6fd5fe0373db18af0c87e4cda4547220ec13a147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sun, 21 Aug 2022 18:28:31 +0200
Subject: [PATCH] WIP Migrate missing styles

---
 .../Private/Assets/js/myep/Teamer.vue         | 110 +++++++++---------
 1 file changed, 54 insertions(+), 56 deletions(-)

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 91658766..95cde61e 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
@@ -1,81 +1,77 @@
 <template>
     <div>
-        <h1>Teamer</h1>
+        <p class="text-2xl pb-4">Teamer</p>
         <form @submit.prevent="save()">
-            <div class="row">
-                <div class="col-xs-12 col-md-6">
-                    <h4>Fährst du Ski oder Board?</h4>
-                    <div class="form-group">
-                        <div class="checkbox" v-for="ability of abilities">
-                            <label>
-                                <input type="checkbox" class="form-control" v-model="userData.abilities"
-                                       :value="ability.id" />
-                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                                {{ ability['title'] }}
-                            </label>
-                        </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <h4 class="mb-2">Fährst du Ski oder Board?</h4>
+                    <div class="flex flex-col space-y-1 pb-4">
+                        <label class="flex items-center"
+                               v-for="ability of abilities" :key="ability.id">
+                            <input type="checkbox"
+                                   class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
+                                   v-model="userData.abilities"
+                                   :value="ability.id"/>
+                            <span class="ml-2">{{ ability.title }}</span>
+                        </label>
                     </div>
-                    <h4>Mögliche Jobprofile</h4>
-                    <div class="form-group">
-                        <div class="checkbox" v-for="jobProfile of jobProfiles">
-                            <label>
-                                <input type="checkbox" class="form-control" v-model="userData.jobProfiles"
-                                       :value="jobProfile.id" />
-                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                                {{ jobProfile['title'] }}
-                            </label>
-                        </div>
+                    <h4 class="mb-2">Mögliche Jobprofile</h4>
+                    <div class="flex flex-col space-y-1 pb-4">
+                        <label class="flex items-center"
+                               v-for="jobProfile of jobProfiles" :key="jobProfile.id">
+                            <input type="checkbox"
+                                   class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
+                                   v-model="userData.jobProfiles"
+                                   :value="jobProfile.id"/>
+                            <span class="ml-2">{{ jobProfile.title }}</span>
+                        </label>
                     </div>
-                    <h4>Sonstiges</h4>
-                    <div class="form-group">
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" class="form-control" v-model="userData.wantsToLead"/>
-                                <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                                Ich möchte eine Fahrtenleitung übernehmen.
-                            </label>
-                        </div>
+                    <h4 class="mb-2">Sonstiges</h4>
+                    <div class="flex flex-col space-y-1 pb-4">
+                        <label class="flex items-center">
+                            <input type="checkbox"
+                                   class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
+                                   v-model="userData.wantsToLead"/>
+                            <span class="ml-2">Ich möchte eine Fahrtenleitung übernehmen</span>
+                        </label>
                     </div>
                     <form-group label="Status">
-                        <select id="status" v-model="userData.seniority" class="form-control">
+                        <select id="status" v-model="userData.seniority" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
                             <option v-for="status in this.status" :value="status.value">{{ status.label }}</option>
                         </select>
                     </form-group>
                     <form-group label="Jackengröße">
-                        <select v-model="userData.jacketSize" class="form-control">
+                        <select v-model="userData.jacketSize" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
                             <option v-for="size of this.sizes" :value="size">{{ size }}</option>
                         </select>
                     </form-group>
                     <form-group label="Wünsche">
-                        <textarea class="xxlarge form-control" cols="30" rows="3" v-model="userData.notes"></textarea>
+                        <textarea class="w-full" cols="30" rows="3" v-model="userData.notes"></textarea>
                     </form-group>
                 </div>
-                <div class="col-xs-12 col-md-6">
-                    <h4>Verfügbarkeiten</h4>
-                    <div class="checkbox" v-for="timeFrame in timeFrames">
-                        <label>
-                            <input type="checkbox" class="form-control" v-model="userData.availableTimeFrames"
+                <div>
+                    <h4 class="mb-2">Verfügbarkeiten</h4>
+                    <div class="flex flex-col space-y-1 pb-4">
+                        <label class="flex items-center"
+                               v-for="timeFrame of timeFrames" :key="timeFrame.id">
+                            <input type="checkbox"
+                                   class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
+                                   v-model="userData.availableTimeFrames"
                                    :value="timeFrame.id"/>
-                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                            {{ timeFrame | period }}
+                            <span class="ml-2">{{ timeFrame | period }}</span>
                         </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 class="flex items-center">
+                            <input type="checkbox"
+                                   class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
+                                   v-model="userData.monthLong"/>
+                            <span class="ml-2">Ich habe Zeit und würde gerne über einen Monat am Stück in eine Destination.</span>
                         </label>
                     </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-xs-12">
-                    <div class="form-group">
-                        <button type="submit" class="button bg-button" :disabled="loading">
-                            Speichern
-                        </button>
-                    </div>
+                <div class="col-span-1 md:col-span2">
+                    <button type="submit" class="button bg-button" :disabled="loading">
+                        Speichern
+                    </button>
                 </div>
             </div>
         </form>
@@ -145,6 +141,7 @@
                     })
                     .finally(() => {
                         this.endLoading()
+                        this.$emit('loaded')
                     })
             }
         },
@@ -166,6 +163,7 @@
                 .catch(() => {})
                 .finally(() => {
                     this.endLoading()
+                    this.$emit('loaded')
                 })
         },
         computed: {