From 91d89214ee2c0ea61d3e9af036d07039a30842ad Mon Sep 17 00:00:00 2001 From: Vitaliy Date: Wed, 8 Feb 2017 16:18:44 +0200 Subject: [PATCH] add grid --- angular-cli.json | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------- src/app/app.component.css | 14 -------------- src/app/app.component.html | 5 ----- src/app/app.component.ts | 13 ------------- src/app/app.module.ts | 17 ++++++++++++++--- src/app/components/app/app.component.css | 14 ++++++++++++++ src/app/components/app/app.component.html | 1 + src/app/components/app/app.component.ts | 13 +++++++++++++ src/app/components/grid/polyfills.ts | 10 ++++++++++ src/app/components/grid/proficiency-renderer.css | 29 +++++++++++++++++++++++++++++ src/app/components/grid/proficiencyFilter.ts | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/grid/refData.ts | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/grid/rich-grid.component.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/grid/rich-grid.component.ts | 209 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/grid/rich-grid.css | 4 ++++ src/app/components/grid/skillFilter.ts | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 16 files changed, 697 insertions(+), 98 deletions(-) delete mode 100644 src/app/app.component.css delete mode 100644 src/app/app.component.html delete mode 100644 src/app/app.component.ts create mode 100644 src/app/components/app/app.component.css create mode 100644 src/app/components/app/app.component.html create mode 100644 src/app/components/app/app.component.ts create mode 100644 src/app/components/grid/polyfills.ts create mode 100644 src/app/components/grid/proficiency-renderer.css create mode 100644 src/app/components/grid/proficiencyFilter.ts create mode 100644 src/app/components/grid/refData.ts create mode 100644 src/app/components/grid/rich-grid.component.html create mode 100644 src/app/components/grid/rich-grid.component.ts create mode 100644 src/app/components/grid/rich-grid.css create mode 100644 src/app/components/grid/skillFilter.ts diff --git a/angular-cli.json b/angular-cli.json index 254859b..9171fbb 100644 --- a/angular-cli.json +++ b/angular-cli.json @@ -1,67 +1,66 @@ { - "project": { - "version": "1.0.0-beta.28.3", - "name": "main-maps" - }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": [ - "assets", - "favicon.ico" - ], - "index": "index.html", - "main": "main.ts", - "polyfills": "polyfills.ts", - "test": "test.ts", - "tsconfig": "tsconfig.json", - "prefix": "app", - "styles": [ - "styles.css" - ], - "scripts": [], - "environments": { - "source": "environments/environment.ts", - "dev": "environments/environment.ts", - "prod": "environments/environment.prod.ts" - } - } - ], - "e2e": { - "protractor": { - "config": "./protractor.conf.js" - } - }, - "lint": [ - { - "files": "src/**/*.ts", - "project": "src/tsconfig.json" + "project": { + "version": "1.0.0-beta.28.3", + "name": "main-maps" }, - { - "files": "e2e/**/*.ts", - "project": "e2e/tsconfig.json" - } - ], - "test": { - "karma": { - "config": "./karma.conf.js" - } - }, - "defaults": { - "styleExt": "css", - "prefixInterfaces": false, - "inline": { - "style": false, - "template": false + "apps": [{ + "root": "src", + "outDir": "dist", + "assets": [ + "assets", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "polyfills": "polyfills.ts", + "test": "test.ts", + "tsconfig": "tsconfig.json", + "prefix": "app", + "styles": [ + "styles.css", + "../node_modules/ag-grid/dist/styles/ag-grid.css", + "../node_modules/ag-grid/dist/styles/theme-fresh.css" + ], + "scripts": [], + "environments": { + "source": "environments/environment.ts", + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" + } + }], + "e2e": { + "protractor": { + "config": "./protractor.conf.js" + } + }, + "lint": [{ + "files": "src/**/*.ts", + "project": "src/tsconfig.json" + }, + { + "files": "e2e/**/*.ts", + "project": "e2e/tsconfig.json" + } + ], + "test": { + "karma": { + "config": "./karma.conf.js" + } }, - "spec": { - "class": false, - "component": true, - "directive": true, - "module": false, - "pipe": true, - "service": true + "defaults": { + "styleExt": "css", + "prefixInterfaces": false, + "inline": { + "style": false, + "template": false + }, + "spec": { + "class": false, + "component": true, + "directive": true, + "module": false, + "pipe": true, + "service": true + } } - } -} +} \ No newline at end of file diff --git a/src/app/app.component.css b/src/app/app.component.css deleted file mode 100644 index 3d2a75f..0000000 --- a/src/app/app.component.css +++ /dev/null @@ -1,14 +0,0 @@ -.example-h2 { - margin: 10px; -} - -.example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; -} - -.example-margin { - margin: 0 10px; -} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 2e4ffcc..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1,5 +0,0 @@ - - - {{tile.text}} - - \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts deleted file mode 100644 index 145314e..0000000 --- a/src/app/app.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component} from '@angular/core'; - - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', -}) -export class AppComponent { - checked = false; - indeterminate = false; - align = 'start'; - disabled = false; -} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9e64152..8db7e7b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,21 +1,32 @@ import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MaterialModule } from '@angular/material'; +import { AgGridModule } from 'ag-grid-ng2/main'; +import { RichGridComponent } from "./components/grid/rich-grid.component"; + import 'hammerjs'; -import { AppComponent } from './app.component'; +import { AppComponent } from './components/app/app.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + RichGridComponent ], imports: [ + RouterModule.forRoot([ + { path: 'grid', component: RichGridComponent } + ]), BrowserModule, FormsModule, HttpModule, - MaterialModule.forRoot() + MaterialModule.forRoot(), + AgGridModule.withComponents([ + RichGridComponent + ]) ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/app/app.component.css b/src/app/components/app/app.component.css new file mode 100644 index 0000000..3d2a75f --- /dev/null +++ b/src/app/components/app/app.component.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} \ No newline at end of file diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html new file mode 100644 index 0000000..90c6b64 --- /dev/null +++ b/src/app/components/app/app.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts new file mode 100644 index 0000000..145314e --- /dev/null +++ b/src/app/components/app/app.component.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', +}) +export class AppComponent { + checked = false; + indeterminate = false; + align = 'start'; + disabled = false; +} \ No newline at end of file diff --git a/src/app/components/grid/polyfills.ts b/src/app/components/grid/polyfills.ts new file mode 100644 index 0000000..a9b5c2a --- /dev/null +++ b/src/app/components/grid/polyfills.ts @@ -0,0 +1,10 @@ +import "core-js/es6"; +import "core-js/es7/reflect"; +require('zone.js/dist/zone'); +if (process.env.ENV === 'production') { + // Production +} else { + // Development + Error['stackTraceLimit'] = Infinity; + require('zone.js/dist/long-stack-trace-zone'); +} \ No newline at end of file diff --git a/src/app/components/grid/proficiency-renderer.css b/src/app/components/grid/proficiency-renderer.css new file mode 100644 index 0000000..1dacfd4 --- /dev/null +++ b/src/app/components/grid/proficiency-renderer.css @@ -0,0 +1,29 @@ +.ag-cell { + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +label { + font-weight: normal !important; +} + +.div-percent-bar { + display: inline-block; + height: 100%; + position: relative; + z-index: 0; +} + +.div-percent-value { + position: absolute; + padding-left: 4px; + font-weight: bold; + font-size: 13px; + z-index: 100; +} + +.div-outer-div { + display: inline-block; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/app/components/grid/proficiencyFilter.ts b/src/app/components/grid/proficiencyFilter.ts new file mode 100644 index 0000000..c5d8749 --- /dev/null +++ b/src/app/components/grid/proficiencyFilter.ts @@ -0,0 +1,89 @@ +import {IFilter,IFilterParams} from "ag-grid/main"; + +var FILTER_TITLE = + '
' + + 'TITLE_NAME' + + '
'; + +var PROFICIENCY_TEMPLATE = + ''; + +var PROFICIENCY_NONE = 'none'; +var PROFICIENCY_ABOVE40 = 'above40'; +var PROFICIENCY_ABOVE60 = 'above60'; +var PROFICIENCY_ABOVE80 = 'above80'; + +var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; +var PROFICIENCY_VALUES = [PROFICIENCY_NONE, PROFICIENCY_ABOVE40, PROFICIENCY_ABOVE60, PROFICIENCY_ABOVE80]; + +export default class ProficiencyFilter implements IFilter { + private filterChangedCallback:Function; + private selected:string; + private valueGetter:Function; + + public init(params: IFilterParams) : void { + this.filterChangedCallback = params.filterChangedCallback; + this.selected = PROFICIENCY_NONE; + this.valueGetter = params.valueGetter; + } + + public getGui() { + var eGui = document.createElement('div'); + var eInstructions = document.createElement('div'); + eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Proficiency Filter'); + eGui.appendChild(eInstructions); + + var random = '' + Math.random(); + + var that = this; + PROFICIENCY_NAMES.forEach(function (name, index) { + var eFilter = document.createElement('div'); + var html = PROFICIENCY_TEMPLATE.replace('PROFICIENCY_NAME', name).replace('RANDOM', random); + eFilter.innerHTML = html; + var eRadio = eFilter.querySelector('input'); + if (index === 0) { + eRadio.checked = true; + } + eGui.appendChild(eFilter); + + eRadio.addEventListener('click', function () { + that.selected = PROFICIENCY_VALUES[index]; + that.filterChangedCallback(); + }); + }); + + return eGui; + } + + public doesFilterPass(params) { + + var value = this.valueGetter(params); + var valueAsNumber = parseFloat(value); + + switch (this.selected) { + case PROFICIENCY_ABOVE40 : + return valueAsNumber >= 40; + case PROFICIENCY_ABOVE60 : + return valueAsNumber >= 60; + case PROFICIENCY_ABOVE80 : + return valueAsNumber >= 80; + default : + return true; + } + + } + + public isFilterActive() { + return this.selected !== PROFICIENCY_NONE; + } + + public getModel():any { + return undefined; + } + + public setModel(model:any):void { + } +} diff --git a/src/app/components/grid/refData.ts b/src/app/components/grid/refData.ts new file mode 100644 index 0000000..35659a4 --- /dev/null +++ b/src/app/components/grid/refData.ts @@ -0,0 +1,109 @@ +export default class RefData { + + static IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows']; + static IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows']; + + + static firstNames = ["Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", + "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", + "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"]; + static lastNames = ["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"]; + + static 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" + }; + + static 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"} + ]; + + static 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']; +} \ No newline at end of file diff --git a/src/app/components/grid/rich-grid.component.html b/src/app/components/grid/rich-grid.component.html new file mode 100644 index 0000000..de2848d --- /dev/null +++ b/src/app/components/grid/rich-grid.component.html @@ -0,0 +1,51 @@ +
+

Rich Grid with Pure JavaScript

+
+
+ + + +
+
+ Employees Skills and Contact Details {{rowCount}} +
+
+
+ +
+ + + +
+ + Grid API: + + + + + Column API: + + + +
+
+
+ + +
+
+ + + +
+ +
\ No newline at end of file diff --git a/src/app/components/grid/rich-grid.component.ts b/src/app/components/grid/rich-grid.component.ts new file mode 100644 index 0000000..e0822a2 --- /dev/null +++ b/src/app/components/grid/rich-grid.component.ts @@ -0,0 +1,209 @@ +import {Component, ViewEncapsulation} from "@angular/core"; +import {GridOptions} from "ag-grid/main"; +import ProficiencyFilter from "./proficiencyFilter"; +import SkillFilter from "./skillFilter"; +import RefData from "./refData"; + +// only import this if you are using the ag-Grid-Enterprise + +@Component({ + selector: 'rich-grid', + templateUrl: 'rich-grid.component.html', + styleUrls: ['rich-grid.css', 'proficiency-renderer.css'], + encapsulation: ViewEncapsulation.None +}) +export class RichGridComponent { + + private gridOptions: GridOptions; + public showGrid: boolean; + public rowData: any[]; + private columnDefs: any[]; + public rowCount: string; + + constructor() { + // we pass an empty gridOptions in, so we can grab the api out + this.gridOptions = {}; + this.createRowData(); + this.createColumnDefs(); + this.showGrid = true; + } + + private createRowData() { + var rowData: any[] = []; + + for (var i = 0; i < 100; i++) { + var countryData = RefData.countries[i % RefData.countries.length]; + rowData.push({ + name: RefData.firstNames[i % RefData.firstNames.length] + ' ' + RefData.lastNames[i % RefData.lastNames.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 + }, + 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: createRandomPhoneNumber(), + landline: createRandomPhoneNumber() + }); + } + + this.rowData = rowData; + } + + private createColumnDefs() { + this.columnDefs = [ + { + headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true, + suppressMenu: true, pinned: true + } + ]; + } + + private calculateRowCount() { + if (this.gridOptions.api && this.rowData) { + var model = this.gridOptions.api.getModel(); + var totalRows = this.rowData.length; + var processedRows = model.getRowCount(); + this.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString(); + } + } + + private onModelUpdated() { + console.log('onModelUpdated'); + this.calculateRowCount(); + } + + private onReady() { + console.log('onReady'); + this.calculateRowCount(); + } + + private onCellClicked($event) { + console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); + } + + private onCellValueChanged($event) { + console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue); + } + + private onCellDoubleClicked($event) { + console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); + } + + private onCellContextMenu($event) { + console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); + } + + private onCellFocused($event) { + console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')'); + } + + private onRowSelected($event) { + // taking out, as when we 'select all', it prints to much to the console!! + // console.log('onRowSelected: ' + $event.node.data.name); + } + + private onSelectionChanged() { + console.log('selectionChanged'); + } + + private onBeforeFilterChanged() { + console.log('beforeFilterChanged'); + } + + private onAfterFilterChanged() { + console.log('afterFilterChanged'); + } + + private onFilterModified() { + console.log('onFilterModified'); + } + + private onBeforeSortChanged() { + console.log('onBeforeSortChanged'); + } + + private onAfterSortChanged() { + console.log('onAfterSortChanged'); + } + + private onVirtualRowRemoved($event) { + // because this event gets fired LOTS of times, we don't print it to the + // console. if you want to see it, just uncomment out this line + // console.log('onVirtualRowRemoved: ' + $event.rowIndex); + } + + private onRowClicked($event) { + console.log('onRowClicked: ' + $event.node.data.name); + } + + public onQuickFilterChanged($event) { + this.gridOptions.api.setQuickFilter($event.target.value); + } + + // here we use one generic event to handle all the column type events. + // the method just prints the event name + private onColumnEvent($event) { + console.log('onColumnEvent: ' + $event); + } + +} + +function skillsCellRenderer(params) { + var data = params.data; + var skills = []; + RefData.IT_SKILLS.forEach(function (skill) { + if (data && data.skills && data.skills[skill]) { + skills.push(''); + } + }); + return skills.join(' '); +} + +function countryCellRenderer(params) { + var flag = ""; + return flag + " " + params.value; +} + +function 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; +} + +function percentCellRenderer(params) { + var value = params.value; + + var eDivPercentBar = document.createElement('div'); + eDivPercentBar.className = 'div-percent-bar'; + eDivPercentBar.style.width = value + '%'; + if (value < 20) { + eDivPercentBar.style.backgroundColor = 'red'; + } else if (value < 60) { + eDivPercentBar.style.backgroundColor = '#ff9900'; + } else { + eDivPercentBar.style.backgroundColor = '#00A000'; + } + + var eValue = document.createElement('div'); + eValue.className = 'div-percent-value'; + eValue.innerHTML = value + '%'; + + var eOuterDiv = document.createElement('div'); + eOuterDiv.className = 'div-outer-div'; + eOuterDiv.appendChild(eValue); + eOuterDiv.appendChild(eDivPercentBar); + + return eOuterDiv; +} diff --git a/src/app/components/grid/rich-grid.css b/src/app/components/grid/rich-grid.css new file mode 100644 index 0000000..de4dc3d --- /dev/null +++ b/src/app/components/grid/rich-grid.css @@ -0,0 +1,4 @@ +.toolbar button { + margin: 2px; + padding: 0; +} \ No newline at end of file diff --git a/src/app/components/grid/skillFilter.ts b/src/app/components/grid/skillFilter.ts new file mode 100644 index 0000000..ca9f40e --- /dev/null +++ b/src/app/components/grid/skillFilter.ts @@ -0,0 +1,92 @@ +import RefData from './refData'; +import {IFilter,IFilterParams} from "ag-grid/main"; + +var SKILL_TEMPLATE = + ''; + +var FILTER_TITLE = + '
' + + 'TITLE_NAME' + + '
'; + +export default class SkillFilter implements IFilter { + private filterChangedCallback:Function; + private model:any; + + public init(params: IFilterParams) : void { + this.filterChangedCallback = params.filterChangedCallback; + this.model = { + android: false, + css: false, + html5: false, + mac: false, + windows: false + }; + }; + + public getGui() { + var eGui = document.createElement('div'); + eGui.style.width = '380px'; + var eInstructions = document.createElement('div'); + eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Skills Filter'); + eGui.appendChild(eInstructions); + + var that = this; + + RefData.IT_SKILLS.forEach(function (skill, index) { + var skillName = RefData.IT_SKILLS_NAMES[index]; + var eSpan = document.createElement('span'); + var html = SKILL_TEMPLATE.replace("SKILL_NAME", skillName).replace("SKILL", skill); + eSpan.innerHTML = html; + + var eCheckbox = eSpan.querySelector('input'); + eCheckbox.addEventListener('click', function () { + that.model[skill] = eCheckbox.checked; + that.filterChangedCallback(); + }); + + eGui.appendChild(eSpan); + }); + + return eGui; + }; + + public doesFilterPass(params) { + + var rowSkills = params.data.skills; + var model = this.model; + var passed = true; + + RefData.IT_SKILLS.forEach(function (skill) { + if (model[skill]) { + if (!rowSkills[skill]) { + passed = false; + } + } + }); + + return passed; + }; + + public isFilterActive() { + var model = this.model; + var somethingSelected = model.android || model.css || model.html5 || model.mac || model.windows; + return somethingSelected; + }; + + public getModel():any { + return undefined; + } + + public setModel(model:any):void { + } +} + -- libgit2 0.21.4