fix(stark-demo): update usage examples of stark table

- added tests ISSUE CLOSED: #1012
NationalBankBelgium · Mar 8, 2019 · fd06086 · fd06086
1 parent 3c3a4ca
commit fd06086
Show file tree

Hide file tree

Showing 25 changed files with 31 additions and 141 deletions.
diff --git a/...app/demo-ui/components/table-with-custom-actions/table-with-custom-actions.component.html b/...app/demo-ui/components/table-with-custom-actions/table-with-custom-actions.component.html
@@ -2,7 +2,6 @@
 	[data]="data"
 	[columnProperties]="columns"
 	[filter]="filter"
-	[paginationConfig]="pagination"
 	[customTableActions]="tableActions"
 	customTableActionsType="alt"
 >

diff --git a/...c/app/demo-ui/components/table-with-custom-actions/table-with-custom-actions.component.ts b/...c/app/demo-ui/components/table-with-custom-actions/table-with-custom-actions.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkAction, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -28,8 +28,6 @@ export class TableWithCustomActionsComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public tableActions: StarkAction[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
@@ -49,8 +47,6 @@ export class TableWithCustomActionsComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.tableActions = [
 			{
 				id: "edit-item",

diff --git a/...app/demo-ui/components/table-with-custom-styling/table-with-custom-styling.component.html b/...app/demo-ui/components/table-with-custom-styling/table-with-custom-styling.component.html
@@ -1,9 +1,3 @@
-<stark-table
-	[data]="data"
-	[columnProperties]="columns"
-	[filter]="filter"
-	[paginationConfig]="pagination"
-	[rowClassNameFn]="getRowClassName"
->
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [rowClassNameFn]="getRowClassName">
 	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_CUSTOM_STYLING</h1></header>
 </stark-table>
diff --git a/...c/app/demo-ui/components/table-with-custom-styling/table-with-custom-styling.component.ts b/...c/app/demo-ui/components/table-with-custom-styling/table-with-custom-styling.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
-import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -29,8 +29,6 @@ export class TableWithCustomStylingComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public getRowClassName: (_row: object, index: number) => string;
 
 	public ngOnInit(): void {
@@ -49,8 +47,6 @@ export class TableWithCustomStylingComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.getRowClassName = (_row: object, index: number) => (index % 2 === 0 ? "even" : "odd");
 	}
 }
diff --git a/...c/app/demo-ui/components/table-with-fixed-actions/table-with-fixed-actions.component.html b/...c/app/demo-ui/components/table-with-fixed-actions/table-with-fixed-actions.component.html
@@ -2,7 +2,6 @@
 	[data]="data"
 	[columnProperties]="columns"
 	[filter]="filter"
-	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
 	customTableActionsType="alt"
 >

diff --git a/...src/app/demo-ui/components/table-with-fixed-actions/table-with-fixed-actions.component.ts b/...src/app/demo-ui/components/table-with-fixed-actions/table-with-fixed-actions.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 // tslint:disable:no-duplicate-string
 const DUMMY_DATA: object[] = [
@@ -115,8 +115,6 @@ export class TableWithFixedActionsComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
@@ -141,8 +139,6 @@ export class TableWithFixedActionsComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.tableRowActions = {
 			actions: [
 				{

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" [paginationConfig]="pagination" fixedHeader>
+<stark-table [data]="data" [columnProperties]="columns" [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, OnInit } from "@angular/core";
-import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -27,8 +27,6 @@ export class TableWithFixedHeaderComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public ngOnInit(): void {
 		this.data = DUMMY_DATA;
 
@@ -43,7 +41,5 @@ export class TableWithFixedHeaderComponent implements OnInit {
 		];
 
 		this.filter = { globalFilterPresent: false, columns: [] };
-
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: DUMMY_DATA.length };
 	}
 }
diff --git a/showcase/src/app/demo-ui/components/table-with-selection/table-with-selection.component.html b/showcase/src/app/demo-ui/components/table-with-selection/table-with-selection.component.html
@@ -2,7 +2,6 @@
 	[data]="data"
 	[columnProperties]="columns"
 	[filter]="filter"
-	[paginationConfig]="pagination"
 	[rowsSelectable]="true"
 	(selectChanged)="handleRowSelected($event)"
 	multiSelect

diff --git a/showcase/src/app/demo-ui/components/table-with-selection/table-with-selection.ts b/showcase/src/app/demo-ui/components/table-with-selection/table-with-selection.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -28,8 +28,6 @@ export class TableWithSelectionComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
 	public ngOnInit(): void {
@@ -46,8 +44,6 @@ export class TableWithSelectionComponent implements OnInit {
 		];
 
 		this.filter = { globalFilterPresent: false, columns: [] };
-
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 	}
 
 	public handleRowSelected(data: object[]): void {

diff --git a/...onents/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.html b/...onents/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.html
@@ -1,4 +1,4 @@
-<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [paginationConfig]="pagination">
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter">
 	<header>
 		<div class="example-transcluded">
 			<h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR</h1>

diff --git a/...mponents/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts b/...mponents/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkAction, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -29,8 +29,6 @@ export class TableWithTranscludedActionBarComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public tableActions: StarkAction[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
@@ -46,8 +44,6 @@ export class TableWithTranscludedActionBarComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.tableActions = [
 			{
 				id: "edit-item",

diff --git a/showcase/src/assets/examples/table/regular/table.scss b/showcase/src/assets/examples/table/regular/table.scss
@@ -1,6 +1,5 @@
 @import "~@angular/material/theming";
 
-// todo review after #509 (https://github.com/NationalBankBelgium/stark/issues/509)
 .shadowed {
   .header {
     padding: 10px 15px;

diff --git a/showcase/src/assets/examples/table/regular/table.ts b/showcase/src/assets/examples/table/regular/table.ts
@@ -59,14 +59,14 @@ export class TableRegularComponent implements OnInit {
 			actions: [
 				{
 					id: "edit-item",
-					label: "STARK.ICONS.EDIT_ITEM",
+					label: "Edit",
 					icon: "pencil",
 					actionCall: ($event: Event, data: object) => this.logger.debug("EDIT", $event, data),
 					isEnabled: true
 				},
 				{
 					id: "delete-item",
-					label: "STARK.ICONS.DELETE_ITEM",
+					label: "Delete",
 					icon: "delete",
 					actionCall: ($event: Event, data: object) => this.logger.debug("DELETE", $event, data),
 					isEnabled: false

diff --git a/showcase/src/assets/examples/table/with-custom-actions/table.html b/showcase/src/assets/examples/table/with-custom-actions/table.html
@@ -1,10 +1,3 @@
-<stark-table
-	[data]="data"
-	[columnProperties]="columns"
-	[filter]="filter"
-	[paginationConfig]="pagination"
-	[customTableActions]="tableActions"
-	customTableActionsType="alt"
->
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [customTableActions]="tableActions" customTableActionsType="alt">
 	<header><h1 class="mb0">Table with custom actions</h1></header>
 </stark-table>
diff --git a/showcase/src/assets/examples/table/with-custom-actions/table.ts b/showcase/src/assets/examples/table/with-custom-actions/table.ts
@@ -1,19 +1,10 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkAction, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
-	{ id: 10, title: { label: "second title (value: 2)", value: 2 }, description: "second description" },
-	{ id: 12, title: { label: "third title (value: 3)", value: 3 }, description: "the third description" },
-	{ id: 2, title: { label: "fourth title (value: 4)", value: 4 }, description: "description number four" },
-	{ id: 23, title: { label: "fifth title (value: 5)", value: 5 }, description: "fifth description" },
-	{ id: 222, title: { label: "sixth title (value: 6)", value: 6 }, description: "the sixth description" },
-	{ id: 112, title: { label: "seventh title (value: 7)", value: 7 }, description: "seventh description" },
-	{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, description: "description number eight" },
-	{ id: 154, title: { label: "ninth title (value: 9)", value: 9 }, description: "the ninth description" },
-	{ id: 27, title: { label: "tenth title (value: 10)", value: 10 }, description: "description number ten" },
-	{ id: 86, title: { label: "eleventh title (value: 11)", value: 11 }, description: "eleventh description" },
+	/* ... */
 	{ id: 44, title: { label: "twelfth title (value: 12)", value: 12 }, description: "the twelfth description" }
 ];
 
@@ -28,8 +19,6 @@ export class TableWithCustomActionsComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public tableActions: StarkAction[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
@@ -39,25 +28,27 @@ export class TableWithCustomActionsComponent implements OnInit {
 
 		this.columns = [
 			{ name: "id", label: "Id" },
-			{ name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label },
+			{
+				name: "title",
+				label: "Title",
+				cellFormatter: (value: { label: string }): string => "~" + value.label
+			},
 			{ name: "description", label: "Description" }
 		];
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.tableActions = [
 			{
 				id: "edit-item",
-				label: "STARK.ICONS.EDIT_ITEM",
+				label: "Edit",
 				icon: "pencil",
 				actionCall: ($event: Event, data: object) => this.logger.debug("EDIT:", $event, data),
 				isEnabled: false
 			},
 			{
 				id: "reload",
-				label: "STARK.ICONS.RELOAD_PAGE",
+				label: "Reload page",
 				icon: "autorenew",
 				actionCall: ($event: Event, data: object) => this.logger.debug("RELOAD:", $event, data),
 				isEnabled: true

diff --git a/showcase/src/assets/examples/table/with-custom-styling/table.html b/showcase/src/assets/examples/table/with-custom-styling/table.html
@@ -1,9 +1,3 @@
-<stark-table
-	[data]="data"
-	[columnProperties]="columns"
-	[filter]="filter"
-	[paginationConfig]="pagination"
-	[rowClassNameFn]="getRowClassName"
->
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" [rowClassNameFn]="getRowClassName">
 	<header><h1 class="mb0">Table with custom styling</h1></header>
 </stark-table>
diff --git a/showcase/src/assets/examples/table/with-custom-styling/table.ts b/showcase/src/assets/examples/table/with-custom-styling/table.ts
@@ -1,18 +1,9 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
-import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
-	{ id: 10, title: { label: "second title (value: 2)", value: 2 }, description: "second description" },
-	{ id: 12, title: { label: "third title (value: 3)", value: 3 }, description: "the third description" },
-	{ id: 2, title: { label: "fourth title (value: 4)", value: 4 }, description: "description number four" },
-	{ id: 23, title: { label: "fifth title (value: 5)", value: 5 }, description: "fifth description" },
-	{ id: 222, title: { label: "sixth title (value: 6)", value: 6 }, description: "the sixth description" },
-	{ id: 112, title: { label: "seventh title (value: 7)", value: 7 }, description: "seventh description" },
-	{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, description: "description number eight" },
-	{ id: 154, title: { label: "ninth title (value: 9)", value: 9 }, description: "the ninth description" },
-	{ id: 27, title: { label: "tenth title (value: 10)", value: 10 }, description: "description number ten" },
-	{ id: 86, title: { label: "eleventh title (value: 11)", value: 11 }, description: "eleventh description" },
+	/* ... */
 	{ id: 44, title: { label: "twelfth title (value: 12)", value: 12 }, description: "the twelfth description" }
 ];
 
@@ -29,8 +20,6 @@ export class TableWithCustomStylingComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public getRowClassName: (_row: object, index: number) => string;
 
 	public ngOnInit(): void {
@@ -49,8 +38,6 @@ export class TableWithCustomStylingComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.getRowClassName = (_row: object, index: number) => (index % 2 === 0 ? "even" : "odd");
 	}
 }
diff --git a/showcase/src/assets/examples/table/with-fixed-actions/table.html b/showcase/src/assets/examples/table/with-fixed-actions/table.html
@@ -2,7 +2,6 @@
 	[data]="data"
 	[columnProperties]="columns"
 	[filter]="filter"
-	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
 	customTableActionsType="alt"
 >

diff --git a/showcase/src/assets/examples/table/with-fixed-actions/table.ts b/showcase/src/assets/examples/table/with-fixed-actions/table.ts
@@ -1,11 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import {
-	StarkPaginationConfig,
-	StarkTableColumnProperties,
-	StarkTableFilter,
-	StarkTableRowActions
-} from "@nationalbankbelgium/stark-ui";
+import { StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{
@@ -39,8 +34,6 @@ export class TableWithFixedActionsComponent implements OnInit {
 
 	public filter: StarkTableFilter;
 
-	public pagination: StarkPaginationConfig;
-
 	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
@@ -63,8 +56,6 @@ export class TableWithFixedActionsComponent implements OnInit {
 
 		this.filter = { globalFilterPresent: false, columns: [] };
 
-		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
-
 		this.tableRowActions = {
 			actions: [
 				{

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" [paginationConfig]="pagination" fixedHeader>
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter" fixedHeader>
 	<header><h1 class="mb0">Table with fixed header</h1></header>
 </stark-table>