85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
import React, {Component} from "react";
|
|
|
|
import {AgGridReact} from "ag-grid-react";
|
|
|
|
import "./DetailPanelComponent.css";
|
|
|
|
export default class DetailPanelComponent extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
columnDefs: this.createColumnDefs(),
|
|
parentRecord: this.props.node.parent.data,
|
|
img: `images/${this.props.node.parent.data.image}.png`
|
|
};
|
|
|
|
this.onGridReady = this.onGridReady.bind(this);
|
|
this.onSearchTextChange = this.onSearchTextChange.bind(this);
|
|
|
|
// override the containing div so that the child grid fills the row height
|
|
this.props.reactContainer.style.height = "100%";
|
|
}
|
|
|
|
onGridReady(params) {
|
|
this.gridApi = params.api;
|
|
this.columnApi = params.columnApi;
|
|
|
|
this.gridApi.setRowData(this.state.parentRecord.callRecords);
|
|
setTimeout(() => {
|
|
this.gridApi.sizeColumnsToFit();
|
|
})
|
|
}
|
|
|
|
onSearchTextChange(newData) {
|
|
this.gridApi.setQuickFilter(newData);
|
|
}
|
|
|
|
createColumnDefs() {
|
|
return [
|
|
{headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'},
|
|
{headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'},
|
|
{headerName: 'Number', field: 'number', cellClass: 'call-record-cell'},
|
|
{
|
|
headerName: 'Duration',
|
|
field: 'duration',
|
|
cellClass: 'call-record-cell',
|
|
valueFormatter: this.secondCellFormatter
|
|
},
|
|
{headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'}];
|
|
|
|
}
|
|
|
|
secondCellFormatter(params) {
|
|
return params.value.toLocaleString() + 's';
|
|
}
|
|
|
|
onButtonClick() {
|
|
window.alert('Sample button pressed!!');
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="full-width-panel">
|
|
<div className="full-width-details">
|
|
<div className="full-width-detail"><img width="120px" src={this.state.img}/>
|
|
</div>
|
|
<div className="full-width-detail"><b>Name: </b> {this.state.parentRecord.name}</div>
|
|
<div className="full-width-detail"><b>Account: </b> {this.state.parentRecord.account}</div>
|
|
</div>
|
|
<AgGridReact
|
|
// properties
|
|
columnDefs={this.state.columnDefs}
|
|
|
|
enableSorting
|
|
enableFilter
|
|
enableColResize
|
|
|
|
// events
|
|
onGridReady={this.onGridReady}>
|
|
</AgGridReact>
|
|
</div>
|
|
);
|
|
}
|
|
}
|