Este post es la segunda parte del sistema de ventas con Laravel. Al final decidí agregarle dos cosas más:

1. Clientes
2. Usuarios

Eso trajo cambios que en conjunto con lo demás son:

1. Dar la posibilidad de elegir el cliente que hace la venta
2. El nombre del cliente aparece en el ticket
3. Se pueden gestionar usuarios para el uso del sistema

Veamos cómo quedó todo.

Cambiando página de inicio

He modificado el diseño de la página de inicio del sistema de ventas. Ahora utilizo cards, y el layout se genera dinámicamente según un arreglo.

De este modo organizo mejor el diseño en distintas pantallas. El código que lo genera es el siguiente:

Primero tengo un arreglo que tiene dos arreglos; por cada uno muestro una nueva fila. Después hago un ciclo dentro del anterior, por cada módulo. Utilizo el nombre para cargar las imágenes y poner el título, así como las rutas.

La única excepción es con acerca_de que no se ve legible para el ser humano al convertirla en mayúsculas, por eso es que he usado el operador ternario para mostrar su valor.

Usuarios

He agregado el módulo de usuarios, que es un simple CRUD. Comenzamos viendo su controlador:

Es parecido a los otros, pues se usa un simple resource. Por cierto, no estoy validando que la contraseña coincida (al registrar o actualizar). La lista se ve así:

En este caso no tuve que generar el modelo, pues ya viene incluido al generar la autenticación de Laravel.

Clientes

También he agregado un módulo para clientes, primero veamos el modelo que realmente solo cuenta con teléfono y nombre:

Luego generé su migración:

No me molesté en quitar los timestamps, aunque realmente no los estoy usando en ningún otro lugar. Finalmente veamos el controlador:

Las vistas no las muestro porque es muy repetitivo, solo colocaré el resultado:

Por cierto, se ve así porque estoy mostrando el resultado en un iPhone, pero el sistema se adapta a cualquier tamaño de pantalla.

Agregar cliente a venta

Tuve que hacer unas modificaciones a la base de datos ya que tenía que crear la relación entre el cliente y la venta. Para ello, generé una migración:

Ahora que lo veo, no agregué el código para revertir la migración, así que hay que tener cuidado con esa parte. Más tarde agregué la relación en el modelo de venta indicando que una venta le pertenece a un cliente:

Seleccionar cliente al vender

La parte más compleja de esto fue arreglar el diseño, ya que los botones de Terminar venta, Cancelar venta y Agregar producto apuntaban a distintas rutas; pero al agregar el cliente tuve que modificarlo.

Al final decidí que ambos botones de la venta apuntaran a la misma ruta y, dentro del controlador verificar cuál botón fue presionado e invocar a una función u otra:

El código de la vista para vender quedó así:

Como ves, se dibuja un select que permite seleccionar al cliente. Una posible mejora sería que se quede el mismo cliente seleccionado, ya que si se selecciona antes de vender, el cambio se pierde pues al agregar un producto la página se refresca.

El resultado de la interfaz para agregar una venta con selección de cliente quedó así:

Detalle de venta con cliente

Del mismo modo, en el detalle de la venta (y también en el listado) aparece el nombre del cliente al que fue hecha la venta:

Ticket de venta con cliente

Para terminar el post debo mostrar que en el ticket también aparece el nombre del cliente. El código quedó así:

Al imprimir se muestra el nombre del cliente que realizó la venta:

Conclusión

Recuerda que la primera parte de este tutorial está en un post anterior. El código fuente lo encuentras en GitHub.

Más adelante traeré la aplicación móvil que corresponde a este sistema.