Ba360-components NPM

BA360 Library Components

La intención de esta librería es reutilizar componentes que son comunes en los portales de BA360, así ahorrar tiempo en el armado de portales custom.

Instalación

Para instalar la librería se necesitan ejecutar los siguientes comandos.

npm install ba360-components

Dependiendo del proyecto, puede pedir librerías adicionales como lit o los @types de eslint.

Angular

En el caso particular de Angular se necesitan hacer varias configuraciones para que esta librería funcione correctamente.

En el archivo app.module.ts se deben agregar las siguientes líneas:

import { ... , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({
  ...,
  schemas:[CUSTOM_ELEMENTS_SCHEMA] ,
  ...,
})
export class AppModule { }

Primero se deberían tener configuradas las siguientes variables de entorno:

// enviroment.ts

export const environment = {
  companyName: '', // Usar los valores para su compañía
  secretKey:'',
  clientKey:'',
  apiUrl:''
}

Luego la usamos en app.module.ts

import { environment } from 'ruta-del-archivo-enviroment';
import { config } from '@ba360-components';
config(
  environment.companyName,
  environment.clientKey,
  environment.secretKey,
  environment.apiUrl
);

Por último vamos a configurar los buffer que con la últimas actualizaciones de Angular estan teniendo problemas:

Instalaremos las librerías
```
npm i buffer
npm i @types/node
```

Modificaremos los siguientes archivos

polyfills.ts en la parte final del archivo

(window as any).global = window;
(window as any).global.Buffer = (window as any).global.Buffer || require('buffer').Buffer;

tsconfig.json

...
  "compilerOptions": {
  ...,
  "typeRoots": [ //for Buffer problems
    "node_modules/@types"
  ]
}
...

tsconfig.app.json

...
  "compilerOptions": {
  ...,
  "types": ["node"]
}
...

Vue

Se debe crear un archivo de variables de entorno .env con los siguientes valores:

  VUE_APP_COMPANY_NAME
  VUE_APP_COMPANY_SECRET_KEY
  VUE_APP_COMPANY_CLIENT_KEY
  VUE_APP_API_URL

En el archivo main.js se debe agregar lo siguiente:

import Vue from 'vue'
import App from './App.vue'
import { config } from 'ba360-components'

Vue.config.productionTip = false

config(
  process.env.VUE_APP_COMPANY_NAME,
  process.env.VUE_APP_COMPANY_CLIENT_KEY,
  process.env.VUE_APP_COMPANY_SECRET_KEY,
  process.env.VUE_APP_API_URL
)

new Vue({
  render: h => h(App),
}).$mount('#app')

React

Se debe crear un archivo de variables de entorno .env con los siguientes valores:

  REACT_APP_COMPANY_NAME
  REACT_APP_COMPANY_SECRET_KEY
  REACT_APP_COMPANY_CLIENT_KEY
  REACT_APP_API_URL

En el archivo index.js se debe agregar lo siguiente:

import { config } from "ba360-components"  

config(
  process.env.REACT_APP_COMPANY_NAME,
  process.env.REACT_APP_COMPANY_CLIENT_KEY,
  process.env.REACT_APP_COMPANY_SECRET_KEY,
  process.env.REACT_APP_API_URL
)

Verificar que la versión de "react-script" sea igual a v4.0.3 en el archivo package.json

"react-scripts": "^4.0.3"

Componentes

Login

ba-login es un componente que contiene una integración con los servicios de BA360 para obtener el token de autenticación. No contiene ningún template, solo ejecuta el método de login con las props requeridas.

Uso

Para utilizar este componente, simplemente debe agregar la etiqueta correspondiente

  <ba-login 
    user="user" 
    password="pass" 
  ></ba-login>

Como alternativa a la utilización del componente, les hacemos disponible directamente el método de login:

  import { Connection } from 'ba360-components'

  const Auth = new Connection.Auth()

  Auth.logInExternal('user', 'password')

Props

user

Usuario logueado.

password

Contraseña del usuario.

Contact-List

ba-contact-list muestra una tabla con la lista de contactos correspondientes a la cuenta que se encuentra logueada. Además contiene un filtro para agilizar la búsqueda de contactos así como un botón para abrir el componente de creación de contacto

Uso

Agregando la etiqueta correspondiente, podremos acceder al listado de contactos.

  <ba-contact-list
    [label]="texto-encabezado"
    [search]="valor-de-busqueda"
    (contact)="function($event)"
    (add-contact)="function()"
  ></ba-contact-list>

Props

label

La propiedad Label permite personalizar la etiqueta que se visualizará en la parte superior del componente.

search

Se puede utilizar para realizar la busqueda de contactos filtrada con este valor en lugar de ingresarla manualmente. Si el resultado solo devuelve un item se dispara automáticamente el evento contact con su información correspondiente correspondiente.

Eventos

contact

El evento se dispara al seleccionar un item de la lista. Dentro de las opciones del evento trae la información de ese contacto en event.detail

add-contact

Este evento se hace disponible desde el botón Crear. Se puede utilizar para intercambiar entre el listado y el formulario de creación.

Contact-form

ba-contact-form es el formulario para la creación y edición de contactos. Tanto el título como el botón de envío de la información, cambian dinámicamente dependiendo si se envía información para editar los datos de un contacto o no.

Uso

Ejemplo de uso en Angular:

  // contact.component.html

  <ba-contact-form
    [data]="dato-contacto"
    [renderData]="dato-contexto"
    (close-contact-form)="function-cerrar-form()"
    (add-contact)="function-cambiar-crear()"
    (contact-identifier)="function-guardar-identificador($event)"
    (guardarEmision)="function-guardar-contexto($event)"
  ></ba-contact-form>

Props

data

La propiedad data recibe la información del contacto seleccionado.

renderData

La propiedad renderData recibe la información del contexto almacenado.

Eventos

close-contact-form

Se dispara desde el botón X para cerrar el componente.

add-contact

Se dispara desde el botón ↺ e intercambia entre edición y creación.

contact-identifier

Se dispara desde Ver casos y dispone el identificador del contacto en event.detail.identifier para ser almacenado.

guardarEmision

Se dispara al editar el formulario y dispone los datos para almacenar el contexto en event.detail.data.

Account-List

ba-account-list muestra una tabla con la lista de cuentas correspondientes al usuario que se encuentra logueado. Además contiene un filtro para agilizar la búsqueda de cuentas.

Uso

Agregando la etiqueta correspondiente, podremos acceder al listado de cuentas.

  <ba-account-list
    [label]="texto-encabezado"
    (account)="function-almacenar-cuenta($event)"
    (add-account)="function-abrir-form()"
  ></ba-account-list>

Props

label

La propiedad Label permite personalizar la etiqueta que se visualizará en la parte superior del componente.

Eventos

account

El evento se dispara al seleccionar un item de la lista. Dentro de las opciones del evento trae la información de ese item en event.detail.

add-account

Este evento se hace disponible desde el botón Crear. Se puede utilizar para intercambiar entre el listado y el formulario de creación.

Account-form

ba-account-form es el formulario para la creación y edición de cuentas. Tanto el título como el botón de envío de la información, cambian dinámicamente dependiendo si se envía información para editar los datos de una cuenta o no.

Uso

Agregando la etiqueta correspondiente, podemos visualizar el formulario para la creación/edición de cuentas

Ejemplo de uso en Angular:

  // account.component.html

  <ba-account-form
    [data]="datos-cuenta"
    [renderData]="datos-contexto"
    (close-account-form)="function()"
    (add-account)="function()"
    (guardarEmision)="function-guardar-contexto($event)"
  ></ba-account-form>

Props

data

La propiedad data recibe la información de la cuenta seleccionada.

renderData

La propiedad renderData recibe la información del contexto almacenado.

Eventos

close-account-form

Se dispara desde el botón X para poder cerrar el componente.

add-account

Se dispara desde el botón ↺ e intercambia entre edición y creación.

guardarEmision

Se dispara al editar el formulario y dispone los datos para almacenar el contexto en event.detail.data.

Case-List

ba-case-list muestra una tabla con la lista de casos correspondientes al usuario que se encuentra logueado. Además contiene un filtro para agilizar la búsqueda de casos por asunto.

Uso

Agregando la etiqueta correspondiente, podremos acceder al listado de casos.

  <ba-case-list
    [label]="texto-encabezado"
    [identificador]="identificador-almacenado"
    (add-case)="function-abrir-componente-crear($event)"
    (case)="function-abrir-componente-editar($event)"
    (delete-contact-identifier)="funcion-limpiar-casos-contacto()"
  ></ba-case-list>

Props

label

Permite personalizar la etiqueta que se visualizará en la parte superior del componente.

identificador

Si se pasa el identificador de un contacto, el listado de casos va a estar relacionado a este contacto. Sino se pasa ningun valor, el listado de casos va a ser general. A su vez, si se le pasa un identificador de contacto y desde el listado de sus casos se accede al formulario de creación (mediante el botón 'Crear') tendrá precargado al contacto específico.

Eventos

add-case

Este evento se hace disponible desde el botón Crear. Se puede utilizar para intercambiar entre el listado y el formulario de creación.

case

El evento se dispara al seleccionar un item de la lista. Dentro de las opciones del evento trae la información de ese item en event.detail.

delete-contact-identifier

El evento se dispara al presionar el botón Ver todos lo que permite borrar el indentificador almacenado y mostrar todos los casos en lugar de los casos filtrados por el identificador del contacto.

Case-Form

ba-case-form es el formulario para la creación de casos.

  <ba-case-form
    [renderData]="datos-contexto"
    (close-case-form)="function-cerrar-componente()"
    (case-created)="function-abrir-componente-editar($event)"
    (guardarEmision)="function-almacenar-contexto($event)"
  ></ba-case-form>

Props

renderData

La propiedad renderData recibe la información del contexto almacenado.

Eventos

close-case-form

Se dispara desde el botón X para poder cerrar el componente.

case-created

Se dispara desde el botón Guardar para poder cerrar el formulario de creación y habilitar el de edición con la información completa del caso recién creado.

guardarEmision

Se dispara al editar el formulario y dispone los datos para almacenar el contexto en event.detail.data.

Case-Update

ba-case-update es el formulario para la edición de casos.

  <ba-case-update
    [caseId]="{{case.id || contexto.id}}"
    [renderData]="datos-contexto"
    (close-case-edition)="function-cerrar-componente()"
    (open-case-form)="_editarCaso()"
    (guardarEmision)="function-almacenar-contexto($event)"
  ></ba-case-update>