Skip to content

Commit

Permalink
feat(stark-ui): table - Add support to show rows counter
Browse files Browse the repository at this point in the history 
ISSUES CLOSED: #1244
  • Loading branch information
@SuperITMan
SuperITMan committed May 19, 2019
1 parent 93a4f34 commit 7612988
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 14 deletions.
7 changes: 7 additions & 0 deletions packages/stark-ui/src/modules/table/components/_table.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@
}
}
}

.stark-table-rows-counter {
flex: 1;
text-align: center;
line-height: 35px;
margin-right: 16px;
}
}

.table-container {
Expand Down
6 changes: 6 additions & 0 deletions packages/stark-ui/src/modules/table/components/table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
115 changes: 101 additions & 14 deletions packages/stark-ui/src/modules/table/components/table.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import createSpy = jasmine.createSpy;
[multiSelect]="multiSelect"
[orderProperties]="orderProperties"
[tableRowActions]="tableRowActions"
[showRowsCounter]="showRowsCounter"
[rowClassNameFn]="rowClassNameFn"
(rowClicked)="rowClickHandler($event)"
>
Expand All @@ -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[];
Expand Down Expand Up @@ -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);
});
});
Expand All @@ -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");
Expand Down Expand Up @@ -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", () => {
Expand All @@ -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", () => {
Expand All @@ -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", () => {
Expand Down Expand Up @@ -371,40 +413,85 @@ 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", () => {
hostComponent.dummyData = [{ a: 2, b: 3, c: 1 }, { a: 1, b: 2, c: 3 }, { a: 3, b: 1, c: 2 }];
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();
Expand All @@ -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();
Expand Down Expand Up @@ -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);
});
Expand Down
20 changes: 20 additions & 0 deletions packages/stark-ui/src/modules/table/components/table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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
*/
Expand Down
1 change: 1 addition & 0 deletions showcase/src/app/demo-ui/components/table-regular/table-regular.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
[paginationConfig]="pagination"
[tableRowActions]="tableRowActions"
multiSort
showRowsCounter
(rowClicked)="handleRowClicked($event)"
>
<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.REGULAR</h1></header>
Expand Down
1 change: 1 addition & 0 deletions showcase/src/assets/examples/table/regular/table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
[paginationConfig]="pagination"
[tableRowActions]="tableRowActions"
multiSort
showRowsCounter
(rowClicked)="handleRowClicked($event)"
>
<header><h1 class="mb0">Regular Table</h1></header>
Expand Down

0 comments on commit 7612988

Please sign in to comment.