From 1c92e1a2e2bedbad2adc03f382e568891e8a3521 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 4 Nov 2024 23:55:44 +0100
Subject: [PATCH] Add error handling via tooltip

---
 app/View/Form/Select.php |  1 +
 app/View/Form/Text.php   |  1 +
 app/View/Ui/Errors.php   | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 app/View/Ui/Errors.php

diff --git a/app/View/Form/Select.php b/app/View/Form/Select.php
index 89db5bfd..45317eaf 100644
--- a/app/View/Form/Select.php
+++ b/app/View/Form/Select.php
@@ -47,6 +47,7 @@ class Select extends Component
                         <option value="{{$option['id']}}">{{ $option['name'] }}</option>
                         @endforeach
                     </select>
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint class="right-6">{{$hint}}</x-form::hint>
                     @endif
diff --git a/app/View/Form/Text.php b/app/View/Form/Text.php
index 6a723534..3cacb3ad 100644
--- a/app/View/Form/Text.php
+++ b/app/View/Form/Text.php
@@ -44,6 +44,7 @@ class Text extends Component
                         "
                         {{ $attributes }}
                     />
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint>{{$hint}}</x-form::hint>
                     @endif
diff --git a/app/View/Ui/Errors.php b/app/View/Ui/Errors.php
new file mode 100644
index 00000000..998e9ba4
--- /dev/null
+++ b/app/View/Ui/Errors.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Ui;
+
+use Illuminate\View\Component;
+
+class Errors extends Component
+{
+
+    public function __construct(
+        public string $for,
+    ) {
+    }
+
+    public function id(): string
+    {
+        return 'errors-' . str_replace('.', '--', $this->for);
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            @error($for)
+            <div x-data="{error: ''}" x-init="window.setTimeout(() => document.querySelector('#{{$id()}}') ? document.querySelector('#{{$id()}}').remove() : null, 2000)" class="absolute bottom-[calc(100%+0.5rem)] right-0" id="{{$id}}">
+                <div class="tippy-box" tabindex="-1" data-theme="danger" data-placement="top">
+                    <div class="tippy-content">{{$message}}</div>
+                    <div class="tippy-arrow absolute right-0 mr-2"></div>
+                </div>
+            </div>
+            @enderror
+        HTML;
+    }
+}