59 DETALLE DE COMPRAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack

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

Descripci贸n

Lecci贸n 59: Finalizaci贸n y L贸gica de Compra (Detalle) 鉁嶏笍馃洅

Esta lecci贸n marca la finalizaci贸n del dise帽o del formulario de registro de compras y establece la l贸gica clave para el manejo del stock antes de enviar la informaci贸n al controlador.

1. Estructura y Estilizado del Formulario 馃帹

Se realizaron ajustes finales para optimizar la presentaci贸n de los detalles de la compra:

  • Contenedor de Detalles: Se englob贸 la secci贸n de datos de la compra dentro de un contenedor (Card) con el t铆tulo "Detalle de la compra" para una mejor organizaci贸n visual [03:03].
  • Contador Autom谩tico de Compra:
    • Para generar el N煤mero de Compra de forma correlativa, se utiliza un script de PHP que consulta cu谩ntas compras existen actualmente en la base de datos y le suma uno [04:44].
    • Este campo se muestra en el formulario como deshabilitado y centrado (text-align: center) [06:25].

2. Campos Finales de la Compra 馃摑

Se completaron los campos restantes necesarios para registrar una transacci贸n completa:

CampoProp贸sitoConfiguraci贸n
Fecha de CompraFecha de la transacci贸n.Se selecciona manualmente (type="date") [07:20].
ComprobanteTipo y n煤mero del documento f铆sico (factura, recibo, nota de venta).Campo de texto para registrar el detalle ("Factura N掳 1200") [07:51].
UsuarioUsuario logueado que realiza la compra.Se rellena autom谩ticamente con el email de la sesi贸n actual y est谩 deshabilitado [09:49].
Precio de CompraMonto total de la transacci贸n.Campo de texto para ingresar el valor (editable) [10:47].

3. Implementaci贸n de la L贸gica de Stock (Vista) 馃挕

El punto m谩s importante de la lecci贸n es establecer la interfaz para la actualizaci贸n del inventario. El instructor usa tres campos relacionados para visualizar y calcular el nuevo stock en tiempo real:

  1. Stock Actual (Actual):
    • Muestra el stock que ya existe en el almac茅n.
    • Se recupera autom谩ticamente al seleccionar el producto y se pinta de amarillo para llamar la atenci贸n (dato cr铆tico) [11:31].
  2. Cantidad de la Compra (A Ingresar):
    • Campo de texto editable donde el usuario ingresa cu谩ntas unidades se compraron [15:03].
  3. Stock Total (Nuevo):
    • Campo deshabilitado que debe mostrar la suma de Stock Actual + Cantidad de la Compra (Ej: 200 + 100 = 300) [14:15].

L贸gica de la Compra Finalizada

La secuencia completa para el encargado de almac茅n es:

  1. Seleccionar Producto (muestra Stock Actual: 200).
  2. Seleccionar Proveedor.
  3. Ingresar Cantidad de Compra (Ej: 50).
  4. El campo Stock Total debe calcular autom谩ticamente el nuevo total (200 + 50 = 250).

Esta l贸gica de suma en tiempo real (jQuery) ser谩 implementada en el pr贸ximo video para luego enviar el Stock Total actualizado al controlador para que se guarde en la base de datos [17:34].