Fix Livewire BindingResolutionException: replace @this calls in pushed scripts with #[On] + Livewire.emit

- Add #[On] attributes to 5 Livewire component methods: - LayerManager::saveManualGeojson - ProjectForm::setLocation - ProjectMap::selectFeature (already had #[On]) - TaskForm::closeModal - TaskKanban::updateTaskStatus - Replace @this.method() in @push('scripts') with Livewire.emit() calls - Fix DataTable event payloads from objects {id: X} to scalars X for: - FeatureTable::map-select-feature - InspectionTable::map-view-inspection, edit-inspection, delete-inspection
2026-08-04 13:58:56 +02:00
parent f566d370be
commit 534d9f8eab
12 changed files with 164 additions and 82 deletions
@@ -5,6 +5,7 @@ namespace App\Livewire\Layers;
 use Livewire\Component;
 use Livewire\WithFileUploads;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use App\Models\Project;
 use App\Models\Phase;
 use App\Models\Layer;
@@ -251,6 +252,7 @@ class LayerManager extends Component

    // ── Save drawn GeoJSON ────────────────────────────────────────────────────

+    #[On('save-manual-geojson')]
    public function saveManualGeojson($geojsonString)
    {
        if (!$this->selectedLayer) {
@@ -69,15 +69,15 @@ class FeatureTable extends DataTableComponent
                  ->html(),

            Column::make('Acciones')
-                  ->label(fn ($row) =>
-                      '<div class="flex justify-end">
-                          <button wire:click="$dispatch(\'map-select-feature\', { id: ' . $row->id . ' })"
-                                  class="btn btn-xs btn-primary gap-1" title="Editar elemento">
-                              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
-                              Abrir
-                          </button>
-                      </div>')
-                  ->html(),
+                              ->label(fn ($row) =>
+                                  '<div class="flex justify-end">'
+                                      . '<button wire:click="$dispatch(\'map-select-feature\', ' . $row->id . ')"'
+                                              . 'class="btn btn-xs btn-primary gap-1" title="Editar elemento">'
+                                          . '<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>'
+                                          . 'Abrir'
+                                      . '</button>'
+                                  . '</div>')
+                              ->html(),
        ];
    }

@@ -85,21 +85,21 @@ class InspectionTable extends DataTableComponent
            Column::make('Acciones')
                              ->label(fn ($row) =>
                                  '<div class="flex justify-end gap-1">'
-                                      . '<button wire:click="$dispatch(\'map-view-inspection\', { id: ' . $row->id . ' })"'
+                                      . '<button wire:click="$dispatch(\'map-view-inspection\', ' . $row->id . ')"'
                                              . 'class="btn btn-xs btn-ghost" title="Ver inspección">'
                                          . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>'
                                      . '</button>'
                                      . '@can("edit inspections")'
-                                          . '<button wire:click="$dispatch(\'edit-inspection\', { id: ' . $row->id . ' })"'
+                                          . '<button wire:click="$dispatch(\'edit-inspection\', ' . $row->id . ')"'
                                                  . 'class="btn btn-xs btn-ghost" title="Editar inspección">'
                                              . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>'
                                          . '</button>'
                                      . '@endcan'
                                      . '@can("delete inspections")'
-                                          . '<button wire:click="$dispatch(\'delete-inspection\', { id: ' . $row->id . ' })"'
+                                          . '<button wire:click="$dispatch(\'delete-inspection\', ' . $row->id . ')"'
                                                  . 'class="btn btn-xs btn-ghost btn-error" title="Eliminar inspección"'
                                                  . 'onclick="return confirm(\'¿Eliminar esta inspección? No se puede deshacer.\');">'
-                                              . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>'
+                                              . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/></svg>'
                                          . '</button>'
                                      . '@endcan'
                                  . '</div>')
@@ -111,15 +111,15 @@ class InspectionTable extends DataTableComponent
    {
        $images = $row->media->where('category', 'image')->values();
        $count = $images->count();
-        
+
        if ($count === 0) {
            return '<span class="text-base-content/30 text-xs">—</span>';
        }

-        $thumbnails = $images->take(3)->map(fn ($m) => 
-            '<a href="' . $m->url . '" target="_blank" class="inline-block mr-1">
-                <img src="' . $m->url . '" class="w-8 h-8 object-cover rounded border border-base-300" alt="' . e($m->name) . '" loading="lazy" />
-            </a>'
+        $thumbnails = $images->take(3)->map(fn ($m) =>
+            '<a href="' . $m->url . '" target="_blank" class="inline-block mr-1">'
+                . '<img src="' . $m->url . '" class="w-8 h-8 object-cover rounded border border-base-300" alt="' . e($m->name) . '" loading="lazy" />'
+            . '</a>'
        )->implode('');

        $more = $count > 3 ? '<span class="text-xs text-base-content/50 ml-1">+' . ($count - 3) . '</span>' : '';
@@ -154,4 +154,4 @@ class InspectionTable extends DataTableComponent
                ->filter(fn (Builder $query, string $value) => $query->where('inspections.user_id', $value)),
        ];
    }
-}
+}
@@ -4,6 +4,7 @@ namespace App\Livewire\Projects;

 use Livewire\Component;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use App\Models\Project;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Gate;
@@ -49,6 +50,8 @@ class ProjectForm extends Component
    }

    // Called from JS after map click / marker drag + reverse geocode
+
+    #[On('set-location')]
    public function setLocation(string $lat, string $lng, string $address = '', string $country = ''): void
    {
        $this->lat = $lat;
@@ -8,6 +8,7 @@ use App\Models\User;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Str;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithFileUploads;
@@ -171,6 +172,7 @@ class TaskForm extends Component
        $this->closeModal();
    }

+    #[On('close-modal')]
    public function closeModal(): void
    {
        $this->showModal = false;
@@ -63,6 +63,7 @@ class TaskKanban extends Component
        // Trigger re-render
    }

+    #[On('update-task-status')]
    public function updateTaskStatus(Task $task, string $status): void
    {
        abort_unless(Auth::user()->can('update', $task), 403);
@@ -199,7 +199,7 @@
            features: features,
            style: { color: allLayersData[currentEditableLayerId]?.color || '#3b82f6' }
        };
-        @this.saveManualGeojson(JSON.stringify(finalGeojson));
+        Livewire.emit('save-manual-geojson', JSON.stringify(finalGeojson));
    }

    // Eventos Livewire
@@ -1,61 +1,135 @@
-<div class="max-w-5xl mx-auto">
-    <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
-        <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
-    </a>

-    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
-        <div>
-            <h1 class="text-xl font-bold">Elementos del proyecto</h1>
-            <p class="text-sm text-base-content/60">{{ $project->name }} · editar nombre, tipo, activar/desactivar o eliminar</p>
-        </div>
-        <a href="{{ route('feature-types') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
-            <x-heroicon-o-tag class="w-4 h-4" /> Tipos de elemento
-        </a>
-    </div>
-
-    <livewire:projects.project-features-table :project-id="$project->id" :key="'pft-'.$project->id" />
-
-    {{-- Modal editar elemento --}}
-    @if($showForm)
-        <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
-                <div class="flex items-center justify-between p-4 border-b border-base-300">
-                    <h3 class="font-bold">Editar elemento</h3>
-                    <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
-                </div>
-                <form wire:submit.prevent="save" class="p-4 space-y-3">
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
-                        <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" />
-                        @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
-                    </div>
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">Tipo de elemento</span></label>
-                        <select wire:model="featureTypeId" class="select select-bordered w-full">
-                            <option value="">Sin tipo</option>
-                            @foreach($featureTypes as $ft)
-                                <option value="{{ $ft->id }}">{{ $ft->name }}</option>
-                            @endforeach
-                        </select>
-                        @if($featureTypes->isEmpty())
-                            <span class="text-xs text-base-content/50 mt-1">No hay tipos.
-                                <a href="{{ route('feature-types') }}" wire:navigate class="link link-primary">Crear tipos</a>
-                            </span>
-                        @endif
-                    </div>
-                    <div class="form-control">
-                        <label class="flex items-center gap-2 cursor-pointer">
-                            <input type="checkbox" wire:model="isActive" class="toggle toggle-success toggle-sm" />
-                            <span class="label-text">Activo</span>
-                        </label>
-                    </div>
-                    <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
-                        <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
-                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
-                    </div>
-                </form>
+<x-slot name="header">
+    <div class="flex items-center justify-between">
+        {{-- Izquierda: avatar + datos --}}
+        <div class="flex items-center gap-4">
+            {{-- Avatar --}}
+            <div>
+                <h2 class="font-bold text-xl leading-tight">{{ $project->name }}</h2>
+                @if($project->description)
+                    <p class="text-sm text-gray-500 leading-tight mt-0.5">{{ Str::limit($project->description, 80) }}</p>
+                @endif
            </div>
        </div>
-    @endif
+        
+        {{-- Derecha: estado + botones --}}
+        <div class="flex flex-col items-end gap-2">
+            <div class="flex items-center gap-2">
+                <a href="{{ route('projects.list') }}" class="btn btn-ghost btn-sm px-2">
+                    <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
+                </a>
+                {{-- Estado --}}
+                @php
+                    $statusCfg = match($project->status) {
+                        'in_progress' => ['badge-primary',  'En progreso'],
+                        'completed'   => ['badge-success',  'Completado'],
+                        'paused'      => ['badge-warning',  'Pausado'],
+                        'planning'    => ['badge-ghost',    'Planificación'],
+                        default       => ['badge-ghost',    ucfirst(str_replace('_',' ',$project->status))],
+                    };
+                @endphp
+                <span class="badge {{ $statusCfg[0] }} badge-sm">{{ $statusCfg[1] }}</span>
+            </div>
+            {{-- Botones --}}
+            <div class="flex gap-2 mt-1">
+                <a href="{{ route('projects.map', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-map class="w-4 h-4" />
+                    Mapa
+                </a>
+                @can('edit layers')
+                    <a href="{{ route('projects.features', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-cube class="w-4 h-4" />
+                        Elementos
+                    </a>
+                @endcan
+                @can('edit projects')
+                    <a href="{{ route('projects.templates', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
+                        Plantillas
+                    </a>
+                @endcan
+                <a href="{{ route('projects.gantt', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-calendar-days class="w-4 h-4" />
+                    Gantt
+                </a>
+                <a href="{{ route('projects.issues', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-exclamation-triangle class="w-4 h-4" />
+                    Issues
+                </a>
+                @can('view tasks')
+                    <a href="{{ route('projects.tasks', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
+                        Tareas
+                    </a>
+                @endcan
+            </div>
+        </div>
+    </div>
+</x-slot>
+
+<div class="py-6">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
+            <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
+        </a>
+
+        <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
+            <div>
+                <h1 class="text-xl font-bold">Elementos del proyecto</h1>
+                <p class="text-sm text-base-content/60">{{ $project->name }} · editar nombre, tipo, activar/desactivar o eliminar</p>
+            </div>
+            <a href="{{ route('feature-types') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
+                <x-heroicon-o-tag class="w-4 h-4" /> Tipos de elemento
+            </a>
+        </div>
+
+        <div class="bg-white rounded-xl shadow p-6">
+            <livewire:projects.project-features-table :project-id="$project->id" :key="'pft-'.$project->id" />
+        </div>
+    </div>
 </div>
+
+{{-- Modal editar elemento --}}
+@if($showForm)
+    <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
+            <div class="flex items-center justify-between p-4 border-b border-base-300">
+                <h3 class="font-bold">Editar elemento</h3>
+                <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
+            </div>
+            <form wire:submit.prevent="save" class="p-4 space-y-3">
+                <div class="form-control">
+                    <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
+                    <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" />
+                    @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
+                </div>
+                <div class="form-control">
+                    <label class="label"><span class="label-text font-medium">Tipo de elemento</span></label>
+                    <select wire:model="featureTypeId" class="select select-bordered w-full">
+                        <option value="">Sin tipo</option>
+                        @foreach($featureTypes as $ft)
+                            <option value="{{ $ft->id }}">{{ $ft->name }}</option>
+                        @endforeach
+                    </select>
+                    @if($featureTypes->isEmpty())
+                        <span class="text-xs text-base-content/50 mt-1">No hay tipos.
+                            <a href="{{ route('feature-types') }}" wire:navigate class="link link-primary">Crear tipos</a>
+                        </span>
+                    @endif
+                </div>
+                <div class="form-control">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" wire:model="isActive" class="toggle toggle-success toggle-sm" />
+                        <span class="label-text">Activo</span>
+                    </label>
+                </div>
+                <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
+                    <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
+                    <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endif
+
@@ -70,7 +70,7 @@
                    country = (d.address && d.address.country_code) ? d.address.country_code : '';
                }
            } catch (e) { /* geocoding optional */ }
-            @this.setLocation(String(lat), String(lng), address, country);
+            Livewire.emit('set-location', String(lat), String(lng), address, country);
            setStatus('');
        }

@@ -86,7 +86,7 @@
                    placeMarker(lat, lng);
                    const address = arr[0].display_name || '';
                    const country = (arr[0].address && arr[0].address.country_code) ? arr[0].address.country_code : '';
-                    @this.setLocation(String(lat), String(lng), address, country);
+                    Livewire.emit('set-location', String(lat), String(lng), address, country);
                    setStatus('');
                } else {
                    setStatus('{{ __('No results') }}');
@@ -725,7 +725,7 @@
        }

        function selectFeature(featureId) {
-            @this.selectFeature(featureId);
+            Livewire.emit('map-select-feature', featureId);
        }

        function getUserLocation() {
@@ -170,7 +170,7 @@
    // Close modal on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
-            @this.call('closeModal');
+            Livewire.emit('close-modal');
        }
    });
 </script>
@@ -234,7 +234,7 @@

                if (taskId && this.draggedFromStatus !== targetStatus) {
                    // Call Livewire to update status
-                    @this.call('updateTaskStatus', taskId, targetStatus);
+                    Livewire.emit('update-task-status', taskId, targetStatus);
                }
            },
        };