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 index baf518eaf3..e64584f489 100644 --- 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 index b00f29b2f1..47f090f470 100644 --- 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 @@ + +
+ +
diff --git a/packages/stark-ui/src/modules/pagination/components/pagination.component.ts b/packages/stark-ui/src/modules/pagination/components/pagination.component.ts index 133d7858a7..c8249f33f5 100644 --- 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 index de624a610e..6622f623bc 100644 --- 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 index c6460cf858..5a21c15c35 100644 --- 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 new file mode 100644 index 0000000000..142cd2942d --- /dev/null +++ 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/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html b/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html new file mode 100644 index 0000000000..e15c7504b0 --- /dev/null +++ b/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html @@ -0,0 +1,12 @@ + +

SHOWCASE.DEMO.TABLE.WITH_ITEMS_PER_PAGE_SELECTOR

+ diff --git a/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/table-with-items-per-page-selector.component.ts b/showcase/src/app/demo-ui/components/table-with-items-per-page-selector/table-with-items-per-page-selector.component.ts new file mode 100644 index 0000000000..ff7202ff30 --- /dev/null +++ b/showcase/src/app/demo-ui/components/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 index 37537725fc..fa2231025a 100644 --- 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 index 934b5bb387..82b952ea22 100644 --- 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 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ + + + +

Table with the selector of items per page to display

+ 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 new file mode 100644 index 0000000000..e605a4c66c --- /dev/null +++ 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 index 74cea1db49..cc57cd5ce1 100644 --- 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 index 561998cb6f..8a7cbfec9f 100644 --- 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 index 36f7a29c65..691ede95c5 100644 --- 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",