Agrupacion y Linea - Documentacion Tecnica Frontend

Modulo: ventas Feature: Agrupacion (Rubro) y Linea de articulos Fecha: 2026-02-09

DOCUMENTACION RETROSPECTIVA - Generada a partir de codigo implementado el 2026-02-09

Enlace a Documentacion de Negocio

Arquitectura Implementada

Patron: Legacy (vanilla JavaScript + PHP templates). No utiliza React, TypeScript, ni TanStack Query. Se basa en jQuery DataTables, Bootstrap 4 modals, y el middleware API.js.

Archivos Frontend

Tipo	Archivo	Descripcion
Vista PHP (Agrupacion)	`public/view/mod-ventas/agrupacion.php`	Template HTML principal para listado de agrupaciones
Vista PHP (Linea)	`public/view/mod-ventas/linea.php`	Template HTML principal para listado de lineas
JS View (Agrupacion)	`public/js/view/mod-ventas/agrupacion.js`	Logica de la vista de agrupaciones
JS View (Linea, React)	`public/js/view/mod-ventas/linea-rubros.js`	Entry point React — monta LineaView
JS Form (Agrupacion)	`public/js/components/forms/ventas/agrupacion.js`	Componente de formulario de agrupacion
HTML Form (Agrupacion)	`public/php/components/mod-venta/forms/agrupacion.html`	Template HTML del formulario modal de agrupacion
React View (Linea)	`ts/mod-ventas/views/LineaView.tsx`	Vista ABM React de lineas
React Form (Linea)	`ts/mod-ventas/Linea/components/LineaForm/index.tsx`	Formulario React de linea
Proxy Backend (Rubro)	`public/php/backend/rubro.php`	Proxy de validacion y reenvio al backend
Proxy Backend (Linea)	`public/php/backend/linea.php`	Proxy de validacion y reenvio al backend

Componentes Implementados

Vista de Agrupaciones (agrupacion.php + agrupacion.js)

Ubicacion: public/view/mod-ventas/agrupacion.php, public/js/view/mod-ventas/agrupacion.jsURL: ?loc=mvaProposito: Listado CRUD de agrupaciones de articulos

Estructura de la pagina:

Header con titulo "Listado de agrupaciones" y boton "Nva. Agrupacion | Alt+A"
Breadcrumb: Home > Ventas > Agrupaciones
Tabla DataTable con exportacion Excel/PDF
Sidebar del modulo de ventas con item "Agrupacion" activo dentro de "Bases"

DataTable - Columnas:

Columna	Data	Ordenable	Descripcion
Codigo	`id`	Si	Codigo numerico del rubro
Nombre	`concepto`	Si	Nombre de la agrupacion
Acciones	(render)	No	Botones: Modificar, Lineas

Botones de Accion por fila:

Modificar (btn-success, icono lapiz): Abre formulario modal con datos pre-cargados
Lineas (btn-info, icono lista): Navega a ?loc=mvl&rubro={id} para ver las lineas de esa agrupacion

Interacciones:

Al cargar: ApiRequest.get('rubro') obtiene todos los rubros y los muestra en la tabla
Boton alta: Invoca createFormAgrupacion() con callback que agrega la fila a la tabla
Boton modificar: Extrae datos de la fila, invoca createFormAgrupacion() con updateData, callback reemplaza la fila
Boton lineas: Redirige a la vista de lineas con el ID del rubro en URL

Vista de Lineas (React — LineaView)

Ubicacion: public/view/mod-ventas/linea.php + js/view/mod-ventas/linea-rubros.js + ts/mod-ventas/views/LineaView.tsxURL: ?loc=mvl&rubro={id}Proposito: ABM React de lineas de una agrupacion especifica

linea.php extrae $_GET['rubro'], lo inyecta en data-rubro-id del contenedor, y carga linea-rubros.js que monta LineaView con el rubroId como prop.

La vista usa GenericCrudView + useLineaCrud(rubroId) + LineaForm. Endpoint: mod-ventas/rubro/{rubroId}/linea.

Formulario de Agrupacion (createFormAgrupacion)

Archivo JS: public/js/components/forms/ventas/agrupacion.jsTemplate HTML: public/php/components/mod-venta/forms/agrupacion.html

Funcion exportada: createFormAgrupacion({ appendTo, onSubmitCallback, updateData })

Parametros:

Parametro	Tipo	Obligatorio	Descripcion
appendTo	HTMLElement	No	Elemento contenedor (null = modal)
onSubmitCallback	Function	Si	Callback al completar operacion
updateData	Object	No	Datos para edicion (vacio = alta)

Campos del formulario:

Campo	ID	Tipo HTML	Validacion HTML	Descripcion
Concepto	`idInputConcepto`	text	required, maxlength=30	Nombre de la agrupacion
Sincroniza con web	(radios)	radio	disabled	Si/No (deshabilitado, sin funcionalidad)

Campos Deshabilitados:

El formulario incluye un campo "Sincroniza con web" con radio buttons deshabilitados (disabled). No se les dio uso de momento y está disponible para funcionalidad futura.

Flujo de submit:

Valida formulario con isValidForm(form)
Muestra popup de carga
Si newData.id existe (update): ApiRequest.put('rubro', newData) -> toast "Agrupacion modificada exitosamente"
Si newData.id es null (insert): ApiRequest.post('rubro', newData) -> toast "Agrupacion creada con el codigo: {id}"
Ejecuta onSubmitCallback(newData) con los datos actualizados
Cierra el modal

Estructura de datos:

javascript

{
  id: null | number,    // null para insert, numero para update
  concepto: string      // trimmed, null si vacio
}

Formulario de Linea (React — LineaForm)

Migrado a React. El formulario legacy (linea.js + linea.html) fue eliminado.

Componente: ts/mod-ventas/Linea/components/LineaForm/index.tsxVista: ts/mod-ventas/views/LineaView.tsxEntry point: js/view/mod-ventas/linea-rubros.js

El formulario React recibe rubroId como prop desde LineaView. El campo es:

Campo	Tipo	Validación	Descripcion
Descripcion (`descri`)	text	required, max 50 chars	Nombre de la línea

El rubroId se pasa a view/mod-ventas/linea.php como $_GET['rubro'] y se inyecta en data-rubro-id del contenedor React.

Patron de Formularios Modales

Ambos formularios siguen el mismo patron legacy:

Carga de template: Se obtiene el HTML del formulario via getContentFile() (fetch de archivo .html)
Inyeccion en DOM: Se crea un div contenedor, se parsea el HTML, se extrae el .modal
Modo modal o embebido: Si appendTo es null, se muestra como modal Bootstrap; si no, se embebe en el contenedor
Focus automatico: Al mostrarse el modal, el input principal recibe foco y seleccion
Limpieza: Al cerrar el modal, se elimina del DOM. Si hay otros modals abiertos, se restaura modal-open en body
Validacion de tipo: Se agrega listener blur con validateType en el input principal

Integracion con Backend

Endpoints Consumidos (via API.js -> php/backend proxy)

Metodo	Recurso API.js	Proxy Frontend	Backend	Proposito
GET	`rubro`	`php/backend/rubro.php`	`backend/lrubro.php`	Listar agrupaciones
GET	`rubro` (con id)	`php/backend/rubro.php`	`backend/lrubro.php`	Obtener agrupacion por ID
POST	`rubro`	`php/backend/rubro.php`	`backend/lrubro.php`	Crear agrupacion
PUT	`rubro`	`php/backend/rubro.php`	`backend/lrubro.php`	Modificar agrupacion
GET	`mod-ventas/rubro/{id}/linea`	(axios directo)	Slim `LineaController`	Listar lineas de agrupacion
POST	`mod-ventas/rubro/{id}/linea`	(axios directo)	Slim `LineaController`	Crear linea
PUT	`mod-ventas/rubro/{id}/linea/{linea}`	(axios directo)	Slim `LineaController`	Modificar linea
DELETE	`mod-ventas/rubro/{id}/linea/{linea}`	(axios directo)	Slim `LineaController`	Eliminar linea

Flujo de comunicacion

Agrupacion (legacy):

agrupacion.js -> ApiRequest (API.js) -> php/backend/rubro.php -> Slim mod-ventas/lrubro

Linea (React):

LineaView (React) -> axios api.ts -> Slim mod-ventas/rubro/{id}/linea

Routing

URL de Agrupaciones: ?loc=mvaURL de Lineas: ?loc=mvl&rubro={id_rubro}

El routing es manejado por el sistema legacy basado en parametro loc de la URL. No hay React Router ni rutas Slim involucradas para estas vistas.

La navegacion entre agrupaciones y lineas se realiza con window.location.href.

Dependencias y Librerias

Libreria	Version	Uso
jQuery	(plugins)	Selector DOM, DataTables, Bootstrap modals
DataTables	(BS4)	Tabla interactiva con paginacion, busqueda, exportacion
Bootstrap 4	(bundle)	Layout, modals, formularios, botones
Font Awesome	(free)	Iconos
AdminLTE	(min)	Template de admin (sidebar, layout)
SweetAlert2	(Swal)	Popups de carga y alertas toast
pdfmake + jszip	(plugins)	Exportacion PDF y Excel desde DataTables

Ambas vistas activan los elementos del sidebar del modulo de ventas:

Submenu "Bases" (idNavMainSideBarBases) - abierto
Link "Agrupacion" (idMainSideBarAgrupacion) - activo

Esto se configura con JavaScript inline al final de cada vista PHP.

Atajos de Teclado

Los botones de alta muestran el texto "Alt+A" sugiriendo un atajo de teclado. Esta funcionalidad existe en un archivo key-events.js importado globalmente que maneja los atajos de teclado en toda la aplicación.

Referencias

NOTA IMPORTANTE: Esta documentacion fue generada automaticamente analizando el codigo implementado. Validar cambios futuros contra este baseline.

Joins

Retenciones

Ganancias

Sicore

Catalogos

Comercializacion

Extensiones

Presupuestos

Tercerizacion

Recursos Principales

Relaciones

Ciclo Comercial

Administracion

Comercial

Produccion

Tesoreria

Catalogos Base

Cupon Pago

Facturacion

Gestion Miembros

Grupos Familiares

Soporte Tecnico

Architecture

Backend

Api

Database

Migrations

Middleware

Security

Services

Deployment

Development

Testing

Frontend

Integrations

Payment Gateways

Retenciones

Agrupacion y Linea - Documentacion Tecnica Frontend ​

Enlace a Documentacion de Negocio ​

Arquitectura Implementada ​

Archivos Frontend ​

Componentes Implementados ​

Vista de Agrupaciones (agrupacion.php + agrupacion.js) ​

Vista de Lineas (React — LineaView) ​

Formulario de Agrupacion (createFormAgrupacion) ​

Formulario de Linea (React — LineaForm) ​

Patron de Formularios Modales ​

Integracion con Backend ​

Endpoints Consumidos (via API.js -> php/backend proxy) ​

Flujo de comunicacion ​

Routing ​

Dependencias y Librerias ​

Sidebar / Navegacion ​

Atajos de Teclado ​

Referencias ​