57 RESCATANDO DATOS DEL PROVEEDOR EN LA BUSQUEDA en el SISTEMA DE VENTAS(PHP y MySql) FullStack

Duraci贸n: 13 min
M贸dulo: 馃挵 Implementaci贸n y Registro del M贸dulo de Compras Lecci贸n 9 de 17

Descripci贸n

Lecci贸n 57: Implementaci贸n Elegante del Proveedor en el M贸dulo Compras 馃馃摑

Esta lecci贸n crucial en el desarrollo del M贸dulo Compras se enfoc贸 en integrar la funcionalidad para buscar y seleccionar un proveedor de manera din谩mica, asegurando que sus datos se transfieran autom谩ticamente al formulario de registro de la compra.

1. Interfaz de B煤squeda y Modal 馃攷

Se replic贸 la l贸gica de selecci贸n de producto para el proveedor, centrando la acci贸n en un nuevo bot贸n:

  • Bot贸n de Activaci贸n: Se a帽adi贸 el bot贸n "Buscar Proveedor" con un dise帽o atractivo (btn-primary) y el icono de b煤squeda (fa-search) al lado de los campos del proveedor.
  • Modal de B煤squeda: Este bot贸n activa un nuevo modal (modal-lg) llamado "B煤squeda del Proveedor".

2. Configuraci贸n de la Tabla de Selecci贸n 馃搵

Para agilizar el desarrollo, se reutilizaron componentes existentes, adapt谩ndolos a la nueva funcionalidad:

  • Reutilizaci贸n del Listado: Se insert贸 la tabla de listado de proveedores (incluyendo su controlador y scripts de DataTables) dentro del modal.
  • Optimizaci贸n Visual: Para mantener la claridad y la funci贸n, se eliminaron los botones de exportaci贸n y la columna de Acciones (Editar/Eliminar) de la tabla.
  • Bot贸n de Acci贸n: Se agreg贸 la columna "Seleccionar", con un bot贸n de estilo btn-info y un ID 煤nico por fila, que activa la funci贸n de transferencia de datos.

3. Transferencia de Datos con jQuery/AJAX 鉃★笍

La funcionalidad central utiliza la potencia de jQuery para la interacci贸n sin recargar la p谩gina:

  • Asignaci贸n de IDs: Todos los campos del proveedor en el formulario de compra (como nombre_proveedor, celular_proveedor, email_proveedor, y el campo oculto id_proveedor) recibieron IDs espec铆ficos para ser los destinos de los datos.
  • Funci贸n de Extracci贸n: Una funci贸n de jQuery detecta el clic en el bot贸n "Seleccionar" de una fila. Esta funci贸n extrae todos los datos de esa fila (incluyendo el ID 煤nico del proveedor) y los asigna a variables de JavaScript.
  • Asignaci贸n de Valores: Mediante el m茅todo .val() de jQuery, los datos de las variables se inyectan en los inputs del formulario principal.
  • Cierre Elegante: Al completar la transferencia, el modal se cierra autom谩ticamente (.modal('hide')), devolviendo el control al formulario principal con todos los datos cargados.

4. Campos Finales del Registro 馃挵

La 煤ltima parte de la lecci贸n se dedic贸 a estructurar los campos esenciales para registrar la transacci贸n de compra:

  • Comprobante: Se definieron inputs para Tipo de Comprobante y N煤mero de Comprobante.
  • Detalles de la Transacci贸n:
    • Cantidad de Compra: Campo clave para determinar el stock que ingresa.
    • Precio de Compra: Campo fundamental que se precarga con el precio del producto, pero se deja editable, permitiendo al usuario registrar el precio real negociado con el proveedor en ese momento.

El formulario est谩 ahora completamente preparado para la etapa de registro final, donde se implementar谩 la l贸gica de PHP para guardar la compra y actualizar el inventario.