Created
August 14, 2019 07:48
-
-
Save wolverineks/393bdd36f5618baf744fe05742a1de81 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 React, { PropTypes, Component } from 'react'; | |
import ReactDOM from 'react-dom'; | |
import './blank.css'; | |
import Details from './Details'; | |
import { | |
Panel, | |
Button, | |
PageHeader, | |
ControlLabel, | |
FormControl, | |
Pagination, | |
FormGroup | |
} from 'react-bootstrap'; | |
import JwPagination from 'jw-react-pagination'; | |
import IdleTimer from 'react-idle-timer'; | |
import history from '../../../core/history'; | |
var API_URL; // end_point url | |
function myFunction(details) { | |
var x = document.getElementById("article-lookup"); | |
var y = document.getElementById("articledetails"); | |
if (details === true) { | |
x.style.display = "none"; | |
y.style.display = "block"; | |
} else { | |
y.style.display = "none"; | |
x.style.display = "block"; | |
} | |
} | |
function newFunction(isActive) { | |
var x = document.getElementById("article-lookup"); | |
var y = document.getElementById("articledetails"); | |
if (isActive) { | |
x.style.display = "block"; | |
y.style.display = "none"; | |
//history.push('/blank'); | |
} else { | |
x.style.display = "none"; | |
y.style.display = "block"; | |
} | |
} | |
const customStyles = { | |
ul: { | |
backgroundColor: 'red' | |
}, | |
li: { | |
border: '1px solid green' | |
}, | |
a: { | |
color: 'blue' | |
} | |
}; | |
const title = 'Customer-LookUp'; | |
const spacing = { | |
marginRight: "20px", | |
marginbottom: "20px" | |
} | |
const buttonalignment = { | |
marginLeft: "20px", | |
marginbottom: "20px" | |
} | |
class displayBlank extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
Data: [], | |
pageOfItems: [], | |
respData: [], | |
// showResults:false, | |
sort: { | |
column: null, | |
direction: 'desc', | |
} | |
}; | |
this.handleSubmit = this.handleSubmit.bind(this); | |
this.searchFunction = this.searchFunction.bind(this); | |
this.setArrow = this.setArrow.bind(this); | |
this.onSort = this.onSort.bind(this); | |
this.onChangePage = this.onChangePage.bind(this); | |
this.handleClick = this.handleClick.bind(this); | |
this.afterUpdate = this.afterUpdate.bind(this); | |
this._onActive = this._onActive.bind(this); | |
this._onIdle = this._onIdle.bind(this); | |
this._onAction = this._onAction.bind(this); | |
var hasStorage = (function () { | |
try { | |
return true; | |
} catch (exception) { | |
return false; | |
} | |
}()); | |
var host = JSON.parse(localStorage.getItem('host')); | |
var url = JSON.parse(localStorage.getItem('url')); | |
var login = sessionStorage.getItem('login'); | |
if (!login) { | |
history.push('/'); | |
} | |
}; | |
componentDidMount() { | |
myFunction(false); | |
} | |
_onAction(e) { | |
//console.log('user did something', e); | |
} | |
_onActive(e) { | |
//console.log('user is active', e); | |
//console.log('time remaining', this.idleTimer.getRemainingTime()); | |
} | |
_onIdle(e) { | |
//console.log('user is idle', e) | |
//console.log('last active', this.idleTimer.getLastActiveTime()); | |
//console.log('elapsed time in blank', this.idleTimer.getElapsedTime()); | |
//var eltime = this.idleTimer.getElapsedTime(); | |
var minutes = 1000 * 60; | |
var hours = minutes * 60; | |
var days = hours * 24; | |
var years = days * 365; | |
var d = new Date(); | |
var t= d.getTime(); | |
//console.log('current time in icons',t); | |
var last_active = this.idleTimer.getLastActiveTime(); | |
var eltime = t - last_active; | |
//console.log('eltime in blank', eltime); | |
if(eltime >= 1800000){ | |
history.push('/'); window.location='/'; sessionStorage.setItem('login',''); | |
} | |
} | |
/*shouldComponentUpdate(){ | |
myFunction(false); | |
}*/ | |
afterUpdate() { | |
//console.log('In afterupdate'); | |
//myFunction(false); | |
//componentDidMount(); | |
myFunction(false); | |
} | |
onChangePage(pageOfItems) { | |
// update local state with new page of items | |
this.setState({ pageOfItems }); | |
} | |
handleSubmit(event) { | |
event.preventDefault(); | |
//myFunction(); | |
const form = event.target; | |
const data = new FormData(form); | |
const arrayValue = []; | |
var i = 0; | |
for (let name of data.keys()) { | |
const input = form.elements[name]; | |
const parserName = input.dataset.parse; | |
const parsedValue = data.get(name); | |
if (typeof (parsedValue) == 'undefined' || parsedValue == null) { | |
arrayValue[i] = ""; | |
data.set(name, arrayValue[i]); | |
} | |
else { | |
data.set(name, parsedValue); | |
arrayValue[i] = parsedValue; | |
} | |
i = i + 1; | |
} | |
var response_data = ""; | |
var response_jsonObj; | |
var txt = ""; | |
var req = { | |
"ArticleErrorsRequest": [{ | |
"col_1": arrayValue[1], | |
"col_2": arrayValue[0], | |
"col_3": arrayValue[2], | |
"col_4": arrayValue[3], | |
"col_5": arrayValue[4], | |
"col_6": arrayValue[5], | |
}] | |
}; | |
if(data.get('col_1') === ''){ | |
swal({ | |
title: "Column 1 is required!", | |
icon: "error", | |
confirmButtonText: 'OK' | |
}).then((okay) => { | |
if (okay) { | |
history.push('/grid'); | |
history.push('/blank'); | |
} | |
}); | |
} | |
else { | |
fetch(API_URL, { | |
headers: { | |
'Accept': '*/*', | |
'Content-Type': 'application/json', | |
}, | |
method: 'POST', | |
body: JSON.stringify(req) | |
} | |
).then(response => { | |
if (response.status !== 200) { | |
return; | |
} | |
response.text().then(data => { | |
if (data.length == 2) { | |
swal({ | |
title: "Item Not Found!", | |
icon: "error", | |
confirmButtonText: 'OK' | |
}).then((okay) => { | |
if (okay) { | |
history.push('/grid'); | |
history.push('/blank'); | |
} | |
}); | |
} | |
response_data = data; | |
response_jsonObj = JSON.parse(response_data); | |
this.setState({ Data: response_jsonObj }); | |
}); | |
}).catch(error => this.setState({ error })); | |
} | |
//console.log('req string :', JSON.stringify(req)); | |
} | |
handleClick(col_1,col_2,col_3,col_4) { | |
myFunction(true); | |
var newresponse_jsonObj, response_data; | |
var req = { | |
"ArticleErrorsRequest": [{ | |
"col_1": col_1, | |
"col_2": col_2, | |
"col_3": col_3, | |
"col_4": col_4 | |
}] | |
}; | |
//console.log('req string :', JSON.stringify(req)); | |
fetch(API_URL, { | |
headers: { | |
'Accept': '*/*', | |
'Content-Type': 'application/json', | |
}, | |
method: 'POST', | |
body: JSON.stringify(req) | |
} | |
).then(response => { | |
if (response.status !== 200) { | |
return; | |
} | |
response.text().then(data => { | |
response_data = data; | |
newresponse_jsonObj = JSON.parse(response_data); | |
this.setState({ respData: newresponse_jsonObj }); | |
}); | |
}).catch(error => this.setState({ error })); | |
} | |
searchFunction() { | |
var input, filter, table, tr, td, td1, i; | |
input = document.getElementById("search"); | |
filter = input.value.toUpperCase(); | |
table = document.getElementById("Search-Table"); | |
tr = table.getElementsByTagName("tr"); | |
var innertext = table.getElementsByTagName("tr").innertext; | |
for (i = 0; i < tr.length; i++) { | |
td = tr[i].getElementsByTagName("td")[0]; | |
if (td) { | |
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { | |
tr[i].style.display = ""; | |
} else { | |
tr[i].style.display = "none"; | |
} | |
} | |
} | |
} | |
onSort = (column) => (e) => { | |
const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc'; | |
const sortedData = this.state.pageOfItems.sort((a, b) => { | |
if (column === 'First Name') { | |
return a.FIRST_NAME.toUpperCase().localeCompare(b.COL_1.toUpperCase()); | |
} | |
else if (column === 'Last Name') { | |
return a.LAST_NAME.toUpperCase().localeCompare(b.COL_2.toUpperCase()); | |
} | |
}); | |
if (direction === 'desc') { | |
sortedData.reverse(); | |
} | |
this.setState({ | |
pageOfItems: sortedData, | |
sort: { | |
direction, | |
column, | |
} | |
}); | |
}; | |
setArrow = (column, className) => { | |
let current_className = className; | |
if (this.state.sort.column === column) { | |
current_className += this.state.sort.direction === 'asc' ? ' asc' : ' desc'; | |
} | |
return current_className; | |
}; | |
render() { | |
//myFunction(false); | |
return ( | |
<div id="id1"> | |
<div id="article-lookup"> | |
<div className="row"> | |
<div className="col-lg-12"> | |
<PageHeader>Header Name </PageHeader> | |
</div> | |
</div> | |
<form className="form-horizontal" onSubmit={this.handleSubmit}> | |
<table> | |
<tr> | |
<td> | |
<div className="form-group col-xs-12" style={{marginRight:20+"px" ,marginbottom: 8+"px"}}> | |
<label className="control-label" >Value</label> | |
<input className="form-control" | |
id="Value" name="Value"/> | |
</div> | |
</td> | |
<td> | |
<div className="form-group col-xs-12" style={{marginRight:20+"px" ,marginbottom: 8+"px"}}> | |
<label className="control-label">Value1</label> | |
<select className="form-control" id="Value1" name="Value1"> | |
<option value=""></option> | |
<option value="column1">column1</option> | |
<option value="column2">column2</option> | |
<option value="column3">column3</option> | |
<option value="column4">column4</option> | |
</select> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<div className="form-group col-xs-12" style={{marginRight:20+"px" ,marginbottom: 8+"px"}}> | |
<label className="control-label">Style Code</label> | |
<input className="form-control" | |
id="style_code" name="style_code" /> | |
</div> | |
</td> | |
<td> | |
<div className="form-group required col-xs-12" style={spacing}> | |
<label className="control-label">Value2</label> | |
<select className="form-control" id="Value2" name="Value2"> | |
<option value=""></option> | |
<option value="column1">column1</option> | |
<option value="column2">column2</option> | |
<option value="column3">column3</option> | |
<option value="column4">column4</option> | |
<option value="column5">column5</option> | |
<option value="column6">column6</option> | |
<option value="column7">column7</option> | |
<option value="column8">column8</option> | |
</select> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<div className="form-group col-xs-12" style={{marginRight:20+"px" ,marginbottom: 8+"px"}}> | |
<label className="control-label">From Date</label> | |
<input className="form-control" | |
id="from_date" name="from_date" | |
type="date" | |
placeholder="Enter Date" | |
/> | |
</div> | |
</td> | |
<td> | |
<div className="form-group col-xs-12"style={{marginRight:20+"px" ,marginbottom: 8+"px"}}> | |
<label className="control-label">To Date</label> | |
<input className="form-control" | |
id="to_date" name="to_date" | |
type="date" | |
placeholder="Enter Date" | |
/> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td> | |
<FormGroup style={buttonalignment}> | |
<Button bsStyle="primary" type="submit" >Search </Button> | |
{' '} | |
<Button className="btn btn-secondary" bsStyle="primary" type="reset">Clear </Button> | |
</FormGroup> | |
</td> | |
</tr> | |
</table> | |
<div className="row ng-scope"> | |
<div className="col-lg-15"> | |
<Panel header={<span> Search Results</span>} > | |
<div id="dataTables-example_filter" className="dataTables_filter"> | |
<label htmlFor={'search'}>Search: | |
<input | |
type="text" | |
className="form-control input-sm" | |
placeholder="Search-Term" | |
aria-controls="dataTables-example" | |
id="search" onKeyUp={this.searchFunction} | |
/> | |
</label> | |
</div><br></br> | |
<div id="Search-Table" className="table-responsive"> | |
<table className="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info"> | |
<thead> | |
<tr role="row"> | |
<th className="col-lg-1">Column1</th> | |
<th className="col-lg-1">Column2</th> | |
<th className="col-lg-1">Column3</th> | |
<th className="col-lg-1">Column4</th> | |
<th className="col-lg-1">Column5</th> | |
<th className="col-lg-1">Column6</th> | |
<th className="col-lg-1">Column7</th> | |
</tr> | |
</thead> | |
<tbody> | |
{this.state.pageOfItems.map((item, i) => { | |
return ( | |
<tr key={i} onClick={() => this.handleClick(item.Column1, item.Column2, item.Column3, item.Column3)}> | |
<td className="col-lg-1">{item.Column1}</td> | |
<td className="col-lg-1">{item.Column2}</td> | |
<td className="col-lg-1"> {item.Column3}</td> | |
<td className="col-lg-1"> {item.Column4}</td> | |
<td className="col-lg-1"> {item.Column5}</td> | |
<td className="col-lg-1"> {item.Column6}</td> | |
<td > {item.Column7}</td> | |
</tr> | |
); | |
})} | |
</tbody> | |
</table> | |
<div className="col-sm-6 pullRight " > | |
<JwPagination items={this.state.Data} onChangePage={this.onChangePage} /> | |
</div> | |
</div> | |
</Panel> | |
</div> | |
</div> | |
</form> | |
</div> | |
<div id="articledetails"> | |
<Details respData={this.state.respData} afterUpdate={this.afterUpdate} /> | |
</div> | |
<IdleTimer | |
ref={ref => { this.idleTimer = ref }} | |
element={document} | |
onActive={this._onActive} | |
onIdle={this._onIdle} | |
onAction={this._onAction} | |
debounce={250} | |
timeout={1800000} /> | |
</div> | |
); | |
} | |
} | |
export default displayBlank; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment