refactor(stark-ui): add and implement StarkTableRowActions interface

ISSUES CLOSED: NationalBankBelgium#1143
carlo-nomes · Feb 26, 2019 · f4dae96 · f4dae96
1 parent c916f96
commit f4dae96
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 54 deletions.
diff --git a/packages/stark-ui/src/modules/action-bar/components/action-bar-config.intf.ts b/packages/stark-ui/src/modules/action-bar/components/action-bar-config.intf.ts
@@ -13,10 +13,4 @@ export interface StarkActionBarConfig {
 	 * If false, then action bar will not be present on the page (optional)
 	 */
 	isPresent?: boolean;
-
-	/**
-	 * Should the actions always be shown on the right side of the table (sticky)
-	 * Default: false
-	 */
-	isSticky?: boolean;
 }
diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html
@@ -108,14 +108,14 @@
 		<ng-content select=".stark-table-columns"></ng-content>
 
 		<stark-table-column
-			*ngIf="tableRowsActionBarConfig && tableRowsActionBarConfig.actions"
+			*ngIf="tableRowActions && tableRowActions.actions"
 			[sortable]="false"
 			[name]="'STARK.TABLE.ACTIONS' | translate"
-			[stickyEnd]="tableRowsActionBarConfig.isSticky"
+			[stickyEnd]="tableRowActions.isFixed"
 		>
 			<ng-template let-context>
 				<stark-action-bar
-					[actionBarConfig]="tableRowsActionBarConfig"
+					[actionBarConfig]="tableRowActions"
 					[actionBarScope]="context.rowData"
 					mode="compact"
 				></stark-action-bar>

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
@@ -21,8 +21,7 @@ import { StarkTableMultisortDialogComponent } from "./dialogs/multisort.componen
 import { StarkTableComponent } from "./table.component";
 import { StarkTableColumnComponent } from "./column.component";
 import { StarkPaginationComponent } from "../../pagination/components";
-import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter } from "../entities";
-import { StarkActionBarConfig } from "../../action-bar/components/action-bar-config.intf";
+import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "../entities";
 import Spy = jasmine.Spy;
 import createSpy = jasmine.createSpy;
 
@@ -38,7 +37,7 @@ import createSpy = jasmine.createSpy;
 			[rowsSelectable]="rowsSelectable"
 			[multiSelect]="multiSelect"
 			[orderProperties]="orderProperties"
-			[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+			[tableRowActions]="tableRowActions"
 			[rowClassNameFn]="rowClassNameFn"
 			(rowClicked)="rowClickHandler($event)"
 		>
@@ -57,7 +56,7 @@ class TestHostComponent {
 	public rowsSelectable?: boolean;
 	public multiSelect?: string;
 	public multiSort?: string;
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 	public tableFilter: StarkTableFilter;
 	public orderProperties?: string[];
 	public rowClassNameFn?: (row: object, index: number) => string;
@@ -144,7 +143,7 @@ describe("TableComponent", () => {
 			expect(component.multiSelect).toBe(hostComponent.multiSelect);
 			expect(component.multiSort).toBe(hostComponent.multiSort);
 			expect(component.orderProperties).toBe(hostComponent.orderProperties);
-			expect(component.tableRowsActionBarConfig).toBe(hostComponent.tableRowsActionBarConfig);
+			expect(component.tableRowActions).toBe(hostComponent.tableRowActions);
 		});
 	});
 

diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -34,7 +34,8 @@ import {
 	StarkColumnSortChangedOutput,
 	StarkTableColumnProperties,
 	StarkTableColumnSortingDirection,
-	StarkTableFilter
+	StarkTableFilter,
+	StarkTableRowActions
 } from "../entities";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 import { StarkPaginationComponent, StarkPaginationConfig } from "../../pagination/components";
@@ -196,7 +197,16 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	 * {@link StarkActionBarConfig} object for the action bar component to be displayed in all the rows
 	 */
 	@Input()
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
+
+	/**
+	 * @deprecated - use {@link this.tableRowActions}
+	 */
+	@Input()
+	public set tableRowsActionBarConfig(config: StarkActionBarConfig) {
+		this.logger.warn("[tableRowsActionBarConfig] attribute on <stark-table> is deprecated. Use [tableRowActions] instead.");
+		this.tableRowActions = <StarkTableRowActions>config;
+	}
 
 	/**
 	 * Function to generate classNames for rows

diff --git a/packages/stark-ui/src/modules/table/entities.ts b/packages/stark-ui/src/modules/table/entities.ts
@@ -5,3 +5,4 @@ export * from "./entities/column-filter-changed-output.intf";
 export * from "./entities/table-column-filter.intf";
 export * from "./entities/table-column-sorting-direction.type";
 export * from "./entities/table-filter.intf";
+export * from "./entities/table-row-actions.intf";
diff --git a/packages/stark-ui/src/modules/table/entities/table-row-actions.intf.ts b/packages/stark-ui/src/modules/table/entities/table-row-actions.intf.ts
@@ -0,0 +1,12 @@
+import { StarkActionBarConfig } from "@nationalbankbelgium/stark-ui";
+
+/**
+ * StarkTableRowActions interface
+ */
+export interface StarkTableRowActions extends StarkActionBarConfig {
+	/**
+	 * Should the actions always be shown on the right side of the table (sticky)
+	 * Default: false
+	 */
+	isFixed?: boolean;
+}
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
@@ -5,7 +5,7 @@
 	[filter]="filter"
 	[orderProperties]="order"
 	[paginationConfig]="pagination"
-	[tableRowsActionBarConfig]="rowActionBarConfig"
+	[tableRowActions]="tableRowActions"
 	multiSort
 	(rowClicked)="handleRowClicked($event)"
 >

diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.ts b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{
@@ -49,7 +49,7 @@ export class TableRegularComponent implements OnInit {
 
 	public pagination: StarkPaginationConfig;
 
-	public rowActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
@@ -74,7 +74,7 @@ export class TableRegularComponent implements OnInit {
 
 		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 
-		this.rowActionBarConfig = {
+		this.tableRowActions = {
 			actions: [
 				{
 					id: "edit-item",

diff --git a/...app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.html b/...app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.html
@@ -3,7 +3,7 @@
 	[columnProperties]="columns"
 	[filter]="filter"
 	[paginationConfig]="pagination"
-	[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+	[tableRowsActionBarConfig]="tableRowActions"
 	customTableActionsType="alt"
 >
 	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_STICKY_ACTIONS</h1></header>

diff --git a/...c/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts b/...c/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 // tslint:disable:no-duplicate-string
 const DUMMY_DATA: object[] = [
@@ -117,7 +117,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 
 	public pagination: StarkPaginationConfig;
 
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
@@ -143,7 +143,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 
 		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 
-		this.tableRowsActionBarConfig = {
+		this.tableRowActions = {
 			actions: [
 				{
 					id: "edit-item",
@@ -160,7 +160,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 					isEnabled: true
 				}
 			],
-			isSticky: true
+			isFixed: true
 		};
 	}
 }
diff --git a/showcase/src/assets/examples/table/regular/table.html b/showcase/src/assets/examples/table/regular/table.html
@@ -5,7 +5,7 @@
 	[filter]="filter"
 	[orderProperties]="order"
 	[paginationConfig]="pagination"
-	[tableRowsActionBarConfig]="rowActionBarConfig"
+	[tableRowActions]="tableRowActions"
 	multiSort
 	(rowClicked)="handleRowClicked($event)"
 >

diff --git a/showcase/src/assets/examples/table/regular/table.ts b/showcase/src/assets/examples/table/regular/table.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{
@@ -9,26 +9,7 @@ const DUMMY_DATA: object[] = [
 		description: "first one",
 		extra: "number one has some extra information"
 	},
-	{ 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",
-		extra: "The fifth row has some extra information"
-	},
-	{ 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",
-		extra: "This row has some extra information"
-	},
-	{ 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", extra: "extra info" },
-	{ 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" }
 ];
 
@@ -49,7 +30,7 @@ export class TableRegularComponent implements OnInit {
 
 	public pagination: StarkPaginationConfig;
 
-	public rowActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
@@ -74,7 +55,7 @@ export class TableRegularComponent implements OnInit {
 
 		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 
-		this.rowActionBarConfig = {
+		this.tableRowActions = {
 			actions: [
 				{
 					id: "edit-item",

diff --git a/showcase/src/assets/examples/table/with-sticky-actions/table.html b/showcase/src/assets/examples/table/with-sticky-actions/table.html
@@ -3,7 +3,7 @@
 	[columnProperties]="columns"
 	[filter]="filter"
 	[paginationConfig]="pagination"
-	[tableRowsActionBarConfig]="tableRowsActionBarConfig"
+	[tableRowActions]="tableRowActions"
 	customTableActionsType="alt"
 >
 	<header><h1 class="mb0">Table with sticky row actions</h1></header>

diff --git a/showcase/src/assets/examples/table/with-sticky-actions/table.ts b/showcase/src/assets/examples/table/with-sticky-actions/table.ts
@@ -1,6 +1,11 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { StarkActionBarConfig, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+import {
+	StarkPaginationConfig,
+	StarkTableColumnProperties,
+	StarkTableFilter,
+	StarkTableRowActions
+} from "@nationalbankbelgium/stark-ui";
 
 const DUMMY_DATA: object[] = [
 	{
@@ -36,7 +41,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 
 	public pagination: StarkPaginationConfig;
 
-	public tableRowsActionBarConfig: StarkActionBarConfig;
+	public tableRowActions: StarkTableRowActions;
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
@@ -60,7 +65,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 
 		this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 };
 
-		this.tableRowsActionBarConfig = {
+		this.tableRowActions = {
 			actions: [
 				{
 					id: "edit-item",
@@ -77,7 +82,7 @@ export class TableWithStickyActionsComponent implements OnInit {
 					isEnabled: true
 				}
 			],
-			isSticky: true
+			isFixed: true
 		};
 	}
 }