Skip to content
This repository was archived by the owner on Aug 19, 2024. It is now read-only.

Commit 95e6057

Browse files
seanlandsmanseanlandsman
committed
Test, Fix and Clean Angular CLI Example
1 parent c183d26 commit 95e6057

File tree

11 files changed

+163
-134
lines changed

11 files changed

+163
-134
lines changed

‎angular.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@
2525
"src/images"
2626
],
2727
"styles": [
28-
"node_modules/ag-grid/dist/styles/ag-grid.css",
29-
"node_modules/ag-grid/dist/styles/theme-fresh.css",
30-
"node_modules/bootstrap/dist/css/bootstrap.min.css"
28+
"styles.css"
3129
],
3230
"scripts": []
3331
},

‎src/app/data/refData.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ export default class RefData {
1414
"Keating", "Keegan", "Kingston", "Kobe"];
1515

1616
static DOBs = [
17-
new Date(2000, 0, 1 ),
18-
new Date(2001, 1, 2 ),
19-
new Date(2002, 2, 3 ),
20-
new Date(2003, 3, 4 ),
21-
new Date(2004, 4, 5 ),
22-
new Date(2005, 5, 6 ),
23-
new Date(2006, 6, 7 ),
24-
new Date(2007, 7, 8 ),
25-
new Date(2008, 8, 9 ),
26-
new Date(2009, 9, 10 ),
27-
new Date(2010, 10, 11 ),
28-
new Date(2011, 11, 12 )
17+
new Date(2000, 0, 1),
18+
new Date(2001, 1, 2),
19+
new Date(2002, 2, 3),
20+
new Date(2003, 3, 4),
21+
new Date(2004, 4, 5),
22+
new Date(2005, 5, 6),
23+
new Date(2006, 6, 7),
24+
new Date(2007, 7, 8),
25+
new Date(2008, 8, 9),
26+
new Date(2009, 9, 10),
27+
new Date(2010, 10, 11),
28+
new Date(2011, 11, 12)
2929
];
3030

3131
static COUNTRY_CODES = {

‎src/app/date-component/date.component.ts

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component} from "@angular/core";
1+
import {Component, OnDestroy} from "@angular/core";
22
import {IDateParams} from "ag-grid/main";
33
import {IDateAngularComp} from "ag-grid-angular/main";
44

@@ -8,7 +8,7 @@ import {IDateAngularComp} from "ag-grid-angular/main";
88
templateUrl: 'date.component.html',
99
styleUrls: ['date.component.css'],
1010
})
11-
export class DateComponent implements IDateAngularComp {
11+
export class DateComponent implements OnDestroy, IDateAngularComp {
1212
private date: Date;
1313
private params: IDateParams;
1414
public dd: string = '';
@@ -45,11 +45,13 @@ export class DateComponent implements IDateAngularComp {
4545
}
4646

4747
setDate(date: Date): void {
48-
this.dd = date.getDate() + '';
49-
this.mm = (date.getMonth() + 1) + '';
50-
this.yyyy = date.getFullYear() + '';
51-
this.date = date;
52-
this.params.onDateChanged();
48+
if (date) {
49+
this.dd = date.getDate() + '';
50+
this.mm = (date.getMonth() + 1) + '';
51+
this.yyyy = date.getFullYear() + '';
52+
this.date = date;
53+
this.params.onDateChanged();
54+
}
5355
}
5456

5557
//*********************************************************************************
@@ -78,8 +80,8 @@ export class DateComponent implements IDateAngularComp {
7880
//return Sat Dec 01 1 00:00:00 GMT+0000 (GMT) - Go figure...
7981
//To ensure that we are not letting non sensical dates to go through we check that the resultant
8082
//javascript date parts (month, year and day) match the given date fields provided as parameters.
81-
//If the javascript date parts don't match the provided fields, we assume that the input is non
82-
//sensical... ie: Day=-1 or month=14, if this is the case, we return null
83+
//If the javascript date parts don't match the provided fields, we assume that the input is nonsensical
84+
// ... ie: Day=-1 or month=14, if this is the case, we return null
8385
//This also protects us from non sensical dates like dd=31, mm=2 of any year
8486
if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year) {
8587
return null;

‎src/app/filters/proficiencyFilter.ts

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,54 @@
1-
import {IFilter,IFilterParams} from "ag-grid/main";
1+
import {IFilter, IFilterParams} from "ag-grid/main";
22

3-
var FILTER_TITLE =
4-
'<div style="text-align: center; background: lightgray; width: 100%; display: block; border-bottom: 1px solid grey;">' +
5-
'<b>TITLE_NAME</b>' +
6-
'</div>';
3+
const FILTER_TITLE =
4+
`<div style="text-align: center; background: lightgray; width: 100%; display: block; border-bottom: 1px solid grey;">
5+
<b>TITLE_NAME</b>
6+
</div>`;
77

8-
var PROFICIENCY_TEMPLATE =
9-
'<label style="padding-left: 4px;">' +
10-
'<input type="radio" name="RANDOM"/>' +
11-
'PROFICIENCY_NAME' +
12-
'</label>';
8+
const PROFICIENCY_TEMPLATE =
9+
`<label style="padding-left: 4px;">
10+
<input type="radio" name="RANDOM"/>PROFICIENCY_NAME
11+
</label>`;
1312

14-
var PROFICIENCY_NONE = 'none';
15-
var PROFICIENCY_ABOVE40 = 'above40';
16-
var PROFICIENCY_ABOVE60 = 'above60';
17-
var PROFICIENCY_ABOVE80 = 'above80';
13+
const PROFICIENCY_NONE = 'none';
14+
const PROFICIENCY_ABOVE40 = 'above40';
15+
const PROFICIENCY_ABOVE60 = 'above60';
16+
const PROFICIENCY_ABOVE80 = 'above80';
1817

19-
var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
20-
var PROFICIENCY_VALUES = [PROFICIENCY_NONE, PROFICIENCY_ABOVE40, PROFICIENCY_ABOVE60, PROFICIENCY_ABOVE80];
18+
const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
19+
const PROFICIENCY_VALUES = [PROFICIENCY_NONE, PROFICIENCY_ABOVE40, PROFICIENCY_ABOVE60, PROFICIENCY_ABOVE80];
2120

2221
export default class ProficiencyFilter implements IFilter {
23-
private filterChangedCallback:Function;
24-
private selected:string;
25-
private valueGetter:Function;
22+
private filterChangedCallback: Function;
23+
private selected: string;
24+
private valueGetter: Function;
2625

27-
public init(params: IFilterParams) : void {
26+
public init(params: IFilterParams): void {
2827
this.filterChangedCallback = params.filterChangedCallback;
2928
this.selected = PROFICIENCY_NONE;
3029
this.valueGetter = params.valueGetter;
3130
}
3231

3332
public getGui() {
34-
var eGui = document.createElement('div');
35-
var eInstructions = document.createElement('div');
33+
const eGui = document.createElement('div');
34+
const eInstructions = document.createElement('div');
3635
eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Proficiency Filter');
3736
eGui.appendChild(eInstructions);
3837

39-
var random = '' + Math.random();
38+
const random = '' + Math.random();
4039

41-
var that = this;
42-
PROFICIENCY_NAMES.forEach(function (name, index) {
43-
var eFilter = document.createElement('div');
44-
var html = PROFICIENCY_TEMPLATE.replace('PROFICIENCY_NAME', name).replace('RANDOM', random);
45-
eFilter.innerHTML = html;
46-
var eRadio = <HTMLInputElement> eFilter.querySelector('input');
40+
const that = this;
41+
PROFICIENCY_NAMES.forEach((name, index) => {
42+
const eFilter = document.createElement('div');
43+
eFilter.style.marginTop = "5px";
44+
eFilter.innerHTML = PROFICIENCY_TEMPLATE.replace('PROFICIENCY_NAME', name).replace('RANDOM', random);
45+
const eRadio = <HTMLInputElement> eFilter.querySelector('input');
4746
if (index === 0) {
4847
eRadio.checked = true;
4948
}
5049
eGui.appendChild(eFilter);
5150

52-
eRadio.addEventListener('click', function () {
51+
eRadio.addEventListener('click', () => {
5352
that.selected = PROFICIENCY_VALUES[index];
5453
that.filterChangedCallback();
5554
});
@@ -60,8 +59,8 @@ export default class ProficiencyFilter implements IFilter {
6059

6160
public doesFilterPass(params) {
6261

63-
var value = this.valueGetter(params);
64-
var valueAsNumber = parseFloat(value);
62+
const value = this.valueGetter(params);
63+
const valueAsNumber = parseFloat(value);
6564

6665
switch (this.selected) {
6766
case PROFICIENCY_ABOVE40 :
@@ -80,10 +79,10 @@ export default class ProficiencyFilter implements IFilter {
8079
return this.selected !== PROFICIENCY_NONE;
8180
}
8281

83-
public getModel():any {
82+
public getModel(): any {
8483
return undefined;
8584
}
8685

87-
public setModel(model:any):void {
86+
public setModel(model: any): void {
8887
}
8988
}

‎src/app/filters/skillFilter.ts

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import RefData from '../data/refData';
22
import {IFilter,IFilterParams} from "ag-grid/main";
33

4-
var SKILL_TEMPLATE =
5-
'<label style="border: 1px solid lightgrey; margin: 4px; padding: 4px; display: inline-block;">' +
6-
' <span>' +
7-
' <div style="text-align: center;">SKILL_NAME</div>' +
8-
' <div>' +
9-
' <input type="checkbox"/>' +
10-
' <img src="images/skills/SKILL.png" width="30px"/>' +
11-
' </div>' +
12-
' </span>' +
13-
'</label>';
14-
15-
var FILTER_TITLE =
16-
'<div style="text-align: center; background: lightgray; width: 100%; display: block; border-bottom: 1px solid grey;">' +
17-
'<b>TITLE_NAME</b>' +
18-
'</div>';
4+
const SKILL_TEMPLATE =
5+
`<label style="border: 1px solid lightgrey; margin: 4px; padding: 4px; display: inline-block;">
6+
<span>
7+
<div style="text-align: center;">SKILL_NAME</div>
8+
<div>
9+
<input type="checkbox"/>
10+
<img src="images/skills/SKILL.png" width="30px"/>
11+
</div>
12+
</span>
13+
</label>`;
14+
15+
const FILTER_TITLE =
16+
`<div style="text-align: center; background: lightgray; width: 100%; display: block; border-bottom: 1px solid grey;">
17+
<b>TITLE_NAME</b>
18+
</div>`;
1919

2020
export default class SkillFilter implements IFilter {
2121
private filterChangedCallback:Function;
@@ -33,21 +33,20 @@ export default class SkillFilter implements IFilter {
3333
};
3434

3535
public getGui() {
36-
var eGui = document.createElement('div');
36+
const eGui = document.createElement('div');
3737
eGui.style.width = '380px';
38-
var eInstructions = document.createElement('div');
38+
const eInstructions = document.createElement('div');
3939
eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Skills Filter');
4040
eGui.appendChild(eInstructions);
4141

42-
var that = this;
42+
const that = this;
4343

4444
RefData.IT_SKILLS.forEach(function (skill, index) {
45-
var skillName = RefData.IT_SKILLS_NAMES[index];
46-
var eSpan = document.createElement('span');
47-
var html = SKILL_TEMPLATE.replace("SKILL_NAME", skillName).replace("SKILL", skill);
48-
eSpan.innerHTML = html;
45+
const skillName = RefData.IT_SKILLS_NAMES[index];
46+
const eSpan = document.createElement('span');
47+
eSpan.innerHTML = SKILL_TEMPLATE.replace("SKILL_NAME", skillName).replace("SKILL", skill);
4948

50-
var eCheckbox = <HTMLInputElement> eSpan.querySelector('input');
49+
const eCheckbox = <HTMLInputElement> eSpan.querySelector('input');
5150
eCheckbox.addEventListener('click', function () {
5251
that.model[skill] = eCheckbox.checked;
5352
that.filterChangedCallback();
@@ -61,9 +60,9 @@ export default class SkillFilter implements IFilter {
6160

6261
public doesFilterPass(params) {
6362

64-
var rowSkills = params.data.skills;
65-
var model = this.model;
66-
var passed = true;
63+
const rowSkills = params.data.skills;
64+
const model = this.model;
65+
let passed = true;
6766

6867
RefData.IT_SKILLS.forEach(function (skill) {
6968
if (model[skill]) {
@@ -77,9 +76,8 @@ export default class SkillFilter implements IFilter {
7776
};
7877

7978
public isFilterActive() {
80-
var model = this.model;
81-
var somethingSelected = model.android || model.css || model.html5 || model.mac || model.windows;
82-
return somethingSelected;
79+
const model = this.model;
80+
return model.android || model.css || model.html5 || model.mac || model.windows;
8381
};
8482

8583
public getModel():any {

‎src/app/header-component/header.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, ElementRef} from "@angular/core";
1+
import {Component, ElementRef, OnDestroy} from "@angular/core";
22
import {IHeaderParams} from "ag-grid/main";
33
import {IHeaderAngularComp} from "ag-grid-angular/main";
44

@@ -10,7 +10,7 @@ interface MyParams extends IHeaderParams {
1010
templateUrl: 'header.component.html',
1111
styleUrls: ['header.component.css']
1212
})
13-
export class HeaderComponent implements IHeaderAngularComp {
13+
export class HeaderComponent implements OnDestroy, IHeaderAngularComp {
1414
public params: MyParams;
1515
public sorted: string;
1616
private elementRef: ElementRef;

‎src/app/header-group-component/header-group.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import {Component} from "@angular/core";
1+
import {Component, OnDestroy} from "@angular/core";
22
import {IHeaderGroupParams} from "ag-grid/main";
33
import {IHeaderGroupAngularComp} from "ag-grid-angular/main";
44

55
@Component({
66
templateUrl: 'header-group.component.html',
77
styleUrls: ['header-group.component.css']
88
})
9-
export class HeaderGroupComponent implements IHeaderGroupAngularComp {
9+
export class HeaderGroupComponent implements OnDestroy, IHeaderGroupAngularComp {
1010
public params: IHeaderGroupParams;
1111
public expanded: boolean;
1212

‎src/app/rich-grid-example/rich-grid.component.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1>Rich Grid Example</h1>
4040
</div>
4141
<div style="clear: both;"></div>
4242

43-
<ag-grid-angular style="width: 100%; height: 350px;" class="ag-fresh"
43+
<ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-balham"
4444

4545
[gridOptions]="gridOptions"
4646
[columnDefs]="columnDefs"
@@ -54,7 +54,6 @@ <h1>Rich Grid Example</h1>
5454
suppressRowClickSelection
5555
toolPanelSuppressGroups
5656
toolPanelSuppressValues
57-
rowHeight="22"
5857
rowSelection="multiple"
5958

6059
(modelUpdated)="onModelUpdated()"

0 commit comments

Comments
 (0)