From 76129884725e16b07dfe8922cab6da8d637a953e Mon Sep 17 00:00:00 2001
From: Alexis Georges <alexis@georges.brussels>
Date: Sun, 19 May 2019 15:59:09 +0200
Subject: [PATCH] feat(stark-ui): table - Add support to show rows counter

ISSUES CLOSED: #1244
---
 .../table/components/_table.component.scss    |   7 ++
 .../table/components/table.component.html     |   6 +
 .../table/components/table.component.spec.ts  | 115 +++++++++++++++---
 .../table/components/table.component.ts       |  20 +++
 .../table-regular.component.html              |   1 +
 .../assets/examples/table/regular/table.html  |   1 +
 6 files changed, 136 insertions(+), 14 deletions(-)

diff --git a/packages/stark-ui/src/modules/table/components/_table.component.scss b/packages/stark-ui/src/modules/table/components/_table.component.scss
index e22f85f954..75d8ca88ef 100644
--- a/packages/stark-ui/src/modules/table/components/_table.component.scss
+++ b/packages/stark-ui/src/modules/table/components/_table.component.scss
@@ -30,6 +30,13 @@
         }
       }
     }
+
+    .stark-table-rows-counter {
+      flex: 1;
+      text-align: center;
+      line-height: 35px;
+      margin-right: 16px;
+    }
   }
 
   .table-container {
diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html
index eb3f1f0b38..48e3216ee4 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.html
+++ b/packages/stark-ui/src/modules/table/components/table.component.html
@@ -11,6 +11,12 @@
 			mode="compact"
 		></stark-action-bar>
 
+		<!-- Count of element in the table -->
+		<div *ngIf="showRowsCounter" class="stark-table-rows-counter">
+			<span>{{ data.length }} </span>
+			<span translate>STARK.TABLE.ITEMS_FOUND</span>
+		</div>
+
 		<stark-pagination htmlSuffixId="{{ htmlId }}-pagination" [paginationConfig]="paginationConfig" mode="compact"></stark-pagination>
 
 		<button *ngIf="isMultiSortEnabled" (click)="openMultiSortDialog()" mat-icon-button>
diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
index 9651d438e6..4658affb80 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts
+++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -38,6 +38,7 @@ import createSpy = jasmine.createSpy;
 			[multiSelect]="multiSelect"
 			[orderProperties]="orderProperties"
 			[tableRowActions]="tableRowActions"
+			[showRowsCounter]="showRowsCounter"
 			[rowClassNameFn]="rowClassNameFn"
 			(rowClicked)="rowClickHandler($event)"
 		>
@@ -54,6 +55,7 @@ class TestHostComponent {
 	public rowsSelectable?: boolean;
 	public multiSelect?: string;
 	public multiSort?: string;
+	public showRowsCounter?: boolean;
 	public tableRowActions?: StarkTableRowActions;
 	public tableFilter?: StarkTableFilter;
 	public orderProperties?: string[];
@@ -151,6 +153,7 @@ describe("TableComponent", () => {
 			expect(component.multiSelect).toBe(hostComponent.multiSelect);
 			expect(component.multiSort).toBe(hostComponent.multiSort);
 			expect(component.orderProperties).toBe(hostComponent.orderProperties);
+			expect(component.showRowsCounter).toBe(false);
 			expect(component.tableRowActions).toBe(<any>hostComponent.tableRowActions);
 		});
 	});
@@ -164,7 +167,7 @@ describe("TableComponent", () => {
 			expect(component.dataSource.data).toEqual(dummyData);
 			expect(component.dataSource.data).not.toBe(component.data);
 		});
-		
+
 		it("should trigger resetFilterValueOnDataChange and sortData methods when data changes", () => {
 			spyOn(component, "resetFilterValueOnDataChange");
 			spyOn(component, "sortData");
@@ -254,6 +257,27 @@ describe("TableComponent", () => {
 			expect(component.sortData).toHaveBeenCalledTimes(1);
 			expect(component.orderProperties).toEqual(["test"]);
 		});
+
+		it("should display/hide the counter element when 'showRowsCounter' changes", () => {
+			const rowsCounterSelector = ".stark-table-rows-counter";
+			hostComponent.dummyData = [{ name: "test-data-1" }, { name: "test-data-2" }, { name: "test-data-3" }, { name: "test-data-4" }];
+			hostFixture.detectChanges();
+
+			let rowsCounterElement = hostFixture.debugElement.nativeElement.querySelector(rowsCounterSelector);
+			expect(rowsCounterElement).toBeNull();
+			expect(component.showRowsCounter).toBe(false);
+
+			hostComponent.showRowsCounter = true;
+			hostFixture.detectChanges();
+			expect(component.showRowsCounter).toBe(true);
+			rowsCounterElement = hostFixture.debugElement.nativeElement.querySelector(rowsCounterSelector);
+			expect(rowsCounterElement).toBeDefined();
+			expect(rowsCounterElement).not.toBeNull();
+			const rowsCounterNumberElement = (<HTMLElement>rowsCounterElement).querySelector("span");
+			expect(rowsCounterNumberElement).toBeDefined();
+			expect(rowsCounterNumberElement).not.toBeNull();
+			expect((<HTMLElement>rowsCounterNumberElement).innerText).toContain("4");
+		});
 	});
 
 	describe("sortData", () => {
@@ -274,7 +298,16 @@ describe("TableComponent", () => {
 
 				component.sortData();
 
-				expect(component.dataSource.data).toEqual([{ a: 1 }, { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }, { a: 10 }, { a: 20 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 1 },
+					{ a: 1 },
+					{ a: 2 },
+					{ a: 3 },
+					{ a: 4 },
+					{ a: 5 },
+					{ a: 10 },
+					{ a: 20 }
+				]);
 			});
 
 			it("should sort data descending", () => {
@@ -285,7 +318,16 @@ describe("TableComponent", () => {
 
 				component.sortData();
 
-				expect(component.dataSource.data).toEqual([{ a: 20 }, { a: 10 }, { a: 5 }, { a: 4 }, { a: 3 }, { a: 2 }, { a: 1 }, { a: 1 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 20 },
+					{ a: 10 },
+					{ a: 5 },
+					{ a: 4 },
+					{ a: 3 },
+					{ a: 2 },
+					{ a: 1 },
+					{ a: 1 }
+				]);
 			});
 
 			it("should sort data descending column A then ascending column B", () => {
@@ -371,28 +413,73 @@ describe("TableComponent", () => {
 
 				component.sortData();
 
-				expect(component.dataSource.data).toEqual([{ a: 1 }, { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }, { a: 10 }, { a: 20 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 1 },
+					{ a: 1 },
+					{ a: 2 },
+					{ a: 3 },
+					{ a: 4 },
+					{ a: 5 },
+					{ a: 10 },
+					{ a: 20 }
+				]);
 				expect(hostComponent.columnProperties[0].compareFn).toHaveBeenCalled();
-				// Due to browsers, we cannot predict exactly the number of calls. On IE, it is 9 times, on Chrome it can be 7, 8 or 14 times depending on the version 
+				// Due to browsers, we cannot predict exactly the number of calls. On IE, it is 9 times, on Chrome it can be 7, 8 or 14 times depending on the version
 				expect((<Spy>hostComponent.columnProperties[0].compareFn).calls.count()).toBeGreaterThanOrEqual(7);
 				expect((<Spy>hostComponent.columnProperties[0].compareFn).calls.count()).toBeLessThanOrEqual(14);
 			});
 
 			it("should sort data when click on the column", () => {
-				expect(component.dataSource.data).toEqual([{ a: 1 }, { a: 1 }, { a: 3 }, { a: 2 }, { a: 4 }, { a: 5 }, { a: 10 }, { a: 20 }]);
-				
+				expect(component.dataSource.data).toEqual([
+					{ a: 1 },
+					{ a: 1 },
+					{ a: 3 },
+					{ a: 2 },
+					{ a: 4 },
+					{ a: 5 },
+					{ a: 10 },
+					{ a: 20 }
+				]);
+
 				const column: HTMLElement = hostFixture.debugElement.nativeElement.querySelector(getColumnSelector("a"));
 				column.click();
 				hostFixture.detectChanges();
-				expect(component.dataSource.data).toEqual([{ a: 1 }, { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }, { a: 10 }, { a: 20 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 1 },
+					{ a: 1 },
+					{ a: 2 },
+					{ a: 3 },
+					{ a: 4 },
+					{ a: 5 },
+					{ a: 10 },
+					{ a: 20 }
+				]);
 
 				column.click();
 				hostFixture.detectChanges();
-				expect(component.dataSource.data).toEqual([{ a: 20 }, { a: 10 }, { a: 5 }, { a: 4 }, { a: 3 }, { a: 2 }, { a: 1 }, { a: 1 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 20 },
+					{ a: 10 },
+					{ a: 5 },
+					{ a: 4 },
+					{ a: 3 },
+					{ a: 2 },
+					{ a: 1 },
+					{ a: 1 }
+				]);
 
 				column.click();
 				hostFixture.detectChanges();
-				expect(component.dataSource.data).toEqual([{ a: 1 }, { a: 1 }, { a: 3 }, { a: 2 }, { a: 4 }, { a: 5 }, { a: 10 }, { a: 20 }]);
+				expect(component.dataSource.data).toEqual([
+					{ a: 1 },
+					{ a: 1 },
+					{ a: 3 },
+					{ a: 2 },
+					{ a: 4 },
+					{ a: 5 },
+					{ a: 10 },
+					{ a: 20 }
+				]);
 			});
 
 			it("should sort data when click on different columns", () => {
@@ -400,11 +487,11 @@ describe("TableComponent", () => {
 				hostComponent.columnProperties = [{ name: "a" }, { name: "b" }, { name: "c" }];
 				hostFixture.detectChanges();
 				expect(component.dataSource.data).toEqual(hostComponent.dummyData);
-				
+
 				const columnA: HTMLElement = hostFixture.debugElement.nativeElement.querySelector(getColumnSelector("a"));
 				const columnB: HTMLElement = hostFixture.debugElement.nativeElement.querySelector(getColumnSelector("b"));
 				const columnC: HTMLElement = hostFixture.debugElement.nativeElement.querySelector(getColumnSelector("c"));
-				
+
 				columnA.click();
 				expect(component.dataSource.data).toEqual([{ a: 1, b: 2, c: 3 }, { a: 2, b: 3, c: 1 }, { a: 3, b: 1, c: 2 }]);
 				columnA.click();
@@ -414,7 +501,7 @@ describe("TableComponent", () => {
 				expect(component.dataSource.data).toEqual([{ a: 3, b: 1, c: 2 }, { a: 1, b: 2, c: 3 }, { a: 2, b: 3, c: 1 }]);
 				columnB.click();
 				expect(component.dataSource.data).toEqual([{ a: 2, b: 3, c: 1 }, { a: 1, b: 2, c: 3 }, { a: 3, b: 1, c: 2 }]);
-				
+
 				columnC.click();
 				expect(component.dataSource.data).toEqual([{ a: 2, b: 3, c: 1 }, { a: 3, b: 1, c: 2 }, { a: 1, b: 2, c: 3 }]);
 				columnC.click();
@@ -574,7 +661,7 @@ describe("TableComponent", () => {
 					{ a: { b: 7 } }
 				]);
 				expect(hostComponent.columnProperties[0].compareFn).toHaveBeenCalled();
-				// Due to browsers, we cannot predict exactly the number of calls. On IE, it is 9 times, on Chrome it can be 7, 8 or 14 times depending on the version 
+				// Due to browsers, we cannot predict exactly the number of calls. On IE, it is 9 times, on Chrome it can be 7, 8 or 14 times depending on the version
 				expect((<Spy>hostComponent.columnProperties[0].compareFn).calls.count()).toBeGreaterThanOrEqual(7);
 				expect((<Spy>hostComponent.columnProperties[0].compareFn).calls.count()).toBeLessThanOrEqual(14);
 			});
diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts
index 211f1fdf6b..4afff668b3 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.ts
+++ b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -22,6 +22,7 @@ import {
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { MatColumnDef, MatTable, MatTableDataSource } from "@angular/material/table";
 import { SelectionChange, SelectionModel } from "@angular/cdk/collections";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { Subscription } from "rxjs";
 
@@ -203,6 +204,25 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	@Input()
 	public paginationConfig: StarkPaginationConfig = {};
 
+	/**
+	 * Determine if the item counter is enabled. Shows how many items are in the data object array.
+	 * Default: false
+	 */
+	@Input()
+	public get showRowsCounter(): boolean {
+		return this._showRowsCounter;
+	}
+
+	public set showRowsCounter(showRowsCounter: boolean) {
+		this._showRowsCounter = coerceBooleanProperty(showRowsCounter);
+	}
+
+	/**
+	 * @ignore
+	 * @internal
+	 */
+	private _showRowsCounter = false;
+
 	/**
 	 * {@link StarkActionBarConfig} object for the action bar component to be displayed in all the rows
 	 */
diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html
index cd32509fe1..c396edd627 100644
--- a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html
+++ b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html
@@ -7,6 +7,7 @@
 	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
 	multiSort
+	showRowsCounter
 	(rowClicked)="handleRowClicked($event)"
 >
 	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.REGULAR</h1></header>
diff --git a/showcase/src/assets/examples/table/regular/table.html b/showcase/src/assets/examples/table/regular/table.html
index f63f8af028..37d6c29d3f 100644
--- a/showcase/src/assets/examples/table/regular/table.html
+++ b/showcase/src/assets/examples/table/regular/table.html
@@ -7,6 +7,7 @@
 	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
 	multiSort
+	showRowsCounter
 	(rowClicked)="handleRowClicked($event)"
 >
 	<header><h1 class="mb0">Regular Table</h1></header>