dnd wip

app/Livewire/MapperLeft.php

@@ -8,7 +8,6 @@ use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
 use Filament\Schemas\Concerns\InteractsWithSchemas;
 use Filament\Schemas\Contracts\HasSchemas;
-use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Concerns\InteractsWithTable;
 use Filament\Tables\Contracts\HasTable;
 use Filament\Tables\Table;
@@ -25,14 +24,7 @@ class MapperLeft extends Component implements HasActions, HasSchemas, HasTable
         return $table
             ->query(Event::query())
             ->columns([
-                TextColumn::make('country.name')
+                MapperLeftColumn::make('left')->label('NUH-ODDS'),
-                    ->searchable()
-                    ->wrap()
-                    ->color('gray')
-                    ->label('Event')
-                    ->icon(fn ($record) => $record->country->icon)
-                    ->description(fn ($record) => $record->competition_group->name),
-                MapperLeftColumn::make('left')->label('NUH Events'),
             ])
             ->filters([
                 // ...

app/Livewire/MapperRight.php

@@ -8,7 +8,6 @@ use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
 use Filament\Schemas\Concerns\InteractsWithSchemas;
 use Filament\Schemas\Contracts\HasSchemas;
-use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Concerns\InteractsWithTable;
 use Filament\Tables\Contracts\HasTable;
 use Filament\Tables\Table;
@@ -25,14 +24,7 @@ class MapperRight extends Component implements HasActions, HasSchemas, HasTable
         return $table
             ->query(Mapper::query())
             ->columns([
-                MapperRightColumn::make('right'),
+                MapperRightColumn::make('right')->label('BETSAPI'),
-                // TextColumn::make('country_betsapi.name')
-                //     ->searchable()
-                //     ->wrap()
-                //     ->color('gray')
-                //     ->label('Event')
-                //     ->icon(fn ($record) => $record->country_betsapi->icon)
-                //     ->description(fn ($record) => $record->group),
             ])
             ->filters([
                 // ...

config/blade-flags.php

@@ -0,0 +1,57 @@
+<?php
+
+return [
+
+    /*
+    |-----------------------------------------------------------------
+    | Default Prefix
+    |-----------------------------------------------------------------
+    |
+    | This config option allows you to define a default prefix for
+    | your icons. The dash separator will be applied automatically
+    | to every icon name. It's required and needs to be unique.
+    |
+    */
+
+    'prefix' => 'flag',
+
+    /*
+    |-----------------------------------------------------------------
+    | Fallback Icon
+    |-----------------------------------------------------------------
+    |
+    | This config option allows you to define a fallback
+    | icon when an icon in this set cannot be found.
+    |
+    */
+
+    'fallback' => 'country-xx',
+
+    /*
+    |-----------------------------------------------------------------
+    | Default Set Classes
+    |-----------------------------------------------------------------
+    |
+    | This config option allows you to define some classes which
+    | will be applied by default to all icons within this set.
+    |
+    */
+
+    'class' => '',
+
+    /*
+    |-----------------------------------------------------------------
+    | Default Set Attributes
+    |-----------------------------------------------------------------
+    |
+    | This config option allows you to define some attributes which
+    | will be applied by default to all icons within this set.
+    |
+    */
+
+    'attributes' => [
+        // 'width' => 50,
+        // 'height' => 50,
+    ],
+
+];

resources/extra-countries/caf.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
-<svg width="590" height="545" viewBox="0 0 590 545" id="svg3996" version="1.1">
+<svg viewBox="0 0 590 545" id="svg3996" version="1.1">
     <defs id="defs3998">
         <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective4004" />
         <inkscape:perspective id="perspective3885" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d" />

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

@@ -1,8 +1,40 @@
-<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
+<li class="bg-white w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item"
-    <div x-sortable-handle x-sortable-item class="bg-white p-4 cursor-grab flex flex-row flex justify-between">
+    id={{ $record->id }}
-        <div class="basis-9/20 text-right">{{ $record->home->name }}</div>
+    x-on:dragstart.self="
-        <div class="basis-1/20 text-center">-</div>
+                    dragging = true;
-        <div class="basis-9/20">{{ $record->away->name }}</div>
+                    event.dataTransfer.effectAllowed = 'move';
-        <div class="basis-1/20"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" /></div>
+                    event.dataTransfer.setData('text/plain', event.target.id);
+                "
+    x-on:drop.prevent="
+                const id = event.dataTransfer.getData('text/plain');
+                const target = event.target.closest('ul');
+                const element = document.getElementById(id);
+                target.appendChild(element);
+            "
+    draggable="true">
+
+    <div class="w-6 flex-none mx-auto my-auto">
+        @if ($record->country->iso2)
+            <x-icon name="flag-country-{{ $record->country->iso2 }}" class="h5 w-5" />
+        @else
+            <x-icon name="{{ $record->country->icon }}" class="h5 w-5" />
+        @endif
+    </div>
+
+    <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>
+            <div class="w-6 text-center">-</div>
+            <div class="text-left font-bold">{{ $record->away->name }}</div>
+        </div>
+        <div class="flex justify-center space-x-4">
+            <div>{{ $record->country?->name }}</div>
+            <div>{{ $record->competition_group->name }}</div>
         </div>
     </div>
+
+    <div class="w-6 flex-none my-auto">
+        <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
+    </div>
+</li>

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

@@ -1,12 +1,42 @@
-<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
+<li class="w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item" id={{ $record->event_id }}
-    <div x-sortable-handle x-sortable-item class="bg-white p-2 cursor-grab grid grid-cols-10 grid-rows-2 gap-1">
+    x-on:dragstart.self="
-        <div class="row-span-2 text-left"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out"
+                    dragging = true;
-                class="my-auto" /></div>
+                    event.dataTransfer.effectAllowed = 'move';
-        <div class="col-span-4 text-right">{{ $record->home }}</div>
+                    event.dataTransfer.setData('text/plain', event.target.id);
-        <div class="text-center">-</div>
+                "
-        <div class="col-span-4">{{ $record->away }}</div>
+    x-on:drop.prevent="
-        <div><x-flag-country-at class="h5 w-5" /></div>
+                const id = event.dataTransfer.getData('text/plain');
-        <div class="col-span-8">{{ $record->country_betsapi?->name }}
+                const target = event.target.closest('ul');
-            {{ $record->group }}</div>
+                const element = document.getElementById(id);
+                target.appendChild(element);
+            "
+    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-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 }}</div>
+            <div class="w-6 text-center">-</div>
+            <div class="text-left font-bold">{{ $record->away }}</div>
+        </div>
+        <div class="flex justify-center space-x-4">
+            <div>{{ $record->country_betsapi?->name }}</div>
+            <div>{{ $record->group }}</div>
+        </div>
+
+    </div>
+
+    <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" />
+        @endif
+    </div>
+</li>

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

@@ -1,3 +1,10 @@
-<div>
+<ul class="drag-and-drop__items" :class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
+    x-on:drop.prevent="
+                const id = event.dataTransfer.getData('text/plain');
+                const target = event.target.closest('ul');
+                const element = document.getElementById(id);
+                alert(element)
+            "
+    x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
     {{ $this->table }}
-</div>
+</ul>

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

@@ -1,3 +1,6 @@
-<div>
+<div class="text-xs drag-and-drop-right" x-data>
+    <div class="drag-and-drop-right__items" x-on:drop="alert('right')" x-on:dragover.prevent="adding = true"
+        x-on:dragleave.prevent="adding = false">
         {{ $this->table }}
     </div>
+</div>

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

@@ -23,7 +23,7 @@
 
             {{-- Modal content --}}
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ adding: false, removing: false }">
                 <div>
                     @livewire('mapper-left')
                 </div>