BA360 Library UI

La intencion de esta libreria es reutilizar componentes que son comunes en los portales de BA360, asi ahorrar tiempo en el armado de portales custom.

Instalación

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

npm i ba360-ui

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 debe agregar las siguientes lineas:

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

• En el mismo archivo vamos a configurar la librería : Primero deberia tener configurada las siguientes variables de entorno.

  export const environment = {
    ...,
    companyName: '', // Usar los valores para su Compania
    secretKey:'',
    clientKey:'',
    apiUrl:''
  }

  Luego la usamos en app.module.ts

  import { environment } from './../environments/environment';
  import { config } from '@ba360-ui';
  config(environment.companyName, environment.clientKey, environment.secretKey, environment.apiUrl);

• Por ultimo vamos a configurar los buffer que con la ultimas actualizaciones de Angular estan teniento problemas:

  • Instalaremos las librerias

    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-ui'

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-ui"  

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.

Uso

Para utilizar este componente, simplemente debe agregar la etiqueta correspondiente

  <template>
    <div>
      <ba-login />
    </div>
  </template>

Props

Este componente no contiene Props.

Contact-List

ba-contact-list muestra una tabla con la lista de contactos correspondiente a la cuenta que se encuentra logueada. Además contiene un filtro para agilizar la búsqueda de contactos.

Uso

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

  <template>
    <ba-contact-list label="Lista de Contactos: "></ba-contact-list>
  </template>

Props

Label

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

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 rellenar el formulario con los datos de un Contacto.

Uso

Agregando la etiqueta correspondiente, podemos visualizar el formulario para la Creación/Edición de Contactos

Ejemplo de uso en Angular:

// contact.component.html

<ba-contact-list (contact)="contacto($event)" label="Listado de Contactos"></ba-contact-list>
<ba-contact-form [data]="contact"></ba-contact-form>

// contact.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  @Input() contact: any = {};

  constructor() { }

  ngOnInit(): void {
  }

  contacto(event: any) {
    this.contact = event.detail;
  }

}

En el ejemplo, se muestra el Listado de Contactos el cual emite un evento con los datos del contacto seleccionado. Luego se recibe esa información en el componente del formulario para rellenarlo con dicha información.

Props

Data

La propiedad Data obtiene la información del contacto seleccionado, el tipo de dato debe ser un Objeto (JSON)

Case-List

ba-case-list muestra una tabla con la lista de casos correspondiente a la cuenta que se encuentra logueada. 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.

  <template>
    <ba-case-list label="Lista de Casos: "></ba-case-list>
  </template>

Props

Label

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