From 84c7a495b756746784826e6b082e287f2e9a3aba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 1 Dec 2022 17:43:24 +0100
Subject: [PATCH] Change cursor of disabled form fields

---
 .../components/ParticipantAddressForm.vue     |  4 +++-
 .../myep/components/ParticipantDataForm.vue   | 19 +++++++++++++++----
 .../Assets/scss/components/_forms.scss        |  4 ++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue
index 329cc64b..48ffdb85 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantAddressForm.vue
@@ -9,7 +9,9 @@
             <svg class="w-4 h-4" fill="none" :class="{ 'rotate-180': visible }" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
         </button>
         <div class="absolute top-100 left-0 z-50 mt-4 border shadow-md p-4 bg-white w-screen max-w-xs space-y-2" v-show="visible">
-            <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Mobil"
+            <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+                   :class="{'cursor-not-allowed': !mutable }"
+                   type="text" placeholder="Mobil"
                    v-model="participant.data.phoneMobile" :disabled="!mutable"
                    @change="$emit('updated', participant)"
             >
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantDataForm.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantDataForm.vue
index 0d5a9841..61b4ea44 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantDataForm.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantDataForm.vue
@@ -1,18 +1,25 @@
 <template>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-1">
-      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Nachname"
+      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+             :class="{'cursor-not-allowed': !mutable }"
+             type="text" placeholder="Nachname"
              v-model="participant.data.lastName" :disabled="!mutable"
              @change="$emit('updated', participant)"
       >
-      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Vorname"
+      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+             :class="{'cursor-not-allowed': !mutable }"
+             type="text" placeholder="Vorname"
              v-model="participant.data.firstName" :disabled="!mutable"
              @change="$emit('updated', participant)"
       >
-      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="E-Mail"
+      <input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+             :class="{'cursor-not-allowed': !mutable }"
+             type="text" placeholder="E-Mail"
              v-model="participant.data.email" :disabled="!mutable"
              @change="$emit('updated', participant)"
       >
       <select class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+              :class="{'cursor-not-allowed': !mutable }"
               v-model="participant.data.gender" :disabled="!mutable"
               @change="$emit('updated', participant)"
       >
@@ -21,13 +28,17 @@
           <option value="D">divers</option>
       </select>
       <select class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+              :class="{'cursor-not-allowed': !mutable }"
               v-model="participant.data.nationality" :disabled="!mutable"
               @change="$emit('updated', participant)"
       >
           <option value="">Nationalität...</option>
           <option v-for="country in countries" :key="country.code" :value="country.code">{{ country.adjective }}</option>
       </select>
-      <input type="date" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" placeholder="Geburtsdatum"
+      <input type="date"
+             class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
+             :class="{'cursor-not-allowed': !mutable }"
+             placeholder="Geburtsdatum"
              v-model="participant.data.dateOfBirth" :disabled="!mutable"
              @change="$emit('updated', participant)"
       >
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
index 948e405e..5dd18e70 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
@@ -14,3 +14,7 @@
         @apply border-red-500;
     }
 }
+
+input[disabled] {
+    @apply cursor-not-allowed;
+}