diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..427441d --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,17 @@ +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries + +# For the full list of supported browsers by the Angular framework, please see: +# https://angular.io/guide/browser-support + +# You can see what browsers were selected by your queries by running: +# npx browserslist + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions +Firefox ESR +not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/angular.json b/angular.json index 96a2de5..f65d2f6 100644 --- a/angular.json +++ b/angular.json @@ -3,30 +3,36 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "ag-grid-angular-cli": { + "ag-grid-angular-cli-example": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/", + "outputPath": "dist/ag-grid-angular-cli-example", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.app.json", - "preserveSymlinks": true, - "aot": true, + "tsConfig": "tsconfig.app.json", + "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets", "src/images" ], "styles": [ - "styles.css" + "src/styles.scss" ], "scripts": [] }, @@ -38,92 +44,57 @@ "with": "src/environments/environment.prod.ts" } ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "ag-grid-angular-cli:build" - }, "configurations": { "production": { - "browserTarget": "ag-grid-angular-cli:build:production" + "browserTarget": "ag-grid-angular-cli-example:build:production" + }, + "development": { + "browserTarget": "ag-grid-angular-cli-example:build:development" } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "ag-grid-angular-cli:build" + "browserTarget": "ag-grid-angular-cli-example:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "main": "tests/test.ts", - "tsConfig": "tests/tsconfig.spec.json", - "polyfills": "tests/polyfills.ts", - "karmaConfig": "tests/karma.conf.js", - "preserveSymlinks": true, - "styles": [ - ], - "scripts": [], + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", - "src/assets" - ] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "src/tsconfig.app.json", - "tests/tsconfig.spec.json" + "src/assets" ], - "exclude": [ - "**/node_modules/**" - ] - } - } - } - }, - "ag-grid-angular-cli-e2e": { - "root": "e2e/", - "projectType": "application", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ag-grid-angular-cli:serve" - }, - "configurations": { - "production": { - "devServerTarget": "ag-grid-angular-cli:serve:production" - } - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": "e2e/tsconfig.e2e.json", - "exclude": [ - "**/node_modules/**" - ] + "styles": [ + "src/styles.scss" + ], + "scripts": [] } } } } }, - "defaultProject": "ag-grid-angular-cli" + "defaultProject": "ag-grid-angular-cli-example" } diff --git a/browserslist b/browserslist deleted file mode 100644 index 43f2e80..0000000 --- a/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. -not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. -not ios_saf 15.2-15.3 -not safari 15.2-15.3 - - diff --git a/karma.conf.js b/karma.conf.js index 1acd859..3f2b397 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,40 +1,49 @@ // Karma configuration file, see link for more information -// https://karma-runner.github.io/0.13/config/configuration-file.html +// https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', - frameworks: ['jasmine', 'angular-cli'], + frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), - require('karma-remap-istanbul'), - require('angular-cli/plugins/karma') + require('karma-jasmine-html-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') ], - files: [ - - ], - preprocessors: { - './src/test.ts': ['angular-cli'] + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser }, - remapIstanbulReporter: { - dir: require('path').join(__dirname, 'coverage'), reports: { - html: 'coverage', - lcovonly: './coverage/coverage.lcov' - } + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces }, - angularCli: { - config: './angular-cli.json', - environment: 'dev' + coverageReporter: { + dir: require('path').join(__dirname, './coverage/ag-grid-angular-cli-example'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' } + ] }, - reporters: config.angularCli && config.angularCli.codeCoverage - ? ['progress', 'karma-remap-istanbul'] - : ['progress'], + reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false + singleRun: false, + restartOnFileChange: true, + // not strictly required for testing but useful when debugging the grid in action + files: [ + '../node_modules/@ag-grid-community/core/dist/styles/ag-grid.css', + '../node_modules/@ag-grid-community/core/dist/styles/ag-theme-balham.css' + ] }); }; diff --git a/package.json b/package.json index e38b93e..9352c78 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,12 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/ag-grid/ag-grid-angular-cli.git" + "url": "https://github.com/ag-grid/ag-grid-angular-cli-example.git" }, "author": "Sean Landsman ", - "angular-cli": {}, "scripts": { "start": "ng serve --port 8080", - "build": "ng build --aot --prod && npm run hash", + "build": "ng build --aot && npm run hash", "build-prod": "npm run build", "hash": "sh ./hashDirectory.sh > .hash", "lint": "tslint \"src/**/*.ts\"" @@ -19,41 +18,40 @@ "private": true, "dependencies": { "@ag-grid-community/angular": "~27.3.0", - "@ag-grid-enterprise/all-modules": "~27.3.0", - "@angular/animations": "11.2.14", - "@angular/common": "11.2.14", - "@angular/compiler": "11.2.14", - "@angular/core": "11.2.14", - "@angular/forms": "11.2.14", - "@angular/platform-browser": "11.2.14", - "@angular/platform-browser-dynamic": "11.2.14", - "@angular/router": "11.2.14", + "@ag-grid-community/core": "~27.3.0", + "@ag-grid-community/client-side-row-model": "~27.3.0", + "@ag-grid-enterprise/menu": "~27.3.0", + "@ag-grid-enterprise/side-bar": "~27.3.0", + "@ag-grid-enterprise/column-tool-panel": "~27.3.0", + "@ag-grid-enterprise/filter-tool-panel": "~27.3.0", + "@ag-grid-enterprise/row-grouping": "~27.3.0", + "@ag-grid-enterprise/set-filter": "~27.3.0", + "@ag-grid-enterprise/status-bar": "~27.3.0", + "@angular/animations": "~12.2.0", + "@angular/common": "~12.2.0", + "@angular/compiler": "~12.2.0", + "@angular/core": "~12.2.0", + "@angular/forms": "~12.2.0", + "@angular/platform-browser": "~12.2.0", + "@angular/platform-browser-dynamic": "~12.2.0", + "@angular/router": "~12.2.0", "bootstrap": "4.5.0", - "rxjs": "6.5.5", - "tslib": "2.0.3", - "zone.js": "0.10.3" + "rxjs": "~6.6.0", + "tslib": "^2.3.0", + "zone.js": "~0.11.4" }, "devDependencies": { - "webdriver-manager": "12.1.7", - "@angular-devkit/build-angular": "0.1102.11", - "@angular/cli": "11.2.14", - "@angular/compiler-cli": "11.2.14", - "@angular/language-service": "11.2.14", - "@types/jasmine": "3.6.11", - "@types/jasminewd2": "2.0.10", - "@types/node": "12.20.52", - "codelyzer": "6.0.2", - "jasmine-core": "3.6.0", - "jasmine-spec-reporter": "5.0.2", - "karma": "6.1.2", - "karma-chrome-launcher": "3.1.1", - "karma-coverage-istanbul-reporter": "3.0.3", - "karma-jasmine": "4.0.2", - "karma-jasmine-html-reporter": "1.5.4", - "ng-packagr": "11.0.3", - "protractor": "7.0.0", - "ts-node": "8.10.2", - "tslint": "6.1.3", - "typescript": "4.0.8" + "@angular-devkit/build-angular": "~12.2.17", + "@angular/cli": "~12.2.17", + "@angular/compiler-cli": "~12.2.0", + "@types/jasmine": "~3.8.0", + "@types/node": "^12.11.1", + "jasmine-core": "~3.8.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.0.3", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "~1.7.0", + "typescript": "~4.3.5" } } diff --git a/protractor.conf.js b/protractor.conf.js deleted file mode 100644 index 169743b..0000000 --- a/protractor.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/docs/referenceConf.js - -/*global jasmine */ -var SpecReporter = require('jasmine-spec-reporter'); - -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './e2e/**/*.e2e-spec.ts' - ], - capabilities: { - 'browserName': 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - useAllAngular2AppRoots: true, - beforeLaunch: function() { - require('ts-node').register({ - project: 'e2e' - }); - }, - onPrepare: function() { - jasmine.getEnv().addReporter(new SpecReporter()); - } -}; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 71acb5e..98c8871 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,16 +18,7 @@ import {SkillFilter} from "./filters/skill.component.filter"; imports: [ BrowserModule, FormsModule, - AgGridModule.withComponents( - [ - DateComponent, - SortableHeaderComponent, - HeaderGroupComponent, - RendererComponent, - ProficiencyFilter, - SkillFilter - ] - ) + AgGridModule ], declarations: [ AppComponent, diff --git a/src/app/data/refData.ts b/src/app/data/refData.ts index 60b8641..d8228e9 100644 --- a/src/app/data/refData.ts +++ b/src/app/data/refData.ts @@ -28,7 +28,7 @@ export default class RefData { new Date(2011, 11, 12) ]; - static COUNTRY_CODES = { + static COUNTRY_CODES: Record = { Ireland: "ie", Spain: "es", "United Kingdom": "gb", diff --git a/src/app/date-component/date.component.ts b/src/app/date-component/date.component.ts index 6d86a00..85620ff 100644 --- a/src/app/date-component/date.component.ts +++ b/src/app/date-component/date.component.ts @@ -1,5 +1,5 @@ import {Component, OnDestroy} from "@angular/core"; -import {IDateParams} from "@ag-grid-enterprise/all-modules"; +import { IDateParams } from "@ag-grid-community/core"; import {IDateAngularComp} from "@ag-grid-community/angular"; @@ -9,8 +9,8 @@ import {IDateAngularComp} from "@ag-grid-community/angular"; styleUrls: ['date.component.css'], }) export class DateComponent implements OnDestroy, IDateAngularComp { - private date: Date; - private params: IDateParams; + private date!: Date | null; + private params!: IDateParams; public dd: string = ''; public mm: string = ''; public yyyy: string = ''; @@ -46,7 +46,7 @@ export class DateComponent implements OnDestroy, IDateAngularComp { this.params.onDateChanged(); } - getDate(): Date { + getDate(): Date | null { return this.date; } @@ -70,7 +70,7 @@ export class DateComponent implements OnDestroy, IDateAngularComp { // INTERNAL LOGIC //********************************************************************************* - parseDate(dd, mm, yyyy) { + parseDate(dd: string, mm: string, yyyy: string) { //If any of the three input date fields are empty, stop and return null if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') { return null; diff --git a/src/app/filters/proficiency.component.filter.ts b/src/app/filters/proficiency.component.filter.ts index eac7616..e04dbad 100644 --- a/src/app/filters/proficiency.component.filter.ts +++ b/src/app/filters/proficiency.component.filter.ts @@ -1,4 +1,4 @@ -import {IFilterParams} from "@ag-grid-enterprise/all-modules"; +import { IDoesFilterPassParams, IFilterParams, ValueGetterParams } from "@ag-grid-community/core"; import {Component, OnDestroy} from "@angular/core"; import {IFilterAngularComp} from "@ag-grid-community/angular"; @@ -40,7 +40,7 @@ export class ProficiencyFilter implements OnDestroy, IFilterAngularComp { public selected: any = this.PROFICIENCIES[0]; - public params: IFilterParams; + public params!: IFilterParams; constructor() { } @@ -58,8 +58,8 @@ export class ProficiencyFilter implements OnDestroy, IFilterAngularComp { this.params.filterChangedCallback(); } - public doesFilterPass(params) { - const value = this.params.valueGetter(params); + public doesFilterPass(params: IDoesFilterPassParams) { + const value = this.params.valueGetter(params as ValueGetterParams); const valueAsNumber = parseFloat(value); return valueAsNumber >= this.selected.threshold; } diff --git a/src/app/filters/skill.component.filter.ts b/src/app/filters/skill.component.filter.ts index 03c1638..fde147b 100644 --- a/src/app/filters/skill.component.filter.ts +++ b/src/app/filters/skill.component.filter.ts @@ -1,4 +1,4 @@ -import {IFilterParams} from "@ag-grid-enterprise/all-modules"; +import { IDoesFilterPassParams, IFilterParams } from "@ag-grid-community/core"; import {Component} from "@angular/core"; import {IFilterAngularComp} from "@ag-grid-community/angular"; @@ -67,31 +67,31 @@ export class SkillFilter implements IFilterAngularComp { } ]; - private params: IFilterParams; + private params!: IFilterParams; agInit(params: IFilterParams): void { this.params = params; } - onSkillChanged($event, skill) { + onSkillChanged($event: any, skill: any) { skill.selected = $event.target.checked; this.params.filterChangedCallback(); } getModel() { - return this.skills.reduce((state, skill) => { + return this.skills.reduce((state: any, skill) => { state[skill.field] = skill.selected; return state; }, {}) } - setModel(model) { + setModel(model: any) { for (const skill of this.skills) { skill.selected = model && model[skill.field] ? model[skill.field].selected : false; } } - doesFilterPass(params) { + doesFilterPass(params: IDoesFilterPassParams) { const rowSkills = params.data.skills; let passed = true; diff --git a/src/app/header-component/sortable-header.component.html b/src/app/header-component/sortable-header.component.html index c95d1f8..933eb99 100644 --- a/src/app/header-component/sortable-header.component.html +++ b/src/app/header-component/sortable-header.component.html @@ -12,7 +12,7 @@
+ (click)="onSortRequested(null, $event)">
diff --git a/src/app/header-component/sortable-header.component.ts b/src/app/header-component/sortable-header.component.ts index 6dc25f7..ec50cf4 100644 --- a/src/app/header-component/sortable-header.component.ts +++ b/src/app/header-component/sortable-header.component.ts @@ -1,5 +1,5 @@ import {Component, ElementRef, OnDestroy} from "@angular/core"; -import {IHeaderParams} from "@ag-grid-enterprise/all-modules"; +import { IHeaderParams } from "@ag-grid-community/core"; import {IHeaderAngularComp} from "@ag-grid-community/angular"; interface MyParams extends IHeaderParams { @@ -11,8 +11,8 @@ interface MyParams extends IHeaderParams { styleUrls: ['sortable-header.component.css'] }) export class SortableHeaderComponent implements OnDestroy, IHeaderAngularComp { - public params: MyParams; - public sorted: string; + public params!: MyParams; + public sorted!: string; private elementRef: ElementRef; constructor(elementRef: ElementRef) { @@ -33,7 +33,7 @@ export class SortableHeaderComponent implements OnDestroy, IHeaderAngularComp { this.params.showColumnMenu(this.querySelector('.customHeaderMenuButton')); } - onSortRequested(order, event) { + onSortRequested(order: "asc" | "desc" | null, event: any) { this.params.setSort(order, event.shiftKey); }; @@ -53,7 +53,7 @@ export class SortableHeaderComponent implements OnDestroy, IHeaderAngularComp { '.customHeaderMenuButton', selector); } - refresh(params) : boolean { + refresh(params: MyParams): boolean { return true; } } diff --git a/src/app/header-group-component/header-group.component.ts b/src/app/header-group-component/header-group.component.ts index ca4acd8..9b8c3f7 100644 --- a/src/app/header-group-component/header-group.component.ts +++ b/src/app/header-group-component/header-group.component.ts @@ -1,5 +1,5 @@ import {Component, OnDestroy} from "@angular/core"; -import {IHeaderGroupParams} from "@ag-grid-enterprise/all-modules"; +import { IHeaderGroupParams } from "@ag-grid-community/core"; import {IHeaderGroupAngularComp} from "@ag-grid-community/angular"; @Component({ @@ -7,8 +7,8 @@ import {IHeaderGroupAngularComp} from "@ag-grid-community/angular"; styleUrls: ['header-group.component.css'] }) export class HeaderGroupComponent implements OnDestroy, IHeaderGroupAngularComp { - public params: IHeaderGroupParams; - public expanded: boolean; + public params!: IHeaderGroupParams; + public expanded!: boolean; agInit(params: IHeaderGroupParams): void { this.params = params; diff --git a/src/app/rich-grid-example/rich-grid.component.ts b/src/app/rich-grid-example/rich-grid.component.ts index 4aa9108..8953e58 100644 --- a/src/app/rich-grid-example/rich-grid.component.ts +++ b/src/app/rich-grid-example/rich-grid.component.ts @@ -1,6 +1,13 @@ import { Component, ViewEncapsulation } from '@angular/core'; // for enterprise features -import { AllModules, ColumnApi, GridApi, Module, ColDef, ColGroupDef, GridReadyEvent, CellClickedEvent, CellDoubleClickedEvent, CellContextMenuEvent } from '@ag-grid-enterprise/all-modules'; +import { ColumnApi, GridApi, Module, ColDef, ColGroupDef, GridReadyEvent, CellClickedEvent, CellDoubleClickedEvent, CellContextMenuEvent, ICellRendererParams } from '@ag-grid-community/core'; +import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model"; +import { MenuModule } from '@ag-grid-enterprise/menu'; +import { SideBarModule } from '@ag-grid-enterprise/side-bar'; +import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel'; +import { FiltersToolPanelModule } from '@ag-grid-enterprise/filter-tool-panel'; +import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping'; +import { StatusBarModule } from '@ag-grid-enterprise/status-bar'; import { ProficiencyFilter } from '../filters/proficiency.component.filter'; import { SkillFilter } from '../filters/skill.component.filter'; @@ -9,12 +16,10 @@ import { HeaderGroupComponent } from '../header-group-component/header-group.com import { DateComponent } from '../date-component/date.component'; import { SortableHeaderComponent } from '../header-component/sortable-header.component'; import { RendererComponent } from '../renderer-component/renderer.component'; - -// for community features -// import {Module, CommunityModules} from "@ag-grid-community/all-modules"; +import { SetFilterModule } from '@ag-grid-enterprise/set-filter'; // set your key here -// import {LicenseManager} from "@ag-grid-enterprise/all-modules"; +// import {LicenseManager} from "@ag-grid-community/core"; // LicenseManager.setLicenseKey(); @Component({ @@ -24,18 +29,27 @@ import { RendererComponent } from '../renderer-component/renderer.component'; encapsulation: ViewEncapsulation.None }) export class RichGridComponent { - public rowData: any[]; - public columnDefs: (ColDef | ColGroupDef)[]; - public rowCount: string; + public rowData!: any[]; + public columnDefs!: (ColDef | ColGroupDef)[]; + public rowCount!: string; public defaultColDef: ColDef; public components: any; - public sideBar: false; - - public modules: Module[] = AllModules; - - public api: GridApi; - public columnApi: ColumnApi; + public sideBar!: boolean; + + public modules: Module[] = [ + ClientSideRowModelModule, + MenuModule, + SideBarModule, + ColumnsToolPanelModule, + FiltersToolPanelModule, + StatusBarModule, + RowGroupingModule, + SetFilterModule + ]; + + public api!: GridApi; + public columnApi!: ColumnApi; constructor() { this.defaultColDef = { @@ -128,7 +142,7 @@ export class RichGridComponent { field: 'dob', width: 195, pinned: true, - cellRenderer: (params) => { + cellRenderer: (params: ICellRendererParams) => { return pad(params.value.getDate(), 2) + '/' + pad(params.value.getMonth() + 1, 2) + '/' + params.value.getFullYear(); @@ -217,7 +231,7 @@ export class RichGridComponent { console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); } - public onQuickFilterChanged($event) { + public onQuickFilterChanged($event: any) { this.api.setQuickFilter($event.target.value); } @@ -228,7 +242,7 @@ export class RichGridComponent { } public dobFilter() { - this.api.getFilterInstance('dob', (dateFilterComponent) => { + this.api.getFilterInstance('dob', (dateFilterComponent: any) => { dateFilterComponent.setModel({ type: 'equals', dateFrom: '2000-01-01' @@ -238,14 +252,14 @@ export class RichGridComponent { }); } - public toggleSidebar($event) { + public toggleSidebar($event: any) { this.sideBar = $event.target.checked; } } -function skillsCellRenderer(params) { +function skillsCellRenderer(params: ICellRendererParams) { const data = params.data; - const skills = []; + const skills: string[] = []; RefData.IT_SKILLS.forEach(function(skill) { if (data && data.skills && data.skills[skill]) { skills.push(``); @@ -254,7 +268,7 @@ function skillsCellRenderer(params) { return skills.join(' '); } -function countryCellRenderer(params) { +function countryCellRenderer(params: ICellRendererParams) { return `${params.value}`; } @@ -269,7 +283,7 @@ function createRandomPhoneNumber() { return result; } -function percentCellRenderer(params) { +function percentCellRenderer(params: ICellRendererParams) { const value = params.value; const eDivPercentBar = document.createElement('div'); @@ -296,7 +310,7 @@ function percentCellRenderer(params) { } // Utility function used to pad the date formatting. -function pad(num, totalStringSize) { +function pad(num: number, totalStringSize: number) { let asString = num + ''; while (asString.length < totalStringSize) { asString = '0' + asString; } return asString; diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..63fee20 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,4 @@ +/* You can add global styles to this file, and also import other style files */ +@import "~@ag-grid-community/core/dist/styles/ag-grid.css"; +@import "~@ag-grid-community/core/dist/styles/ag-theme-alpine.css"; +@import "~bootstrap/dist/css/bootstrap.min.css"; diff --git a/styles.css b/styles.css deleted file mode 100644 index 6540674..0000000 --- a/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -@import "~@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"; -@import "~@ag-grid-enterprise/all-modules/dist/styles/ag-theme-alpine.css"; -@import "~bootstrap/dist/css/bootstrap.min.css"; diff --git a/tests/app.spec.ts b/tests/app.spec.ts deleted file mode 100644 index d6bc045..0000000 --- a/tests/app.spec.ts +++ /dev/null @@ -1,151 +0,0 @@ -import {Component, ViewChild, ViewContainerRef} from "@angular/core"; -import {ColumnApi, GridApi} from "@ag-grid-enterprise/all-modules"; -import {AgGridModule, ICellEditorAngularComp} from "@ag-grid-community/angular"; -import { TestBed, waitForAsync } from "@angular/core/testing"; -import {FormsModule} from "@angular/forms"; - -import {Module, AllCommunityModules} from "@ag-grid-enterprise/all-modules"; - -@Component({ - template: ` - {{this.params.value * 2}}` -}) -class RendererComponent { - params: any; - - public agInit(params) { - this.params = params; - } -} - - -@Component({ - selector: 'editor-cell', - template: `` -}) -export class EditorComponent implements ICellEditorAngularComp { - private params: any; - public value: number; - - @ViewChild('input', {read: ViewContainerRef, static: false}) public input; - - agInit(params: any): void { - this.params = params; - this.value = this.params.value; - } - - getValue(): any { - return this.value; - } - - // for testing - setValue(newValue: any) { - this.value = newValue; - } - - isCancelBeforeStart(): boolean { - return false; - } - - isCancelAfterEnd(): boolean { - return false; - }; -} - -@Component({ - template: ` -
- - -
` -}) -class TestHostComponent { - modules: Module[] = AllCommunityModules; - - rowData: any[] = [{name: 'Test Name', number: 42}]; - - columnDefs: any[] = [ - {field: "name"}, - {field: "number", colId: "raw", headerName: "Raw Number", editable: true, cellEditor: 'editor'}, - {field: "number", colId: "renderer", headerName: "Renderer Value", cellRenderer: 'renderer'} - ]; - - frameworkComponents = { - 'renderer': RendererComponent, - 'editor': EditorComponent - }; - - api: GridApi; - columnApi: ColumnApi; - - public onGridReady(params) { - this.api = params.api; - this.columnApi = params.columnApi; - } -} - -describe('angular-cli App', function () { - let fixture: any; - let component: TestHostComponent; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - AgGridModule.withComponents([RendererComponent, EditorComponent]) - ], - declarations: [TestHostComponent, RendererComponent, EditorComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(TestHostComponent); - component = fixture.componentInstance; - - fixture.detectChanges(); - })); - - it('the application should render', () => { - expect(component).toBeDefined(); - }); - - it('the grid cells should be as expected', () => { - const appElement = fixture.nativeElement; - - const cellElements = appElement.querySelectorAll('.ag-cell-value'); - expect(cellElements.length).toEqual(3); - expect(cellElements[0].textContent).toEqual("Test Name"); - expect(cellElements[1].textContent).toEqual("42"); - expect(cellElements[2].textContent).toEqual("84"); - }); - - // it('cell should be editable and editor component usable', () => { - // // we use the API to start and stop editing - in a real e2e test we could actually double click on the cell etc - // component.api.startEditingCell({ - // rowIndex: 0, - // colKey: 'raw' - // }); - // - // const instances = component.api.getCellEditorInstances(); - // expect(instances.length).toEqual(1); - // - // const editorComponent = instances[0].getFrameworkComponentInstance(); - // editorComponent.setValue(100); - // - // component.api.stopEditing(); - // - // const appElement = fixture.nativeElement; - // const cellElements = appElement.querySelectorAll('.ag-cell-value'); - // expect(cellElements.length).toEqual(3); - // expect(cellElements[0].textContent).toEqual("Test Name"); - // expect(cellElements[1].textContent).toEqual("100"); - // expect(cellElements[2].textContent).toEqual("200"); - // }); -}); diff --git a/tests/karma.conf.js b/tests/karma.conf.js deleted file mode 100644 index a447aa8..0000000 --- a/tests/karma.conf.js +++ /dev/null @@ -1,36 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, '../coverage'), - reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - // not strictly required for testing but useful when debugging the grid in action - files: [ - '../node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css', - '../node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css' - ] - }); -}; diff --git a/tests/polyfills.ts b/tests/polyfills.ts deleted file mode 100644 index 5af402e..0000000 --- a/tests/polyfills.ts +++ /dev/null @@ -1,62 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** IE9, IE10 and IE11 requires all of the following polyfills. **/ -import 'core-js/es/symbol'; -import 'core-js/es/object'; -import 'core-js/es/function'; -import 'core-js/es/parse-int'; -import 'core-js/es/parse-float'; -import 'core-js/es/number'; -import 'core-js/es/math'; -import 'core-js/es/string'; -import 'core-js/es/date'; -import 'core-js/es/array'; -import 'core-js/es/regexp'; -import 'core-js/es/map'; -import 'core-js/es/set'; -/** Evergreen browsers require these. **/ -import 'core-js/es/reflect'; - -/*************************************************************************************************** - * Zone JS is required by Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** IE10 and IE11 requires the following to support `@angular/animation`. */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - - -/** ALL Firefox browsers require the following to support `@angular/animation`. **/ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ - -/** - * Date, currency, decimal and percent pipes. - * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 - */ -// import 'intl'; // Run `npm install --save intl`. diff --git a/tests/test.ts b/tests/test.ts deleted file mode 100644 index 1631789..0000000 --- a/tests/test.ts +++ /dev/null @@ -1,20 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/tests/tsconfig.spec.json b/tests/tsconfig.spec.json deleted file mode 100644 index 15cb506..0000000 --- a/tests/tsconfig.spec.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "../src/tsconfig.app.json", - "compilerOptions": { - "outDir": "../out-tsc/spec", - "types": [ - "jasmine", - "node" - ] - }, - "files": [ - "test.ts", - "polyfills.ts" - ], - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] -} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..82d91dc --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json index 83656e1..6df8283 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,30 @@ -/* - This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. - It is not intended to be used to perform a compilation. - - To learn more about this file see: https://angular.io/config/solution-tsconfig. -*/ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { - "files": [], - "references": [ - { - "path": "./src/tsconfig.app.json" - }, - { - "path": "./tests/tsconfig.spec.json" - }, - { - "path": "./e2e/tsconfig.e2e.json" - } - ] -} \ No newline at end of file + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2017", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..092345b --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,18 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "files": [ + "src/test.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 47354dc..0000000 --- a/tslint.json +++ /dev/null @@ -1,115 +0,0 @@ -{ - "rulesDirectory": [ - "node_modules/codelyzer" - ], - "rules": { - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "deprecation": { - "severity": "warning" - }, - "eofline": true, - "forin": true, - "indent": [ - true, - "spaces" - ], - "label-position": true, - "label-undefined": true, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - "static-before-instance", - "variables-before-functions" - ], - "no-arg": true, - "no-bitwise": true, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-key": true, - "no-duplicate-variable": true, - "no-empty": false, - "no-eval": true, - "no-inferrable-types": true, - "no-shadowed-variable": true, - "no-string-literal": false, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unused-expression": true, - "no-unreachable": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ - true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" - ], - "quotemark": [ - true, - "single" - ], - "radix": true, - "semicolon": [ - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], - - "directive-selector-prefix": [true, "app"], - "component-selector-prefix": [true, "app"], - "directive-selector-name": [true, "camelCase"], - "component-selector-name": [true, "kebab-case"], - "directive-selector-type": [true, "attribute"], - "component-selector-type": [true, "element"], - "use-input-property-decorator": true, - "use-output-property-decorator": true, - "use-host-property-decorator": true, - "no-input-rename": true, - "no-output-rename": true, - "use-life-cycle-interface": true, - "use-pipe-transform-interface": true, - "component-class-suffix": true, - "directive-class-suffix": true, - "templates-use-public": true, - "invoke-injectable": true - } -}