jopara-ui v1.0.5-4

Jopara UI - React

Más información en:

• MUI Doc: https://mui.com/material-ui/getting-started/overview/
• MUI Data Grid Doc: https://mui.com/x/react-data-grid/

Instalación

Instalar usando npm install jopara-ui

Uso

En la aplicación react, utilice los componentes:

• Data Grid:
  • import { CustomDataGrid } from 'jopara-ui'
  • import { CustomDataGridFilter } from 'jopara-ui'

Modificar el proyecto

• La primera vez que se va a compilar el proyecto (si no se realizó ya antes):

  • npm install -g win-node-env

• Compilar el proyecto:

  • (git bash) npm run build

• Publicar el proyecto:

  • NPM: npm publish
  • KONECTA DEV: npm publish --registry http://desa03.konecta.com.py:4873/

Propiedades

Custom Data Grid

Ejemplo

    <CustomDataGrid columns={columns} rows={data.lista} orderBy={orderBy} orderDir={orderDir} page={page}
        emptyTemplate={error?<Typography color='textSecondary'>
            {error}
        </Typography>:null}
        loading={loading} count={data.total} rowsPerPage={rowsPerPage} onSort={ordenar} keys={keys}
        onChangePage={cambiarPagina} onChangeRowsPerPage={cambiarFilasPorPagina}
    />

Custom Data Grid Filter

Ejemplo

    <CustomDataGridFilter title='Ejemplo'
        subtitle='Este es un ejemplo de filtros'
        filters={activeFilters}
        actions={
            <Button size="small"  variant="contained" sx={{ mr: 1, }}
                startIcon={<AddIcon/>} onClick={agregar}>
                Agregar
            </Button>
        }
        form={
            <Box>
                <Grid  container spacing={2}>
                    <Grid item xs={12} sm={6} md={6}>
                        <Controller control={filterForm.control} name='delegante' render={({field}) => (
                            <FormControl fullWidth>
                                <CustomFormLabel>Canal de Distribución</CustomFormLabel>
                                <BuscadorGenerico
                                    variant='outlined'
                                    size='small'
                                    autoComplete='off'
                                    value={field.value}
                                    onChange={field.onChange}
                                    inputRef={field.ref}
                                    nombreBuscador="areas"
                                    onConfirm={(select) => {
                                        if (select?.length) {
                                            field.onChange({target: {name: field.name, value: select[0].codigoCanalDistribucion}});
                                        } else {
                                            field.onChange({target: {name: field.name, value: ''}});
                                        }
                                    }}
                                    fullWidth
                                />
                            </FormControl>
                        )}/>
                    </Grid>
                    <Grid item xs={12} sm={6} md={6}>
                        <Controller control={filterForm.control} name='delegado' render={({field}) => (
                            <FormControl fullWidth>
                                <CustomFormLabel>Delegado</CustomFormLabel>
                                <BusquedaUsuariosAutorizantes
                                    variant='outlined'
                                    size='small'
                                    autoComplete='off'
                                    placeholder="Cod.Usuario"
                                    value={field.value}
                                    onChange={field.onChange}
                                    inputRef={field.ref}
                                    modalTitle='Buscar Delegado'
                                    onConfirm={(select) => {
                                        if (select?.length) {
                                            field.onChange({target: {name: field.name, value: select[0].userName}});
                                        } else {
                                            field.onChange({target: {name: field.name, value: ''}});
                                        }
                                    }}
                                    fullWidth
                                />
                            </FormControl>
                        )}/>
                    </Grid>
                    <Grid item xs={12} sm={6} md={6}>
                        <Controller control={filterForm.control} name='fechaInicio' render={({field}) => (
                            <FormControl fullWidth>
                                <CustomFormLabel>Fecha Inicio</CustomFormLabel>
                                <DatePicker inputFormat='dd/MM/yyyy'
                                    renderInput={(props) => <CustomTextField {...props} fullWidth size='small'
                                        variant='outlined'
                                    />}
                                    placeholder='dd/mm/aaaa'
                                    value={field.value}
                                    onChange={(newValue) => {
                                        if (newValue) {
                                            const value = format(newValue, 'yyyy-MM-dd 00:00:00');
                                            field.onChange({target: {name: field.name, value}});
                                        } else {
                                            field.onChange({target: {name: field.name, newValue}});
                                        }
                                    }}
                                    inputRef={field.ref}
                                />
                            </FormControl>
                        )}/>
                    </Grid>
                    <Grid item xs={12} sm={6} md={6}>
                        <Controller control={filterForm.control} name='fechaFin' render={({field}) => (
                            <FormControl fullWidth>
                                <CustomFormLabel>Fecha Fin</CustomFormLabel>
                                <DatePicker inputFormat='dd/MM/yyyy'
                                    renderInput={(props) => <CustomTextField {...props} fullWidth size='small'
                                        variant='outlined'
                                    />}
                                    placeholder='dd/mm/aaaa'
                                    value={field.value}
                                    onChange={(newValue) => {
                                        if (newValue) {
                                            const value = format(newValue, 'yyyy-MM-dd 23:59:59');
                                            field.onChange({target: {name: field.name, value}});
                                        } else {
                                            field.onChange({target: {name: field.name, newValue}});
                                        }
                                    }}
                                    inputRef={field.ref}
                                />
                            </FormControl>
                        )}/>
                    </Grid>
                </Grid>
                <Divider sx={{mb: 2, mt: 2}}/>
                <Box>
                    <Button variant="contained" onClick={ buscar } sx={{mr: 1,}}>Buscar</Button>
                    <Button variant="outlined" onClick={ limpiarBusqueda }>Limpiar</Button>
                </Box>
            </Box>
        }
    />