mapping search wip (stuck)

resources/css/filament/admin/theme.css

@@ -30,4 +30,23 @@ button[wire\:click="resetTableFiltersForm"] {
 .fi-ta-header-cell-oddsdc,
 .fi-ta-header-cell-id {
     @apply !text-center
+}
+
+
+#mapper {
+    @layer components {
+        .fi-ta-ctn {
+            & .fi-ta-header-toolbar {
+                @apply !flex-row-reverse;
+                flex-wrap: inherit;
+            }
+        }
+
+        .fi-pagination {
+            & .fi-pagination-overview {
+                display: block;
+                font-size: 11px;
+            }
+        }
+    }
 }

resources/views/filament/tables/columns/mapper-left-column.blade.php

@@ -1,11 +1,11 @@
-<li class="bg-white dark:bg-gray-900  w-full h-full overflow-hidden p-1 cursor-grab flex space-x-10 drag-and-drop__item"
+<li class="bg-white dark:bg-gray-900  w-full h-full overflow-hidden p-1 cursor-grab flex space-x-4 drag-and-drop__item"
     x-data="{ moveoverleft: false }" id={{ $record->id }}
     x-on:dragstart.self="
         dragging = true;
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/plain', event.target.id);"
     x-on:dragover.prevent="moveoverleft = true" x-on:dragleave.prevent="moveoverleft = false"
-    x-on:drop="moveoverleft = false" :class="moveoverleft ? 'bg-green-500/10!' : ''"
+    x-on:drop="moveoverleft = false" :class="moveoverleft ? 'bg-primary-500/20!' : ''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
@@ -13,14 +13,19 @@
         $wire.mountAction('left', { event_id: id, match_id: target.id });"
     draggable="true" mapper="left">
 
-    <div class="w-6 flex-none mx-auto my-auto">
-        @if ($record->country->iso2)
+    <div class="w-10 flex-none mx-auto my-auto">
+        @if ($record->country?->iso2)
             <x-icon name="flag-country-{{ $record->country->iso2 }}" class="h5 w-5" />
-        @else
+        @elseif($record->country?->icon)
             <x-icon name="{{ $record->country->icon }}" class="h5 w-5" />
         @endif
     </div>
 
+    @include('filament.tables.columns.parts.search-button', [
+        'target' => 'input-2',
+        'find' => $record->home->name,
+    ])
+
     <div class="flex-1 flex flex-col justify-center space-y-0">
         <div class="flex justify-around text-gray-600 dark:text-gray-500">
             <div>{{ $record->starttime }}</div>
@@ -38,7 +43,11 @@
 
     </div>
 
-    <div class="w-6 flex-none my-auto">
-        <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
-    </div>
+    @include('filament.tables.columns.parts.search-button', [
+        'target' => 'input-2',
+        'find' => $record->away->name,
+    ])
+
+    @include('filament.tables.columns.parts.move-botton')
+
 </li>

resources/views/filament/tables/columns/mapper-right-column.blade.php

@@ -1,24 +1,26 @@
 <li class="bg-white dark:bg-gray-900 w-full h-full overflow-hidden p-1 cursor-grab flex
-    space-x-10 drag-and-drop__item"
+    space-x-4 drag-and-drop__item"
     x-data="{ moveoverright: false }" id={{ $record->event_id }}
     x-on:dragstart.self="
         dragging = true;
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/plain', event.target.id);"
     x-on:dragover.prevent="moveoverright = true" x-on:dragleave.prevent="moveoverright = false"
-    x-on:drop="moveoverright = false" :class="moveoverright ? 'bg-blue-500/10!' : ''"
+    x-on:drop="moveoverright = false" :class="moveoverright ? 'bg-primary-500/20!' : ''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
         if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
         $wire.mountAction('right', { match_id: id, event_id: target.id });"
     draggable="true" mapper="right">
-    {{-- console.log(document.getElementById(id).getAttribute('mapper'), id, target.id, target.getAttribute('mapper'));" --}}
-    {{-- $dispatch('map-checker', { match_id: id, event_id:target.id });" --}}
 
-    <div class="w-6 flex-none my-auto">
-        <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
-    </div>
+    @include('filament.tables.columns.parts.move-botton')
+
+    @include('filament.tables.columns.parts.search-button', [
+        'target' => 'input-1',
+        'find' => $record->home,
+    ])
+
     <div class="flex-1 flex flex-col justify-center space-y-0">
         <div class="flex justify-around text-gray-600 dark:text-gray-500">
             <div>{{ $record->starttime }}</div>
@@ -35,6 +37,11 @@
         </div>
     </div>
 
+    @include('filament.tables.columns.parts.search-button', [
+        'target' => 'input-1',
+        'find' => $record->away,
+    ])
+
     <div class="w-6 flex-none mx-auto my-auto">
         @if ($record->group_cc)
             <x-icon name="flag-country-{{ $record->group_cc }}" class="h5 w-5" />

resources/views/filament/tables/columns/parts/move-botton.blade.php

@@ -0,0 +1,3 @@
+<div class="my-auto">
+    <x-filament::button icon="heroicon-o-arrows-pointing-out" outlined size="xs" />
+</div>

resources/views/filament/tables/columns/parts/search-button.blade.php

@@ -0,0 +1,5 @@
+<div class="my-auto">
+    <x-filament::button icon="phosphor-magnifying-glass" color="gray" size="xs"
+        x-on:click="document.getElementById('{{ $target }}').focus();
+                    document.getElementById('{{ $target }}').value = '{{ $find }}';" />
+</div>

resources/views/livewire/top-menu-items.blade.php

@@ -31,7 +31,7 @@
                 </div>
             </x-slot>
 
-            <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ event_id: 0, match_id: 0, overleftcolumn: false, overrightcolumn: false }">
+            <div id="mapper" class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ event_id: 0, match_id: 0, overleftcolumn: false, overrightcolumn: false }">
                 <div>
                     @livewire('mapper-left')
                 </div>