table-advanced v1.0.25

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:

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:

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:

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

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:

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:

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:

4. Instalación

En el directorio del proyecto instalar:
1. yarn install table-advanced / npm install table-advanced

5.Ejemplo de implementación

5.1 Formulario

1. Importar el componente

import {FormCustom} from 'table_advanced';

2. 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

1. Importar el componente

import {InboxCustom} from 'table_advanced';

2. 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

1. Importar el componente

import {PaginationCustom} from 'table_advanced';

2. Usar el componente

function App() {
  return (
    <PaginationCustom
        onChange={onChangePagination}
        total={{ total: 20, title: 'Total de registros' }}
    >
    </PaginationCustom>
  );
}