feat(stark-ui): add support for displaying the "items per page" dropd…

…own also in Pagination on "compact" mode ISSUES CLOSED: #1248
NationalBankBelgium · Jan 8, 2020 · 705bb23 · 705bb23
1 parent 52ae6e0
commit 705bb23
Show file tree

Hide file tree

Showing 15 changed files with 200 additions and 2 deletions.
diff --git a/packages/stark-ui/src/modules/pagination/components/pagination-config.intf.ts b/packages/stark-ui/src/modules/pagination/components/pagination-config.intf.ts
@@ -22,7 +22,7 @@ export interface StarkPaginationConfig {
 
 	/**
 	 * If false, then itemsPerPage dropdown will not be present.
-	 * Default: true
+	 * Default: true on "default" mode, false on "compact" mode
 	 */
 	itemsPerPageIsPresent?: boolean;
 

diff --git a/packages/stark-ui/src/modules/pagination/components/pagination.component.html b/packages/stark-ui/src/modules/pagination/components/pagination.component.html
@@ -100,4 +100,15 @@
 			</button>
 		</li>
 	</ul>
+
+	<div class="pagination-items-per-page" *ngIf="!!paginationConfig.itemsPerPageIsPresent">
+		<stark-dropdown
+			[options]="paginationConfig.itemsPerPageOptions"
+			[value]="paginationConfig.itemsPerPage"
+			placeholder=""
+			(selectionChanged)="onChangeItemsPerPage($event)"
+			dropdownId="items-per-page-{{ htmlSuffixId }}"
+			dropdownName="items-per-page-{{ htmlSuffixId }}"
+		></stark-dropdown>
+	</div>
 </div>
diff --git a/packages/stark-ui/src/modules/pagination/components/pagination.component.ts b/packages/stark-ui/src/modules/pagination/components/pagination.component.ts
@@ -169,12 +169,18 @@ export class StarkPaginationComponent extends MatPaginator implements OnInit, On
 			return { totalItems: 0 };
 		}
 
+		let defaultItemsPerPageIsPresent: StarkPaginationConfig["itemsPerPageIsPresent"];
+
+		if (typeof config.itemsPerPageIsPresent === "undefined") {
+			defaultItemsPerPageIsPresent = this.mode !== "compact"; // true on "default" mode, false on "compact" mode
+		}
+
 		return {
 			itemsPerPageOptions: config.itemsPerPageOptions || [5, 10, 15],
 			itemsPerPage: config.itemsPerPage || (config.itemsPerPageOptions ? config.itemsPerPageOptions[0] : 5),
 			page: config.page || 1,
 			isExtended: config.isExtended !== undefined ? config.isExtended : false,
-			itemsPerPageIsPresent: config.itemsPerPageIsPresent !== undefined ? config.itemsPerPageIsPresent : true,
+			itemsPerPageIsPresent: config.itemsPerPageIsPresent !== undefined ? config.itemsPerPageIsPresent : defaultItemsPerPageIsPresent,
 			pageNavIsPresent: config.pageNavIsPresent !== undefined ? config.pageNavIsPresent : true,
 			pageInputIsPresent: config.pageInputIsPresent !== undefined ? config.pageInputIsPresent : true,
 			totalItems: config.totalItems !== undefined ? config.totalItems : 0

diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -217,6 +217,8 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 
 	/**
 	 * {@link StarkPaginationConfig} configuration object for embedded pagination component
+	 *
+	 * **IMPORTANT:** the pagination component is displayed in "compact" mode
 	 */
 	@Input()
 	public paginationConfig: StarkPaginationConfig = {};

diff --git a/showcase/src/app/demo-ui/components/index.ts b/showcase/src/app/demo-ui/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./table-regular";
+export * from "./table-with-items-per-page-selector";
 export * from "./table-with-selection";
 export * from "./table-with-custom-actions";
 export * from "./table-with-transcluded-action-bar";

diff --git a/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/index.ts b/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/index.ts
@@ -0,0 +1 @@
+export * from "./table-with-items-per-page-selector.component";
diff --git a/...ents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html b/...ents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html
@@ -0,0 +1,12 @@
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[orderProperties]="order"
+	[paginationConfig]="pagination"
+	[tableRowActions]="tableRowActions"
+	multiSort
+	showRowsCounter
+>
+	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_ITEMS_PER_PAGE_SELECTOR</h1></header>
+</stark-table>
diff --git a/...onents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.ts b/...onents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.ts
@@ -0,0 +1,80 @@
+import { Component, Inject } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{
+		id: 1,
+		title: { label: "first title (value: 1)", value: 1 },
+		description: "first 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" }
+];
+
+@Component({
+	selector: "showcase-table-with-items-per-page-selector",
+	templateUrl: "./table-with-items-per-page-selector.component.html"
+})
+export class TableWithItemsPerPageSelectorComponent {
+	public data: object[] = DUMMY_DATA;
+
+	public columns: StarkTableColumnProperties[] = [
+		{ name: "id", label: "Id" },
+		{
+			name: "title",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+			cellFormatter: (value: { label: string }): string => "~" + value.label,
+			compareFn: (n1: { value: number }, n2: { value: number }): number => n1.value - n2.value
+		},
+		{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }
+	];
+
+	public filter: StarkTableFilter = {
+		globalFilterPresent: true,
+		columns: [{ columnName: "id", filterPosition: "below" }, { columnName: "title", filterPosition: "above" }],
+		filterPosition: "below"
+	};
+
+	public order: string[] = ["title", "-description", "id"];
+
+	public pagination: StarkPaginationConfig = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10, itemsPerPageIsPresent: true };
+
+	public tableRowActions: StarkTableRowActions = {
+		actions: [
+			{
+				id: "edit-item",
+				label: "STARK.ICONS.EDIT_ITEM",
+				icon: "pencil",
+				actionCall: ($event: Event, data: object): void => this.logger.debug("EDIT", $event, data),
+				isEnabled: true
+			},
+			{
+				id: "delete-item",
+				label: "STARK.ICONS.DELETE_ITEM",
+				icon: "delete",
+				actionCall: ($event: Event, data: object): void => this.logger.debug("DELETE", $event, data),
+				isEnabled: false
+			}
+		]
+	};
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
+}
diff --git a/showcase/src/app/demo-ui/demo-ui.module.ts b/showcase/src/app/demo-ui/demo-ui.module.ts
@@ -68,6 +68,7 @@ import { SharedModule } from "../shared/shared.module";
 import { DEMO_STATES } from "./routes";
 import {
 	TableRegularComponent,
+	TableWithItemsPerPageSelectorComponent,
 	TableWithCustomActionsComponent,
 	TableWithCustomStylingComponent,
 	TableWithFixedActionsComponent,
@@ -140,6 +141,7 @@ import {
 		DemoSliderPageComponent,
 		DemoTablePageComponent,
 		TableRegularComponent,
+		TableWithItemsPerPageSelectorComponent,
 		TableWithSelectionComponent,
 		TableWithCustomActionsComponent,
 		TableWithTranscludedActionBarComponent,

diff --git a/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html b/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html
@@ -10,6 +10,15 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<showcase-table-regular></showcase-table-regular>
 	</example-viewer>
 
+	<example-viewer
+		id="items-per-page-selection"
+		exampleTitle="SHOWCASE.DEMO.TABLE.WITH_ITEMS_PER_PAGE_SELECTOR"
+		filesPath="table/with-items-per-page-selector/table"
+		[extensions]="['HTML', 'TS']"
+	>
+		<showcase-table-with-items-per-page-selector></showcase-table-with-items-per-page-selector>
+	</example-viewer>
+
 	<example-viewer
 		id="selection"
 		exampleTitle="SHOWCASE.DEMO.TABLE.WITH_SELECTION"

diff --git a/showcase/src/assets/examples/table/with-items-per-page-selector/table.html b/showcase/src/assets/examples/table/with-items-per-page-selector/table.html
@@ -0,0 +1,12 @@
+<stark-table
+	[data]="data"
+	[columnProperties]="columns"
+	[filter]="filter"
+	[orderProperties]="order"
+	[paginationConfig]="pagination"
+	[tableRowActions]="tableRowActions"
+	multiSort
+	showRowsCounter
+>
+	<header><h1 class="mb0" translate>Table with the selector of items per page to display</h1></header>
+</stark-table>
diff --git a/showcase/src/assets/examples/table/with-items-per-page-selector/table.ts b/showcase/src/assets/examples/table/with-items-per-page-selector/table.ts
@@ -0,0 +1,59 @@
+import { Component, Inject } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
+	/* ... */
+	{ id: 44, title: { label: "twelfth title (value: 12)", value: 12 }, description: "the twelfth description" }
+];
+
+@Component({
+	selector: "showcase-table-with-items-per-page-selector",
+	templateUrl: "./table-with-items-per-page-selector.component.html"
+})
+export class TableWithItemsPerPageSelectorComponent {
+	public data: object[] = DUMMY_DATA;
+
+	public columns: StarkTableColumnProperties[] = [
+		{ name: "id", label: "Id" },
+		{
+			name: "title",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+			cellFormatter: (value: { label: string }): string => "~" + value.label,
+			compareFn: (n1: { value: number }, n2: { value: number }): number => n1.value - n2.value
+		},
+		{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }
+	];
+
+	public filter: StarkTableFilter = {
+		globalFilterPresent: true,
+		columns: [{ columnName: "id", filterPosition: "below" }, { columnName: "title", filterPosition: "above" }],
+		filterPosition: "below"
+	};
+
+	public order: string[] = ["title", "-description", "id"];
+
+	public pagination: StarkPaginationConfig = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10, itemsPerPageIsPresent: true };
+
+	public tableRowActions: StarkTableRowActions = {
+		actions: [
+			{
+				id: "edit-item",
+				label: "STARK.ICONS.EDIT_ITEM",
+				icon: "pencil",
+				actionCall: ($event: Event, data: object): void => this.logger.debug("EDIT", $event, data),
+				isEnabled: true
+			},
+			{
+				id: "delete-item",
+				label: "STARK.ICONS.DELETE_ITEM",
+				icon: "delete",
+				actionCall: ($event: Event, data: object): void => this.logger.debug("DELETE", $event, data),
+				isEnabled: false
+			}
+		]
+	};
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
+}
diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json
@@ -330,6 +330,7 @@
         },
         "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_TRANSCLUDED_ACTION_BAR": "Table with transcluded Action bar",

diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json
@@ -330,6 +330,7 @@
         },
         "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_TRANSCLUDED_ACTION_BAR": "Table avec Action Bar 'transcluded'",

diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json
@@ -330,6 +330,7 @@
         },
         "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_TRANSCLUDED_ACTION_BAR": "Tabel met 'transcluded' Action Bar",