[NG] fix datagrid single selection to deselect when value is set to n…

…ull (#1394)

closes #1272

Signed-off-by: Jeremy Wilken <gnomation@gnomeontherun.com>

build/compile-ts.js

@@ -5,6 +5,7 @@
  */
 
 var gulp = require("gulp");
+var plumber = require("gulp-plumber");
 var replace = require('gulp-replace');
 var sourcemaps = require("gulp-sourcemaps");
 var inlineNg2Template = require("gulp-inline-ng2-template");
@@ -31,6 +32,7 @@ module.exports = function(tsSources, options, destination) {
     var prod = process.env.NODE_ENV==="prod";
 
     var stream = gulp.src(allSources, {base: "src/"})
+        .pipe(plumber())
         // replace .scss references in styleUrls: [...] in the files
         .pipe(replace(/styleUrls\s*:\s*\[([^\]]*)\]/g, function(match, group) {
             // here, match = styleUrls: [...]  and group = string inside []

package.json

@@ -45,6 +45,7 @@
     "gulp-env": "^0.4.0",
     "gulp-gzip": "^1.2.0",
     "gulp-inline-ng2-template": "0.0.10",
+    "gulp-plumber": "^1.1.0",
     "gulp-preprocess": "^2.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",

src/clarity-angular/data/datagrid/datagrid.spec.ts

@@ -248,6 +248,52 @@ export default function(): void {
             });
         });
 
+        describe("Single selection", function() {
+            let context: TestContext<Datagrid, SingleSelectionTest>;
+            let selection: Selection;
+
+            beforeEach(function() {
+                context = this.create(Datagrid, SingleSelectionTest, [Selection]);
+                selection = context.getClarityProvider(Selection);
+            });
+
+            describe("TypeScript API", function() {
+                // None for now, would duplicate tests of Selection provider
+            });
+
+            describe("Template API", function() {
+                it("sets the currentSingle binding", function() {
+                    expect(selection.currentSingle).toBeNull();
+                    context.testComponent.selected = 1;
+                    context.detectChanges();
+                    expect(selection.currentSingle).toEqual(1);
+                    context.testComponent.selected = null;
+                    context.detectChanges();
+                    expect(selection.currentSingle).toBeNull();
+                });
+
+                it("offers two way binding on the currentSingle value", function() {
+                    expect(selection.currentSingle).toBeNull();
+                    context.testComponent.selected = 1;
+                    context.detectChanges();
+                    expect(selection.currentSingle).toEqual(1);
+                    selection.currentSingle = 2;
+                    context.detectChanges();
+                    expect(context.testComponent.selected).toEqual(2);
+                });
+            });
+
+            describe("View", function() {
+                it("sets the proper selected class", function() {
+                    const row = context.clarityElement.querySelectorAll(".datagrid-row")[1];
+                    expect(row.classList.contains("datagrid-selected")).toBeFalsy();
+                    selection.currentSingle = 1;
+                    context.detectChanges();
+                    expect(row.classList.contains("datagrid-selected")).toBeTruthy();
+                });
+            });
+        });
+
         describe("Chocolate", function() {
             describe("clrDgItems", function() {
                 it("doesn't taunt with chocolate on actionable rows", function() {
@@ -354,6 +400,26 @@ class TrackByTest {
     }
 }
 
+@Component({
+    template: `
+    <clr-datagrid [(clrDgSingleSelected)]="selected">
+        <clr-dg-column>First</clr-dg-column>
+        <clr-dg-column>Second</clr-dg-column>
+    
+        <clr-dg-row *clrDgItems="let item of items;" [clrDgItem]="item">
+            <clr-dg-cell>{{item}}</clr-dg-cell>
+            <clr-dg-cell>{{item * item}}</clr-dg-cell>
+        </clr-dg-row>
+    
+        <clr-dg-footer (click)="selected = null">{{selected}}</clr-dg-footer>
+    </clr-datagrid>
+`
+})
+class SingleSelectionTest {
+    items = [1, 2, 3];
+    selected: any;
+}
+
 @Component({
     template: `
     <clr-datagrid>

src/clarity-angular/data/datagrid/datagrid.ts

@@ -149,6 +149,8 @@ export class Datagrid implements AfterContentInit, AfterViewInit, OnDestroy {
         this.selection.selectionType = SelectionType.Single;
         if (value) {
             this.selection.currentSingle = value;
+        } else {
+            this.selection.currentSingle = null;
         }
     }