error badge on validation errors

vildanbina · Feb 27, 2022 · de1d6b5 · de1d6b5
1 parent 4bb78d3
commit de1d6b5
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/resources/views/step-header.blade.php b/resources/views/step-header.blade.php
@@ -1,16 +1,30 @@
+@php
+    $isStepValid = $stepInstance->isValid();
+    $isFailedStep = $stepInstance->validationFails;
+    $stepIsGreaterOrEqualThan = $this->stepIsGreaterOrEqualThan($stepInstance->getOrder());
+@endphp
 <div class="w-1/3">
     <div class="relative mb-2">
         @if(!$loop->first)
             <div class="absolute" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                 <div class="bg-gray-200 rounded flex-1">
-                    <div class="bg-green-300 rounded py-1 w-{{ $this->stepIsGreaterOrEqualThan($stepInstance->getOrder()) ? 'full' : '0' }}"></div>
+                    <div
+                        @class([
+                            'rounded py-1',
+                            'bg-green-300' => $stepIsGreaterOrEqualThan && !$isFailedStep,
+                            'bg-red-300' => $isFailedStep,
+                            'w-full' => $isFailedStep || $stepIsGreaterOrEqualThan,
+                            'w-0' =>  !($isFailedStep || $stepIsGreaterOrEqualThan)
+                        ])
+                    ></div>
                 </div>
             </div>
         @endif
 
         <div class="w-10 mx-auto">
             <x-button.circle
-                :positive="$this->stepIsGreaterOrEqualThan($stepInstance->getOrder())"
+                :positive="$stepIsGreaterOrEqualThan && !$isFailedStep"
+                :negative="$isFailedStep"
                 wire:click="setStep({{ $stepInstance->getOrder() }})"
                 icon="{{ $stepInstance->icon() }}"
             />

diff --git a/resources/views/step-icon.blade.php b/resources/views/step-icon.blade.php
diff --git a/src/Components/Step.php b/src/Components/Step.php
@@ -18,6 +18,7 @@ abstract class Step extends ViewComponent implements Htmlable
     public ?int $order = null;
     public null|array|Model $model = null;
     protected string $view;
+    public bool $validationFails = false;
 
     public function __construct(WizardForm $livewire)
     {

diff --git a/src/Concerns/HasSteps.php b/src/Concerns/HasSteps.php
@@ -36,6 +36,7 @@ public function setStep($step): void
         if ($this->hasPrevStep($step)) {
             $this->stepsValidation($this->prevStep($step));
         }
+
         $this->getCurrentStep()->callHook('onStepOut');
 
         $this->activeStep = $step;

diff --git a/src/WizardComponent.php b/src/WizardComponent.php
@@ -189,6 +189,7 @@ protected function stepsValidation($step = null): void
 
             if (method_exists($stepInstance, 'validate') && $stepInstance->getOrder() <= $step) {
                 $stepValidate = $stepInstance->validate();
+                $stepInstance->validationFails = !$stepInstance->isValid();
 
                 $rules      = array_merge($rules, $stepValidate[0] ?? []);
                 $messages   = array_merge($messages, $stepValidate[1] ?? []);