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](https://www.npmjs.com/package/ng-consulta-cliente).
npm install ng-consulta-cliente-v2plaintext
📂 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
`
$3
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 |
| datosConsultar? (DatosConsultarDto) | (Opcional) Datos para consultar en los innputs sin ocultar los flitros. Default: false |
| verMasInformacion? (boolean) | (Opcional) Habilita un boton de ver mas innformación Default: false |
$3
Definición de atributos del [input] datosConsultarDto para el correcto funcionamiento del dialog ng-creacion-cliente-v2
| Atributo | Descripción |
|---------------------------|-------------------------------------------------|
| identificacion? (string) | (Opcional) Identificacion del usuario |
| nombre? (string) | (Opcional) Nombre o Razon Social del usuario |
$3
En el archivo app.gateway-config.ts, agrega lo siguiente para definir la configuración del Gateway:
`app.config.ts
import { libConsultGateWayConfig } from 'ng-consulta-cliente-v2';
export const gateWayConfig: Provider | EnvironmentProviders = [
libConsultGateWayConfig
];
`
En el archivo app.config.ts, agrega la siguiente configuración:
`ts
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.
$3
Importación de la libreria
`ts
import { NgConsultaClienteV2Dialog } from 'ng-consulta-cliente-v2';
`
Declaración e Inyección de la libreria
`ts
constructor(
private readonly ngConsultaClienteV2Dialog: NgConsultaClienteV2Dialog
) {}
`
Abrir el dialog
`ts
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
`ts
this.ngConsultaClienteV2Dialog.confirmed().subscribe((data: any): void => {
//data --> Devuelve el tercero escogido
if (data) {
if (data.verMasInfo) {
//Tercero seleccionado
//Metodo que mostrara mas informacion del cliente seleccionado y un campo llamado verMasInfo si se le da click en el boton Ver mas informacion.
} else {
//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.
}
}
});
``