19 Ventana modal para CAMBIAR NOMBRE a la carpeta en el curso de LARAVEL (PHP y MySql) FullStack

Duración: 7 min
Módulo: 🎨 Personalización y Edición de Carpetas Lección 3 de 9

Descripción

✏️ Lección 19: Ventana Modal para Cambiar Nombre a la Carpeta

Este capítulo aborda la primera opción de gestión de carpetas: cambiar el nombre. La estrategia adoptada es utilizar un modal de Bootstrap para una experiencia de usuario (UX) limpia y efectiva.

🖼️ Implementación del Modal de Edición:

  • Reutilización del Diseño: Se copia y adapta el diseño de la ventana modal ya existente para la creación de nuevas carpetas [01:09].
  • Activación desde el Dropdown: Se configura el enlace "Cambiar nombre" dentro del menú desplegable para que, al hacer clic, active la nueva ventana modal [03:40].
  • Ubicación del Modal: El código del modal se coloca fuera del menú desplegable (dropdown-menu) pero dentro del ciclo @foreach [03:08] para garantizar que cada carpeta tenga su propio modal asociado sin romper el diseño del menú.

⚙️ Diferenciación Dinámica de Modales:

  • El Problema de la Repetición: Inicialmente, el modal muestra el nombre de la primera carpeta para todas las opciones [04:50] debido a que todos los modales comparten el mismo ID en el DOM.
  • Solución con ID Dinámicos: Para hacer que cada modal sea único y muestre la información correcta, se añade el ID de la carpeta ($carpeta->id) al final del nombre del modal (modal-cambiar-nombre-{{$carpeta->id}}) [05:29].
    • Este ID dinámico se aplica tanto al atributo data-target (para abrir el modal) como al atributo id del modal mismo.
  • Carga del Nombre Actual: Dentro del formulario del modal, el campo de texto se prellena con el nombre actual de la carpeta (value="{{$carpeta->nombre}}"), lo que permite al usuario ver y modificar el nombre existente [04:42].

El video finaliza con una demostración donde al hacer clic en "Cambiar nombre" de cualquier carpeta, se abre el modal correcto y muestra el nombre exacto de esa carpeta (Videos, Juegos, Office, etc.), dejando el escenario listo para enviar este formulario al controlador y ejecutar la lógica de actualización (UPDATE) en el siguiente capítulo [06:40].