feat(stark-ui): table - add selectedRows input

Adding selectedRows Input lets the developer controlling the selected
rows himself. Thanks to that, he can reset the selection if needed.

ISSUES CLOSED: #1366

packages/stark-ui/src/modules/table/components/table.component.spec.ts

@@ -40,6 +40,7 @@ import createSpy = jasmine.createSpy;
 			[showRowsCounter]="showRowsCounter"
 			[showRowIndex]="showRowIndex"
 			[orderProperties]="orderProperties"
+			[selectedRows]="selectedRows"
 			[tableRowActions]="tableRowActions"
 			[rowClassNameFn]="rowClassNameFn"
 			(rowClicked)="rowClickHandler($event)"
@@ -62,6 +63,7 @@ class TestHostComponent {
 	public tableRowActions?: StarkTableRowActions;
 	public tableFilter?: StarkTableFilter;
 	public orderProperties?: string[];
+	public selectedRows?: object[];
 	public rowClassNameFn?: (row: object, index: number) => string;
 	public rowClickHandler?: (row: object) => void;
 }
@@ -209,14 +211,30 @@ describe("TableComponent", () => {
 			expect(component.dataSource.data).toEqual([{ name: "test-data-2" }]);
 		});
 
-		it("should reset 'selection' when 'data' changes", () => {
-			component.selection.toggle({ name: "selected-data-1" });
-			expect(component.selection.selected).toEqual([{ name: "selected-data-1" }]);
+		it("should change internal selection when 'selectedRows' changes and is different of selection.selected", () => {
+			// tslint:disable-next-line:no-duplicate-string
+			const dummySelectedRow = [{ name: "selected-data-1" }];
+			const dummySelectedRows = [{ name: "selected-data-1" }, { name: "selected-data-2" }, { name: "selected-data-3" }];
+			spyOn(component.selectChanged, "emit");
 
-			hostComponent.dummyData = [{ name: "data-1" }];
+			hostComponent.multiSelect = "true";
 			hostFixture.detectChanges();
-
+			(<Spy>component.selectChanged.emit).calls.reset();
+
 			expect(component.selection.selected).toEqual([]);
+			hostComponent.selectedRows = dummySelectedRow;
+			hostFixture.detectChanges();
+			expect(component.selectChanged.emit).not.toHaveBeenCalled();
+			expect(component.selection.selected).toEqual(dummySelectedRow);
+
+			hostFixture.detectChanges();
+			expect(component.selection.selected).toEqual(dummySelectedRow);
+			expect(component.selectChanged.emit).not.toHaveBeenCalled();
+
+			hostComponent.selectedRows = dummySelectedRows;
+			hostFixture.detectChanges();
+			expect(component.selectChanged.emit).not.toHaveBeenCalled();
+			expect(component.selection.selected).toEqual(dummySelectedRows);
 		});
 
 		it("should assign right value to isFixedHeaderEnabled when fixedHeader changes", () => {
@@ -250,6 +268,32 @@ describe("TableComponent", () => {
 			expect(component.isMultiSelectEnabled).toBe(false);
 		});
 
+		it("should assign right value when 'multiSelect' changes and emit new value on 'selectChanged'", () => {
+			const dummySelectedRows = [{ name: "selected-data-1" }, { name: "selected-data-2" }, { name: "selected-data-3" }];
+			spyOn(component.selectChanged, "emit");
+
+			hostComponent.selectedRows = dummySelectedRows;
+			hostComponent.multiSelect = "true";
+			hostFixture.detectChanges();
+			expect(component.selection.selected).toEqual(dummySelectedRows);
+			expect(component.selectChanged.emit).toHaveBeenCalledTimes(1);
+			expect(component.selectChanged.emit).toHaveBeenCalledWith(dummySelectedRows);
+
+			(<Spy>component.selectChanged.emit).calls.reset();
+			hostComponent.multiSelect = "false";
+			hostFixture.detectChanges();
+			expect(component.selection.selected).toEqual([dummySelectedRows[0]]);
+			expect(component.selectChanged.emit).toHaveBeenCalledTimes(1);
+			expect(component.selectChanged.emit).toHaveBeenCalledWith([dummySelectedRows[0]]);
+
+			(<Spy>component.selectChanged.emit).calls.reset();
+			hostComponent.multiSelect = "true";
+			hostFixture.detectChanges();
+			expect(component.selection.selected).toEqual([dummySelectedRows[0]]);
+			expect(component.selectChanged.emit).toHaveBeenCalledTimes(1);
+			expect(component.selectChanged.emit).toHaveBeenCalledWith([dummySelectedRows[0]]);
+		});
+
 		it("should assign right value to display/hide 'select' column when rowsSelectable changes", () => {
 			hostComponent.rowsSelectable = true;
 			hostFixture.detectChanges();

packages/stark-ui/src/modules/table/components/table.component.ts

@@ -44,6 +44,7 @@ import { AbstractStarkUiComponent } from "../../../common/classes/abstract-compo
 import { StarkPaginateEvent, StarkPaginationComponent, StarkPaginationConfig } from "../../pagination/components";
 import { StarkMinimapComponentMode, StarkMinimapItemProperties } from "../../minimap/components";
 import find from "lodash-es/find";
+import isEqual from "lodash-es/isEqual";
 
 /**
  * Name of the component
@@ -256,6 +257,13 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	@Input()
 	public rowClassNameFn?: (row: object, index: number) => string;
 
+	/**
+	 * Array of the selected rows
+	 * Default: []
+	 */
+	@Input()
+	public selectedRows: object[] = [];
+
 	/**
 	 * Determine if the row index must be present or not.
 	 * Default: false
@@ -428,7 +436,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	public ngOnInit(): void {
 		this.logger.debug(componentName + ": component initialized");
 
-		this._resetSelection();
+		this._resetSelection(this.selectedRows);
 
 		if (this.customTableActionsType === "regular") {
 			this.customTableRegularActions = { actions: this.customTableActions || [] };
@@ -484,8 +492,6 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 			this.data = this.data || [];
 
 			if (!changes["data"].isFirstChange()) {
-				this._resetSelection();
-
 				if (this.resetFilterValueOnDataChange()) {
 					this.filterChanged.emit(this.filter);
 					this.applyFilter();
@@ -532,8 +538,12 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 			}
 		}
 
-		if (changes["multiSelect"]) {
-			this._resetSelection();
+		if (changes["selectedRows"] && !isEqual(changes["selectedRows"].currentValue, this.selection.selected)) {
+			this._resetSelection(this.selectedRows);
+		}
+
+		if (changes["multiSelect"] && !changes["multiSelect"].isFirstChange()) {
+			this._resetSelection(this.selection.selected, true);
 		}
 	}
 
@@ -829,8 +839,12 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	/**
 	 * @ignore
 	 */
-	private _resetSelection(): void {
-		this.selection = new SelectionModel<object>(this.isMultiSelectEnabled, []);
+	private _resetSelection(selectedRows: object[], shouldEmitDirectly: boolean = false): void {
+		this.selection = new SelectionModel<object>(this.isMultiSelectEnabled, selectedRows);
+
+		if (shouldEmitDirectly) {
+			this.selectChanged.emit(this.selection.selected);
+		}
 
 		// Emit event when selection changes
 		if (this._selectionSub) {