40 Editar y Actualizar Categorías con Modales de Flux UI en Laravel 12: Manejo de Validaciones 🛠️✅
Duración: 14 minDescripción
🛠️ Lección 40: Editar y Actualizar Categorías con Modales y Validaciones Pro
En esta sesión de Benji V2, resolvemos uno de los desafíos técnicos más comunes al usar modales: mantener el modal abierto cuando ocurre un error de validación. Aprendemos a sincronizar el backend de Laravel con el frontend de Flux UI para que el administrador nunca pierda su progreso al editar una categoría.
🏗️ Interfaz de Edición con Modales Únicos
Optimizamos la tabla de categorías para una edición precisa:
- 🆔 Sincronización por ID: Configuramos cada botón de edición para que abra un modal único (edit-categoria-{{ $id }}). Esto evita que al intentar editar un registro, el sistema se confunda y abra el formulario de otra categoría [03:13].
- 🎨 Estética Profesional: Cambiamos el icono a un lápiz (pencil) y aplicamos la clase cursor-pointer para que los botones de acción se sientan interactivos y modernos [02:45].
🧠 Lógica de Validación Avanzada (Validator)
Cambiamos la validación automática por una manual para ganar control sobre el flujo:
- 🛡️ Reglas de Unicidad: Implementamos la regla unique:categorias,nombre,{$id}, que permite guardar la categoría si el nombre no cambia, pero bloquea la actualización si el nuevo nombre ya pertenece a otra categoría [06:11].
- 📡 Captura de Errores Manual: Utilizamos la fachada Validator::make en lugar de $request->validate(). Esto nos permite detectar el fallo (fails()) y decidir exactamente qué datos enviar de vuelta a la vista [09:53].
🔄 El Truco del "Modal Persistence"
Implementamos una solución elegante para la experiencia de usuario:
- 📦 Envío del ID en Sesión: Cuando la validación falla, enviamos el ID de la categoría de vuelta a través de la sesión (with('modal_id', $id)). Esto le dice al frontend exactamente qué ventana debe reabrir [10:56].
- 📜 Script de Reapertura Automática: Programamos un script en la vista que detecta si hay un modal_id en la sesión. Si lo encuentra, ejecuta automáticamente el comando para abrir el modal de edición correspondiente, mostrando los errores específicos en ese campo [12:13].
✅ Resultado de la Lección
Al finalizar, habrás logrado un sistema de gestión de categorías robusto. Tu panel administrativo ahora diferencia perfectamente entre errores de creación y de edición, reabriendo automáticamente la ventana correcta y guiando al usuario para corregir los datos sin interrupciones ni recargas de página innecesarias.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
