From f44329b508be48fab90943085fefaa1c042c8540 Mon Sep 17 00:00:00 2001
From: guillaume91 <guillaume@sobit.nl>
Date: Tue, 28 May 2024 16:59:35 +0200
Subject: [PATCH] wip badge

---
 laravel_app/app/Livewire/Components/Badge.php | 33 +++++++++++++++++++
 .../views/livewire/components/badge.blade.php | 11 +++++++
 2 files changed, 44 insertions(+)
 create mode 100644 laravel_app/app/Livewire/Components/Badge.php
 create mode 100644 laravel_app/resources/views/livewire/components/badge.blade.php

diff --git a/laravel_app/app/Livewire/Components/Badge.php b/laravel_app/app/Livewire/Components/Badge.php
new file mode 100644
index 0000000..89e9401
--- /dev/null
+++ b/laravel_app/app/Livewire/Components/Badge.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Livewire\Components;
+
+use App\Enums\Status;
+use Livewire\Component;
+
+class Badge extends Component
+{
+    public array $colorClasses;
+    public $status;
+    public $type;
+    public int $id;
+    public $listeners = [
+        'Badge:refresh' => '$refresh',
+    ];
+
+    public function mount(string $status = null, $id = 0,$type = null)
+    {
+        $this->type = $type;
+        $this->id ??= $id ;
+        $this->status = Status::tryFrom($status) ?? Status::Success;
+        $this->colorClasses = match($this->status) {
+            Status::Success => ['bg' => 'bg-green-100', 'text' => 'text-green-700'],
+            Status::Failed => ['bg' => 'bg-red-100', 'text' => 'text-red-700'],
+            Status::Pending => ['bg' => 'bg-gray-100', 'text' => 'text-gray-600'],
+        };
+    }
+    public function render()
+    {
+        return view('livewire.components.badge');
+    }
+}
diff --git a/laravel_app/resources/views/livewire/components/badge.blade.php b/laravel_app/resources/views/livewire/components/badge.blade.php
new file mode 100644
index 0000000..30cdd14
--- /dev/null
+++ b/laravel_app/resources/views/livewire/components/badge.blade.php
@@ -0,0 +1,11 @@
+<span  class="inline-flex items-center rounded-md {{ $colorClasses['bg'] }} px-1.5 py-0.5 text-xs font-medium {{ $colorClasses['text'] }}"
+      @if($this->type)
+          x-init="Echo.private(`{{$this->type}}.@js($id)`).listen('Project{{ucfirst($this->type)}}Status', (e) => {
+                                                console.log(e.project{{ucfirst($this->type)}}.status);
+                                                $wire.dispatch('Badge:refresh');
+                                            });"
+      x-destroy="Echo.leaveChannel(`{{$this->type}}.@js($id)`);"
+      @endif
+>
+    {{ $status }}
+</span>