rcomponent v1.1.14

RComponents

Esta libreria fue generada usando Angular CLI versión 12.2.0, contiene 3 componentes: RInput, RSelect, RTable, todos son wrappers de componentes de Bootstrap que poseen funcionalidades extras para reducir código. Estos componentes estan basados en la interfaz ControlValueAccessor de angular, para hacer uso de los ReactiveForms y los NgModel.

Apariencia

Apariencia de los componentes

Instalacion

Use NPM para instalar este componente.

Use este comando para versiones de angular 13 y versiones 7 de rxjs

npm install rcomponents@1.1.14

Use este comando para versiones de angular 12 y versiones 6 de rxjs

npm install rcomponents@1.1.13

Uso

Bootstrap

Esta libreria usa clases de boostrap, asi que es necesario importar los respectivos archivos de bootstrap en el archivo '<angular.json>', la importacion del archivo js de boostrap es opcional

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]

Modulo

Importamos la librería en el modulo principal o donde se requiera.

import { RcomponentsModule } from 'rcomponents';  // <---- IMPORT

@NgModule({
  declarations: [
    ...
  ],
  imports: [ 
    RcomponentsModule  // <---- IMPORT
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component.html

Llamamos los componentes que necesitemos en nuestro HTML pasandole los parametros correspondientes

<div class="container" [formGroup]="form">
    
  <h2>R-Input</h2>
  <r-input label="Text"  formControlName="text"></r-input>
  <r-input label="Number" type="number" formControlName="number"></r-input>
  <r-input label="Range" type="range" formControlName="range"></r-input>
  <r-input label="Textarea" type="textarea" formControlName="textarea"></r-input>
  <r-input label="File" type="file" formControlName="file"></r-input>
  <r-input label="Color" type="color" formControlName="color"></r-input>
  <r-input label="Time" type="time" formControlName="time"></r-input>
  <r-input label="Date" type="date" formControlName="date"></r-input>
  <r-input label="Checkbox" type="checkbox" formControlName="checkbox"></r-input>
  <r-input label="Radio" type="radio" group="radio" [options]="options" formControlName="radio"></r-input>
 
 <h2>R-Select</h2>
  <r-select label="Select" formControlName="select" [selectService]="loadPosts" bindLabel="title" [templateOption]="optionTemplate"></r-select>

  <ng-template #optionTemplate let-option="option">
    <h5>{{option.label}} <span class="badge bg-secondary">{{option.value.id}}</span></h5>
  </ng-template>
 
  <h2>R-Table</h2>
  <r-table [columns]="columns" [tableService]="loadUsers"></r-table> 
  
</div>

component.ts

Configuracion de los componentes

// TemplateRef para renderizar las opciones del select de otra forma
@ViewChild('optionTemplate', { static: true }) optionTemplate: TemplateRef<any>;
  
// Formulario dinamico
    this.form = this.formBuilder.group({
      text: [{ value: 'something', disabled: true }],
      number: null,
      range: null,
      textarea: null,
      file: null,
      color: null,
      time: null,
      date: null,
      checkbox: [{ value: false, disabled: true }],
      radio: 1,
      select: { name: 2 },
    });

    this.form.valueChanges.subscribe((value) => console.log(value));

    // Opciones de los selects o  input radio
    this.options = [
      {
        label: 'label1',
        value: { name: 1 },
      },
      {
        label: 'label2',
        value: { name: 2 },
      },
    ];

    // Definicion simple de columnas para la tabla
    this.columns = [
      {
        title: 'ID',
        data: 'id',
      },
      {
        title: 'NAME',
        data: 'name',
      },
    ];
  }

  // Funcion que obtiene los datos que llenaran la tabla
  get loadUsers(): TableService {
    return {
      callback: (_params: any, _filters: any) => {
        return this.http.get('https://jsonplaceholder.typicode.com/users');
      },
    };
  }
  
  // Funcion que obtiene los datos que llenaran el select
  get loadPosts(): SelectService{
    return {
      callback: (_value:any,_search:string) => {
        return this.http.get('https://jsonplaceholder.typicode.com/posts');
      }
    }
  }

Componentes

R-Input

Este componente es un wrapper del form-control de bootstrap, el cual reduce el codigo brindando un uso rapido y efectivo.

Los parametros que recibe este componente son:

R-Select

Este componente es un wrapper del form-select de bootstrap, el cual reduce el codigo brindando un uso rapido y efectivo, ademas de ser altamente parametrizable, dando opciones de busqueda local o en el servidor, a travez de un servicio.

Los parametros que recibe este componente son:

R-Table

Este componente es un datatable sencillo y configurable, que permite filtrar, paginar, ordenar, mostrar datos simples y datos complejos en sus celdas a traves del render de Angular.

Los parametros que recibe este componente son:

Modelos de datos

Option

Esta interfaz representa los datos que deben pasarsele al componente RSelect o al RInput de tipo radio.

Column

Esta interfaz representa la manera en que se deben configurar las columnas de la tabla.

SelectService

Esta interfaz representa la estructura de la funcion que debe ser pasada al RSelect cuando los datos seran cargados desde el backend.

value

Envia el valor actual del select por si se requiere para hacer algun filtro en el backend.

search

Valor por el cual se quiere filtrar.

TableService

Esta interfaz representa la estructura de la funcion que debe ser pasada al RTable cuando los datos seran cargados desde el backend.

params

parametros para la paginacion y filtrado del lado del servidor.

  {
  	start: 0, 			   // pagina actual
	  length: 5,  		   // numero de elementos que traera
	  order: {
		  index: 0,		  // 'indice de la columna por la cual ordenas'
		  key: 'ID',	      // 'columna por la cual ordenar'
		  dir:'asc',	      // 'modo de ordenamiento asc o desc'
	  },
	  search: {
		  key: 'ID',	     // 'columna por la cual buscar'
		  value: '123'	// 'valor de la busqueda'
	  }
  }

filters

campos externos a la tabla para aplicar filtros

  {
		campo1: 'valor1',
		campo2: 'valor2',
		....
  }

Valor esperado por el backend para llenar la tabla

{
	data: 'array de datos',
	recordsTotales: 'numero de registros'
}