feat: initial datalist

app/Livewire/Tags/Deployments.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Livewire\Tags;
+
+use App\Models\ApplicationDeploymentQueue;
+use Livewire\Component;
+
+class Deployments extends Component
+{
+    public $deployments_per_tag_per_server = [];
+    public $resource_ids = [];
+    public function render()
+    {
+        return view('livewire.tags.deployments');
+    }
+    public function get_deployments()
+    {
+        try {
+            $this->deployments_per_tag_per_server = ApplicationDeploymentQueue::whereIn("status", ["in_progress", "queued"])->whereIn('application_id', $this->resource_ids)->get([
+                "id",
+                "application_id",
+                "application_name",
+                "deployment_url",
+                "pull_request_id",
+                "server_name",
+                "server_id",
+                "status"
+            ])->sortBy('id')->groupBy('server_name')->toArray();
+        } catch (\Exception $e) {
+            return handleError($e, $this);
+        }
+    }
+}

app/Livewire/Tags/Index.php

@@ -20,32 +20,22 @@ class Index extends Component
     public $webhook = null;
     public $deployments_per_tag_per_server = [];
 
-    public function updatedTag()
+    public function tag_updated()
     {
+        if ($this->tag == "") {
+            return;
+        }
         $tag = $this->tags->where('name', $this->tag)->first();
+        if (!$tag) {
+            $this->dispatch('error', "Tag ({$this->tag}) not found.");
+            $this->tag = "";
+            return;
+        }
         $this->webhook = generatTagDeployWebhook($tag->name);
         $this->applications = $tag->applications()->get();
         $this->services = $tag->services()->get();
-        $this->get_deployments();
-    }
-    public function get_deployments()
-    {
-        try {
-            $resource_ids = $this->applications->pluck('id');
-            $this->deployments_per_tag_per_server = ApplicationDeploymentQueue::whereIn("status", ["in_progress", "queued"])->whereIn('application_id', $resource_ids)->get([
-                "id",
-                "application_id",
-                "application_name",
-                "deployment_url",
-                "pull_request_id",
-                "server_name",
-                "server_id",
-                "status"
-            ])->sortBy('id')->groupBy('server_name')->toArray();
-        } catch (\Exception $e) {
-            return handleError($e, $this);
-        }
     }
+
     public function redeploy_all()
     {
         try {
@@ -67,7 +57,7 @@ class Index extends Component
     {
         $this->tags = Tag::ownedByCurrentTeam()->get()->unique('name')->sortBy('name');
         if ($this->tag) {
-            $this->updatedTag();
+            $this->tag_updated();
         }
     }
     public function render()

app/View/Components/Forms/Datalist.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Components\Forms;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Str;
+use Illuminate\View\Component;
+use Visus\Cuid2\Cuid2;
+
+class Datalist extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public ?string $id = null,
+        public ?string $name = null,
+        public ?string $label = null,
+        public ?string $helper = null,
+        public bool    $required = false,
+        public string  $defaultClass = "input"
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        if (is_null($this->id)) $this->id = new Cuid2(7);
+        if (is_null($this->name)) $this->name = $this->id;
+
+        $this->label = Str::title($this->label);
+        return view('components.forms.datalist');
+    }
+}

resources/views/components/forms/datalist.blade.php

@@ -0,0 +1,44 @@
+<div class="w-full">
+    <label>
+        @if ($label)
+            {{ $label }}
+            @if ($required)
+                <x-highlighted text="*" />
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
+        @endif
+        <input list={{ $id }} {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
+            wire:dirty.class.remove='dark:text-white' wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled"
+            name={{ $id }}
+            @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif
+            @if ($attributes->whereStartsWith('onUpdate')->first()) wire:change={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:keydown.enter={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:blur={{ $attributes->whereStartsWith('onUpdate')->first() }} @else wire:change={{ $id }} wire:blur={{ $id }} wire:keydown.enter={{ $id }} @endif>
+        <datalist id={{ $id }}>
+            {{ $slot }}
+        </datalist>
+    </label>
+    @error($id)
+        <label class="label">
+            <span class="text-red-500 label-text-alt">{{ $message }}</span>
+        </label>
+    @enderror
+    {{-- <script>
+        const input = document.querySelector(`input[list={{ $id }}]`);
+        input.addEventListener('focus', function(e) {
+            const input = e.target.value;
+            const datalist = document.getElementById('{{ $id }}');
+            if (datalist.options) {
+                for (let option of datalist.options) {
+                    // change background color to red on all options
+                    option.style.display = "none";
+                    if (option.value.includes(input)) {
+                        option.style.display = "block";
+                    }
+
+
+                }
+            }
+        });
+    </script> --}}
+</div>

resources/views/livewire/tags/deployments.blade.php

@@ -0,0 +1,28 @@
+ <div wire:poll.1000ms="get_deployments" class="grid grid-cols-1">
+     @forelse ($deployments_per_tag_per_server as $server_name => $deployments)
+         <h4 class="py-4">{{ $server_name }}</h4>
+         <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
+             @foreach ($deployments as $deployment)
+                 <div @class([
+                     'box-without-bg dark:bg-coolgray-100 bg-white gap-2 cursor-pointer group border-l-2 border-dotted',
+                     'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
+                     'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
+                 ])>
+                     <a href="{{ data_get($deployment, 'deployment_url') }}">
+                         <div class="flex flex-col mx-6">
+                             <div class="box-title">
+                                 {{ data_get($deployment, 'application_name') }}
+                             </div>
+                             <div class="box-description">
+                                 {{ str(data_get($deployment, 'status'))->headline() }}
+                             </div>
+                         </div>
+                         <div class="flex-1"></div>
+                     </a>
+                 </div>
+             @endforeach
+         </div>
+     @empty
+         <div>No deployments running.</div>
+     @endforelse
+ </div>

resources/views/livewire/tags/index.blade.php

@@ -6,12 +6,11 @@
             @if ($tags->count() === 0)
                 <div>No tags yet defined yet. Go to a resource and add a tag there.</div>
             @else
-                <x-forms.select wire:model.live="tag">
+                <x-forms.datalist wire:model="tag" onUpdate='tag_updated'>
-                    <option value="null" disabled selected>Select a tag</option>
                     @foreach ($tags as $oneTag)
                         <option value="{{ $oneTag->name }}">{{ $oneTag->name }}</option>
                     @endforeach
-                </x-forms.select>
+                </x-forms.datalist>
                 @if ($tag)
                     <div class="pt-5">
                         <div class="flex items-end gap-2 ">
@@ -51,34 +50,7 @@
                                 <x-loading />
                             @endif
                         </div>
-                        <div wire:poll.1000ms="get_deployments" class="grid grid-cols-1">
+                        <livewire:tags.deployments :deployments_per_tag_per_server="$deployments_per_tag_per_server" :resource_ids="$applications->pluck('id')" />
-                            @forelse ($deployments_per_tag_per_server as $server_name => $deployments)
-                                <h4 class="py-4">{{ $server_name }}</h4>
-                                <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
-                                    @foreach ($deployments as $deployment)
-                                        <div @class([
-                                            'box-without-bg dark:bg-coolgray-100 bg-white gap-2 cursor-pointer group border-l-2 border-dotted',
-                                            'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
-                                            'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
-                                        ])>
-                                            <a href="{{ data_get($deployment, 'deployment_url') }}">
-                                                <div class="flex flex-col mx-6">
-                                                    <div class="box-title">
-                                                        {{ data_get($deployment, 'application_name') }}
-                                                    </div>
-                                                    <div class="box-description">
-                                                        {{ str(data_get($deployment, 'status'))->headline() }}
-                                                    </div>
-                                                </div>
-                                                <div class="flex-1"></div>
-                                            </a>
-                                        </div>
-                                    @endforeach
-                                </div>
-                            @empty
-                                <div>No deployments running.</div>
-                            @endforelse
-                        </div>
                     </div>
                 @endif
             @endif