[adrian_hdParticipant]

Hi will you have an example?

[adrian_hdParticipant]

Hi Klaus H, Have any example of cambiaste id of the row?

[adrian_hdParticipant]

Hi Klaus H, Have any example of cambiaste id of the row?

[adrian_hdParticipant]

Hi, But is there another alternative to hide a field other than a hidden column?

[adrian_hdParticipant]

Hi, thank you!

[adrian_hdParticipant]

Hi of course!

The error comes up in the file index.js in the line 36, on the console:

ERROR in ./src-standard/index.js
Module parse failed: C:\Repositorios\siag-fe\src-standard\index.js Unexpected to
ken (36:14)
You may need an appropriate loader to handle this file type.
|               gFechaTrabajo : ' 31/03/2017',
|35             gFechaActual: 'Jueves, 28 de Mayo de 2015',
|36             gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
|37             startDate: moment(),
|               gContenido : <Home/>,
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9020 webpack/hot/dev-server
./src-standard/index.js

File index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Async from 'react-code-splitting'
import 'lib-root/bootstrap/dist/css/bootstrap.united.css';
import 'app-root/css/estilos.css';
import { Navbar, Nav, Button, NavItem, NavDropdown, MenuItem, ButtonToolbar, Dropdown, Glyphicon, Well, Panel, Grid, Row, Col} from 'react-bootstrap';
import DatePicker from 'react-datepicker';
import 'lib-root/react-datepicker/dist/react-datepicker.css';

import moment from 'moment';
import 'moment/locale/es';

moment.updateLocale('es', {
    weekdaysMin : ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
    months : [
        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
        'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
    ]
});

import BotonFecha from 'app-root/componentes/BotonFecha';
import Contact from 'app-root/componentes/Contact';
import Home from 'app-root/componentes/Home';
import Footer from 'app-root/componentes/Footer';
import 'app-root/css/font-awesome-4.7.0/css/font-awesome.css';
import 'lib-root/react-select/dist/react-select.css';

import JqxGrid from 'lib-root/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js';

export class App extends React.Component {
	constructor(props) {
    	super(props);
    	this.state = {
    		gFechaTrabajo : ' 31/03/2017',
35    		gFechaActual: 'Jueves, 28 de Mayo de 2015',
36    		gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
37    		startDate: moment(),
    		gContenido : <Home/>,
    		gRuta : 'http://35.184.56.250:9000'
		}

		this.onSelectCatalogos = this.onSelectCatalogos.bind(this);
  	}

	onSelectFinanzas(eventKey){
		alert(<code>Alert from menu item.\neventKey: ${eventKey}</code>);

		this.setState((prevState, props) => {
			return {
		  		gContenido : <Contact/>

			};
		});
	}

	onSelectPresupuesto(eventKey){
		this.setState((prevState, props) => {

			const Proceso = (props) => <Async load={import('app-root/app/presupuesto/procesos/'+eventKey)} componentProps={props}/>
			return { gContenido : <Proceso gRuta={this.state.gRuta}/> }
		});
	}

	onSelectCatalogos(eventKey){
		this.setState((prevState, props) => {

			const Catalogo = (props) => <Async load={import('app-root/app/presupuesto/catalogos/'+eventKey)} componentProps={props}/>
			return { gContenido : <Catalogo gRuta={this.state.gRuta}/> }
		});
	}

	handleChange(date) {
	    this.setState({
	      startDate: date
	    });
    }

	render() {
		return (
		  <div>
		  	<header>
			    <Navbar fixedTop collapseOnSelect>
			    	<Navbar.Header>
				      <Navbar.Brand>
				        <a href="#"><Glyphicon glyph="glyphicon glyphicon-home"/></a>
				      </Navbar.Brand>
				      <Navbar.Toggle />
				    </Navbar.Header>
				    <Navbar.Collapse>
					    <Nav>
					      <NavItem eventKey='administracion' href="#">Administración</NavItem>
					      <NavDropdown eventKey='finanzas' title="Finanzas" id="basic-nav-dropdown">
					        <MenuItem eventKey='poliza' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Póliza</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='procesos' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Procesos</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='reportes' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Reportes</MenuItem>
					      </NavDropdown>
					      <NavDropdown eventKey={'presupuesto'} title="Presupuesto" id="basic-nav-dropdown">
					        <MenuItem eventKey='contra_recibos_egresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Contra Recibos de Egresos</MenuItem>
					        <MenuItem eventKey='ordenes_pago' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Ordenes de Pago</MenuItem>
					        <MenuItem eventKey='RegistroPptoEgresosAprobado' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Registro de Presupuesto de Egresos Aprobado</MenuItem>
					        <MenuItem eventKey='LeyIngresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Ley de Ingresos</MenuItem>
					        <MenuItem eventKey='ModificacionesPptoEgresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Modificaciones al Presupuesto de Egresos</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='claves_programaticas' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Claves Programáticas</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='estado_analitico_ejecicio_presup' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Estado Analítico de Ejecicio del Presupuesto</MenuItem>
					        <MenuItem eventKey='estado_analitico_ingresos_presup' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Estado Analítico de Ingresos Presupuesto</MenuItem>
					      </NavDropdown>
					      <NavItem eventKey='configuracion' href="#">Configuración</NavItem>
					      <NavDropdown eventKey={'catalogos'} title="Catalogos" id="basic-nav-dropdown">
					        <MenuItem disabled>Finanzas</MenuItem>
             		        <MenuItem eventKey='PlanCuentas' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Plan de Cuentas</MenuItem>
					        <MenuItem divider />
					        <MenuItem disabled>Presupuesto</MenuItem>
					        <MenuItem eventKey='ActividadesInstitucionales' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Actividades Institucionales</MenuItem>
		    		        <MenuItem eventKey='Beneficiarios' onSelect={this.onSelectCatalogos}>{this.state.gIcono}  Beneficiarios</MenuItem>
		    		        <MenuItem eventKey='clasificacion_administrativa' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificación Administrativa</MenuItem>
		    		        <MenuItem eventKey='clasificador_funcional_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador_Funcional Gasto</MenuItem>
		    		        <MenuItem eventKey='ClasificadorFuenteFinanciamiento' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador Fuente de Financiamiento</MenuItem>
		    		        <MenuItem eventKey='clasificador_objeto_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador por Objeto del Gasto</MenuItem>
		    		        <MenuItem eventKey='clasificador_tipo_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador por Tipo de Gasto</MenuItem>
		    		        <MenuItem eventKey='localidades' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Localidades</MenuItem>
		    		        <MenuItem eventKey='modalidad_programas_presupuestarios' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Modalidad y Programas Presupuestarios</MenuItem>
		    		        <MenuItem eventKey='Procedencias' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Procedencias</MenuItem>
		    		        <MenuItem eventKey='UnidadesAdministrativas' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Unidades Administrativas</MenuItem>
					      	<NavDropdown eventKey={'catalogos2'} title="Catalogos" id="basic-nav-dropdown">
					      		<MenuItem eventKey='modalidad_programas_presupuestarios2' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Modalidad y Programas Presupuestarios</MenuItem>
					      	</NavDropdown>
					      </NavDropdown>
					    </Nav>
					    <Nav pullRight>
					    	<NavItem eventKey='fecha_trabajo' href="#">
					    		<DatePicker
					    			minDate={moment('01/01/2017')}
									maxDate={moment('01/01/2017').add(364, "days")}
							        customInput={<BotonFecha/>}
							        selected={this.state.startDate}
							        onChange={this.handleChange.bind(this)}
							     />
					    	</NavItem>
						    <NavDropdown eventKey='administrador' title={<span><Glyphicon glyph='glyphicon glyphicon-user'/> Administrador</span>} id="basic-nav-dropdown">
						    	<MenuItem eventKey="1"><Glyphicon glyph="glyphicon glyphicon-cog"/> Configuración</MenuItem>
						    	<MenuItem eventKey="2"><Glyphicon glyph="glyphicon glyphicon-log-out"/> Salir</MenuItem>
						    </NavDropdown>
				      	</Nav>
					</Navbar.Collapse>
				</Navbar>
			</header>
		    <div className="content">
		        {this.state.gContenido}
		    </div>
		    <Footer gFechaActual={this.state.gFechaActual}></Footer>
		  </div>
		)
	}
}

document.addEventListener('DOMContentLoaded', ()=> {
	var container = document.getElementById('contenedor');
	ReactDOM.render(
	    React.createElement(App), //clase
	    container //index.html
	);
});

[adrian_hdParticipant]

Hi, have the same problem, Add the above configuration and now check this:

ERROR in ./src-standard/index.js
Module parse failed: C:\Repositorios\siag-fe\src-standard\index.js Unexpected to
ken (34:14)
You may need an appropriate loader to handle this file type.
|               gFechaTrabajo : ' 31/03/2017',
|               gFechaActual: 'Jueves, 28 de Mayo de 2015',
|               gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
|               startDate: moment(),
|               gContenido : <Home/>,
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9020 webpack/hot/dev-server
./src-standard/index.js 

So this is my configuration:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: "./src-standard/index.js",
    output: {
        path: __dirname,
        filename: "dist/bundle.js"
    },
    devServer: {
      host: '0.0.0.0',
      port: 9020
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|less|scss)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name : "fonts/[name]-[hash].[ext]"
                        } 
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name : "images/[name]-[hash].[ext]"
                        } 
                    }
                ]
            },
            {
                test: /\.js$|\.jsx$/,
                include: [
                    path.resolve(__dirname, 'node_modules/jqwidgets-framework/jqwidgets-react')
                ],
	        exclude: /(node_modules|bower_components)/, 
                loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015'],
                        plugins: ['syntax-dynamic-import']
                    }
            }
        ]
    },
    resolve: {
        alias: {
            "lib-root" : __dirname + "/node_modules",
            "app-root" : __dirname + "/src-standard"
        }
    },

    plugins:[
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
            VERSION: JSON.stringify("5fa3b9"),
            BROWSER_SUPPORTS_HTML5: true,
            "typeof window": JSON.stringify("object")
        })
    ]
};

Apparently I do not recognize the JSX, please tell me if I miss something

[Author]

Posts