AG-1075 Remove legacy master/detail from FW examples
This commit is contained in:
Sean Landsman
@@ -12,7 +12,6 @@ import PinnedRowComponentExample from "./pinnedRowExample/PinnedRowComponentExam
|
||||
import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
|
||||
import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
|
||||
import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
|
||||
import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
|
||||
import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
|
||||
import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample";
|
||||
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
|
||||
@@ -29,7 +28,6 @@ const SideBar = () => (
|
||||
<NavItem to='/full-width'>Full Width Renderer Example</NavItem>
|
||||
<NavItem to='/group-row'>Grouped Row Inner Renderer Example</NavItem>
|
||||
<NavItem to='/filter'>Filters Component Example</NavItem>
|
||||
<NavItem to='/master-detail'>Master Detail Example</NavItem>
|
||||
<NavItem to='/floating-filter'>Floating Filters</NavItem>
|
||||
<NavItem to='/simple-redux'>Simple Redux Example</NavItem>
|
||||
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
|
||||
@@ -54,7 +52,6 @@ class App extends Component {
|
||||
<Route exact path='/full-width' component={FullWidthComponentExample}/>
|
||||
<Route exact path='/group-row' component={GroupedRowInnerRendererComponentExample}/>
|
||||
<Route exact path='/filter' component={FilterComponentExample}/>
|
||||
<Route exact path='/master-detail' component={MasterDetailExample}/>
|
||||
<Route exact path='/floating-filter' component={FloatingFilterGridExample}/>
|
||||
<Route exact path='/simple-redux' component={SimpleReduxExample}/>
|
||||
<Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
.full-width-panel {
|
||||
position: relative;
|
||||
background: #fafafa;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border-left: 2px solid grey;
|
||||
border-bottom: 2px solid lightgray;
|
||||
border-right: 2px solid lightgray;
|
||||
}
|
||||
|
||||
.call-record-cell {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.full-width-detail {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.full-width-details {
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.full-width-grid {
|
||||
margin-left: 150px;
|
||||
padding-top: 25px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import React, {Component} from "react";
|
||||
|
||||
import {AgGridReact} from "ag-grid-react";
|
||||
|
||||
import DetailPanelComponent from "./DetailPanelComponent";
|
||||
|
||||
export default class MasterDetailExample extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
rowData: this.createRowData(),
|
||||
columnDefs: this.createColumnDefs(),
|
||||
};
|
||||
|
||||
this.onGridReady = this.onGridReady.bind(this);
|
||||
}
|
||||
|
||||
onGridReady(params) {
|
||||
this.gridApi = params.api;
|
||||
this.columnApi = params.columnApi;
|
||||
|
||||
this.gridApi.sizeColumnsToFit();
|
||||
}
|
||||
|
||||
createColumnDefs() {
|
||||
return [
|
||||
{
|
||||
headerName: 'Name', field: 'name',
|
||||
// left column is going to act as group column, with the expand / contract controls
|
||||
cellRenderer: 'group',
|
||||
// we don't want the child count - it would be one each time anyway as each parent
|
||||
// not has exactly one child node
|
||||
cellRendererParams: {suppressCount: true}
|
||||
},
|
||||
{headerName: 'Account', field: 'account'},
|
||||
{headerName: 'Calls', field: 'totalCalls'},
|
||||
{headerName: 'Minutes', field: 'totalMinutes', valueFormatter: this.minuteCellFormatter}
|
||||
];
|
||||
}
|
||||
|
||||
createRowData() {
|
||||
let rowData = [];
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let firstName = this.firstnames[Math.floor(Math.random() * this.firstnames.length)];
|
||||
let lastName = this.lastnames[Math.floor(Math.random() * this.lastnames.length)];
|
||||
|
||||
let image = this.images[i % this.images.length];
|
||||
|
||||
let totalDuration = 0;
|
||||
|
||||
let callRecords = [];
|
||||
// call count is random number between 20 and 120
|
||||
let callCount = Math.floor(Math.random() * 100) + 20;
|
||||
for (let j = 0; j < callCount; j++) {
|
||||
// duration is random number between 20 and 120
|
||||
let callDuration = Math.floor(Math.random() * 100) + 20;
|
||||
let callRecord = {
|
||||
callId: this.callIdSequence++,
|
||||
duration: callDuration,
|
||||
switchCode: 'SW' + Math.floor(Math.random() * 10),
|
||||
// 50% chance of in vs out
|
||||
direction: (Math.random() > .5) ? 'In' : 'Out',
|
||||
// made up number
|
||||
number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000)
|
||||
};
|
||||
callRecords.push(callRecord);
|
||||
totalDuration += callDuration;
|
||||
}
|
||||
|
||||
let record = {
|
||||
name: firstName + ' ' + lastName,
|
||||
account: i + 177000,
|
||||
totalCalls: callCount,
|
||||
image: image,
|
||||
// convert from seconds to minutes
|
||||
totalMinutes: totalDuration / 60,
|
||||
callRecords: callRecords
|
||||
};
|
||||
rowData.push(record);
|
||||
}
|
||||
|
||||
return rowData;
|
||||
}
|
||||
|
||||
minuteCellFormatter(params) {
|
||||
return params.value.toLocaleString() + 'm';
|
||||
};
|
||||
|
||||
isFullWidthCell(rowNode) {
|
||||
return rowNode.level === 1;
|
||||
}
|
||||
|
||||
getRowHeight(params) {
|
||||
let rowIsDetailRow = params.node.level === 1;
|
||||
// return 100 when detail row, otherwise return 25
|
||||
return rowIsDetailRow ? 200 : 25;
|
||||
}
|
||||
|
||||
getNodeChildDetails(record) {
|
||||
if (record.callRecords) {
|
||||
return {
|
||||
group: true,
|
||||
// the key is used by the default group cellRenderer
|
||||
key: record.name,
|
||||
// provide ag-Grid with the children of this group
|
||||
children: [record.callRecords],
|
||||
// for demo, expand the third row by default
|
||||
expanded: record.account === 177002
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: 400, width: 900}}
|
||||
className="ag-fresh">
|
||||
<h1>Master-Detail Example</h1>
|
||||
<AgGridReact
|
||||
// properties
|
||||
columnDefs={this.state.columnDefs}
|
||||
rowData={this.state.rowData}
|
||||
|
||||
isFullWidthCell={this.isFullWidthCell}
|
||||
getRowHeight={this.getRowHeight}
|
||||
getNodeChildDetails={this.getNodeChildDetails}
|
||||
fullWidthCellRendererFramework={DetailPanelComponent}
|
||||
|
||||
enableSorting
|
||||
enableColResize
|
||||
|
||||
// events
|
||||
onGridReady={this.onGridReady}>
|
||||
</AgGridReact>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// a list of names we pick from when generating data
|
||||
firstnames = ['Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya'];
|
||||
lastnames = ['Smith', 'Jones', 'Williams', 'Taylor', 'Brown', 'Davies', 'Evans', 'Wilson', 'Thomas', 'Johnson'];
|
||||
|
||||
images = ['niall', 'sean', 'alberto', 'statue', 'horse'];
|
||||
|
||||
// each call gets a unique id, nothing to do with the grid, just help make the sample
|
||||
// data more realistic
|
||||
callIdSequence = 555;
|
||||
};
|
||||
Reference in New Issue
Block a user