feat(events): add color picker to appointment editor

frontend/components/ColorInput.vue

@@ -0,0 +1,57 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: 'Farbe'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const pickerValue = computed(() => {
+  const value = props.modelValue?.trim() || ''
+  if (/^#[\da-f]{6}$/i.test(value)) return value
+  if (/^#[\da-f]{3}$/i.test(value)) {
+    return `#${value.slice(1).split('').map(character => character.repeat(2)).join('')}`
+  }
+  return '#2563eb'
+})
+</script>
+
+<template>
+  <InputGroup class="w-full">
+    <input
+        type="color"
+        :value="pickerValue"
+        :disabled="disabled"
+        :aria-label="`${label} auswählen`"
+        class="h-9 w-14 shrink-0 cursor-pointer rounded border border-default bg-transparent p-1 disabled:cursor-not-allowed disabled:opacity-50"
+        @input="emit('update:modelValue', $event.target.value)"
+    >
+    <UInput
+        :model-value="modelValue"
+        :disabled="disabled"
+        :aria-label="`${label} als Farbwert`"
+        class="min-w-0 flex-1"
+        placeholder="Standardfarbe"
+        @update:model-value="emit('update:modelValue', $event || null)"
+    />
+    <UButton
+        type="button"
+        :disabled="disabled || !modelValue"
+        :aria-label="`${label} zurücksetzen`"
+        variant="outline"
+        color="neutral"
+        icon="i-heroicons-x-mark"
+        @click="emit('update:modelValue', null)"
+    />
+  </InputGroup>
+</template>

frontend/components/EntityEdit.vue

@@ -586,7 +586,14 @@ const updateItem = async () => {
                     :item="item"
                 />
               </template>
-              <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
+              <ColorInput
+                  v-if="datapoint.inputType === 'color'"
+                  :model-value="getDatapointValue(datapoint)"
+                  :label="datapoint.label"
+                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  @update:model-value="(value) => setDatapointValue(datapoint, value)"
+              />
+              <InputGroup class="w-full" v-else-if="datapoint.key.includes('.')">
                 <UInput
                     :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
@@ -833,7 +840,14 @@ const updateItem = async () => {
               :item="item"
           />
         </template>
-        <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
+        <ColorInput
+            v-if="datapoint.inputType === 'color'"
+            :model-value="getDatapointValue(datapoint)"
+            :label="datapoint.label"
+            :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+            @update:model-value="(value) => setDatapointValue(datapoint, value)"
+        />
+        <InputGroup class="w-full" v-else-if="datapoint.key.includes('.')">
           <UInput
               :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"