NgConsultaClienteV2

Ng Consulta Cliente V2 es un componente tipo modal para consultar cliente. Esta libreria es una versión actualizada de la anterior ng-consulta-cliente.

Esta Libreria se generó con Angular CLI version 19.1.0.

Pre-requisitos 📋

Para que nuestro componente funcione debemos tener instalado las siguientes librerias.

• @angular/material
• ag-grid-angular
• @ngbracket/ngx-layout

Arquitectura Hexagonal

La librería está diseñada con Hexagonal Architecture, lo que significa que separa las capas internas (dominio y aplicación) de las capas externas (infraestructura y adaptadores). Esto permite que la lógica de negocio sea independiente de los frameworks y herramientas específicas.

Estructura del proyecto

📂 ng-consulta-cliente-v2
┣ 📂 lib
┃ ┣ 📂 domain                # Lógica de negocio y modelos
┃ ┃ ┣ 📂 mappers             # Mapeo de datos API a Domain y viceversa
┃ ┃ ┣ 📂 models              # Modelos de datos
┃ ┃ ┗ 📂 usecase             # Casos de uso (Aplicación de negocio)
┃ ┣ 📂 environment           # Configuración de entorno
┃ ┣ 📂 helpers               # Funciones auxiliares y utilidades
┃ ┣ 📂 infrastructure        # Comunicación con el exterior (Servicios, APIs, etc.)
┃ ┃ ┣ 📂 dto                 # Data Transfer Objects
┃ ┃ ┣ 📂 repositories        # Implementaciones de acceso a datos
┃ ┃ ┗ 📂 services            # Servicios que interactúan con APIs externas
┃ ┣ 📂 entry-point           # Adaptadores y puntos de entrada (controladores, etc.)
┃ ┃ 📂 modules               # Módulos de la aplicación
┃ ┃ ┣ 📂 consulta-cliente    # Módulo de consulta cliente
┃ ┃ ┗ 📂 shared              # Componentes compartidos

Datos de entrada de la libreria

Definición de atributos del [input] config para el correcto funcionamiento del dialog ng-consulta-cliente-v2

| Atributo | Descripción | |------------------------------------|--------------------------------------------------------------------------------------------------------| | accessToken (string) | Valor del token de autorización para consumir la api de clientes. | | host (string) | Host donde se ejecuta el api de clientes. | | hostTercero (string) | (Opcional) Host donde se ejecuta el api de consulta criterios con cache. | | pais (number) | Id del país el cual condicionará las ciudades a consultar en el modal. | | api? (string) | (Opcional) Complemento del host o api de clientes. | | rolId? (number) | (Opcional) Id del rol para condicionar la consulta a clientes con el rol especificado. | | consultarCuenta? (boolean) | (Opcional) Consulta clientes con cuenta y muestra los campos en la tabla. Default: false | | unidadNegocioId? (number) | (Opcional) Consulta clientes con la unidad de negocio | | formaPagoId? (number) | (Opcional) Consulta clientes por forma de pago. | | objNivelAsignacion? (boolean) | (Opcional) Alternativa - Consulta clientes con cuenta y muestra los campos en la tabla. Default: false | | widthDialog? (string) | (Opcional) Ancho del dialog. Default: 700px | | heightTable? (string) | (Opcional) Alto de la tabla. Default: 250px | | identificacion? (string) | (Opcional) Oculta los filtros de busqueda y busca por la identificacion suministrada. | | validarCuentaContado? (boolean) | (Opcional) Valida si las cuentas son contado. Valida si inician con 70 para (PQ) y 75 para (MSJ). | | creacionRapida? (boolean) | (Opcional) Habilita un boton de creacion rapida de clientes. Default: false | | consultarClienteCuenta? (boolean) | (Opcional) Bloquea el checkbox de seleccionar tercero para los terceros sin cuenta. Default: false |

Configuración 🔧

En el archivo app.gateway-config.ts, agrega lo siguiente para definir la configuración del Gateway:

import { libConsultGateWayConfig } from 'ng-consulta-cliente-v2';

export const gateWayConfig: Provider | EnvironmentProviders = [
  libConsultGateWayConfig
];

En el archivo app.config.ts, agrega la siguiente configuración:

provideAnimationsAsync(), //Animation Angular
//HttpClient
provideHttpClient(
  withFetch(),
),
NgConsultaClienteV2Dialog, // Providers Dialog
gateWayConfig // Provider app.gateway-config.ts
//Tambien se puede colocar directamente el Provider de la libreria
//libConsultGateWayConfig //De esta manera

Como se mencionó anteriormente, el Provider de la librería se puede agregar directamente en el archivo app.config.ts. Sin embargo, es recomendable definirlo en el archivo de Providers del proyecto consumidor para mantener un mejor orden y organización.

Como utilizar

Importación de la libreria

import { NgConsultaClienteV2Dialog } from 'ng-consulta-cliente-v2';

Declaración e Inyección de la libreria

constructor(
  private readonly ngConsultaClienteV2Dialog: NgConsultaClienteV2Dialog
) {}

Abrir el dialog

const config: ConfigDto = {
  accessToken: environment.ACCESS_TOKEN,
  host: environment.HOST,
  pais: environment.PAIS,
  consultarCuenta: environment.CONSULTAR_CUENTA,
  unidadNegocioId: environment.UNIDAD_NEGOCIO_ID,
};
this.ngConsultaClienteV2Dialog.open(config);

Retornar el cliente seleccionado

this.ngConsultaClienteV2Dialog.confirmed().subscribe((data: any): void => {
  //data --> Devuelve el tercero escogido
  if (data) {
    //Tercero seleccionado
    //Metodo que seteara el cliente seleccionado.
    //Debe recibir un parametro de entrada (data).
    
    //Creación Rapida
    //Si la persona presiono el boton Creacion Rapida,
    //El objeto de salida traera un dato llamado abrirModalCrear en true.
    //Y con esta opcion se debe programar para que se abra el modal de creacion de cliente.
  }
});

Autores ✒️

• Camiliño Andrés Calle Coavas - Analista Desarrollador - Softcaribbean