feat(stark-ui): table - Add support to show rows counter

ISSUES CLOSED: #1244
NationalBankBelgium · May 21, 2019 · bdad94f · bdad94f
1 parent 629455d
commit bdad94f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 63 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
@@ -19,17 +19,20 @@
       display: flex;
       justify-content: flex-end;
 
-      &.actions-alt {
-        flex-direction: row-reverse;
-      }
-
       stark-minimap {
         mat-icon {
           width: 18px;
           height: 18px;
         }
       }
     }
+
+    .stark-table-rows-counter {
+      flex: 1;
+      text-align: center;
+      line-height: 22px;
+      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
@@ -1,71 +1,80 @@
+<!-- the projected detail content should be put in an ng-template so that it can be rendered multiple times in this template -->
+<!-- solution taken from https://github.com/angular/angular/issues/22972#issuecomment-407358396 -->
+<ng-template #tableActions>
+	<!-- Count of element in the table -->
+	<div *ngIf="showRowsCounter && dataSource" class="stark-table-rows-counter">
+		<span>{{ dataSource.filteredData.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>
+		<mat-icon
+			class="stark-small-icon"
+			[matTooltip]="'STARK.TABLE.MULTI_COLUMN_SORTING' | translate"
+			starkSvgViewBox
+			svgIcon="sort"
+		></mat-icon>
+	</button>
+
+	<ng-container *ngIf="filter.globalFilterPresent">
+		<button [matMenuTriggerFor]="globalFilter" mat-icon-button>
+			<mat-icon [matTooltip]="'STARK.TABLE.FILTER' | translate" class="stark-small-icon" starkSvgViewBox svgIcon="filter"></mat-icon>
+		</button>
+		<mat-menu class="mat-table-filter" #globalFilter="matMenu" xPosition="before" [overlapTrigger]="false">
+			<div>
+				<mat-form-field (click)="$event.stopPropagation()" (keyup)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
+					<input
+						matInput
+						id="{{ htmlId + '-' + 'table-filter' }}"
+						[placeholder]="'STARK.TABLE.GLOBAL_FILTER' | translate"
+						name="global-filter"
+						[formControl]="_globalFilterFormCtrl"
+					/>
+				</mat-form-field>
+				<button mat-icon-button (click)="onClearFilter()">
+					<mat-icon
+						class="stark-small-icon"
+						starkSvgViewBox
+						svgIcon="close"
+						[matTooltip]="'STARK.TABLE.CLEAR_FILTER' | translate"
+					></mat-icon>
+				</button>
+			</div>
+		</mat-menu>
+	</ng-container>
+
+	<stark-minimap
+		[matTooltip]="'STARK.TABLE.TOGGLE_COLUMNS' | translate"
+		*ngIf="minimap !== false"
+		[mode]="minimap === 'compact' ? 'compact' : undefined"
+		[items]="_minimapItemProperties"
+		[visibleItems]="_visibleMinimapItems"
+		(showHideItem)="toggleColumnVisibility($event)"
+	></stark-minimap>
+</ng-template>
+
 <div class="header">
 	<div class="transcluded">
 		<ng-content select="header"></ng-content>
 	</div>
 
-	<div class="actions" [ngClass]="{ 'actions-alt': customTableActionsType === 'alt' }">
+	<div class="actions">
+		<ng-container *ngIf="customTableActionsType === 'alt'">
+			<ng-container *ngTemplateOutlet="tableActions"></ng-container>
+		</ng-container>
+
 		<stark-action-bar
 			[actionBarConfig]="customTableRegularActions"
 			[alternativeActions]="customTableAltActions"
 			buttonColor="alt"
 			mode="compact"
 		></stark-action-bar>
 
-		<stark-pagination htmlSuffixId="{{ htmlId }}-pagination" [paginationConfig]="paginationConfig" mode="compact"></stark-pagination>
-
-		<button *ngIf="isMultiSortEnabled" (click)="openMultiSortDialog()" mat-icon-button>
-			<mat-icon
-				class="stark-small-icon"
-				[matTooltip]="'STARK.TABLE.MULTI_COLUMN_SORTING' | translate"
-				starkSvgViewBox
-				svgIcon="sort"
-			></mat-icon>
-		</button>
-
-		<ng-container *ngIf="filter.globalFilterPresent">
-			<button [matMenuTriggerFor]="globalFilter" mat-icon-button>
-				<mat-icon
-					[matTooltip]="'STARK.TABLE.FILTER' | translate"
-					class="stark-small-icon"
-					starkSvgViewBox
-					svgIcon="filter"
-				></mat-icon>
-			</button>
-			<mat-menu class="mat-table-filter" #globalFilter="matMenu" xPosition="before" [overlapTrigger]="false">
-				<div>
-					<mat-form-field
-						(click)="$event.stopPropagation()"
-						(keyup)="$event.stopPropagation()"
-						(keydown)="$event.stopPropagation()"
-					>
-						<input
-							matInput
-							id="{{ htmlId + '-' + 'table-filter' }}"
-							[placeholder]="'STARK.TABLE.GLOBAL_FILTER' | translate"
-							name="global-filter"
-							[formControl]="_globalFilterFormCtrl"
-						/>
-					</mat-form-field>
-					<button mat-icon-button (click)="onClearFilter()">
-						<mat-icon
-							class="stark-small-icon"
-							starkSvgViewBox
-							svgIcon="close"
-							[matTooltip]="'STARK.TABLE.CLEAR_FILTER' | translate"
-						></mat-icon>
-					</button>
-				</div>
-			</mat-menu>
+		<ng-container *ngIf="customTableActionsType !== 'alt'">
+			<ng-container *ngTemplateOutlet="tableActions"></ng-container>
 		</ng-container>
-
-		<stark-minimap
-			[matTooltip]="'STARK.TABLE.TOGGLE_COLUMNS' | translate"
-			*ngIf="minimap !== false"
-			[mode]="minimap === 'compact' ? 'compact' : undefined"
-			[items]="_minimapItemProperties"
-			[visibleItems]="_visibleMinimapItems"
-			(showHideItem)="toggleColumnVisibility($event)"
-		></stark-minimap>
 	</div>
 </div>
 

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
@@ -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);
 		});
 	});
@@ -254,6 +257,25 @@ 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: "dummy-data-1" }, { name: "dummy-data-2" }, { name: "dummy-data-3" }, { name: "dummy-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).toBeTruthy();
+			const rowsCounterNumberElement = (<HTMLElement>rowsCounterElement).querySelector("span");
+			expect(rowsCounterNumberElement).toBeTruthy();
+			expect((<HTMLElement>rowsCounterNumberElement).innerText).toContain("4");
+		});
 	});
 
 	describe("sortData", () => {

diff --git 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
@@ -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/...src/app/demo-ui/components/table-with-fixed-header/table-with-fixed-header.component.html b/...src/app/demo-ui/components/table-with-fixed-header/table-with-fixed-header.component.html
@@ -1,3 +1,3 @@
-<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" fixedHeader>
+<stark-table [data]="data" [columnProperties]="columns" [paginationConfig]="paginationConfig" [filter]="filter" fixedHeader>
 	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_FIXED_HEADER</h1></header>
 </stark-table>
diff --git a/...e/src/app/demo-ui/components/table-with-fixed-header/table-with-fixed-header.component.ts b/...e/src/app/demo-ui/components/table-with-fixed-header/table-with-fixed-header.component.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import {StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter} from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -22,6 +22,9 @@ const DUMMY_DATA: object[] = [
 })
 export class TableWithFixedHeaderComponent {
 	public data: object[] = DUMMY_DATA;
+	public paginationConfig: StarkPaginationConfig = {
+		itemsPerPage: 10
+	};
 
 	public columns: StarkTableColumnProperties[] = [
 		{ name: "id", label: "Id" },

diff --git 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>

diff --git a/showcase/src/assets/examples/table/with-fixed-header/table.html b/showcase/src/assets/examples/table/with-fixed-header/table.html
@@ -1,3 +1,3 @@
-<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" fixedHeader>
+<stark-table [data]="data" [columnProperties]="columns" [paginationConfig]="paginationConfig" [filter]="filter" fixedHeader>
 	<header><h1 class="mb0">Table with fixed header</h1></header>
 </stark-table>
diff --git a/showcase/src/assets/examples/table/with-fixed-header/table.ts b/showcase/src/assets/examples/table/with-fixed-header/table.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import {StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter} from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -13,6 +13,9 @@ const DUMMY_DATA: object[] = [
 })
 export class TableWithFixedHeaderComponent {
 	public data: object[] = DUMMY_DATA;
+	public paginationConfig: StarkPaginationConfig = {
+		itemsPerPage: 10
+	};
 
 	public columns: StarkTableColumnProperties[] = [
 		{ name: "id", label: "Id" },