+
\ 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 = Rich Grid with Pure JavaScript
+
+
+
+
+
+
+
+
+
+
+ Employees Skills and Contact Details {{rowCount}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
');
+ }
+ });
+ return skills.join(' ');
+}
+
+function countryCellRenderer(params) {
+ var flag = "![](images/flags/" + RefData.COUNTRY_CODES[params.value] + ".png){kind=small}
";
+ 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 =