Add bodegas

gistfile1.txt

import React, { Component } from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import { Link, Redirect } from 'react-router-dom';
import { Form, Text, TextArea, Radio, RadioGroup, Select, Checkbox, NestedField } from 'react-form';

const BodegasFields = () => (
    <div className="row">
      <div className="col-md-4">
        <Text field="critico" />
      </div>
      <div className="col-md-4">
        <Text field="minimo" />
      </div>
      <div className="col-md-4">
        <Text field="maximo" />
      </div>
    </div>
)

class CrearArticulo extends Component {
  constructor() {
    super()
    this.state = {
      dataArtciulos: [],
      articuloMayor: [],
      articuloPadre: [],
      unidades: [],
      impuestos: [],
      locales: [],
      bodegas: []
    }
  }

  componentWillMount(){
    let appHeaders = new Headers({
      "Authorization": localStorage.getItem("token"),
    });
    fetch('http://172.16.1.82:8081/apiArticulos/public/api/v1/articulos/'+localStorage.getItem("id_conn"),
      {
        method: "GET",
        headers: appHeaders
      }
    ).then( res => res.json() ).then( data =>
      {
        let articulos = [];
        data.data.map( entry => {
          articulos.push({ id: entry.id_articulo, name: entry.art_nombre, cost: entry.art_costo, last_price: entry.ultprecio})
        })
        this.setState({ dataArtciulos: articulos })
      });

    fetch('http://172.16.1.82:8081/apiArticulos/public/api/v1/formDataArticulos/'+localStorage.getItem("id_conn")+'/'+localStorage.getItem("id_usuario"),
      {
        method: "GET",
        headers: appHeaders
      }
    ).then(res => res.json()).then(request => {
      let articuloMayor = [], padre = [], unidades = [], impuestos = [], locales = [], bodegas = []

      request.data.articulos.map(data => {
        articuloMayor = [ ...articuloMayor, { label: data.mar_nombre, value: data.id }]
      })
      // padre
      request.data.padre.map(data => {
        padre = [ ...padre, { label: data.art_nombre, value: data.id_articulo }]
      })
      //unidad de compra
      request.data.unidades.map(data => {
        unidades = [ ...unidades, { label: data.uni_nombre, value: data.id_unidad }]
      })
      // impuesto
      request.data.impuestos.map(data => {
        impuestos = [ ...impuestos, { label: data.impuesto_nombre, value: data.impuesto_id }]
      })
      //locales
      request.data.locales.map( data => {
        locales = [ ...locales, { id_local: data.id_local, nombre: data.loc_nombre } ]
      } )
      //bodegas
      request.data.bodegas.map( data => {
        bodegas = [ ...bodegas, { id_bodega: data.id_bodega, nombre: data.nombre } ]
      } )
      this.setState({ articuloMayor: articuloMayor, articuloPadre: padre, unidades: unidades, impuestos:impuestos, locales: locales, bodegas: bodegas })
      console.log(this.state)
    })
  }
  
 
  editFormatter(cell,row){
    return(
      <Link to={ "/dashboard/Articulos/"+cell } >Editar</Link>
    )
  }

  showForm(){
    document.getElementById("newArticleForm").classList.remove("d-none")
  }

  submitHandler(data){
    const appHeaders = new Headers({
      "Authorization": localStorage.getItem("token"),
      "Content-Type": "application/json"
    });
    const formData = data
    const body = JSON.stringify({...data, rec:"", 
    conn_id: localStorage.getItem("id_conn"), 
    user_id: localStorage.getItem("id_usuario")
     });
    /*fetch('http://172.16.1.82:8081/apiArticulos/public/api/v1/articulos', {
      method: "POST",
      headers: appHeaders,
      body: body
    }).then( res => res.json() ).then( data => {
        if ( data.code = 201 ) {
          this.setState({ dataArtciulos: [ { name: formData.nombre, cost: data.data.costo, last_price: formData.precio_neto, id: data.data.id }, ...this.state.dataArtciulos ] })
        }
    } )*/

    console.log(data)
  }
 
  barcode(event) {
      document.getElementById("barra1").classList.toggle("d-none");
      document.getElementById("barra2").classList.toggle("d-none");
   
  }
  render(){
    const articuloMayor = this.state.articuloMayor;
    const articuloPadre = this.state.articuloPadre,
          unidades = this.state.unidades,
          impuestos = this.state.impuestos,
          locales = this.state.locales,
          bodegas = this.state.bodegas;
    return(
      <div className="container">
        <div className="card">
        <div className="card-header" onClick={this.showForm}>
            <h4>Crear articulo</h4>
          </div>
          <div className="card-body" id="newArticleForm">
            <h6><strong>Datos Generales</strong></h6>
            <Form onSubmit={submittedValues => this.submitHandler(submittedValues)}>
              {
                formApi => (
                  <form onSubmit={formApi.submitForm} >
                    <label htmlFor="nombre">
                      Nombre*
                      <Text field="nombre" id="nombre" className="form-control" />
                    </label>
                    <label htmlFor="descripcion">
                      Descripción*
                      <Text field="descripcion" id="descripcion" className="form-control" />
                    </label>
                    <label htmlFor="precio_neto">
                      Precio Neto*
                      <Text field="precio_neto" id="precio_neto" className="form-control" />
                    </label>
                    <label htmlFor="grupo_articulo">
                      Mayor Articulo*
                      <Select field="grupo_articulo" id="grupo_articulo" className="form-control" options={articuloMayor} />
                    </label>
                    <label htmlFor="articulo_padre">
                      Articulo Padre*
                      <Select field="articulo_padre" id="articulo_padre" className="form-control" options={articuloPadre} />
                    </label>
                    <label htmlFor="unidadad_compra">
                      Unidad de Compra*
                      <Select field="unidadad_compra" id="unidadad_compra" className="form-control" options={unidades} />
                    </label>
                    <label htmlFor="unidadad_inventario">
                      Unidad de Inventario*
                      <Select field="unidadad_inventario" id="unidadad_inventario" className="form-control" options={unidades} />
                    </label>
                    <label htmlFor="unidadad_receta">
                      Unidad de Receta*
                      <Select field="unidadad_receta" id="unidadad_receta" className="form-control" options={unidades} />
                    </label>
                    <label htmlFor="impuesto2">
                      Tipo de Impuesto*
                      <Select field="impuesto2" id="impuesto2" className="form-control" options={impuestos} />
                    </label>
                    <div className="row">
                      <div className="col-md-4" >
                        <h6><strong>Equivalencia unidad de compra</strong></h6>
                        Una U.C <Text field="equivalente1" id="equivalente1" className="form-control" /> Equivale a U.I
                      </div>
                      <div className="col-md-4">
                        <h6><strong>Equivalencia unidad de inventario</strong></h6>
                        Una U.I <Text field="equivalente2" id="equivalente2" className="form-control" /> Equivale a U.R
                      </div>
                      <div className="col-md-4" >
                        <h6><strong>Porcentaje de Perdida</strong></h6>
                        <Text field="perdida" id="perdida" className="form-control" /> %
                      </div>
                    </div>
                    <div className="checkCodigoBarra d-flex">
                      <div className="col-md-2">
                        Codigo de Barras*
                        <label htmlFor="barCodeShow" className="switch">
                          <Checkbox field="barCodeShow" id="barCodeShow" className="form-control" onClick={this.barcode.bind(this)} />
                          <span className="slider round"></span>
                        </label>
                      </div>
                      <div className="col-md-5 d-none" id="barra1">
                        <label htmlFor="codigo_barra_1" >
                          Código de barra producto Unitario
                          <Text field="codigo_barra_1" id="codigo_barra_1" className="form-control" defaultValue="" />
                        </label>
                      </div>
                      <div className="col-md-5 d-none " id="barra2">
                        <label htmlFor="codigo_barra_2" >
                          Código de barra producto en Caja
                          <Text field="codigo_barra_2" id="codigo_barra_2" className="form-control" defaultValue="" />
                        </label>
                      </div>
                    </div>
                    <div className="locales">
                      <h6>Bodegas</h6>
                      { 
                        locales.map(local => {
                          return( 
                          <div>
                            <div className="bodegaHead">
                              <h6>{ local.nombre }</h6>
                            </div>
                            <div className="bodegaBody">
                              {
                                bodegas.map(bodega => {
                                  bodegaIndex++
                                  return(
                                    <div className="row">
                                      <div className="col-md-3">
                                        <h6>{ bodega.nombre }</h6>
                                      </div>
                                      <div className="col-md-9">
                                        <NestedField field={["bodegas", bodegaIndex]} component={BodegasFields} />
                                      </div>
                                    </div>
                                  )
                                })
                              }
                            </div>
                          </div> )
                        })
                      }
                    </div>
                    <button type="submit" className="btn btn-success">Guardar</button>
                  </form>
                )
              }
            </Form>
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <h4>Lista de articulos</h4>
          </div>
          <div className="card-body">
            <BootstrapTable  data={ this.state.dataArtciulos } version='4' pagination>
              <TableHeaderColumn dataField='id' isKey >ID</TableHeaderColumn>
              <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter'} }>Nombre</TableHeaderColumn>
              <TableHeaderColumn dataField='cost' >Costo Unitario</TableHeaderColumn>
              <TableHeaderColumn dataField='last_price' >Ultimo Precio</TableHeaderColumn>
              <TableHeaderColumn dataField='id'  dataFormat={ this.editFormatter } >Editar</TableHeaderColumn>
            </BootstrapTable>
          </div>
        </div>
      </div>
    )
  }
}

export default CrearArticulo;