table-advanced
v1.0.29
Published
Componentes generales, para su uso y configuración de forma externa, creado a partir de create-react-library.
Downloads
84
Keywords
Readme
Plantilla Bandejas de Datos ANTD DESIGN
1. Descripción
Plantilla para la construcción de bandejas y formularios a traves de componentes de antd design parametrizados.
2. Componentes
- FormCustom
- InboxCustom
- PaginationCustom
2.1 FormCustom
Este componente genera un formulario de acuerdo a un json con la estructura de los campos que se necesitan. Los parámetros de configuración son los siguientes:
| Nombre | Descripción | Tipo | Valor | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------- | | schema | Estructura json con la información de los campos en el formulario | Json | Esquema formulario | | catalogs | Estructura json con los catálogos requerido para usarse en el formulario, para un select o radio group. | json | { dataCatalogo1, dataCatalogo2 } (Catalogos) | | okCols | Estructura json de las columnas para situar el botón Ok en alguna posición. | Json | { span: 2, offset: 10 }, {xs:{span: 2, offset: 10 }} | | okText | String de texto para el botón ok | String | '', 'Guardar' | | cancelCols | Estructura json de las columnas para situar el botón Cancelar en alguna posición. | Json | { span: 2, offset: 10 }, {xs:{span: 2, offset: 10 }} | | initialValues | Estructura json con los nombres de los campos como propiedades y el valor inicial definido | Json | {nombre: 'usuario',apellido: 'apellido',tipo: 2,cargo: 1, 'segundo-apellido': 'pérez',Checkbox: true} | | disabledForm | Valor verdadero o falso si se requiere o no deshabilitar la edición del formulario | Boolean | true, false | | onValuesChangeForm | Función que devulve todos los valores del formulario cuando sufre un cambio y los valores modificados del mismo. | function(data){} | - | | onFinishForm | Función que ejecuta el onFinish del formulario antd y devulve un json con los valores obtenidos en el formulario. | function(data){} | - | | onCancelForm | Función que ejecuta el cancelar del formulario, no se recupera ningún dato. | function (){} | - | | nativeProps | Estructra que define el tamaño del formulario 'small', 'default', '' y una propiedad para hacer scroll al primer error que tenga el formulario. | Json | {size:'default',scrollToFirstError:true} |
2.2 InboxCustom
Este componente genera una bandeja de información de acuerdo con los parámetros que se establezcan. Los parámetros de configuración son los siguientes:
| Nombre | Descripción | Tipo | Valor | | -------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------- | | type | Define si la bandeja es de tipo tabla o de tipo lista. | String | table/list | | columns | Define las columnas que se van a mostrar en la bandeja. | Json | Columnas | | actions | Define los botones mostrados en la columa de acciones a realizar con la información. | Json | Acciones | | dataSource | Información mostrada en la bandeja. | Json | {} | | initialValuesCheck | Parámetro con la definición de los valores seleccionados en caso de contar con checkbox en cada registro. | Json | {} | | initialFilters | Información de los filtros inicialmente seleccionados. | Json | {} | | propCheckDisabled | Nombre del atributo de la información que define si el registro está deshabilitado. | String | undefined/null/'' | | initialColumnOrder | Define los valores iniciales aplicados en el ordenamiento de la información. | Array[String] | []/ ['PROP1 DESC', 'PROP2 ASC'] | | catalogs | Objeto con los catálogos a mostrar en los filtros de la bandeja. | Catalogos | | total | Número total de registros | Number | null/0/n | | onChangeCheckBox | Función que cacha los elementos seleccionados, ignorados y seleccionados todos. | function(checkAll, selected, ignored) {} | - | | onChangeCustomSort | Función que cacha las columnas aplicadas para el ordenamiento de la información. | function(sortedColumns) {} | - | | executeAction | Función que cacha la acción que se está ejecutando de acuerdo con la columna Acciones. | function(action) {} | - | | onValuesChangeForm | Devuelve el nombre y valor del campo que cambió. | function(data) {} | - | | onChangeHeaderFilter | Devuelve los valores filtrados en la bandeja. | function(filters) {} | - |
2.3 PaginationCustom
El componente de paginado es utilizado para mostrar las páginas generadas por el numero total de registros existententes y el número de registros por página. Se configura a partir de los siguientes parámetros:
| Nombre | Descripción | Tipo | Valor | | -------- | --------------------------------------------------------------------------------------------------- | ----------------- | ----- | | total | Valor que determina el total en el universo de registros. | Integer | 10 | | first | Valor que determina el número de la pagina. | Integer | 1 | | next | Valor que determina el número de registros por página. | Integer | 10 | | onChange | Función que devuleve los valores first y next actuales al cambiar de página o registros por página. | function (data){} | - |
3. Configuración tipos de dato
Tipos de dato
[]=array
{}=objeto
3.1 Esquema de formulario
El esquema es una estructura json que contiene un arreglo de objetos, mismo que se definen como los campos pertenecientes al formulario.
A continuación se enlistan las propiedades que debe contener cada campo dentro del formulario:
3.1.1 Tipo campo
| Nombre | Descripción | Tipo | Valor | Aplica campo | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------- | -------------------------------- | | title | Definición del la etiqueta a mostrar en el campo | String | '' | Todos | | name | Identificador único del campo dentro del formulario | String | '' | Todos | | placeholder | Nombre o descripción del campo | String | '' | Input,Select,TextArea,DatePicker | | type | Valor que define el tipo de campo | String | Input, Select, Radio, CheckBox, TextArea, DatePicker. | Todos | | rules | Definición de las reglas del campo | Array | [Regla] | Todos | | cols | Definición json de las columnas para ubicar el campo en una posición | Json | {} | Todos | | options | Nombre del catálogo que proporcionará las opciones en el select. (El catálogo se tomará de acuerdo a su nombre dentro de la propiedad "catalogs" del formulario) | String | '' | Select, Radio | | propsOptions | Definición de los nombres a tomar como id y valor en cada opción del select o radio. | String | 'id,descripción' | Select, Radio | | showCount | Valor que define si será visible el contador de caracteres. | Boolean | true/false | TextArea | | rows | Valor que define el número de renglones visibles en un campo de texto. | Integer | 4 | TextArea | | maxLength | Valor que define el valor máximo de caracteres en el campo. | Integer | 600 | TextArea | | autoSize | Valor que define el valor máximo y mínimo de renglones en el campo. | Json | {"minRows": 4, "maxRows": 4} | TextArea |
3.1 Regla
Las reglas están definidas por una estructura json tienen un tipo y un mensaje que se muestra en la validación de ellas. Los tipos son los siguientes:
| Tipo | Descripción | Estructura | | -------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | len | Valida la longitud de una cadena, número o array. | {"len":10,"message":"Se requieren 10 caracteres."} | | max | type requerido: valida longitud máxima de string, number,array. | {"max":10,"message":"Máximo 10 caracteres."} | | min | type requerido: valida longitud mínima de string, number,array | {"min":10,"message":"Mínimo 10 caracteres."} | | pattern | Valida la expresión regula o patrón que debe serguir un campo. | [{"pattern":'^([a-zA-Z0-9áéíóúÁÉÍÓÚñÑäëïöüÄËÏÖÜ.()\s_-])+$', "message": 'Formato inválido'}] | | required | Valida que el campo es obligatorio | {"pattern":'[A-Za-z]{3}', "message": 'Dato requerido'} |
3.2 Catálogos
La propiedad requiere un json con los catálogos usados en el formulario, es decir si en el formulario tiene un campo de tipo Select o Radio, éstos deben mostrar opciones, por lo que cada uno requiere un catálogo que los alimente.
Para ello es necesario que los catálogos compartidos sean arreglos de objetos json como opciones y que sus atributos se apeguen a lo establecido en las propiedades options y propsOptions para que se puedan interpretar correctamente.
3.3 Columnas
Las columnas son un arreglo json, donde cada elemento define la columna que se va a mostrar dentro de la bandeja.
En seguida se enlistan las propiedades definidas para cada columna:
| Nombre | Descripción | Tipo | Valor | | ------------ | ----------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------- | | idColumn | Identificador único de la columna | Integer | - | | dataIndex | Index identificador de la columna | String | - | | key | Clave única de esta columna | String | - | | title | Nombre que se visualiza en la columna | Stirng | '' | | width | Tamaño en pixeles de la columna.(Es usado para las bandejas de tipo table) | Integer | null | | percent | Tamño en pordentaje que ocupa una columna en la bandeja. | String | '5%' | | cols | Definición de las columnas antd (grid) que ocupa la columna en la bandeja. | Json | {xs:{span:1,offset:0}} | | showActions | Define si la columna va a mostrar acciones por cada registro. | Boolean | true/false | | status | Valor que define si la columna es de tipo estatus | Boolean | true/false | | statusIcon | Valor que define los íconos a mostrar de acuerdo al estatus de la columna | String | '' | | sorter | Valor que define si la columna tiene ordenamiento o si el ordenamiento es múltiple. | Integer | -1 Ordenamiento de 1, 0 No tiene ordenamiento, 1 Ordenamiento múltiple. | | filterType | Valor que define el tipo del filtro, Ninguno, Normal ó Dropdow. | Integer | 0 None,1 Normal, 2 Dropdown | | fixed | Valor que define si la columna está fija a la derecha a la izquierda o nunguno. | Integer | 1 none, 2 right, 3 left | | radio | Valor que define si la columna toma la forma circular de un radio. | Boolean | true/false | | checkbox | Valor que define si la columna es de la forma checkbox. | Boolean | true/false | | oneSelection | Valor que define si la columa permite selecionar un registro a la vez | Boolean | true/false | | selectAll | Valor que define si la columna permite seleccionar todos los registros a la vez | Boolean | true/false | | field | Define el tipo de campo mostrado en el filtro de la columna. | Json | Json de tipo campo |
3.4 Acciones
Las acciones son un arreglo json en el que cada objeto define una acción a mostrar dentro de la bandeja.
A continuación se presentan las propiedades para la configuración de una acción:
| Nombre | Descripción | Tipo | Valor | | -------------- | ---------------------------------------------------------------- | ------- | -------------------- | | idAction | Identificador único de la acción. | Integer | - | | actionText | | | | | tooltip | Valor que define si el botón de la acción tiene un tooltip. | Booelan | true/false | | tooltipText | Texto que se muestra en el tootlip de la acción. | String | '' | | icon | Nombre del ícono antd a mostrar en el botón de la acción | String | ej. "SearchOutlined" | | popConfirm | Valor que define si el botón de la acción requiere confirmación. | Boolean | true/false | | popConfirmText | Valor que muestra la confirmación de la acción. | String | '' | | nameAction | Nombre de la acción. | String | '' |
4. Instalación
En el directorio del proyecto instalar:
yarn install table-advanced / npm install table-advanced
5.Ejemplo de implementación
5.1 Formulario
- Importar el componente
import {FormCustom} from 'table_advanced';- Usar el componente
function App() {
const onValuesChangeForm =(data) =>{
console.log(data)
//Devuelve el nombre y valor del campo que cambió.
}
const onFinishForm =(data) => {
console.log(data)
//Devuelve los valores del formulario, al presionar el submit.
}
const onCancelForm = () => {
//onCancelForm
console.log('onCancelForm')
}
return (
<FormCustom
nativeProps={
description:'Formulario'
size:'default'
scrollToFirstError:{true}
}
schema = [{
title='Nombre'
type='Input'
name='nombre'
rules={[{required:true, message:'Dato requerido'}]}
cols={xs:{span:8,offset:0},sm:{span:8,offset:0},md:{span:8,offset:0},lg:{span:8,offset:0},xl:{span:8,offset:0}}
},
{
title='Catálogo'
type='Select'
name='catalogo'
options:'dataCatalogoSelect'
propsOptions:'idCatalogo,descripcion'
rules={[{required:true, message:'Dato requerido'}]}
cols={xs:{span:8,offset:0},sm:{span:8,offset:0},md:{span:8,offset:0},lg:{span:8,offset:0},xl:{span:8,offset:0}}
},
{
title='Tipo'
type='Radio'
name='tipo'
options:'dataCatalogoRadio'
propsOptions:'idRadio,descripcion'
rules={[{required:true, message:'Dato requerido'}]}
cols={xs:{span:8,offset:0},sm:{span:8,offset:0},md:{span:8,offset:0},lg:{span:8,offset:0},xl:{span:8,offset:0}}
},
{
title='Checkbox'
type='Checkbox'
name='checkbox'
rules={[{required:true, message:'Dato requerido'}]}
cols={xs:{span:8,offset:0},sm:{span:8,offset:0},md:{span:8,offset:0},lg:{span:8,offset:0},xl:{span:8,offset:0}}
},
{
title: 'TextArea',
type: 'TextArea',
name: 'textArea',
showCount: true,
rows: 4,
maxLength: 600,
placeholder: 'Cantidad máxima de caracteres 600',
autoSize: {minRows: 4, maxRows: 4},
cols={xs:{span:8,offset:0},sm:{span:8,offset:0},md:{span:8,offset:0},lg:{span:8,offset:0},xl:{span:8,offset:0}}
},
{
title: 'Upload',
name: 'upload',
type: 'Upload',
maxCount:2,
accept:'.pdf,.xls,.png,.jpg,.bmp',
listType:'picture',
cols: {"span": 24, "offset": 0},
titleButton:'Selecciona un archivo con extensión .xlsx no mayor a 10MB'
}]
cancelText={null}
cancelCols={null}
okText={'Filtrar'}
okCols={{ span: 2, offset: 10 }}
catalogs={
{
dataCatalogo1:[{idCatalogo:1, descripcion: 'Opción 1'},{idCatalogo:2, descripcion: 'Opción 2'}],
dataCatalogo2::[{idRadio:1, descripcion: 'Radio 1'},{idRadio:2, descripcion: 'Radio 2'}],
}
}
initialValues={
nombre: 'usuario',
tipo: 2,
catalogo: 1,
Checkbox: true
}
onValuesChangeForm={onValuesChangeForm}
onFinishForm={onFinishForm}
onCancelForm={onCancelForm}
disabledForm={false}
>
</FormCustom>
);
}5.2 Bandeja
- Importar el componente
import {InboxCustom} from 'table_advanced';- Usar el componente
function App() {
const initialCheck = {
selected: [],
ignored: [],
checkAll: false,
};
const initialColumnOrder = ['AREA_ADSCRIPCION DESC', 'CARGO_PUESTO ASC'];
const ejecutarAccion = (data) => {
console.log(data);
//Devuele la acción ejecutada.
}
const onChangeHeaderFilter = (data) => {
console.log(data)
setInitialFilters(data);
//Devuelve los valores filtrados en la bandeja.
}
const onChangeCheckBox = (checkAll, selected, ignored) => {
//Devuleve los valores:
//checkAll: Si se seleccionó todo
//selected: Los registros seleccionados
//ignored: Los valores ignorados
console.log('checkAll', checkAll);
console.log('selected', selected);
console.log('ignored', ignored);
}
//para obtener el ordenamiento de columnas cuando hay un input con el ordenadomiento del lado derecho
const onChangeCustomSort =(sortedColumns) => {
console.log(sortedColumns)
}
return (
<InboxCustom
type='table'
totalWithPagination={false}
nativeProps={{
idList: 1,
name: "Personas evaluadas: Nueva solicitud",
description: "Bandeja con el listado de personas evaluadas en el registro de una nueva solicitud de revisión.",
type: "table",
scroll: {
multiple: null,
x: null,
y: null
},
rowKey: 'idBandeja',
totalWithPagination: true,
componentsOrder: 'form,tableList,totals,pagination'
}}
columns={[
{
idColumn: 1,
dataIndex: 'idBandeja',
key: 'identificador',
title: 'Identificador',
width: null,
percent: '5%',
cols: {
xs: null,
sm: null,
md: null,
lg: null
},
showActions: false,
status: false,
statusIcon: null,
sorter: null,
filterType: 'None',
fixed: 'none',
radio: false,
checkbox: true,
oneSelection: false,
selectAll: true,
},
{
idColumn: 2,
dataIndex: 'nombre',
key: 'NOMBRE',
title: 'Nombre',
width: 200,
percent: null,
cols: {
xs: null,
sm: null,
md: null,
lg: null
},
showActions: false,
status: false,
statusIcon: null,
sorter: {
multiple: 3,
x: null,
y: null
},
filterType: 'Normal',
fixed: 'none',
radio: false,
checkbox: false,
oneSelection: false,
selectAll: false,
field: {
type: 'Select',
maxLength: 10,
placeHolder: 'PlaceHolder',
options: 'dataCatalogo2',
propsOptions: 'idCatalogo,descripcion',
allowClear: false,
size: 'large'
}
},
{
idColumn: 3,
dataIndex: 'descripcion',
key: 'DESCRIPCION',
title: 'Descripción',
width: 200,
percent: null,
cols: {
xs: null,
sm: null,
md: null,
lg: null
},
showActions: false,
status: false,
statusIcon: null,
sorter: {
multiple: 3,
x: null,
y: null
},
filterType: 'Normal',
fixed: 'none',
radio: false,
checkbox: false,
oneSelection: false,
selectAll: false,
field: {
type: 'Input',
maxLength: 10,
placeHolder: 'Adscripción',
rules: [{ pattern: '^([a-zA-Z0-9áéíóúÁÉÍÓÚñÑäëïöüÄËÏÖÜ.()\\s_-])+$', message: 'Dato requerido' }],
options: 'dataCatalogo2',
propsOptions: 'idCatalogo,descripcion',
allowClear: false,
size: 'large'
}
},
{
idColumn: 4,
dataIndex: 'acciones',
key: 'ACCION',
title: 'Acciones',
width: 100,
showActions: true,
}
]}
actions={[
{
idAction: 73,
actionText: 'Algo',
tooltip: true,
tooltipText: "Consultar",
icon: "SearchOutlined",
popConfirm: false,
popConfirmText: null,
nameAction: "consultar"
},
{
idAction: 72,
actionText: null,
tooltip: true,
tooltipText: "Editar",
icon: "EditOutlined",
popConfirm: false,
popConfirmText: null,
nameAction: "editar"
},
{
idAction: 74,
actionText: null,
tooltip: true,
tooltipText: "Eliminar",
icon: "DeleteOutlined",
popConfirm: true,
popConfirmText: "¿Desea eliminar la solicitud?",
nameAction: "eliminar"
}]}
dataSource={[{
idBandeja: '1',
nombre: 'Nombre del registro',
descripcion: 'Descripción del registro'
}]}
initialFilters={initialFilters}
initialValuesCheck={initialCheck}
initialColumnOrder={initialColumnOrder}
propCheckDisabled={'disabled'}
propCheckAllDisabled={true}
onChangeCheckBox={onChangeCheckBox}
onChangeCustomSort={onChangeCustomSort}
executeAction={ejecutarAccion}
onValuesChangeForm={onValuesChangeForm}
onChangeHeaderFilter={onChangeHeaderFilter}
catalogs={
{
dataCatalogo1: [{ idCatalogo: 1, descripcion: 'Filtro número 1' }, { idCatalogo: 2, descripcion: 'Filtro número 2' }],
dataCatalogo2: [{ idCatalogo: 1, descripcion: 'Filtro número 1' }, { idCatalogo: 2, descripcion: 'Filtro número 2' }],
}
}
>
</InboxCustom>
);
}5.3 Paginación
- Importar el componente
import {PaginationCustom} from 'table_advanced';- Usar el componente
function App() {
return (
<PaginationCustom
onChange={onChangePagination}
total={{ total: 20, title: 'Total de registros' }}
>
</PaginationCustom>
);
}