crud-w3css-bootstrap

Crea formularios para dar de alta o ver elementos de un api, o un arreglo o de lo que se quiera.

DEMO W3CSS

DEMO bootstrap

Demomento es la versión de javascript, despues agregare los archivos ts para que funcione con typescript.

Install

npm i crud-w3css-bootstrap

Setup

Importar el webcomponent

Lo primero que se tiene que hacer es importar el webcomponent del crud.

Si es w3-css:

import 'crud-w3css-bootstrap/w3css/crudW3.js';

Si es bootstrap

import 'crud-w3css-bootstrap/bootstrap/crudBo.js';

Agregar el webcomponent al html

Luego tenemos que definir donde va nuestro crud en el html Si es w3css

<crud-w3css tema="teal" titulo="Prueba de arreglo"></crud-w3css>

Notar: que el tema hace referencia a los temas de color de w3-css, para esta referencia colores.

Si es bootstrap

<crud-bo tema="sandstone" titulo="Prueba de arreglo"></crud-bo>

Nota: el tema hace referencia a los diferentes temas de boostwatch, para usar solo poner el nombre del tema en minusculas.

Definir el modelo

Nota vamos a manejar un crud sobre un arreglo de datos, asi que definiremos nuestros datos:

let items = [
    {
        titulo: 'HTML Tutorial',
        descripcion: 'In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!',
        fecha: Date.now()
    }
];

Para que funcione esta libreria es necesario definir el modelo del formulario. Esto se hace creando una objecto de la clase Modelo y despues agregamos campos según los ocupemos.

import { Campo, Modelo } from "crud-w3css-bootstrap/modelo.js";

let modelo = new Modelo('Articulo');
modelo.campos.push(new Campo({
    nombre: 'titulo',
    etiqueta: 'Título', 
    tipo: 'text',
    reglas: 'required',
    ancho: '12'
}));

modelo.campos.push(new Campo({
    nombre: 'descripcion', 
    etiqueta: 'Descripción', 
    tipo: 'textarea', 
    reglas: 'required',
    ancho: '12'
}));

modelo.campos.push(new Campo({
    nombre: 'fecha',
    etiqueta: 'Fecha', 
    tipo: 'number',
    reglas: 'disabled|no-visible'
}));

Despues se describiran las clases Modelo, Campo y CampoCatalogo.

Se necesita definir el id del modelo para organizar los elementos.

modelo.setId('fecha');

seleccionar el webcomponente

Se tiene que seleccionar el webcomponente. si es w3css:

let crud = document.querySelector('crud-w3css');

si es bootstrap

let crud = document.querySelector('crud-bo');

Definir el listar

crud.setOnListar( fun: function(estado) )

donde

| var | tipo | descripcion | |-----|---------|---------------| | fun | function| Es una función que regresa una promesa con la lista de elemntos a listar| |estado| object| Contiene un objecto que contiene el estado del paginador, se utiliza para filtrar los elemntos de que se retornara al paginador|

En el ejemplo seria:

crud.setOnListar((estado) => {     
    return new Promise( (resolve,reject) => {  
        let res = items.slice(estado.offset, estado.offset + estado.limit);
        resolve (
            {
                total:  items.length,
                offset: estado.offset + estado.limit,
                limit: estado.limit,
                items: res
            }
        );        
        
    });
});

Definir ver

crud.setOnVer( fun: function(id) )

donde

| var | tipo | descripcion | |-----|---------|---------------| | fun | function| Es una función que regresa una promesa con el elemento de la listaque conside con el id| |id| any| debe ser del mismo tipo con el que se define el id del modelo|

en el ejemplo

crud.setOnVer((id) => {    
    return new Promise( (resolve, reject) => {        
        let item = items.find(x => x.fecha == id);
        resolve(item);
    });
});

Define editar

crud.setOnEditar( fun: function(id, datos) )

donde

| var | tipo | descripcion | |-----|---------|---------------| | fun | function| Es una función que se encarga de guardar los datos, regresa una promesa con los datos actualizados| |id| any| debe ser del mismo tipo con el que se define el id del modelo| |datos|any|es el objecto de datos a actualizar|

en el ejemplo

crud.setOnEditar( (id, datos) => {
    return new Promise( (resolve, reject) => {        
        let index = items.findIndex(x => x.fecha == id);
        items[index] = datos;
        resolve(datos);
    });
});

Define agregar

crud.setOnAgregar( fun: function(datos) )

donde

| var | tipo | descripcion | |-----|---------|---------------| | fun | function| Es una función que se encarga de guardar los datos, regresa una promesa con los datos creados| |datos|any|es el objecto de datos que se va a crear|

en el ejemplo

crud.setOnAgregar( (datos) => {
    return new Promise( (resolve, reject) => {
        datos.fecha = Date.now();
        items.push(datos);
        resolve(datos);
    });
});

Define eliminar

crud.setOnEliminar(fun: function(id)); 

| var | tipo | descripcion | |-----|---------|---------------| | fun | function| Es una función que se encarga de eliminar los datos, | |id| any| debe ser del mismo tipo con el que se define el id del modelo|

en el ejemplo

crud.setOnEliminar((id)=>{
	return new Promise((resolve,reject) => {
        let index = items.findIndex(x => x.fecha == id);
        let res = confirm("Desea eliminar este registro ?");
        if (res && index >=0 ){
            items.splice(index,1);
            resolve(true);
        } else {
            reject(false);
        }
	});
});

Con esto ya esta funcionando nuestro crud.