feat(stark-ui): add footer to table component

ISSUES CLOSED: #1540

packages/stark-ui/src/modules/table/components/column.component.html

@@ -39,4 +39,9 @@
 			*ngTemplateOutlet="columnTemplate; context: { $implicit: { rowData: rowItem, displayedValue: getDisplayedValue(rowItem) } }"
 		></ng-container>
 	</td>
+	<ng-container *ngIf="footerValue !== 'undefined'">
+		<td mat-footer-cell *matFooterCellDef>
+			{{ footerValue!.toString() | translate }}
+		</td>
+	</ng-container>
 </ng-container>

packages/stark-ui/src/modules/table/components/column.component.ts

@@ -130,6 +130,27 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent implemen
 	 */
 	private _headerLabel?: string;
 
+	/**
+	 * Value to be shown as the column's footer.
+	 */
+	@Input()
+	public set footerValue(value: string | number | undefined) {
+		this._footerValue = value;
+	}
+
+	/**
+	 * Returns the footer value of the column if it's specified.
+	 */
+	public get footerValue(): string | number | undefined {
+		return this._footerValue;
+	}
+
+	/**
+	 * @ignore
+	 * @internal
+	 */
+	private _footerValue?: string | number;
+
 	/**
 	 * Whether the column is sortable or not. Default: true
 	 */

packages/stark-ui/src/modules/table/components/table.component.html

@@ -98,17 +98,24 @@
 					[checked]="selection?.isSelected(row)"
 				></mat-checkbox>
 			</td>
+			<ng-container *ngIf="isFooterEnabled">
+				<td mat-footer-cell *matFooterCellDef></td>
+			</ng-container>
 		</ng-container>
 
 		<ng-container matColumnDef="rowIndex">
 			<th mat-header-cell *matHeaderCellDef></th>
 			<td mat-cell *matCellDef="let row">{{ getRowIndex(row) }}</td>
+			<ng-container *ngIf="isFooterEnabled">
+				<td mat-footer-cell *matFooterCellDef></td>
+			</ng-container>
 		</ng-container>
 
 		<stark-table-column
 			*ngFor="let col of columnProperties; trackBy: trackColumnFn"
 			[name]="col.name"
 			[headerLabel]="col.label"
+			[footerValue]="col.footerValue"
 			[sortable]="col.isSortable !== false"
 			[sortDirection]="getColumnSortingDirection(col.name)"
 			[sortPriority]="getColumnSortingPriority(col.name)"
@@ -147,5 +154,9 @@
 			[ngClass]="getRowClasses(row, i)"
 			(click)="onRowClick(row)"
 		></tr>
+
+		<ng-container *ngIf="isFooterEnabled">
+			<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+		</ng-container>
 	</table>
 </div>

packages/stark-ui/src/modules/table/components/table.component.ts

@@ -45,6 +45,7 @@ import { AbstractStarkUiComponent } from "../../../common/classes/abstract-compo
 import { StarkPaginateEvent, StarkPaginationComponent, StarkPaginationConfig } from "../../pagination/components";
 import { StarkMinimapComponentMode, StarkMinimapItemProperties } from "../../minimap/components";
 import find from "lodash-es/find";
+import findIndex from "lodash-es/findIndex";
 
 /**
  * Name of the component
@@ -68,6 +69,8 @@ const DEFAULT_COLUMN_PROPERTIES: Partial<StarkTableColumnProperties> = {
 	isVisible: true
 };
 
+// FIXME: refactor the template of this component function to reduce its cyclomatic complexity
+/* tslint:disable:template-cyclomatic-complexity */
 /**
  * Component to display array data in a table layout.
  */
@@ -82,16 +85,22 @@ const DEFAULT_COLUMN_PROPERTIES: Partial<StarkTableColumnProperties> = {
 		class: componentName
 	}
 })
-/* tslint:enable */
 export class StarkTableComponent extends AbstractStarkUiComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
 	/**
 	 * Array of {@link StarkTableColumnProperties} objects which define the columns of the data table.
 	 */
 	@Input()
 	public set columnProperties(input: StarkTableColumnProperties[]) {
+		this.isFooterEnabled =
+			findIndex(
+				input || [],
+				(column: StarkTableColumnProperties) => typeof column.footerValue !== "undefined" && column.footerValue !== ""
+			) > -1;
+
 		this._columnProperties = (input || []).map((properties: StarkTableColumnProperties) => ({
 			...DEFAULT_COLUMN_PROPERTIES,
-			...properties
+			...properties,
+			footerValue: this.isFooterEnabled ? properties.footerValue || "" : undefined
 		}));
 
 		if (this.dataSource) {
@@ -424,6 +433,14 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	 */
 	public isFixedHeaderEnabled = false;
 
+	/**
+	 * Whether the footer is enabled.
+	 * Default: if there is no footer defined here and in any other column, then it won't be displayed.
+	 * Otherwise, if at least one of the other columns defines a footer,
+	 * then the footer of this column will be displayed as empty
+	 */
+	public isFooterEnabled = false;
+
 	/**
 	 * Whether the current sorting is done on multiple columns
 	 */

packages/stark-ui/src/modules/table/entities/column-properties.intf.ts

@@ -60,6 +60,14 @@ export interface StarkTableColumnProperties {
 	 */
 	label?: string;
 
+	/**
+	 * Value to be shown as the column's footer.
+	 * Default: if there is no footer defined here and in any other column,
+	 * then it won't be displayed. Otherwise, if at least one of the other columns defines a footer,
+	 * then the footer of this column will be displayed as empty
+	 */
+	footerValue?: string | number;
+
 	/**
 	 * Name of the property that will be the source of the column.
 	 */

showcase/src/app/demo-ui/components/index.ts

@@ -6,3 +6,4 @@ export * from "./table-with-transcluded-action-bar";
 export * from "./table-with-fixed-header";
 export * from "./table-with-custom-styling";
 export * from "./table-with-fixed-actions";
+export * from "./table-with-footer";

showcase/src/app/demo-ui/components/table-with-footer/index.ts

@@ -0,0 +1 @@
+export * from "./table-with-footer.component";

showcase/src/app/demo-ui/components/table-with-footer/table-with-footer.component.html

@@ -0,0 +1,3 @@
+<stark-table [data]="data" [columnProperties]="columns" [paginationConfig]="paginationConfig" [filter]="filter">
+	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_FOOTER</h1></header>
+</stark-table>

showcase/src/app/demo-ui/components/table-with-footer/table-with-footer.component.scss

@@ -0,0 +1,4 @@
+// Row class
+tr.mat-footer-row {
+  font-weight: bold;
+}

showcase/src/app/demo-ui/components/table-with-footer/table-with-footer.component.ts

@@ -0,0 +1,48 @@
+import { Component, ViewEncapsulation } from "@angular/core";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{ id: 1, cost: 12, description: "number one" },
+	{ id: 10, cost: 23, description: "second description" },
+	{ id: 12, cost: 5, description: "the third description" },
+	{ id: 2, cost: 33, description: "description number four" },
+	{ id: 23, cost: 54, description: "fifth description" },
+	{ id: 222, cost: 3, description: "the sixth description" },
+	{ id: 112, cost: 7, description: "seventh description" },
+	{ id: 232, cost: 24, description: "description number eight" },
+	{ id: 154, cost: 35, description: "the ninth description" },
+	{ id: 27, cost: 10, description: "description number ten" },
+	{ id: 86, cost: 21, description: "eleventh description" },
+	{ id: 44, cost: 6, description: "the twelfth description" }
+];
+
+@Component({
+	selector: "showcase-table-with-footer",
+	templateUrl: "./table-with-footer.component.html",
+	styleUrls: ["./table-with-footer.component.scss"],
+	/* tslint:disable-next-line:use-view-encapsulation */
+	encapsulation: ViewEncapsulation.None // Important
+})
+export class TableWithFooterComponent {
+	public data: object[] = DUMMY_DATA;
+	public paginationConfig: StarkPaginationConfig = {
+		itemsPerPage: 10
+	};
+
+	public columns: StarkTableColumnProperties[] = [
+		{ name: "id", label: "Id", footerValue: "SHOWCASE.DEMO.TABLE.FOOTER.TOTAL" },
+		{
+			name: "cost",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+			footerValue: this.getTotal()
+		},
+		{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }
+	];
+
+	public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] };
+
+	/** Gets the total cost of all products. */
+	private getTotal(): number {
+		return DUMMY_DATA.map((obj: any) => obj.cost).reduce((acc: number, value: number) => acc + value, 0);
+	}
+}

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -73,6 +73,7 @@ import {
 	TableWithCustomStylingComponent,
 	TableWithFixedActionsComponent,
 	TableWithFixedHeaderComponent,
+	TableWithFooterComponent,
 	TableWithSelectionComponent,
 	TableWithTranscludedActionBarComponent
 } from "./components";
@@ -146,6 +147,7 @@ import {
 		TableWithCustomActionsComponent,
 		TableWithTranscludedActionBarComponent,
 		TableWithFixedHeaderComponent,
+		TableWithFooterComponent,
 		TableWithCustomStylingComponent,
 		TableWithFixedActionsComponent,
 		DemoToastPageComponent,

showcase/src/app/demo-ui/pages/table/demo-table-page.component.html

@@ -72,5 +72,14 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 	>
 		<showcase-table-with-custom-styling></showcase-table-with-custom-styling>
 	</example-viewer>
+
+	<example-viewer
+		id="footer"
+		exampleTitle="SHOWCASE.DEMO.TABLE.WITH_FOOTER"
+		filesPath="table/with-footer/table"
+		[extensions]="['HTML', 'TS', 'SCSS']"
+	>
+		<showcase-table-with-footer></showcase-table-with-footer>
+	</example-viewer>
 </section>
 <stark-reference-block [links]="referenceList"></stark-reference-block>

showcase/src/assets/examples/table/with-footer/table.html

@@ -0,0 +1,3 @@
+<stark-table [data]="data" [columnProperties]="columns" [paginationConfig]="paginationConfig" [filter]="filter">
+	<header><h1 class="mb0">Table with footer</h1></header>
+</stark-table>

showcase/src/assets/examples/table/with-footer/table.scss

@@ -0,0 +1,4 @@
+// Row class
+tr.mat-footer-row {
+  font-weight: bold;
+}

showcase/src/assets/examples/table/with-footer/table.ts

@@ -0,0 +1,38 @@
+import { Component, ViewEncapsulation } from "@angular/core";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{ id: 1, cost: 12, description: "number one" },
+	/* ... */
+	{ id: 44, cost: 6, description: "the twelfth description" }
+];
+
+@Component({
+	selector: "showcase-table-with-footer",
+	templateUrl: "./table-with-footer.component.html",
+	styleUrls: ["./table-with-footer.component.scss"],
+	encapsulation: ViewEncapsulation.None // Important
+})
+export class TableWithFooterComponent {
+	public data: object[] = DUMMY_DATA;
+	public paginationConfig: StarkPaginationConfig = {
+		itemsPerPage: 10
+	};
+
+	public columns: StarkTableColumnProperties[] = [
+		{ name: "id", label: "Id", footerValue: "SHOWCASE.DEMO.TABLE.FOOTER.TOTAL" },
+		{
+			name: "cost",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+			footerValue: this.getTotal()
+		},
+		{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }
+	];
+
+	public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] };
+
+	/** Gets the total cost of all products. */
+	private getTotal(): number {
+		return DUMMY_DATA.map((obj: any) => obj.cost).reduce((acc: number, value: number) => acc + value, 0);
+	}
+}

showcase/src/assets/translations/en.json

@@ -328,11 +328,15 @@
           "DESCRIPTION": "Description",
           "EXTRA_INFO": "Extra info"
         },
+        "FOOTER": {
+          "TOTAL": "Total"
+        },
         "REGULAR": "Regular Table",
         "WITH_SELECTION": "Table with selection",
         "WITH_ITEMS_PER_PAGE_SELECTOR": "Table with the selector of items per page to display",
         "WITH_CUSTOM_ACTIONS": "Table with custom actions",
         "WITH_FIXED_HEADER": "Table with fixed header",
+        "WITH_FOOTER": "Table with footer",
         "WITH_TRANSCLUDED_ACTION_BAR": "Table with transcluded Action bar",
         "WITH_CUSTOM_STYLING": "Table with custom styling",
         "WITH_FIXED_ACTIONS": "Table with fixed row actions",

showcase/src/assets/translations/fr.json

@@ -328,11 +328,15 @@
           "DESCRIPTION": "Description",
           "EXTRA_INFO": "Information supplémentaire"
         },
+        "FOOTER": {
+          "TOTAL": "Total"
+        },
         "REGULAR": "Table régulière",
         "WITH_SELECTION": "Table avec sélection",
         "WITH_ITEMS_PER_PAGE_SELECTOR": "Table avec le sélecteur du nombre d'éléments par page à afficher",
         "WITH_CUSTOM_ACTIONS": "Table avec actions personalisé",
         "WITH_FIXED_HEADER": "Table avec en-tête fixe",
+        "WITH_FOOTER": "Table avec footer",
         "WITH_TRANSCLUDED_ACTION_BAR": "Table avec Action Bar 'transcluded'",
         "WITH_CUSTOM_STYLING": "Table avec mise en page personnalisé",
         "WITH_FIXED_ACTIONS": "Table avec actions de ligne fixes",

showcase/src/assets/translations/nl.json

@@ -328,11 +328,15 @@
           "DESCRIPTION": "Omschrijving",
           "EXTRA_INFO": "Extra informatie"
         },
+        "FOOTER": {
+          "TOTAL": "Totaal"
+        },
         "REGULAR": "Normale tabel",
         "WITH_SELECTION": "Tabel met selectie",
         "WITH_ITEMS_PER_PAGE_SELECTOR": "Tabel met de selector van items per pagina om weer te geven",
         "WITH_CUSTOM_ACTIONS": "Tabel met aangepaste acties",
         "WITH_FIXED_HEADER": "Tabel met vaste header",
+        "WITH_FOOTER": "Tabel met footer",
         "WITH_TRANSCLUDED_ACTION_BAR": "Tabel met 'transcluded' Action Bar",
         "WITH_CUSTOM_STYLING": "Tabel met aangepaste opmaak",
         "WITH_FIXED_ACTIONS": "Tabel met vaste rijacties",