wip

app/Livewire/MapChecker.php

@@ -19,6 +19,8 @@ class MapChecker extends Component implements HasActions, HasSchemas, HasTable
     use InteractsWithSchemas;
     use InteractsWithTable;
 
+    public $id = 0;
+
     public function table(Table $table): Table
     {
         return $table
@@ -54,4 +56,9 @@ class MapChecker extends Component implements HasActions, HasSchemas, HasTable
     {
         return view('livewire.map-checker');
     }
+
+    public function loadData($id)
+    {
+        $this->id = $id;
+    }
 }

app/Livewire/MapperLeft.php

@@ -26,6 +26,7 @@ class MapperLeft extends Component implements HasActions, HasSchemas, HasTable
             ->columns([
                 MapperLeftColumn::make('left')->label('NUH-ODDS'),
             ])
+            ->defaultPaginationPageOption(5)
             ->filters([
                 // ...
             ])

app/Livewire/MapperRight.php

@@ -26,6 +26,7 @@ class MapperRight extends Component implements HasActions, HasSchemas, HasTable
             ->columns([
                 MapperRightColumn::make('right')->label('BETSAPI'),
             ])
+            ->defaultPaginationPageOption(5)
             ->filters([
                 // ...
             ])

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

@@ -1,5 +1,5 @@
-<li class="bg-white w-full h-full overflow-hidden p-2 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-10 drag-and-drop__item"
-    id={{ $record->id }}
+    mapper="left" id={{ $record->id }}
     x-on:dragstart.self="
                     dragging = true;
                     event.dataTransfer.effectAllowed = 'move';
@@ -7,7 +7,7 @@
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
-        $dispatch('map-checker',{ 'id': id, 'target':target.id });"
+        console.log('left', id, target.id, target.getAttribute('mapper'));"
     draggable="true">
 
     <div class="w-6 flex-none mx-auto my-auto">
@@ -18,9 +18,7 @@
         @endif
     </div>
 
-    <div>{{ $record->id }}</div>
+    <div class="flex-1 flex flex-col justify-center space-y-0">
-
-    <div class="flex-1 flex flex-col justify-center space-y-1">
         <div class="flex justify-center text-primary-500">{{ $record->starttime }}</div>
         <div class="flex justify-center space-x-4">
             <div class="text-right font-bold">{{ $record->home->name }}</div>
@@ -30,6 +28,9 @@
         <div class="flex justify-center space-x-4">
             <div>{{ $record->country?->name }}</div>
             <div>{{ $record->competition_group->name }}</div>
+            <x-filament::badge>
+                {{ $record->id }}
+            </x-filament::badge>
         </div>
     </div>
 
@@ -37,3 +38,5 @@
         <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
     </div>
 </li>
+{{-- if(target.mapper =='left') --}}
+{{-- $dispatch('map-checker',{ 'id': id, 'target':target.id });" --}}

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

@@ -1,4 +1,5 @@
-<li class="w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item" id={{ $record->event_id }}
+<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"
+    mapper="right" id={{ $record->event_id }}
     x-on:dragstart.self="
                     dragging = true;
                     event.dataTransfer.effectAllowed = 'move';
@@ -7,16 +8,13 @@
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
-        $dispatch('map-checker',{ 'target': id, 'id':target.id });"
+        console.log('right', id, target.id, target.getAttribute('mapper'));"
     draggable="true">
 
     <div class="w-6 flex-none my-auto">
         <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
     </div>
-
+    <div class="flex-1 flex flex-col justify-center space-y-0">
-    <div>{{ $record->event_id }}</div>
-
-    <div class="flex-1 flex flex-col justify-center space-y-1">
         <div class="flex justify-center text-primary-500">
             {{ $record->starttime }}
         </div>
@@ -28,6 +26,9 @@
         <div class="flex justify-center space-x-4">
             <div>{{ $record->country_betsapi?->name }}</div>
             <div>{{ $record->group }}</div>
+            <x-filament::badge>
+                {{ $record->event_id }}
+            </x-filament::badge>
         </div>
 
     </div>
@@ -38,3 +39,5 @@
         @endif
     </div>
 </li>
+{{-- if(target.mapper =='right') --}}
+{{-- $dispatch('map-checker',{ 'target': id, 'id':target.id });" --}}

resources/views/livewire/mapper-left.blade.php

@@ -3,9 +3,3 @@
         {{ $this->table }}
     </ul>
 </div>
-{{-- 
-    x-on:drop.prevent="$dispatch('open-modal', { id: 'map-checker' });"
-    const id = event.dataTransfer.getData('text/plain');
-    const target = event.target.closest('li');
-    alert('origin: ' + id + ' target: ' + target.id); 
---}}