cfa-ditto v1.0.65

Cfa-Ditto

Libreria que concentra en un unico componenente la arquittectura de pantalla: Filtros + Paginado + Tabla de Resultados + Acciones,

Ejemplo de uso. Instalacion: en package.json

"dependencies": {
....
"cfa-ditto": "1.0.5",
....
}

Ejemplo de implementación

import { DittoFilter } from 'cfa-ditto';
import { jsonConfig } from './path-of-configuration'
...

	render(){
		return (<DittoFilter ditoConfig={jsonConfig}/>)
	}

Ejemplo de configuración

{
"restConnector":{
	"host":"localhost:9290/host",
	"method":"GET",
	"url":"/some/url",
	"attrList":"invoices",
	"searchOpen":true
},
"pagination":{
	"total":"total_elements"
},
"sidePadding":50,
"inputList":[
	{
		"type":"date-simple",
		"keyElement":"creationDate",
		"keyOutput":"creation_date",
		"label":"Received Date From",
		"format":"YYYY-MM-DD",
		"required":true
	},
	{
		"type":"select-by-rest",
		"host":"localhost:9290/host",
		"keyElement":"statusType",
		"keyOutput":"status_type",
		"label":"Status Type",
		"placeholder":"Select Status Type",
		"flat":true,
		"url":"/some/url/catalog"
	},
	{
		"type":"text",
		"keyElement":"purchaseOrder",
		"keyOutput":"purchase_order",
		"label":"Purchase Order",
		"placeholder":"insert purchase order",
		"priority":true
	}
],
"buttonsList":[
	{
		"type":"button",
		"mode":"clear",
		"keyElement":"reset",
		"label":"Reset"
	},
	{
		"type":"button",
		"mode":"submit",
		"keyElement":"search",
		"label":"Filter"
	}
]
}

Este objeto de configuración esta compuesto por:

• restConnector
• pagination
• multipleChoice
• inputList
• buttonsList
• actions
• onlyTable
• sidePadding
• onlyFilters
• inputOrder
• buttonsOrder
• actionsOrder

Descarga y uso local

$ git git@github.com:despegar/cfa-ditto.git
$ cd cfa-ditto

Para correr la aplicación de forma local es necesario tener instalado.

• nodejs
• npm

Clonar el proyecto.

$ git git@github.com:despegar/cfa-ditto.git
$ cd cfa-ditto

descargar e instalar dependencias

$ npm install

Correr la aplicación

$ npm start

esto levanta un server de react app con un elemento "ditto-filter" inyectado con una config de ejemplo, para poder probar y desarrollar nuevas funcionalidades

Stack

• Ant Design
• React

Para una ejemplo interactiva vistar: https://ditto-app.netlify.com/

API

restConnector (Object)

Se establecen las configuraciones para la conexión al endpoint de donde se enviaran los datos de filtros y se obtendrán los datos para ser dibujados. Todos los valores no vacíos de los filtros, al momentos del submit, se enviaran mediante query params o query string según como este configurado (GET) o mediante un body (POST)

pagination (Object)

En caso de que que el servicio de consulta acepte paginado, acá se configuran atributos para tomar valores de total de elementos, desplazamientos y con estos datos armar la barra de paginado

Si se utiliza paginado, a la query realizada se enviara mediante el parámetro "offset" el numero de la pagina solicitada, y en "limit" la cantidad de registros pedidos por pagina.

Si no se configura pagination o se lo seta con valor nulo, se utilizara el paginado default de AntDesign, el cual espera la totalidad de registros en la respuesta, y hace un paginado en memoria.

sidePadding (Integer)

valor numérico para establecer un margen a los costados de la sección filtro

multipleChoice (Object)

Opcion configurable, en el caso que se necesiten realizar acciones en base a multiple registros seleccionados.

En caso de que se utilice seleccion multiple, todos los componentes customs recibiran en la prop selectedItems, la lista de registros seleccionados, para poder operar con ellos libremente y realizar las acciones que se necesiten

Si se quiere fijar alguna columna hacia la derecha y se encuentra activo el multipleChoice, esta se debe fijar también ya que está posterior al listado de columnas de inputList. Si no se fija esta columna, se rompe el display.

onlyTable (boolean)

flag que establece si solo se requiere el dibujado de la tabla, y omitir la sección de filtros y botones de clear o submit.

onlyFilters (boolean)

flag que establece si solo se requiere un form de filtros, omitiendo el hecho de hacer la query y el dibujado de la tabla de resultados.

inputList (ListObject)

Lista de objeto de configuración en donde se establecen los filtros que se dibujaran en pantalla y columnas que se mostraran como resultado. Por defecto, todo filtro que se dibuja por pantalla, es una columna que se muestra como resultado (puede ser configurado).

Configuraciones generales:

Configuraciones según tipo de filtro:

ademas de las configuraciones generales, según el tipo de filtro que se selecciona, tendrá la posibilidad de otras configuraciones adicionales que ira en este mismo de objeto.

Combo Select Simple:

Combo en donde se podrán configurar valores establecidos

Combo Select by Rest:

Combo que se llenara según el resultado de una llamada a un endpoint configurado.

Input Date Simple: Tipo de filtro fecha, en donde se mostrar un calendario para elegir una fecha en particular

Los restantes tipo de input dates, date-period (selección de fecha por mes), y date-range (selección de un intervalo de fecha en un mismo calendar) utilizan estas mismas configuraciones.

file-text input: Tipo de filtro, que permite seleccionar un archivo texto plano del equipo, parsearlo, y los valores obtenidos enviarlos en el request. Ej: un csv con una lista de ids.

buttonsList (ListObject)

Lista de objetos de configuración en donde se establecen los botones que aparecerán en la parte inferior de la sección de filtros. Ya se encuentran dos botones preestablecidos, con la posibilidad de agregar los propios.

actions (ListObject)
Lista de objetos de configuración en donde se establecen las acciones que se pueden realizar sobre un elemento seleccionado de la tabla de respuesta en particular, o el conjunto de respuesta. Puede ser acciones predefinidas, como mostrar el nombre de algun atributo, descarga de un archivo, o acciones custom.

Configuraciones generales:

Detalle y configuraciones adicionales según tipo de acción:

ademas de las configuraciones generales, según el tipo de acción , existen otras configuraciones adicionales que ira en este mismo de objeto.

Mostrar Nombre (name): Con este tipo de acción, se mostrara en el encabezado algún atributo en particular de la respuesta, para identificar el registro seleccionado

Descarga de Archivo (download): Permite la descarga de un archivo indicando la url del servicio al cual se realizara la llamada para obtener el documento, configurar extensiones y nombre de archivo. Por default, se descargara el archivo con el valor que venga en el header del request de "content-disposition / filename=".

Componentes Customs

Ditto da la posibilidad de poder utilizar componentes realizados por el usuario, para contemplar casos de usos, que no podrían resolverse con las acciones que Ditto provee y se dibujaran en el lugar del elemento que se haya indicado que es de tipo custom, mediante el keyElement.

Ejemplo de implementación

Objeto de configuracion
{
	...
	inputList:[
		...
		{
			type:  "custom-column",
			keyElement:  "errorMsg",
			label:  "Message Error"
		}
		...
	],
	...
}

El componente custom que se quiera dibujar, a nivel sintaxis, debe estar indicado como un hijo (children) del componente general DittoFilter e indicar una prop componentId el valor del keyElement que se haya establecido en la configuración.

import { DittoFilter } from 'cfa-ditto';
import  ComponenteCustom  from '/path-of-component';
import { jsonConfig } from './path-of-configuration-with-custom-component'
...

	render(){
		return (<DittoFilter ditoConfig={jsonConfig}>
					<ComponenteCustom componentId="errorMsg"/>
				</DittoFilter>
		)
	}

Todos los Componentes Custom recibirán mediante las siguientes props los datos de filtros y registros para que el usuario pueda realizar el código que necesite:

• record: en esta prop se encontrara el registro seleccionado de la tabla de respuesta
• refetch: en esta prop se recibe la función para volver a ejecutar la ultima query realizada, en caso de que se necesite tras una acción custom, refrescar la tabla de resultados
• filtersValue: en esta prop se recibe un objeto con todos los keyElements de los filtros y su valor actual correspondiente
• responseData: en esta props se recibe la lista de elementos dibujada en la tabla de respuesta actualmente
• selectedItems: en caso de utilizar seleccion multiple, aqui se encuentran la lista de registros seleccionados

default (Object) La api de Ditto provee la posibilidad de establecer un template default, los cuales rigen las mismas configuraciones antes descriptas. Es de utilidad si se tienen distintos archivos de configuraciones, son similares elementos. Los elementos comunes se pueden abstraer a un único objeto de configuración, definirlo en el "default", y redefinir cosas en el main.

	export cosnt defaultConfig= {
		...
		restConnector:{
			host: "http://somehost.com"
			url: "/defualt/endpoint"
			method: "GET"
		},
		sidePadding: 50
		...
	}

import { defaultConfig } from  ".some/path/configs";
...
	cosnt overrideConfig= {
		defualt: defaultConfig
		...
		restConnector:{
			url: "/override/endpoint"
			method: "POST"
		}
		sidePadding:200
		...
	}
...

Configuración resultante :

...
	mergedConfig = {
		...
		restConnector:{
			host: "http://somehost.com"
			url: "/override/endpoint"
			method: "POST"
		}
		sidePadding:200
		...
	}
...

inputOrder / buttonsOrder / actionsOrder (List (String - keyElement)) Por default, los elementos se dibujan en pantalla, en base al orden en que estén dispuestos en la configuración principal. Si se llega a utilizar un template default, al momento de hacer el "merge" entre ambos objetos, es posible que el orden final no sea el esperado. Para este caso, se puede definir una lista de keyElement del cual se tomara como referencia para dibujar en pantalla según el orden correspondiente en el atributo especificado. inputOrder -> filtros y columnas, buttonsOrder -> botones, actionsOrder -> acciones