diff --git a/package.json b/package.json index 325b9b0..7f3ff6d 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Example Reach applicaiton using ag-Grid.", "main": "dist/ag-grid-react-example.js", "scripts": { + "full-width": "webpack-dev-server --config webpack.config.full-width.js --progress --colors --hot --inline", "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline", "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline", "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline", diff --git a/src-full-width/ColDefFactory.jsx b/src-full-width/ColDefFactory.jsx new file mode 100644 index 0000000..d68d513 --- /dev/null +++ b/src-full-width/ColDefFactory.jsx @@ -0,0 +1,90 @@ +import SkillsCellRenderer from './SkillsCellRenderer.jsx'; +import NameCellEditor from './NameCellEditor.jsx'; +import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx'; +import RefData from './RefData'; +import SkillsFilter from './SkillsFilter.jsx'; +import ProficiencyFilter from './ProficiencyFilter.jsx'; +import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx'; + +export default class ColDefFactory { + + createColDefs() { + + var columnDefs = [ + {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true, + suppressMenu: true, pinned: true}, + { + headerName: 'Employee', + headerGroupComponentFramework: MyReactHeaderGroupComponent, + children: [ + { + headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true, + width: 150, pinned: true, editable: true, + // use a React cellEditor + cellEditorFramework: NameCellEditor + }, { + headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true, + // an example of using a non-React cell renderer + cellRenderer: countryCellRenderer, pinned: true, + filterParams: { + cellRenderer: countryCellRenderer, cellHeight: 20 + }, columnGroupShow: 'open' + }, { + headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date', + pinned: true, cellRenderer: function(params) { + return pad(params.value.getDate(), 2) + '/' + + pad(params.value.getMonth() + 1, 2)+ '/' + + params.value.getFullYear(); + }, columnGroupShow: 'open' + } + ] + }, + { + headerName: 'IT Skills', + children: [ + {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true, + // supply a React component + cellRendererFramework: SkillsCellRenderer, + // supply a React component + filterFramework: SkillsFilter + }, + {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true, + // supply a React component + cellRendererFramework: ProficiencyCellRenderer, + // supply a React component + filterFramework: ProficiencyFilter + } + ] + }, + { + headerName: 'Contact', + children: [ + {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'}, + {headerName: "Land-line", field: "landline", width: 150, filter: 'text'}, + {headerName: "Address", field: "address", width: 500, filter: 'text'} + ] + } + ]; + return columnDefs; + } +} + +// this is a simple cell renderer, putting together static html, no +// need to use React for it. +function countryCellRenderer(params) { + if (params.value) { + var flag = ""; + return flag + " " + params.value; + } else { + return null; + } +} + +//Utility function used to pad the date formatting. +function pad(num, totalStringSize) { + let asString = num + ""; + while (asString.length < totalStringSize) asString = "0" + asString; + return asString; +} diff --git a/src-full-width/MyReactDateComponent.jsx b/src-full-width/MyReactDateComponent.jsx new file mode 100644 index 0000000..d298abc --- /dev/null +++ b/src-full-width/MyReactDateComponent.jsx @@ -0,0 +1,167 @@ +import React from 'react'; + +// Date Component to be used in the date filter. +// This is a very simple example of how a React component can be plugged as a DateComponentFramework +// as you can see, the only requirement is that the React component implements the required methods +// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes. +export default class MyReactDateComponent extends React.Component { + + constructor(props) { + super(props); + //The state of this component is represented of: + // The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank + // The current values that the user types in the input boxes, by default '' + + //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through + // the usage of the button DOB equals to 01/01/2000 in the example page. + this.state = { + date: null, + textBoxes: { + dd: '', + mm: '', + yyyy: '' + } + } + } + + render() { + //Inlining styles to make simpler the component + let filterStyle = { + margin:'2px' + }; + let ddStyle = { + width: '30px' + }; + let mmStyle = { + width: '30px' + }; + let yyyyStyle = { + width: '60px' + }; + let resetStyle = { + padding: '2px', + backgroundColor: 'red', + borderRadius: '3px', + fontSize: '10px', + marginRight: '5px', + color: 'white' + }; + + return ( +
+ x + / + / + +
+ ); + } + + //********************************************************************************* + // METHODS REQUIRED BY AG-GRID + //********************************************************************************* + + getDate (){ + //ag-grid will call us here when in need to check what the current date value is hold by this + //component. + return this.state.date; + } + + setDate (date){ + //ag-grid will call us here when it needs this component to update the date that it holds. + this.setState({ + date:date, + textBoxes:{ + dd: date.getDate(), + mm: date.getMonth() + 1, + yyyy: date.getFullYear() + } + }) + } + + //********************************************************************************* + // LINKS THE INTERNAL STATE AND AG-GRID + //********************************************************************************* + + updateAndNotifyAgGrid (date, textBoxes){ + this.setState ({ + date: date, + textBoxes:textBoxes + }, + //Callback after the state is set. This is where we tell ag-grid that the date has changed so + //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate + this.props.onDateChanged + ); + } + + + //********************************************************************************* + // LINKING THE UI, THE STATE AND AG-GRID + //********************************************************************************* + + resetDate (){ + let date = null; + let textBoxes = { + dd : '', + mm : '', + yyyy : '', + }; + + this.updateAndNotifyAgGrid(date, textBoxes) + } + + onDateChanged () { + let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value); + let textBoxes = { + dd : this.refs.dd.value, + mm : this.refs.mm.value, + yyyy : this.refs.yyyy.value, + }; + + this.updateAndNotifyAgGrid(date, textBoxes) + } + + //********************************************************************************* + // INTERNAL LOGIC + //********************************************************************************* + + parseDate (dd, mm, yyyy){ + //If any of the three input date fields are empty, stop and return null + if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') { + return null; + } + + let day = Number(dd); + let month = Number(mm); + let year = Number(yyyy); + + let date = new Date(year, month - 1, day); + + //If the date is not valid + if (isNaN(date.getTime())){ + return null; + } + + //Given that new Date takes any garbage in, it is possible for the user to specify a new Date + //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will + //return Sat Dec 01 1 00:00:00 GMT+0000 (GMT) - Go figure... + //To ensure that we are not letting non sensical dates to go through we check that the resultant + //javascript date parts (month, year and day) match the given date fields provided as parameters. + //If the javascript date parts don't match the provided fields, we assume that the input is non + //sensical... ie: Day=-1 or month=14, if this is the case, we return null + //This also protects us from non sensical dates like dd=31, mm=2 of any year + if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year){ + return null; + } + + return date; + } +} + +// the grid will always pass in one props called 'params', +// which is the grid passing you the params for the cellRenderer. +// this piece is optional. the grid will always pass the 'params' +// props, so little need for adding this validation meta-data. +MyReactDateComponent.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src-full-width/MyReactHeaderComponent.jsx b/src-full-width/MyReactHeaderComponent.jsx new file mode 100644 index 0000000..2c5d098 --- /dev/null +++ b/src-full-width/MyReactHeaderComponent.jsx @@ -0,0 +1,76 @@ +import React from 'react'; + +// Header component to be used as default for all the columns. +export default class MyReactHeaderComponent extends React.Component { + + constructor(props) { + super(props); + + this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this)); + + //The state of this component contains the current sort state of this column + //The possible values are: 'asc', 'desc' and '' + this.state = { + sorted: '' + } + } + + + render() { + let sortElements = []; + if (this.props.enableSorting){ + let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : ""); + let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : ""); + let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : ""); + + sortElements.push(
) + sortElements.push(
) + sortElements.push(
) + } + + + let menuButton = null; + if (this.props.enableMenu){ + menuButton =
+ } + + return
+ {menuButton} +
{this.props.displayName}
+ {sortElements} +
+ } + + onSortRequested (order, event) { + this.props.setSort (order, event.shiftKey); + }; + + onSortChanged (){ + if (this.props.column.isSortAscending()){ + this.setState({ + sorted: 'asc' + }) + } else if (this.props.column.isSortDescending()){ + this.setState({ + sorted: 'desc' + }) + } else { + this.setState({ + sorted: '' + }) + } + }; + + onMenuClick (){ + this.props.showColumnMenu (this.refs.menuButton); + }; + +} + +// the grid will always pass in one props called 'params', +// which is the grid passing you the params for the cellRenderer. +// this piece is optional. the grid will always pass the 'params' +// props, so little need for adding this validation meta-data. +MyReactHeaderComponent.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src-full-width/MyReactHeaderGroupComponent.jsx b/src-full-width/MyReactHeaderGroupComponent.jsx new file mode 100644 index 0000000..7fe3037 --- /dev/null +++ b/src-full-width/MyReactHeaderGroupComponent.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +// Header component to be used as default for all the columns. +export default class MyReactHeaderGroupComponent extends React.Component { + + constructor(props) { + super(props); + this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this)); + this.state = { + expanded:null + } + this.onExpandChanged(); + } + + render() { + let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded": " collapsed"); + + return
+
{this.props.displayName}
+
+
+ } + + expandOrCollapse (){ + this.props.setExpanded(!this.state.expanded); + }; + + onExpandChanged (){ + this.setState({ + expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded() + }) + } +} + +// the grid will always pass in one props called 'params', +// which is the grid passing you the params for the cellRenderer. +// this piece is optional. the grid will always pass the 'params' +// props, so little need for adding this validation meta-data. +MyReactHeaderGroupComponent.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src-full-width/NameCellEditor.jsx b/src-full-width/NameCellEditor.jsx new file mode 100644 index 0000000..2433631 --- /dev/null +++ b/src-full-width/NameCellEditor.jsx @@ -0,0 +1,117 @@ +import React from 'react'; +import RefData from './RefData'; + +var KEY_BACKSPACE = 8; +var KEY_DELETE = 46; +var KEY_F2 = 113; + +// cell renderer for the proficiency column. this is a very basic cell editor, +export default class NameCellEditor extends React.Component { + + constructor(props) { + super(props); + // the entire ag-Grid properties are passed as one single object inside the params + this.state = this.createInitialState(props); + } + + // work out how to present the data based on what the user hit. you don't need to do any of + // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user + // experience is similar to Excel + createInitialState(props) { + + var startValue; + var putCursorAtEndOnFocus = false; + var highlightAllOnFocus = false; + + if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) { + // if backspace or delete pressed, we clear the cell + startValue = ''; + } else if (props.charPress) { + // if a letter was pressed, we start with the letter + startValue = props.charPress; + } else { + // otherwise we start with the current value + startValue = props.value; + if (props.keyPress === KEY_F2) { + this.putCursorAtEndOnFocus = true; + } else { + this.highlightAllOnFocus = true; + } + } + + return { + value: startValue, + putCursorAtEndOnFocus: putCursorAtEndOnFocus, + highlightAllOnFocus: highlightAllOnFocus + } + } + + render() { + return ( + + ); + } + + onChangeListener(event) { + // if doing React, you will probably be using a library for managing immutable + // objects better. to keep this example simple, we don't use one. + var newState = { + value: event.target.value, + putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus, + highlightAllOnFocus: this.state.highlightAllOnFocus + }; + this.setState(newState); + } + + // called by ag-Grid, to get the final value + getValue() { + return this.state.value; + } + + // cannot use componentDidMount because although the component might be ready from React's point of + // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work + afterGuiAttached() { + // get ref from React component + var eInput = this.refs.textField; + eInput.focus(); + if (this.highlightAllOnFocus) { + eInput.select(); + } else { + // when we started editing, we want the carot at the end, not the start. + // this comes into play in two scenarios: a) when user hits F2 and b) + // when user hits a printable character, then on IE (and only IE) the carot + // was placed after the first character, thus 'apply' would end up as 'pplea' + var length = eInput.value ? eInput.value.length : 0; + if (length > 0) { + eInput.setSelectionRange(length, length); + } + } + } + + // if we want the editor to appear in a popup, then return true. + isPopup() { + return false; + } + + // return true here if you don't want to allow editing on the cell. + isCancelBeforeStart() { + return false; + } + + // just to demonstrate, if you type in 'cancel' then the edit will not take effect + isCancelAfterEnd() { + if (this.state.value && this.state.value.toUpperCase()==='CANCEL') { + return true; + } else { + return false; + } + } +} + +// the grid will always pass in one props called 'params', +// which is the grid passing you the params for the cellRenderer. +// this piece is optional. the grid will always pass the 'params' +// props, so little need for adding this validation meta-data. +NameCellEditor.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src-full-width/ProficiencyCellRenderer.jsx b/src-full-width/ProficiencyCellRenderer.jsx new file mode 100644 index 0000000..5bc412b --- /dev/null +++ b/src-full-width/ProficiencyCellRenderer.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import RefData from './RefData'; + +// cell renderer for the proficiency column. this is a very basic cell renderer, +// it is arguable that we should not of used React and just returned a string of +// html as a normal ag-Grid cellRenderer. +export default class ProficiencyCellRenderer extends React.Component { + + render() { + var backgroundColor; + if (this.props.value < 20) { + backgroundColor = 'red'; + } else if (this.props.value < 60) { + backgroundColor = '#ff9900'; + } else { + backgroundColor = '#00A000'; + } + + return ( +
+
{this.props.value}%
+
+ ); + } +} diff --git a/src-full-width/ProficiencyFilter.jsx b/src-full-width/ProficiencyFilter.jsx new file mode 100644 index 0000000..5925031 --- /dev/null +++ b/src-full-width/ProficiencyFilter.jsx @@ -0,0 +1,73 @@ +import React from 'react'; + +var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; + +// the proficiency filter component. this demonstrates how to integrate +// a React filter component with ag-Grid. +export default class ProficiencyFilter extends React.Component { + + constructor(props) { + super(); + this.state = { + selected: PROFICIENCY_NAMES[0] + }; + } + + // called by agGrid + doesFilterPass(params) { + var value = this.props.valueGetter(params); + var valueAsNumber = parseFloat(value); + + switch (this.state.selected) { + case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40; + case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60; + case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80; + default : return true; + } + }; + + // called by agGrid + isFilterActive() { + return this.state.selected !== PROFICIENCY_NAMES[0]; + }; + + onButtonPressed(name) { + console.log(name); + var newState = {selected: name}; + // set the state, and once it is done, then call filterChangedCallback + this.setState(newState, this.props.filterChangedCallback); + console.log(name); + } + + render() { + var rows = []; + PROFICIENCY_NAMES.forEach( (name)=> { + var selected = this.state.selected === name; + rows.push( +
+ +
+ ); + }); + + return ( +
+
+ Custom Proficiency Filter +
+ {rows} +
+ ); + } + + // these are other method that agGrid calls that we + // could of implemented, but they are optional and + // we have no use for them in this particular filter. + //getApi() {} + //afterGuiAttached(params) {} + //onNewRowsLoaded() {} + //onAnyFilterChanged() {} +} diff --git a/src-full-width/RefData.js b/src-full-width/RefData.js new file mode 100644 index 0000000..3ded99b --- /dev/null +++ b/src-full-width/RefData.js @@ -0,0 +1,128 @@ +export default class RefData {} + +RefData.FIRST_NAMES = [ + "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", + "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", + "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla" + ]; + +RefData.LAST_NAMES = [ + "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell", + "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane", + "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner", + "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane", + "Keating", "Keegan", "Kingston", "Kobe" + ]; + +RefData.COUNTRY_CODES = { + Ireland: "ie", + Spain: "es", + "United Kingdom": "gb", + France: "fr", + Germany: "de", + Sweden: "se", + Italy: "it", + Greece: "gr", + Iceland: "is", + Portugal: "pt", + Malta: "mt", + Norway: "no", + Brazil: "br", + Argentina: "ar", + Colombia: "co", + Peru: "pe", + Venezuela: "ve", + Uruguay: "uy" + }; + +RefData.COUNTRIES = [ + {country: "Ireland", continent: "Europe", language: "English"}, + {country: "Spain", continent: "Europe", language: "Spanish"}, + {country: "United Kingdom", continent: "Europe", language: "English"}, + {country: "France", continent: "Europe", language: "French"}, + {country: "Germany", continent: "Europe", language: "(other)"}, + {country: "Sweden", continent: "Europe", language: "(other)"}, + {country: "Norway", continent: "Europe", language: "(other)"}, + {country: "Italy", continent: "Europe", language: "(other)"}, + {country: "Greece", continent: "Europe", language: "(other)"}, + {country: "Iceland", continent: "Europe", language: "(other)"}, + {country: "Portugal", continent: "Europe", language: "Portuguese"}, + {country: "Malta", continent: "Europe", language: "(other)"}, + {country: "Brazil", continent: "South America", language: "Portuguese"}, + {country: "Argentina", continent: "South America", language: "Spanish"}, + {country: "Colombia", continent: "South America", language: "Spanish"}, + {country: "Peru", continent: "South America", language: "Spanish"}, + {country: "Venezuela", continent: "South America", language: "Spanish"}, + {country: "Uruguay", continent: "South America", language: "Spanish"} + ]; + +RefData.DOB = [ + new Date(2000, 0, 1 ), + new Date(2001, 1, 2 ), + new Date(2002, 2, 3 ), + new Date(2003, 3, 4 ), + new Date(2004, 4, 5 ), + new Date(2005, 5, 6 ), + new Date(2006, 6, 7 ), + new Date(2007, 7, 8 ), + new Date(2008, 8, 9 ), + new Date(2009, 9, 10 ), + new Date(2010, 10, 11 ), + new Date(2011, 11, 12 ) +]; + +RefData.ADDRESSES = [ + '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763', + '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215', + '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186', + '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634', + '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597', + '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911', + '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959', + '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160', + '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609', + '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673', + '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245', + '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767', + '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206', + '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348', + '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207', + '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213', + '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161', + '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526', + '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671', + '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310', + '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883', + '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192', + '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838', + '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730', + '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956', + '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257', + '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219', + '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427', + '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355', + '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225', + '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706', + '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596', + '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360', + '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859', + '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322', + '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239', + '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092', + '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973', + '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349', + '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138', + '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063', + '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024', + '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288', + '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157', + '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553', + '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445', + '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958', + '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888', + '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018', + '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433']; + +RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows']; + +RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows']; diff --git a/src-full-width/RowDataFactory.js b/src-full-width/RowDataFactory.js new file mode 100644 index 0000000..0c68143 --- /dev/null +++ b/src-full-width/RowDataFactory.js @@ -0,0 +1,45 @@ +import RefData from './RefData'; + +export default class RowDataFactory { + + createRowData() { + var rowData = []; + + for (var i = 0; i < 200; i++) { + var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length]; + rowData.push({ + name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length], + skills: { + android: Math.random() < 0.4, + html5: Math.random() < 0.4, + mac: Math.random() < 0.4, + windows: Math.random() < 0.4, + css: Math.random() < 0.4 + }, + dob: RefData.DOB[i % RefData.DOB.length], + address: RefData.ADDRESSES[i % RefData.ADDRESSES.length], + years: Math.round(Math.random() * 100), + proficiency: Math.round(Math.random() * 100), + country: countryData.country, + continent: countryData.continent, + language: countryData.language, + mobile: this.createRandomPhoneNumber(), + landline: this.createRandomPhoneNumber() + }); + } + + return rowData; + } + + createRandomPhoneNumber() { + var result = '+'; + for (var i = 0; i < 12; i++) { + result += Math.round(Math.random() * 10); + if (i === 2 || i === 5 || i === 8) { + result += ' '; + } + } + return result; + } + +} \ No newline at end of file diff --git a/src-full-width/SkillsCellRenderer.jsx b/src-full-width/SkillsCellRenderer.jsx new file mode 100644 index 0000000..332de28 --- /dev/null +++ b/src-full-width/SkillsCellRenderer.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import RefData from './RefData'; + +export default class SkillsCellRenderer extends React.Component { + + render() { + var skills = []; + var rowData = this.props.data; + RefData.IT_SKILLS.forEach( (skill) => { + if (rowData && rowData.skills && rowData.skills[skill]) { + skills.push(); + } + }); + + return {skills}; + } + +} + +// the grid will always pass in one props called 'params', +// which is the grid passing you the params for the cellRenderer. +// this piece is optional. the grid will always pass the 'params' +// props, so little need for adding this validation meta-data. +SkillsCellRenderer.propTypes = { + params: React.PropTypes.object +}; \ No newline at end of file diff --git a/src-full-width/SkillsFilter.jsx b/src-full-width/SkillsFilter.jsx new file mode 100644 index 0000000..381097c --- /dev/null +++ b/src-full-width/SkillsFilter.jsx @@ -0,0 +1,115 @@ +import React from 'react'; +import RefData from './RefData'; + +// the skills filter component. this can be laid out much better in a 'React' +// way. there are design patterns you can apply to layout out your React classes. +// however, i'm not worried, as the intention here is to show you ag-Grid +// working with React, and that's all. i'm not looking for any awards for my +// React design skills. +export default class SkillsFilter extends React.Component { + + constructor(props) { + super(props); + this.state = { + android: false, + css: false, + html5: false, + mac: false, + windows: false + }; + } + + getModel() { + return { + android: this.state.android, + css: this.state.css, + html5: this.state.html5, + mac: this.state.mac, + windows: this.state.windows + } + } + + setModel(model) { + this.setState({ + android: model.android, + css: model.css, + html5: model.html5, + mac: model.mac, + windows: model.windows + }); + } + + // called by agGrid + doesFilterPass(params) { + + var rowSkills = params.data.skills; + var passed = true; + + RefData.IT_SKILLS.forEach( (skill) => { + if (this.state[skill]) { + if (!rowSkills[skill]) { + passed = false; + } + } + }); + + return passed; + }; + + // called by agGrid + isFilterActive() { + var somethingSelected = this.state.android || this.state.css || + this.state.html5 || this.state.mac || this.state.windows; + return somethingSelected; + }; + + onSkillChanged(skill, event) { + var newValue = event.target.checked; + var newModel = {}; + newModel[skill] = newValue; + // set the state, and once it is done, then call filterChangedCallback + this.setState(newModel, this.props.filterChangedCallback ); + } + + helloFromSkillsFilter() { + alert("Hello From The Skills Filter!"); + } + + render() { + + var skillsTemplates = []; + RefData.IT_SKILLS.forEach( (skill, index) => { + + var skillName = RefData.IT_SKILLS_NAMES[index]; + var template = ( + + ); + + skillsTemplates.push(template); + }); + + return ( +
+
+ Custom Skills Filter +
+ {skillsTemplates} +
+ ); + } + + // these are other method that agGrid calls that we + // could of implemented, but they are optional and + // we have no use for them in this particular filter. + //afterGuiAttached(params) {} + //onNewRowsLoaded() {} + //onAnyFilterChanged() {} +} diff --git a/src-full-width/index.js b/src-full-width/index.js new file mode 100644 index 0000000..2c44f4d --- /dev/null +++ b/src-full-width/index.js @@ -0,0 +1,18 @@ +'use strict'; + +import ReactDOM from 'react-dom'; +import React from 'react'; +import MyApp from './myApp.jsx'; +// is there a better way of doing this? +import 'ag-grid-root/dist/styles/ag-grid.css'; +import 'ag-grid-root/dist/styles/theme-fresh.css'; + +// waiting for dom to load before booting react. we could alternatively +// put the index.js reference at the end fo the index.html, but i prefer this way. +document.addEventListener('DOMContentLoaded', ()=> { + var container = document.getElementById('myAppContainer'); + ReactDOM.render( + React.createElement(MyApp), + container + ); +}); diff --git a/src-full-width/myApp.css b/src-full-width/myApp.css new file mode 100644 index 0000000..5e7e6f8 --- /dev/null +++ b/src-full-width/myApp.css @@ -0,0 +1,28 @@ + +.ag-cell { + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +label { + font-weight: normal !important; +} + +.div-percent-bar { + display: inline-block; + height: 20px; + position: relative; +} + +.div-percent-value { + position: absolute; + padding-left: 4px; + font-weight: bold; + font-size: 13px; +} + +.div-outer-div { + display: inline-block; + height: 100%; + width: 100%; +} diff --git a/src-full-width/myApp.jsx b/src-full-width/myApp.jsx new file mode 100644 index 0000000..271f039 --- /dev/null +++ b/src-full-width/myApp.jsx @@ -0,0 +1,439 @@ +import React from "react"; +import * as agGrid from "ag-grid"; +import {AgGridReact} from "ag-grid-react"; +import RowDataFactory from "./RowDataFactory"; +import MyReactDateComponent from "./MyReactDateComponent.jsx"; +import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx"; +import "./myApp.css"; +import "ag-grid-enterprise"; + +function DetailPanelCellRenderer() {} + +DetailPanelCellRenderer.prototype.init = function(params) { + // trick to convert string of html into dom object + var eTemp = document.createElement('div'); + eTemp.innerHTML = this.getTemplate(params); + this.eGui = eTemp.firstElementChild; + + this.setupDetailGrid(params.data); + this.consumeMouseWheelOnDetailGrid(); + this.addSeachFeature(); + this.addButtonListeners(); +}; + +DetailPanelCellRenderer.prototype.setupDetailGrid = function(callRecords) { + + this.detailGridOptions = { + enableSorting: true, + enableFilter: true, + enableColResize: true, + rowData: callRecords, + columnDefs: detailColumnDefs, + onGridReady: function(params) { + setTimeout( function() { params.api.sizeColumnsToFit(); }, 0); + } + }; + + var eDetailGrid = this.eGui.querySelector('.full-width-grid'); + new agGrid.Grid(eDetailGrid, this.detailGridOptions); +}; + +DetailPanelCellRenderer.prototype.getTemplate = function(params) { + + var parentRecord = params.node.parent.data; + + var template = + '
' + + '
' + + '
' + + '
Name: '+parentRecord.name+'
' + + '
Account: '+parentRecord.account+'
' + + '
'+ + '
' + + '
' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '
'+ + '
'; + + return template; +}; + +DetailPanelCellRenderer.prototype.getGui = function() { + return this.eGui; +}; + +DetailPanelCellRenderer.prototype.destroy = function() { + this.detailGridOptions.api.destroy(); +}; + +DetailPanelCellRenderer.prototype.addSeachFeature = function() { + var tfSearch = this.eGui.querySelector('.full-width-search'); + var gridApi = this.detailGridOptions.api; + + var searchListener = function() { + var filterText = tfSearch.value; + gridApi.setQuickFilter(filterText); + }; + + tfSearch.addEventListener('input', searchListener); +}; + +DetailPanelCellRenderer.prototype.addButtonListeners = function() { + var eButtons = this.eGui.querySelectorAll('.full-width-grid-toolbar button'); + + for (var i = 0; i.5) ? 'In' : 'Out', + // made up number + number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000) + }; + callRecords.push(callRecord); + totalDuration += callDuration; + } + + var 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; +} + +var minuteCellFormatter = function(params) { + return params.value.toLocaleString() + 'm'; +}; + +var secondCellFormatter = function(params) { + return params.value.toLocaleString() + 's'; +}; + +var masterColumnDefs = [ + {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', cellFormatter: minuteCellFormatter} +]; + +var detailColumnDefs = [ + {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', cellFormatter: secondCellFormatter}, + {headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'} +]; + +var rowData = createRowData(); +export default class MyApp extends React.Component { + + constructor() { + super(); + + this.state = { + quickFilterText: null, + showGrid: true, + showToolPanel: false, + rowData: new RowDataFactory().createRowData(), + icons: { + columnRemoveFromGroup: '', + filter: '', + sortAscending: '', + sortDescending: '', + groupExpanded: '', + groupContracted: '', + columnGroupOpened: '', + columnGroupClosed: '' + } + }; + + // the grid options are optional, because you can provide every property + // to the grid via standard React properties. however, the react interface + // doesn't block you from using the standard JavaScript interface if you + // wish. Maybe you have the gridOptions stored as JSON on your server? If + // you do, the providing the gridOptions as a standalone object is just + // what you want! + this.gridOptions = { + columnDefs: masterColumnDefs, + rowData: rowData, + //We register the react date component that ag-grid will use to render + dateComponentFramework:MyReactDateComponent, + // this is how you listen for events using gridOptions + onModelUpdated: function () { + console.log('event onModelUpdated received'); + }, + defaultColDef : { + headerComponentFramework : MyReactHeaderComponent, + headerComponentParams : { + menuIcon: 'fa-bars' + } + }, + // this is a simple property + rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios + }; + } + + onShowGrid(show) { + this.setState({ + showGrid: show + }); + } + + onToggleToolPanel(event) { + this.setState({showToolPanel: event.target.checked}); + } + + onGridReady(params) { + this.api = params.api; + this.columnApi = params.columnApi; + params.api.sizeColumnsToFit(); + } + + selectAll() { + this.api.selectAll(); + } + + deselectAll() { + this.api.deselectAll(); + } + + setCountryVisible(visible) { + this.columnApi.setColumnVisible('country', visible); + } + + onQuickFilterText(event) { + this.setState({quickFilterText: event.target.value}); + } + + onCellClicked(event) { + console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex); + } + + onRowSelected(event) { + console.log('onRowSelected: ' + event.node.data.name); + } + + onRefreshData() { + var newRowData = new RowDataFactory().createRowData(); + this.setState({ + rowData: newRowData + }); + } + + invokeSkillsFilterMethod() { + var skillsFilter = this.api.getFilterInstance('skills'); + var componentInstance = skillsFilter.getFrameworkComponentInstance(); + componentInstance.helloFromSkillsFilter(); + } + + dobFilter () { + let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob'); + dateFilterComponent.setFilterType('equals'); + dateFilterComponent.setDateFrom('2000-01-01'); + this.gridOptions.api.onFilterChanged(); + + } + + onIsFullWidthCell (rowNode) { + return rowNode.level === 1; + } + + onGetRowHeight (params) { + var rowIsDetailRow = params.node.level===1; + // return 100 when detail row, otherwise return 25 + return rowIsDetailRow ? 200 : 25; + } + + onGetNodeChildDetails (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 === 177005 + }; + } else { + return null; + } + } + + render() { + var gridTemplate; + var bottomHeaderTemplate; + var topHeaderTemplate; + + topHeaderTemplate = ( +
+
+ + + +
+
+ Employees Skills and Contact Details +
+
+ ); + + // showing the bottom header and grid is optional, so we put in a switch + if (this.state.showGrid) { + bottomHeaderTemplate = ( +
+
+ + Grid API: + + + + + Column API: + + + +
+
+
+ + + + + + Filter API: + + + +
+
+
+ ); + gridTemplate = ( +
+ +
+ ); + } + + return
+
+ {topHeaderTemplate} + {bottomHeaderTemplate} + {gridTemplate} +
+
; + } + +} \ No newline at end of file diff --git a/webpack.config.full-width.js b/webpack.config.full-width.js new file mode 100644 index 0000000..78a1165 --- /dev/null +++ b/webpack.config.full-width.js @@ -0,0 +1,27 @@ +module.exports = { + entry: "./src-full-width/index.js", + output: { + path: __dirname, + filename: "dist/bundle.js" + }, + module: { + loaders: [ + { + test: /\.css$/, + loader: "style!css" + }, + { + test: /\.js$|\.jsx$/, + loader: 'babel-loader', + query: { + presets: ['react', 'es2015'] + } + } + ] + }, + resolve: { + alias: { + "ag-grid-root" : __dirname + "/node_modules/ag-grid" + } + } +}; \ No newline at end of file