beta-tabla/index.js

Componente React 'Beta Tabla' que consume API y se Pagina"

//Nivel de Row o filas
//Aún no se generan las columnas automáticamente...
import React, { Component } from 'react';
import API from './Apis';
import '../css/bootstrap.min.css';
import { Tabs, Tab, TabList, TabPanel } from '../Tabs';
import "../Tabs/css/paginacion.css";

let Encabezados   = [];
let FilaXFila     = [];
let ColXCol       = [];
let ETab          = [];
let ETabPanel     = [];
let totalColumnas = 0;
let lbEncabezados = [];
let totalPaginas  = 0;
let temindex      = 0;
let tempcolor     = "";
let JsonObj       = [];
let filaClickeada = "";

const row = { backgroundColor: "blue", color: "white", bold: true, padding: 0 }

class TablaCatalogo extends Component {
  constructor(props){
    super(props)
    this.state = {
            url: this.props.url       || "https://jsonplaceholder.typicode.com/",
       catalogo: this.props.catalogo  || "",
     parametros: this.props.parametros|| "",
        headers: this.props.headers   || "Authentication: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ5b2ZvIiwic2NvcGVzIjoicGVyZmlsZXNfYWdyZWdhcixwZXJmaWxlc19lZGl0YXIscGVyZmlsZXNfbGlzdGFyLHByaXZpbGVnaW9zX2xpc3Rhcix1c3Vhcmlvc19ib3JyYXIiLCJpYXQiOjE1NTY5MjYwMjcsImV4cCI6MTU1Njk0NDAyN30.mWOpMaI3ZI4ZxIPlZP2gppyI_bXjxGB5YxfshoosgYY'",
      contenido: this.props.contenido || [],
     totalFilas: this.props.totalFilas|| 0,
   exampleItems: this.props.exampleItems || 1,
       elemXpag: this.props.elemXpag  || 5,
       indexPag: this.props.indexPag  || 0,
            key: this.props.key       || ''
    }
  }
  //https://jsonplaceholder.typicode.com/users
  //https://api.github.com/graphql
  Click(indexFila, label ){
    console.log("FilaClickeada A" + " tempcolor: " + tempcolor + " temindex: " + temindex)
    filaClickeada = document.getElementById("Fila"+indexFila);
  }
  ClickPag(pagina, evento ){
    tempcolor="";
    temindex = 0;
    console.log("Click Pag: " + pagina + " evento: " + evento + " tempcolor: " + tempcolor + " temindex: " + temindex)
  }
  detalles(datos, evento){
    alert("Datos:" + datos);
  }

  tableHeader(item) {
    Encabezados = [];
    totalColumnas=0;
    let Jsons = item[0]
    for (let j in Jsons){
        lbEncabezados[totalColumnas = totalColumnas + 1] = j;
        Encabezados.push( <th key={totalColumnas} id={0} className="Encabezado" headid={j}>{j}</th> );
    }return Encabezados;
  }
  componentWillMount() {
    //console.log("WillMount Tabla: " + this.state.contenido  + " Catalogo: " + this.state.catalogo )
    API.get(
      this.state.catalogo + this.state.parametros, this.state.headers
    ).then(response => { this.setState({ contenido: response.data }); })
  }
  componentDidMount() {
    //{ $(function() { $("#simple").tableSorter(); }); }
    //console.log("DiDMount Tabla: " + this.state.contenido  + " Catalogo: " + this.state.catalogo )
  }
  tablesColXCol(unoAuno){
    ColXCol=[];
    for (let col=1;col<=totalColumnas;col++)
    {
      if( typeof unoAuno[lbEncabezados[col]] === 'object'){//console.log("<th: scope=" + lbEncabezados[col] + " label=" + {unoAuno[lbEncabezados[col]][1]})
        this.JsonObj = JSON.stringify(unoAuno[lbEncabezados[col]])
        //this.state.contenido[this.state.totalFilas]
        ColXCol.push(<th key={col} col={col} id={lbEncabezados[col]} name={lbEncabezados[col]} label={unoAuno[lbEncabezados[col]]} >
        <button texto={lbEncabezados[col]} datos={JsonObj} onClick={this.detalles.bind(this, this.JsonObj)} >Detalles</button></th>)
      }else{
        let JsonObj = this.state.contenido[this.state.totalFilas]
        ColXCol.push(<th key={col} col={col} id={lbEncabezados[col]} name={lbEncabezados[col]} label={unoAuno[lbEncabezados[col]]}
        datos={JsonObj} onClick={this.Click.bind(this, this.state.totalFilas )}>{unoAuno[lbEncabezados[col]]}</th>)
      }
    }
    return ColXCol;
  }

  paginaFilas(filas){
    filas.map( unoAuno => {
        let ope = this.state.elemXpag*totalPaginas;
        this.state.totalFilas = this.state.totalFilas + 1;
        //this.setState({totalFilas: totalFilas + 1})
        if(this.state.totalFilas===ope)
        {
          FilaXFila.push(<tr id={"Fila"+this.state.totalFilas} rowid={this.state.totalFilas} key={this.state.totalFilas} ref={ this.fila } bgcolor={(this.state.totalFilas%2)?"#ffffcf":"#ffffff"} value={this.state.totalFilas} rowname={"Fila"+this.state.totalFilas}>{this.tablesColXCol(unoAuno)}</tr>)
        }
        if(this.state.totalFilas>ope)
        {
          FilaXFila=[];
          ETabPanel.push(
            <TabPanel id={"tpanel" + totalPaginas} key={totalPaginas}>
            <table id="simple" name={this.state.catalogo} className="table">
              <thead>
              <tr rowid={totalPaginas} value={totalPaginas} style={row} >{ this.tableHeader(this.state.contenido) }</tr>
              </thead>
              <tbody>
              {FilaXFila}
              </tbody>
            </table>
            </TabPanel>)
          FilaXFila.push(<tr id={"Fila"+this.state.totalFilas} rowid={this.state.totalFilas} key={this.state.totalFilas} ref={ this.fila } bgcolor={(this.state.totalFilas%2)?"#ffffcf":"#ffffff"} value={this.state.totalFilas} rowname={"Fila"+this.state.totalFilas}>{this.tablesColXCol(unoAuno)}</tr>)
          ETab.push(<Tab id={"pg"+totalPaginas} key={totalPaginas = totalPaginas +1 } onClick={this.ClickPag.bind(this, totalPaginas )}>Pg {totalPaginas}</Tab>)
        }
        if(this.state.totalFilas<ope)
        {
          FilaXFila.push(<tr id={"Fila"+this.state.totalFilas} rowid={this.state.totalFilas} key={this.state.totalFilas} ref={ this.fila } bgcolor={(this.state.totalFilas%2)?"#ffffcf":"#ffffff"} value={this.state.totalFilas} rowname={"Fila"+this.state.totalFilas}>{this.tablesColXCol(unoAuno)}</tr>)
        }
      }
    );
    return(
      <>
      <Tabs>
       <TabList>{ETab}</TabList>
       {ETabPanel}
      </Tabs>
      <div name="tfoot" id="tfoot" value={this.state.totalFilas} style={row}><center>Numero de Páginas { totalPaginas  + " con " + this.state.totalFilas + " registros."} </center></div>
      </>
    );
  }

  render() {
    //console.log("Render: ")
    return (<>{this.paginaFilas(this.state.contenido)}</>);
  }
}

export default TablaCatalogo;