open modal from modal success

app/Livewire/MapChecker.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Livewire;
+
+use Filament\Actions\Concerns\InteractsWithActions;
+use Filament\Actions\Contracts\HasActions;
+use Filament\Schemas\Concerns\InteractsWithSchemas;
+use Filament\Schemas\Contracts\HasSchemas;
+use Filament\Tables\Columns\IconColumn;
+use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Concerns\InteractsWithTable;
+use Filament\Tables\Contracts\HasTable;
+use Filament\Tables\Table;
+use Livewire\Component;
+
+class MapChecker extends Component implements HasActions, HasSchemas, HasTable
+{
+    use InteractsWithActions;
+    use InteractsWithSchemas;
+    use InteractsWithTable;
+
+    public function table(Table $table): Table
+    {
+        return $table
+            ->records(fn (): array => [
+                1 => [
+                    'title' => 'First item',
+                    'slug' => 'first-item',
+                    'is_featured' => true,
+                ],
+                2 => [
+                    'title' => 'Second item',
+                    'slug' => 'second-item',
+                    'is_featured' => false,
+                ],
+                3 => [
+                    'title' => 'Third item',
+                    'slug' => 'third-item',
+                    'is_featured' => true,
+                ],
+            ])
+            ->columns([
+                TextColumn::make('title'),
+                TextColumn::make('slug'),
+                IconColumn::make('is_featured')
+                    ->boolean(),
+            ])
+            ->recordActions([
+                // ...
+            ]);
+    }
+
+    public function render()
+    {
+        return view('livewire.map-checker');
+    }
+}

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

@@ -3,14 +3,11 @@
     x-on:dragstart.self="
                     dragging = true;
                     event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text/plain', event.target.id);
-                "
+                    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);
-            "
+        const id = event.dataTransfer.getData('text/plain');
+        const target = event.target.closest('li');
+        $dispatch('map-checker',{ 'id': id, 'target':target.id });"
     draggable="true">
 
     <div class="w-6 flex-none mx-auto my-auto">
@@ -21,6 +18,8 @@
         @endif
     </div>
 
+    <div>{{ $record->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>
         <div class="flex justify-center space-x-4">

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

@@ -5,19 +5,17 @@
                     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);
-            "
+        const id = event.dataTransfer.getData('text/plain');
+        const target = event.target.closest('li');
+        $dispatch('map-checker',{ 'target': id, 'id':target.id });"
     draggable="true">
 
-
-
     <div class="w-6 flex-none my-auto">
         <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
     </div>
 
+    <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 }}

resources/views/livewire/map-checker.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{ $this->table }}
+</div>

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

@@ -1,10 +1,11 @@
-<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 }}
-</ul>
+<div>
+    <ul class="drag-and-drop__items" x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
+        {{ $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); 
+--}}

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

@@ -1,6 +1,5 @@
-<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">
+<div>
+    <ul class="drag-and-drop__items" x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
         {{ $this->table }}
-    </div>
+    </ul>
 </div>

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

@@ -1,7 +1,6 @@
 <div class="flex flex-1">
     @if ($this->current == 'filament.admin.resources.events.index')
 
-
         <x-filament::input.wrapper prefix-icon="{{ $sporticon }}" prefix-icon-color="primary" class="mx-4">
             <x-filament::input.select wire:model="sport_id" wire:change="swopSport">
                 @foreach ($sports as $id => $name)
@@ -21,8 +20,6 @@
                 Event Mapper
             </x-slot>
 
-            {{-- Modal content --}}
-
             <div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ adding: false, removing: false }">
                 <div>
                     @livewire('mapper-left')
@@ -31,9 +28,15 @@
                     @livewire('mapper-right')
                 </div>
             </div>
-
         </x-filament::modal>
 
+
+        {{-- START MAP CHECKER MODAL --}}
+        <x-filament::modal @map-checker.window="isOpen = true">
+            @livewire('map-checker')
+        </x-filament::modal>
+        {{-- END MAP CHECKER MODAL --}}
+
         <x-filament::dropdown class="mx-4">
             <x-slot name="trigger">
                 <x-filament::button outlined icon="heroicon-o-adjustments-horizontal" color="gray">