NgCreacionClienteV2

Ng Creacion Cliente V2 es un componente tipo modal para crear cliente o editar su razon social. Esta libreria es una versión actualizada de la anterior ng-creacion-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
• @ngbracket/ngx-layout
• sweetalert2
• moment

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-creacion-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
┃ ┃ ┣ 📂 creacion-cliente    # Módulo de creacion cliente
┃ ┃ ┗ 📂 shared              # Componentes compartidos

Datos de entrada de la libreria

Definición de atributos del [input] config para el correcto funcionamiento del dialog ng-creacion-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. | | pais (number) | Id del país el cual condicionará las ciudades a consultar en el modal. | | identificacion (string) | Identificación del cliente a crear o ediatr la razon social | | unidadNegocioId (number) | Consulta clientes con la unidad de negocio. | | currentUser (string) | Usurio reponsable de la creacion del cliente | | widthDialog? (string) | (Opcional) Ancho del dialog. Default: 700px | | heightDialog? (string) | (Opcional) Alto de la tabla. Default: auto | | dataEditClient? (Object) (DataEditClient) | (Opcional) Solo si se desea editar un cliente | | datosPorDefecto? (boolean) | (Opcional) Solo si se quiere cargar los datos por defecto de la Naturaleza y Tipo Identificacion | | dataCreateClient? (Object) (DataCreateClient) | (Opcional) Solo si se desea mandar los datos para crear el cliente | | ciudadIdPorDefecto? (string) | (Opcional) Identificacion de la ciudad solo si se desea una por defecto | | centroOperacionId? (string) | (Opcional) Solo lista las ciudades que corresponden a ese Centro de Operacion |

DataEditClient

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

| Atributo | Descripción | |---------------------------|-------------------------------------------------| | razonSocial? (string) | (Opcional) Razon Social del cliente juridico | | primerNombre? (string) | (Opcional) Primer Nombre del cliente natural | | segundoNombre? (string) | (Opcional) Segundo Nombre del cliente natural | | primerApellido? (string) | (Opcional) Primer Apellido del cliente natural | | segundoApellido? (string) | (Opcional) Segundo Apellido del cliente natural |

DataCreateClient

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

| Atributo | Descripción | |-------------------------------|-------------------------------------------------| | naturalezaAbbr (string) | Abreviatura de la natiraleza del cliente | | tipoIdentificacionId (number) | Id del Tipo de identificacion del cliente | | sexo? (string) | (Opcional) Sexo del cliente | | razonSocial? (string) | (Opcional) Razon Social del cliente juridico | | primerNombre? (string) | (Opcional) Primer Nombre del cliente natural | | segundoNombre? (string) | (Opcional) Segundo Nombre del cliente natural | | primerApellido? (string) | (Opcional) Primer Apellido del cliente natural | | segundoApellido? (string) | (Opcional) Segundo Apellido del cliente natural | | nombreComercial? (string) | (Opcional) Nombre comercial del cliente | | ciudadId (string) | Identificacion de la ciudad del cliente | | direccion (string) | Direccion del cliente | | telefono? (string) | (Opcional) Telefono del cliente | | celular (string) | Celular del cliente | | codigoPostal? (string) | (Opcional) Codigo Postal del cliente | | email? (string) | (Opcional) Correo electronico del cliente |

Configuración 🔧

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

import { libCreateGateWayConfig } from 'ng-creacion-cliente-v2';

export const gateWayConfig: Provider | EnvironmentProviders = [
  libCreateGateWayConfig // Providers lib Creacion Tercero
];

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

provideAnimationsAsync(), //Animation Angular
//HttpClient
  provideHttpClient(
    withFetch(),
  ),
  NgCreacionClienteV2Dialog, // Providers Dialog
  gateWayConfig // Provider app.gateway-config.ts
//Tambien se puede colocar directamente el Provider de la libreria
//libCreateGateWayConfig //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 {NgCreacionClienteV2Dialog} from 'ng-creacion-cliente-v2';

Declaración e Inyección de la libreria

constructor(
  private readonly ngCreacionClienteV2Dialog: NgCreacionClienteV2Dialog
) {}

Abrir el dialog

const config: ConfigDto = {
  accessToken: this.token,
  host: environment.HOST,
  pais: environment.PAIS,
  identificacion: this.identificacion,
  unidadNegocioId: environment.UNIDAD_NEGOCIO,
  currentUser: this.formFilters.getRawValue().usuario,
}
this.ngCreacionClienteV2Dialog.open(config)

Retornar el cliente seleccionado

this.ngCreacionClienteV2Dialog.confirmed().subscribe((data: any): void => {
  //data --> Devuelve el tercero creado o editado por la razon social
  if (data) {
    //Metodo y acción que se hara.
  }
});

Autores ✒️

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