Condicion IVA - Documentacion Tecnica Frontend

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

Modulo: Ventas Feature: Condicion IVA (Catalogo fiscal) Fecha: 2026-02-09 Estado arquitectonico: Legacy (PHP + Vanilla JavaScript, sin migrar a React/TypeScript)

---

Requisitos de Negocio

Ver: Condicion IVA - Resource

---

Arquitectura Implementada

Archivos del recurso

Tipo	Archivo	Descripcion
Vista PHP	public/view/mod-ventas/cond-iva.php	Template HTML con DataTables, sidebar de ventas
Script principal	public/js/view/mod-ventas/cond-iva.js	Logica de vista: tabla, eventos, interacciones
Componente formulario	public/js/components/forms/ventas/cond-iva.js	Formulario modal reutilizable para crear/editar
Template formulario	public/php/components/mod-venta/forms/cond-iva.html	HTML del formulario modal (cargado dinamicamente)
Proxy backend	public/php/backend/cond-iva.php	Proxy PHP que valida y reenvia al backend

Patron de arquitectura

Este recurso utiliza la arquitectura legacy del sistema:

Vista PHP (cond-iva.php)
  -> Script Vanilla JS (cond-iva.js) con ES Modules
    -> ApiRequest (API.js) con FormData/fetch
      -> Proxy PHP (php/backend/cond-iva.php)
        -> Validacion inline
        -> Request HTTP al backend (server/backend/ordiva.php)

NO utiliza: React, TypeScript, Zod, TanStack Query, React Hook Form, Axios, ni ningun componente moderno del stack.

---

Componentes Implementados

Vista: cond-iva.php

Ubicacion: public/view/mod-ventas/cond-iva.phpURL de acceso: ?loc=mvciTemplate base: AdminLTE con Bootstrap 4

Estructura de la pagina:

• Header con titulo "Listado de cond. de IVA" y boton de alta (deshabilitado)
• Breadcrumb: Home > Ventas > Cond. IVA
• Card con tabla DataTables
• Sidebar del modulo Ventas (main-sidebar-venta.php)

Dependencias cargadas:

• jQuery
• Bootstrap 4
• DataTables (con responsive, buttons)
• PDFMake (exportacion PDF)
• JSZip (exportacion Excel)
• AdminLTE
• SweetAlert (modales y toasts)

Script principal cargado: js/view/mod-ventas/cond-iva.js (ES Module)

Sidebar activo: Configura idNavMainSideBarBases > idMainSideBarBases > idMainSideBarCondIva

Script principal: cond-iva.js

Ubicacion: public/js/view/mod-ventas/cond-iva.jsTipo: ES Module

Imports:

• createFormCondIva desde ../../components/forms/ventas/cond-iva.js
• ApiRequest desde ../../middleware/API.js
• LANG_TABLE desde ../../util/constantes.js
• reemplazarFila desde ../../util/datatable-methods.js

Inicializacion:

DataTable con las siguientes columnas:

Columna	Campo	Ancho	Render especial
Codigo	id	Auto	No
Nombre	nombre	Auto	No
Defecto	defecto	10%	Checkbox con clase .defecto
Acciones	null	Auto	Boton editar (verde)

Botones de exportacion: Excel, PDF

Carga de datos:

ApiRequest.get('cond-iva') -> tabla.rows.add(data).draw()

Eventos:

1. Boton Alta (btn_alta):

   • Click: showModal('info', 'Esta opcion esta deshabilitada')
   • Atajo de teclado referenciado en UI: Alt+A (pero no implementado en JS)

2. Boton Modificar (#idBtnModificarCondIva):

   • Click en fila: Lee datos de la fila del atributo data-row (JSON)
   • Abre formulario con createFormCondIva({ updateData: row, onSubmitCallback })
   • Callback actualiza la fila en la tabla con reemplazarFila(tabla, 'id', data.id, data)

3. Checkbox Defecto (#idCheckDefecto):

   • Click: Si se marca (checked), envia PATCH con { id, defecto: true }
   • Desmarca visualmente el checkbox anterior sin recargar datos del servidor
   • Si se intenta desmarcar, lo vuelve a marcar (no permite quedar sin defecto)
   • Usa request.patch('cond-iva', condIva) para persistir

Componente: createFormCondIva

Ubicacion: public/js/components/forms/ventas/cond-iva.jsTipo: Funcion async exportada por defecto Patron: Componente reutilizable con carga dinamica de HTML

Parametros (options object):

Parametro	Tipo	Default	Descripcion
updateData	Object	{}	Datos para modo edicion
appendTo	HTMLElement	null	Contenedor alternativo (si null, crea modal)
onSubmitCallback	Function	Requerido	Callback al guardar exitosamente

Campos del formulario:

Campo	ID	Tipo HTML	Validacion HTML	Evento
Descripcion	inputDescripcion	text	required, maxlength="18"	blur -> asigna a condIva.nombre
CUIT obligatorio	checkCuit	checkbox	Ninguna	change -> asigna a condIva.registra_cuit
Se discrimina	checkDiscrimina	checkbox	Ninguna	change -> asigna a condIva.discrimina_iva

Estructura de datos del formulario:

const condIva = {
    id: updateData.id ?? null,
    nombre: null,
    registra_cuit: false,
    discrimina_iva: false,
}

Flujo de submit:

1. Valida formulario con isValidForm(form) (validacion HTML5 nativa)
2. Muestra popup de carga con showPopupLoading('info', 'Registrando cambios')
3. Si condIva.id existe (modo edicion): request.put('cond-iva', condIva)
4. Si condIva.id es null (modo alta): request.post('cond-iva', condIva)
5. Cierra el popup, muestra toast de exito, ejecuta callback, cierra modal

Comportamiento del modal:

• data-backdrop="static" (no se cierra al hacer click fuera)
• Al mostrarse: Focus en campo Descripcion con seleccion de texto
• Al ocultarse: Remueve el modal del DOM, restaura clase modal-open si hay otros modales

Template HTML: cond-iva.html

Ubicacion: public/php/components/mod-venta/forms/cond-iva.htmlCarga: Dinamica via getContentFile() (fetch del HTML)

Estructura:

• Modal Bootstrap 4 (modal fade, data-backdrop="static")
• Titulo: "Condicion de IVA"
• Formulario #idFormCondIva con:
  • Input text para Descripcion (maxlength 18, required)
  • Checkbox "CUIT obligatorio" (tabindex -1)
  • Checkbox "Se discrimina" (tabindex -1)
  • Botones: Cancelar (danger, dismiss) y Aceptar (primary, submit)

---

Proxy Backend: cond-iva.php

Ubicacion: public/php/backend/cond-iva.phpProposito: Intermediario entre frontend y backend, agrega validacion

Metodos soportados:

Metodo	Validaciones	Reenvio
GET	Ninguna	Request::get('ordiva')
PUT	id: required|integer, nombre: required|max:18|min:3, registra_cuit: required|boolean, discrimina_iva: required|boolean	Request::put('ordiva', body)
PATCH	id: required|integer, defecto: required|boolean	Request::patch('ordiva', body)
POST	No implementado	N/A
DELETE	No implementado	N/A

Autenticacion: Verifica sesion PHP ($_SESSION['SD_USER'])

---

State Management

Patron: Variables locales en scope de modulo (ES Modules)

Variable	Tipo	Alcance	Proposito
tabla	DataTable	Modulo	Instancia de tabla jQuery DataTables
btnAlta	HTMLElement	Modulo	Referencia al boton de alta
request	ApiRequest	Modulo	Instancia para llamadas al backend

Estado del formulario: Objeto condIva local dentro del closure de createFormCondIva(). No hay estado global compartido.

Cache: No hay cache implementado. Cada carga de pagina hace un GET al servidor.

---

Integracion con Backend

Endpoints consumidos

Metodo	URL Proxy	URL Backend final	Proposito
GET	cond-iva	ordiva	Listar todas las condiciones
PUT	cond-iva	ordiva	Modificar condicion completa
PATCH	cond-iva	ordiva	Modificar campo defecto
POST	cond-iva	ordiva	Crear condicion (implementado en formulario, no en proxy)

Patron de comunicacion: ApiRequest (API.js) -> FormData/fetch -> Proxy PHP -> Guzzle HTTP -> Backend

Transformaciones de datos

Backend -> Frontend (GET):

• Los datos vienen ya transformados por el modelo: discrimina_iva como boolean, id como integer
• El frontend los usa directamente sin transformacion adicional

Frontend -> Backend (PUT):

• El objeto condIva se envia tal cual: { id, nombre, registra_cuit, discrimina_iva }
• El proxy valida tipos antes de reenviar

Frontend -> Backend (PATCH):

• Solo envia { id, defecto } para cambio de defecto

---

Routing

URL de la vista: ?loc=mvciRouting: Server-side rendering (PHP). No hay React Router. Navegacion: Links en sidebar del modulo Ventas, breadcrumbs con URLs con parametro loc

---

Accesibilidad

Estado actual:

• Los checkboxes del formulario tienen tabindex="-1" (no accesibles por teclado)
• El boton de alta referencia atajo Alt+A en la UI pero no lo implementa en JavaScript
• Los checkboxes de la tabla usan custom-control de Bootstrap para estilizado
• El modal tiene aria-label="Close" en el boton de cerrar

---

Deuda tecnica identificada

Item	Severidad	Descripcion
Arquitectura legacy	Alta	No usa React/TypeScript. Vanilla JS con jQuery
Sin tipos TypeScript	Alta	No hay interfaces ni tipos definidos
Sin Zod schemas	Alta	Validaciones solo via HTML5 required + proxy PHP
Sin TanStack Query	Media	No hay cache, no hay invalidacion, no hay loading states automaticos
Sin React Hook Form	Media	Manejo manual de formularios con eventos DOM
POST no funcional	Media	Formulario tiene logica POST pero proxy no lo soporta
Checkboxes sin tabindex	Baja	Checkboxes del formulario no son accesibles por teclado
Atajo Alt+A no implementado	Baja	Referenciado en UI pero no funcional
IDs duplicados en tabla	Media	#idCheckDefecto y #idBtnModificarCondIva se repiten en cada fila

---

Plan de migracion sugerido

Para migrar a la arquitectura moderna del sistema, se necesitaria:

1. Types: Crear ts/ventas/CondicionIva/types/condicionIva.types.ts
2. Schema Zod: Crear ts/ventas/CondicionIva/schemas/condicionIva.schema.ts
3. Service: Crear ts/ventas/CondicionIva/services/condicionIva.service.ts (usando api.ts con Axios)
4. Hooks: Crear ts/ventas/CondicionIva/hooks/useCondicionIva.ts (TanStack Query)
5. Components: Crear ts/ventas/CondicionIva/components/CondicionIvaTable/ y CondicionIvaForm/
6. View: Crear ts/ventas/CondicionIva/views/CondicionIvaView.tsx
7. Config: Registrar en queryKeys.ts, routes.tsx, sidebar.ts

---

Preguntas Tecnicas Pendientes

Aclaraciones Requeridas: Hay aspectos tecnicos que requieren validacion. Ver: Preguntas sobre Condicion IVA

---

Referencias

• Requisitos de Negocio
• Documentacion Backend

---

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