Signature: fix show validation error (#419)

Show validation error messages
robsontenorio · May 8, 2024 · 9d190c3 · 9d190c3
1 parent 0ca95a7
commit 9d190c3
Showing 1 changed file with 63 additions and 47 deletions.
diff --git a/src/View/Components/Signature.php b/src/View/Components/Signature.php
@@ -18,6 +18,9 @@ public function __construct(
 
         // Validations
         public ?string $errorClass = 'text-red-500 label-text-alt p-1',
+        public ?string $errorField = null,
+        public ?bool $omitError = false,
+        public ?bool $firstErrorOnly = false,
 
     ) {
         $this->uuid = "mary" . md5(serialize($this));
@@ -28,6 +31,11 @@ public function modelName(): ?string
         return $this->attributes->whereStartsWith('wire:model')->first();
     }
 
+    public function errorFieldName(): ?string
+    {
+        return $this->errorField ?? $this->modelName();
+    }
+
     public function setup(): string
     {
         return json_encode(array_merge([
@@ -38,58 +46,66 @@ public function setup(): string
     public function render(): View|Closure|string
     {
         return <<<'HTML'
-                <div
-                    x-data="{
-                        value: @entangle($attributes->wire('model')),
-                        signature: null,
-                        init() {
-                            let canvas = document.getElementById('{{ $uuid }}signature')
-                            this.signature = new SignaturePad(canvas, {{ $setup() }});
-
-                            // Resize
-                            const ratio = Math.max(window.devicePixelRatio || 1, 1);
-                            canvas.width = canvas.offsetWidth * ratio;
-                            canvas.height = canvas.offsetHeight * ratio;
-                            canvas.getContext('2d').scale(ratio, ratio);
-                            this.signature.fromData(this.signature.toData());
-
-                            // Event
-                            this.signature.addEventListener('endStroke', () =>  this.extract() );
-                        },
-                        extract() {
-                            this.value = this.signature.toDataURL();
-                        },
-                        clear() {
-                            this.signature.clear();
-                            this.extract();
-                        }
-                     }"
-
-                     wire:ignore
-                     class="select-none touch-none block"
-                >
+                <div>
                     <div
-                        {{
-                            $attributes
-                                ->except("wire:model")
-                                ->class([
-                                    "border border-primary rounded-lg relative bg-white select-none touch-none block",
-                                    "!border-error" => $errors->has($modelName())
-                                ])
-                        }}
-                    }>
-                        <canvas id="{{ $uuid }}signature" height="{{ $height }}" class="rounded-lg block w-full select-none touch-none"></canvas>
-
-                        <!-- CLEAR BUTTON -->
-                        <div class="absolute right-2 top-1/2 -translate-y-1/2 ">
-                            <x-mary-button icon="o-backspace" :label="$clearText" @click="clear" class="btn-sm btn-ghost text-neutral" />
+                        x-data="{
+                            value: @entangle($attributes->wire('model')),
+                            signature: null,
+                            init() {
+                                let canvas = document.getElementById('{{ $uuid }}signature')
+                                this.signature = new SignaturePad(canvas, {{ $setup() }});
+
+                                // Resize
+                                const ratio = Math.max(window.devicePixelRatio || 1, 1);
+                                canvas.width = canvas.offsetWidth * ratio;
+                                canvas.height = canvas.offsetHeight * ratio;
+                                canvas.getContext('2d').scale(ratio, ratio);
+                                this.signature.fromData(this.signature.toData());
+
+                                // Event
+                                this.signature.addEventListener('endStroke', () =>  this.extract() );
+                            },
+                            extract() {
+                                this.value = this.signature.toDataURL();
+                            },
+                            clear() {
+                                this.signature.clear();
+                                this.extract();
+                            }
+                         }"
+
+                         wire:ignore
+                         class="select-none touch-none block"
+                    >
+                        <div
+                            {{
+                                $attributes
+                                    ->except("wire:model")
+                                    ->class([
+                                        "border border-primary rounded-lg relative bg-white select-none touch-none block",
+                                        "!border-error" => $errors->has($modelName())
+                                    ])
+                            }}
+                        }>
+                            <canvas id="{{ $uuid }}signature" height="{{ $height }}" class="rounded-lg block w-full select-none touch-none"></canvas>
+
+                            <!-- CLEAR BUTTON -->
+                            <div class="absolute right-2 top-1/2 -translate-y-1/2 ">
+                                <x-mary-button icon="o-backspace" :label="$clearText" @click="clear" class="btn-sm btn-ghost text-neutral" />
+                            </div>
                         </div>
                     </div>
 
                     <!-- ERROR -->
-                    @error($modelName())
-                        <div class="{{ $errorClass }}" x-classes="text-red-500 label-text-alt p-1">{{ $message }}</div>
-                    @enderror
+                    @if(!$omitError && $errors->has($errorFieldName()))
+                        @foreach($errors->get($errorFieldName()) as $message)
+                            @foreach(Arr::wrap($message) as $line)
+                                <div class="{{ $errorClass }}" x-classes="text-red-500 label-text-alt p-1">{{ $line }}</div>
+                                @break($firstErrorOnly)
+                            @endforeach
+                            @break($firstErrorOnly)
+                        @endforeach
+                    @endif
 
                     <!-- HINT -->
                     @if($hint)