ng-unidades

v1.3.0

Published

2 months ago

Ng Unidades es un componente tipo modal para visualizar datos de las unidades y su trazabilidad.

Downloads

0High
0Medium
0Low

camicalle04

NgUnidades

Ng Unidades es un componente tipo modal para visualizar datos de las unidades y su trazabilidad.

Esta Libreria se generó con Angular CLI version 19.1.0.

Índice

Pre-requisitos

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

@angular/material
ag-grid-angular
sweetalert2

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

Datos relevante para la libreria

Esta libreria se separa en 3 componentes principales:

Consulta de unidades
En este componente se visualizan las unidades de la remesa seleccionada.
Consulta de trazabilidad
En este componente se visualizan los datos de la trazabilidad de la unidad seleccionada.
Consulta imagenes
En este componente se visualizan las imagenes de la unidad seleccionada.

Nota: Estos componentes están relacionados, ya que la consulta de unidades permite seleccionar una unidad específica, y luego la consulta de trazabilidad muestra los detalles de esa unidad seleccionada. Pero tambien se pueden usar de manera independiente puesto que si solo necesito saber la trazabilidad de una unidad, puedo usar el componente de trazabilidad. Lo mismo aplica para las imagenes.

Consulta de unidades

Datos de entrada del componente de unidades

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

| Atributo | Descripción | |----------------------------------------|------------------------------------------------------------------------| | accessToken (string) | Valor del token de autorización para consumir la api de unidades. | | host (string) | Host donde se consultara las unidades. | | idRemesa (string) | Identificador de la remesa | | numeroRemesa (string) | Numero de remesa | | widthDialog? (string) | (Opcional) Ancho del dialog. Default: 1080px |
| heightTable? (string) | (Opcional) Alto de la tabla. Default: 350px | | camposAOcultar? (string[]) | (Opcional) Campos que no se deseen mostrar en la tabla | | iconosAOcultar? (string[]) | (Opcional) Iconos que no se deseen mostrar en la tabla | | camposAOcultarTrazabilidad? (string[]) | (Opcional) Campos que no se deseen mostrar en la tabla de trazabilidad |

Nombre de los campos que se pueden ocultar:

acciones
codigoUnidad
tipoUnidad
claseEmpaque
tipoUbicacion
codigoUbicacionActual
ubicacionActual
regionalUbicacion
movilEntrega
certificacion

Nombre de los iconos que se pueden ocultar:

verTrazabilidad
verNovedad
verImagen

Consulta de trazabilidad unidades

Datos de entrada del componente de trazabilidad

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

| Atributo | Descripción | |-------------------------------|-------------------------------------------------------------------| | accessToken (string) | Valor del token de autorización para consumir la api de unidades. | | host (string) | Host donde se consultara la trazabilidad de la undiades. | | idUnidad (string) | Identificador de la unidad | | numeroUnidad (string) | Numero de unidad | | widthDialog? (string) | (Opcional) Ancho del dialog. Default: 1080px | | | heightTable? (string) | (Opcional) Alto de la tabla. Default: 350px | | camposAOcultar? (string[]) | (Opcional) Campos que no se deseen mostrar en la tabla |

Nombre de los campos que se pueden ocultar:

fechaEvento
estado
evento
proceso
ceopProceso
ubicacionActual
tipoUbicacion
codigoUbicacion
ubicacion
usuario
observaciones

Consulta de imagenes

Datos de entrada del componente de unidades

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

DatosImagen

Definición de atributos del [input] DatosImagen para el correcto funcionamiento del dialog ng-consulta-imagenes

| Atributo | Descripción | |----------------------------|----------------------------| | imageObservations (string) | Observaciones de la imagen | | caption (string) | Descripcion de la imagen | | url (string) | Url de la imagen | | nombreFoto (string) | Nombre de la foto |

Configuración

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

import { libUnidadesGateWayConfig } from 'ng-unidades';

export const gateWayConfig: Provider | EnvironmentProviders = [
  libUnidadesGateWayConfig // Providers lib Unidades
];

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

provideAnimationsAsync(), //Animation Angular
//HttpClient
  provideHttpClient(
    withFetch(),
  ),
  NgConsultaUnidadesDialog, // Providers Dialog de consulta de unidades
  NgConsultaTrazabilidadDialog, // Providers Dialog de consulta de trazabilidad
  NgConsultaImagenesDialog, // Providers Dialog de consulta de trazabilidad
  gateWayConfig // Provider app.gateway-config.ts
//Tambien se puede colocar directamente el Provider de la libreria
//libCreateGateWayConfig //De esta manera

Nota: Solo se debe agregar el Provider de la libreria que se va a utilizar. No es necesario agregar los 3 si no se va a utilizar.

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 dialog de consulta de unidades

Importación de la libreria

import { NgConsultaUnidadesDialog } from 'ng-unidades';

Declaración e Inyección de la libreria

constructor(
  private readonly ngConsultaUnidadesDialog: NgConsultaUnidadesDialog
) {}

Abrir el dialog

const configConsultaUnidades: ConsultaUnidadesConfigDto = {
  accessToken: 'ey23232323',
  host: environment.HOST,
  idRemesa: "2323223232323232332",
  numeroRemesa: '232323232'
}
this.ngConsultaUnidadesDialog.open(configConsultaUnidades);

Como utilizar dialog de consulta de trazabilidad

Importación de la libreria

import { NgConsultaTrazabilidadDialog } from 'ng-unidades';

Declaración e Inyección de la libreria

constructor(
  private readonly ngConsultaTrazabilidadDialog: NgConsultaTrazabilidadDialog
) {}

Abrir el dialog

const configConsultaTrazabilidad: ConsultaTrazabilidadConfigDto = {
  accessToken: 'ey123',
  host: environment.HOST,
  idUnidad: "2323232323232323232323",
  numeroUnidad: '23112323'
}
this.ngConsultaTrazabilidadDialog.open(configConsultaTrazabilidad);

Como utilizar dialog de consulta de imagenes

Importación de la libreria

import { NgConsultaImagenesDialog } from 'ng-unidades';

Declaración e Inyección de la libreria

constructor(
  private readonly ngConsultaImagenesDialog: NgConsultaImagenesDialog
) {}

Abrir el dialog

const datosImagenes: DatosImagen[] = [
  {
    imageObservations: 'Imagen tomada en bodega central',
    caption: "caption1",
    url: "data:image/jpeg;base64,/9j/",
    nombreFoto: "imagen1.jpg"
  },
  {
    imageObservations: 'Imagen 2 tomada en bodega central',
    caption: "caption2",
    url: "data:image/jpeg;base64,/9j/",
    nombreFoto: "imagen2.jpg"
  }
]

const configConsultaImagenes: ConsultaImagenesConfigDto = {
  accessToken: '123',
  host: environment.HOST,
  numeroUnidad: '446843278',
  imagenes: datosImagenes
}

this.ngConsultaImagenesDialog.open(configConsultaImagenes);

Licencia

Este componente es software propietario de TCC. Queda restringido a proyectos internos y no puede distribuirse ni reutilizarse fuera de la organización.

Autores

Camiliño Andrés Calle Coavas - Analista Desarrollador - Softcaribbean
Fabio Miguel Lengua Pastrana - Analista Desarrollador - Softcaribbean

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NgUnidades

Índice

Pre-requisitos

Arquitectura Hexagonal

Estructura del proyecto

Datos relevante para la libreria

Consulta de unidades

Datos de entrada del componente de unidades

Consulta de trazabilidad unidades

Datos de entrada del componente de trazabilidad

Consulta de imagenes

Datos de entrada del componente de unidades

DatosImagen

Configuración

Como utilizar dialog de consulta de unidades

Como utilizar dialog de consulta de trazabilidad

Como utilizar dialog de consulta de imagenes

Licencia

Autores