ba360-ui v0.1.1
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.