From 9305cd6eb25923f7a597733e2d6a689adc0f11e6 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:04:48 -0500
Subject: [PATCH] fix: drag-and-drop en tablero de tareas (SortableJS + Alpine
 x-for)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SortableJS mueve el nodo DOM físicamente antes de que Alpine re-renderice,
causando conflicto: la tarjeta desaparecía o volvía a su columna original.
Se revierte el movimiento DOM de SortableJS en onEnd y se deja que Alpine
re-renderice solo al actualizar t.estado; luego se re-inicia Sortable.
Se agrega cursor grab/grabbing como indicador visual de arrastre.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/tareas.html | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/resources/views/tareas.html b/resources/views/tareas.html
index 6aba72f..9779705 100644
--- a/resources/views/tareas.html
+++ b/resources/views/tareas.html
@@ -69,7 +69,7 @@
           data-estado="">
           <template x-for="t in tareasFiltradas(col.id)" :key="t.ID">
             <div :data-id="t.ID" @click="abrirDetalle(t)"
-              class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 cursor-pointer hover:shadow-md transition-all group">
+              class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-all group">
 
               <!-- Prioridad strip -->
               <div class="h-1 rounded-full mb-2 -mt-1 -mx-1"
@@ -470,15 +470,30 @@
               onEnd: (evt) => {
                 const id = parseInt(evt.item.dataset.id);
                 const nuevoEstado = evt.to.id.replace('col-', '');
+                const estadoAnterior = evt.from.id.replace('col-', '');
+                if (nuevoEstado === estadoAnterior) return;
+
+                // Revertir el movimiento DOM de SortableJS para que Alpine
+                // pueda re-renderizar el x-for sin conflicto de nodos.
+                evt.from.insertBefore(evt.item, evt.from.children[evt.oldIndex] || null);
+
                 const t = this.tareas.find(t => t.ID === id);
-                if (t && t.estado !== nuevoEstado) {
-                  t.estado = nuevoEstado;
-                  fetch(`/app/tarea/${id}/estado`, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ estado: nuevoEstado }),
-                  });
-                }
+                if (!t) return;
+                t.estado = nuevoEstado; // dispara el re-render de Alpine
+
+                // Re-iniciar Sortable después de que Alpine actualice el DOM
+                this.$nextTick(() => this.iniciarSortable());
+
+                fetch(`/app/tarea/${id}/estado`, {
+                  method: 'PUT',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ estado: nuevoEstado }),
+                }).catch(() => {
+                  // Revertir estado local si la API falla
+                  const tRev = this.tareas.find(t => t.ID === id);
+                  if (tRev) tRev.estado = estadoAnterior;
+                  this.$nextTick(() => this.iniciarSortable());
+                });
               },
             });
             this.sortables.push(s);