Created
May 30, 2017 06:23
-
-
Save RedDevilHat/c6eb595ee7a364dc9c0d51d494bdd5a6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {observable, computed, action, extendObservable} from 'mobx'; | |
import './App.css'; | |
import FileInput from 'react-file-input'; | |
import React, {Component} from 'react'; | |
import {inject, observer} from 'mobx-react'; | |
import {Link} from 'react-router'; | |
import Table from 'react-json-table'; | |
import {Modal, Button, ProgressBar} from 'react-bootstrap'; | |
import NavBar from '../Layout/NavBar'; | |
let XLSX = require('xlsx'); | |
const App = inject('routing', 'UserStore')(observer(class App extends Component { | |
constructor(props, context) { | |
super(props, context); | |
this.state = {excel: null, showModal: false, file: null, load: false}; | |
} | |
render() { | |
const {location, push, goBack} = this.props.routing; | |
const {UserStore} = this.props; | |
if (!UserStore.me.isAuth) { | |
push('/login') | |
} | |
if(this.state.excel === null && !this.state.load) { | |
return this.loadExcel(); | |
} | |
if(this.state.load && this.state.excel === null) { | |
return this.load(); | |
} | |
if (this.state.excel !== null && !this.state.load) { | |
let items = this.prepareJson(); | |
return this.complinceExcel(items); | |
} | |
}; | |
load = () => { | |
return ( | |
<div> | |
<NavBar/> | |
<div className="loader">Loading...</div> | |
</div> | |
) | |
}; | |
loadExcel = () => { | |
return ( | |
<div> | |
<NavBar/> | |
<form className="form-horizontal" method="post" | |
action="http://mercadoserver.local/api/compines/price"> | |
<div className="form-group"> | |
<label htmlFor="excel" className="col-sm-2 control-label">Price</label> | |
<div className="form-group"> | |
<div className="col-sm-8"> | |
<FileInput name="excel" | |
accept=".xls,.xlsx" | |
placeholder="Select excel price..." | |
className="form-control" | |
onChange={this.handleFiles} | |
id="excel"/> | |
</div> | |
</div> | |
</div> | |
</form> | |
</div> | |
) | |
}; | |
complinceExcel = (items) => { | |
return ( | |
<div> | |
<NavBar/> | |
<div> | |
<form> | |
</form> | |
</div> | |
<div className="table-responsive"> | |
<Table rows={items} | |
className="table-hover table-bordered table-condensed" | |
headerClass="alert" | |
onClickHeader={this.open}/> | |
</div> | |
<Modal show={this.state.showModal} onHide={this.close}> | |
<Modal.Header closeButton> | |
<Modal.Title>{this.state.column}</Modal.Title> | |
</Modal.Header> | |
<Modal.Body> | |
</Modal.Body> | |
<Modal.Footer> | |
<Button onClick={this.close}>Close</Button> | |
</Modal.Footer> | |
</Modal> | |
</div> | |
) | |
}; | |
handleFiles = (e) => { | |
this.setState({load:true}); | |
let files = e.target.files; | |
let i, f; | |
for (i = 0; i != files.length; ++i) { | |
f = files[i]; | |
this.state.file = f; | |
let reader = new FileReader(); | |
let name = f.name; | |
let loaded = 0; | |
let total = files.length; | |
reader.onload = (e) => { | |
let data = e.target.result; | |
loaded++; | |
let workbook; | |
workbook = XLSX.read(data, {type: 'binary'}); | |
this.setState({excel: workbook}); | |
this.setState({load:false}); | |
}; | |
reader.readAsBinaryString(f); | |
} | |
}; | |
prepareJson = (list = 0) => { | |
let SheetsNames = this.state.excel.SheetNames; | |
let Sheet = this.state.excel.Sheets[SheetsNames[list]]; | |
return XLSX.utils.sheet_to_json(Sheet, {range: 'A1:W5', header: 'A1'}); | |
}; | |
close = () => { | |
this.setState({showModal: false}); | |
}; | |
open = (e, column) => { | |
this.setState({showModal: true}); | |
this.setState({column: column}); | |
}; | |
})); | |
export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment