Upgraded to rxjs6 syntax and removed lodash

CALABRO Raphael (UA 2118) · CALABRO Raphael (UA 2118) · commit a27e6cc024b4 · 2018-09-03T14:44:46.000+02:00
Fixed "compare" method for null and undefined values

Using const and let when possible

Using triple equals to avoid comparison errors

Fixed unit test by casting "bulb" to allow assignation to SortOrder type

Removed lodash dependency and updated dependencies versions.

Updated systemjs and karma configurations

Fixed code style.

Upgraded version number to 2.0.0

Using SortOrder as argument to better convey the possible values

Added unit tests for new code and fixed onSortChange emissions

Updated NodeJS version for Travis
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '5'
+- '8'
 before_install:
 - npm install -g codeclimate-test-reporter
 script: npm test -- --browsers PhantomJS
diff --git a/examples/systemjs/app/data-filter.pipe.ts b/examples/systemjs/app/data-filter.pipe.ts
@@ -1,4 +1,3 @@
-import * as _ from "lodash";
 import {Pipe, PipeTransform} from "@angular/core";
 
 @Pipe({
@@ -8,7 +7,7 @@ export class DataFilterPipe implements PipeTransform {
 
     transform(array: any[], query: string): any {
         if (query) {
-            return _.filter(array, row=>row.name.indexOf(query) > -1);
+            return array.filter(row=>row.name.indexOf(query) > -1);
         }
         return array;
     }
diff --git a/karma.conf.js b/karma.conf.js
@@ -68,13 +68,6 @@ module.exports = function (config) {
                 watched: false
             },
 
-            // Lodash
-            {
-                pattern: 'node_modules/lodash/lodash.js',
-                included: false,
-                watched: false
-            },
-
             // The testing library
             {
                 pattern: 'systemjs.config.js',
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-datatable",
-  "version": "0.6.0",
+  "version": "2.0.0",
   "description": "DataTable component for Angular2 framework",
   "main": "index.js",
   "scripts": {
@@ -19,8 +19,7 @@
   },
   "keywords": [
     "angular",
-    "angularjs",
-    "angular2",
+    "angular6",
     "ng",
     "ng2",
     "table",
@@ -35,12 +34,13 @@
   },
   "homepage": "https://github.com/mariuszfoltak/angular2-datatable#readme",
   "devDependencies": {
-    "@angular/core": "^2.1.0",
-    "@angular/compiler": "^2.1.0",
-    "@angular/common": "^2.1.0",
-    "@angular/platform-browser": "^2.1.0",
-    "@angular/platform-browser-dynamic": "^2.1.0",
-    "@angular/compiler-cli": "^2.1.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@types/jasmine": "^2.5.35",
     "core-js": "^2.4.1",
     "http-server": "^0.9.0",
     "jasmine-core": "^2.4.1",
@@ -49,24 +49,18 @@
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.0.2",
     "karma-phantomjs-launcher": "^1.0.2",
-    "lodash": "^4.0.0",
     "phantomjs-prebuilt": "^2.1.7",
     "remap-istanbul": "^0.7.0",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "^0.19.39",
-    "typescript": "~2.1.0",
-    "zone.js": "^0.6.25",
     "rimraf": "^2.5.4",
-    "@types/lodash": "ts2.0",
-    "@types/jasmine": "^2.5.35"
-  },
-  "dependencies": {
-    "lodash": "^4.0.0"
+    "rxjs": "^6.0.0",
+    "systemjs": "^0.19.47",
+    "typescript": "~2.7.2",
+    "zone.js": "^0.6.25"
   },
   "peerDependencies": {
-    "@angular/core": "^2.0.0",
-    "@angular/common": "^2.0.0",
-    "@angular/platform-browser": "^2.0.0",
-    "rxjs": "^5.0.0-beta.12"
+    "@angular/core": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "rxjs": "^6.0.0"
   }
 }
diff --git a/src/BootstrapPaginator.ts b/src/BootstrapPaginator.ts
@@ -1,6 +1,5 @@
 import {Component, Input, OnChanges} from "@angular/core";
 import {DataTable} from "./DataTable";
-import * as _ from "lodash";
 
 @Component({
     selector: "mfBootstrapPaginator",
@@ -57,7 +56,7 @@ export class BootstrapPaginator implements OnChanges {
 
     ngOnChanges(changes: any): any {
         if (changes.rowsOnPageSet) {
-            this.minRowsOnPage = _.min(this.rowsOnPageSet)
+            this.minRowsOnPage = this.rowsOnPageSet.reduce((previous, current) => current < previous ? current : previous);
         }
     }
 }
diff --git a/src/DataTable.spec.ts b/src/DataTable.spec.ts
@@ -3,7 +3,8 @@ import {SimpleChange, Component} from "@angular/core";
 import {DataTable, PageEvent, SortEvent} from "./DataTable";
 import {TestBed, ComponentFixture} from "@angular/core/testing";
 import {By} from "@angular/platform-browser";
-import * as _ from "lodash";
+import {switchMap} from 'rxjs/operators';
+import {range} from "rxjs";
 
 @Component({
     template: `<table [mfData]="[]"></table>`
@@ -29,13 +30,13 @@ describe("DataTable directive tests", ()=> {
             {id: 5, name: 'Ðrone'},
             {id: 4, name: 'Ananas'}
         ];
-        datatable.ngOnChanges({inputData: new SimpleChange(null, datatable.inputData)});
+        datatable.ngOnChanges({inputData: new SimpleChange(null, datatable.inputData, false)});
     });
 
     describe("initializing", ()=> {
 
         it("data should be empty array if inputData is undefined or null", () => {
-            datatable.ngOnChanges({inputData: new SimpleChange(null, null)});
+            datatable.ngOnChanges({inputData: new SimpleChange(null, null, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual([]);
         });
@@ -108,12 +109,19 @@ describe("DataTable directive tests", ()=> {
             });
 
             datatable.rowsOnPage = 3;
-            datatable.ngOnChanges({rowsOnPage: new SimpleChange(2, 3)});
+            datatable.ngOnChanges({rowsOnPage: new SimpleChange(2, 3, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual([{id: 3, name: 'banana'}, {id: 1, name: 'Duck'}, {id: 2, name: 'ącki'}]);
-
-
         });
+
+        it("should emit a dataLength of 0 when inputData is null or undefined", (done) => {
+            datatable.onPageChange.subscribe((pageOptions: PageEvent)=> {
+                expect(pageOptions.dataLength).toEqual(0);
+                done();
+            });
+            datatable.inputData = null;
+            datatable.setPage(2, 3);
+        })
     });
 
     describe("sorting", ()=> {
@@ -128,8 +136,8 @@ describe("DataTable directive tests", ()=> {
             datatable.sortBy = "id";
             datatable.sortOrder = "asc";
             datatable.ngOnChanges({
-                sortBy: new SimpleChange(null, datatable.sortBy),
-                sortOrder: new SimpleChange(null, datatable.sortOrder)
+                sortBy: new SimpleChange(null, datatable.sortBy, false),
+                sortOrder: new SimpleChange(null, datatable.sortOrder, false)
             });
             datatable.ngDoCheck();
             expect(datatable.data).toEqual([
@@ -151,8 +159,8 @@ describe("DataTable directive tests", ()=> {
             datatable.sortBy = "id";
             datatable.sortOrder = "desc";
             datatable.ngOnChanges({
-                sortBy: new SimpleChange(null, datatable.sortBy),
-                sortOrder: new SimpleChange(null, datatable.sortOrder)
+                sortBy: new SimpleChange(null, datatable.sortBy, false),
+                sortOrder: new SimpleChange(null, datatable.sortOrder, false)
             });
             datatable.ngDoCheck();
 
@@ -167,7 +175,7 @@ describe("DataTable directive tests", ()=> {
             datatable.ngDoCheck();
             datatable.sortBy = "id";
             datatable.ngOnChanges({
-                sortBy: new SimpleChange(null, datatable.sortBy)
+                sortBy: new SimpleChange(null, datatable.sortBy, false)
             });
             datatable.ngDoCheck();
             expect(datatable.sortOrder).toEqual("asc");
@@ -181,10 +189,10 @@ describe("DataTable directive tests", ()=> {
             });
             datatable.ngDoCheck();
             datatable.sortBy = "id";
-            datatable.sortOrder = "bulb";
+            datatable.sortOrder = "bulb" as any;
             datatable.ngOnChanges({
-                sortBy: new SimpleChange(null, datatable.sortBy),
-                sortOrder: new SimpleChange(null, datatable.sortOrder)
+                sortBy: new SimpleChange(null, datatable.sortBy, false),
+                sortOrder: new SimpleChange(null, datatable.sortOrder, false)
             });
             datatable.ngDoCheck();
             expect(datatable.sortOrder).toEqual("asc");
@@ -197,24 +205,40 @@ describe("DataTable directive tests", ()=> {
             ]);
         });
 
+        it("should set sortOrder to 'asc' if setSort is given something else than 'asc' or 'desc'", () => {
+            datatable.setSort("id", "bulb" as any);
+            expect(datatable.getSort()).toEqual({sortBy: "id", sortOrder: "asc"});
+            datatable.ngDoCheck();
+            expect(datatable.sortOrder).toEqual("asc");
+            expect(datatable.data).toEqual([
+                {id: 1, name: 'Duck'},
+                {id: 2, name: 'ącki'},
+                {id: 3, name: 'banana'},
+                {id: 4, name: 'Ananas'},
+                {id: 5, name: 'Ðrone'}
+            ]);
+        });
+
         it("shouldn't change order when only order provided", (done)=> {
             done();
             datatable.onSortChange.subscribe(()=> {
                 done.fail("OnSortChange shouldn't been fired");
             });
             datatable.ngDoCheck();
             datatable.sortOrder = "desc";
-            datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder)});
+            datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual(datatable.inputData);
         });
 
         it("should call output event when sorting changed", (done)=> {
             datatable.ngDoCheck();
-            datatable.sortByChange.switchMap((sortBy: string)=> {
-                expect(sortBy).toEqual("id");
-                return datatable.sortOrderChange;
-            }).subscribe((sortOrder: string)=> {
+            datatable.sortByChange.pipe(
+                switchMap((sortBy: string)=> {
+                    expect(sortBy).toEqual("id");
+                    return datatable.sortOrderChange;
+                })
+            ).subscribe((sortOrder: string)=> {
                 expect(sortOrder).toEqual("desc");
                 done();
             });
@@ -228,8 +252,8 @@ describe("DataTable directive tests", ()=> {
                 done.fail("Shouldn't call sortOrderChange");
             });
             done();
-            datatable.sortOrder = "bulb";
-            datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder)});
+            datatable.sortOrder = "bulb" as any;
+            datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder, false)});
             datatable.ngDoCheck();
         });
         // Wywołanie outputa gdy zmiana z innej strony
@@ -272,14 +296,16 @@ describe("DataTable directive tests", ()=> {
                 {name: 'Claire', age: 9},
                 {name: 'Anna', age: 34},
                 {name: 'Claire', age: 16},
+                {name: 'Anna', age: 12},
                 {name: 'Claire', age: 7},
                 {name: 'Anna', age: 12}
             ];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.setSort(['name', 'age'], "asc");
             datatable.ngDoCheck();
 
             expect(datatable.data).toEqual([
+                {name: 'Anna', age: 12},
                 {name: 'Anna', age: 12},
                 {name: 'Anna', age: 34},
                 {name: 'Claire', age: 7},
@@ -297,7 +323,7 @@ describe("DataTable directive tests", ()=> {
                 {name: 'Claire', city: {zip: '11111'}},
                 {name: 'Anna', city: {zip: '21111'}}
             ];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.setSort("city.zip", "asc");
             datatable.ngDoCheck();
 
@@ -315,7 +341,7 @@ describe("DataTable directive tests", ()=> {
     describe("data change", ()=> {
         it("should refresh data when inputData change", ()=> {
             let newData = [{id: 5, name: 'Ðrone'}, {id: 4, name: 'Ananas'}];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual([{id: 5, name: 'Ðrone'}, {id: 4, name: 'Ananas'}]);
         });
@@ -347,7 +373,7 @@ describe("DataTable directive tests", ()=> {
                 done();
             });
             let newData = [{id: 5, name: 'Ðrone'}, {id: 4, name: 'Ananas'}];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.ngDoCheck();
         });
 
@@ -375,7 +401,7 @@ describe("DataTable directive tests", ()=> {
                 expect(opt.rowsOnPage).toEqual(2);
                 done();
             });
-            _.times(3, ()=>datatable.inputData.pop());
+            range(0, 3).forEach(()=>datatable.inputData.pop());
             datatable.ngDoCheck();
         });
 
@@ -384,7 +410,7 @@ describe("DataTable directive tests", ()=> {
             datatable.ngDoCheck();
 
             let newData = [{id: 5, name: 'Ðrone'}, {id: 4, name: 'Ananas'}];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual(newData);
         });
@@ -406,7 +432,7 @@ describe("DataTable directive tests", ()=> {
             datatable.ngDoCheck();
 
             let newData = [{id: 5, name: 'Ðrone'}, {id: 1, name: 'Duck'}, {id: 4, name: 'Ananas'}];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.ngDoCheck();
             expect(datatable.data).toEqual([{id: 1, name: 'Duck'}]);
         });
@@ -436,7 +462,7 @@ describe("DataTable directive tests", ()=> {
             datatable.ngDoCheck();
 
             let newData = [];
-            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData)});
+            datatable.ngOnChanges({inputData: new SimpleChange(datatable.inputData, newData, false)});
             datatable.ngDoCheck();
             expect(datatable.activePage).toEqual(1);
         });
@@ -445,7 +471,7 @@ describe("DataTable directive tests", ()=> {
             datatable.setPage(2, 1);
             datatable.ngDoCheck();
 
-            _.times(5, ()=>datatable.inputData.pop());
+            range(0, 5).forEach(()=>datatable.inputData.pop());
             datatable.ngDoCheck();
             expect(datatable.inputData.length).toEqual(0);
             expect(datatable.activePage).toEqual(1);
diff --git a/src/DataTable.ts b/src/DataTable.ts
diff --git a/systemjs.config.js b/systemjs.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as _ from "lodash";`
`2`	`1`	`import {Pipe, PipeTransform} from "@angular/core";`
`3`	`2`
`4`	`3`	`@Pipe({`
`@@ -8,7 +7,7 @@ export class DataFilterPipe implements PipeTransform {`
`8`	`7`
`9`	`8`	`transform(array: any[], query: string): any {`
`10`	`9`	`if (query) {`
`11`		`- return _.filter(array, row=>row.name.indexOf(query) > -1);`
	`10`	`+ return array.filter(row=>row.name.indexOf(query) > -1);`
`12`	`11`	`}`
`13`	`12`	`return array;`
`14`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`import {Component, Input, OnChanges} from "@angular/core";`
`2`	`2`	`import {DataTable} from "./DataTable";`
`3`		`-import * as _ from "lodash";`
`4`	`3`
`5`	`4`	`@Component({`
`6`	`5`	`selector: "mfBootstrapPaginator",`
`@@ -57,7 +56,7 @@ export class BootstrapPaginator implements OnChanges {`
`57`	`56`
`58`	`57`	`ngOnChanges(changes: any): any {`
`59`	`58`	`if (changes.rowsOnPageSet) {`
`60`		`- this.minRowsOnPage = _.min(this.rowsOnPageSet)`
	`59`	`+ this.minRowsOnPage = this.rowsOnPageSet.reduce((previous, current) => current < previous ? current : previous);`
`61`	`60`	`}`
`62`	`61`	`}`
`63`	`62`	`}`