From c916f9623b9b4fd705cbf94b573d7879dfeb2cba Mon Sep 17 00:00:00 2001 From: Carlo Nomes Date: Mon, 25 Feb 2019 11:13:39 +0100 Subject: [PATCH] feat(stark-ui): add sticky action column to `stark-table` - added documentation / demo ISSUES CLOSED: #1143 --- .../components/action-bar-config.intf.ts | 6 + .../table/components/_table.component.scss | 17 ++ .../table/components/column.component.html | 2 +- .../table/components/column.component.ts | 6 + .../table/components/table.component.html | 3 +- showcase/src/app/demo-ui/components/index.ts | 1 + .../table-with-sticky-actions/index.ts | 1 + .../table-with-sticky-actions.component.html | 10 ++ .../table-with-sticky-actions.component.scss | 9 + .../table-with-sticky-actions.component.ts | 166 ++++++++++++++++++ showcase/src/app/demo-ui/demo-ui.module.ts | 4 +- .../table/demo-table-page.component.html | 8 + .../table/with-sticky-actions/table.html | 10 ++ .../table/with-sticky-actions/table.scss | 9 + .../table/with-sticky-actions/table.ts | 83 +++++++++ showcase/src/assets/translations/en.json | 1 + showcase/src/assets/translations/fr.json | 19 +- showcase/src/assets/translations/nl.json | 21 +-- 18 files changed, 354 insertions(+), 22 deletions(-) create mode 100644 showcase/src/app/demo-ui/components/table-with-sticky-actions/index.ts create mode 100644 showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.html create mode 100644 showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.scss create mode 100644 showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts create mode 100644 showcase/src/assets/examples/table/with-sticky-actions/table.html create mode 100644 showcase/src/assets/examples/table/with-sticky-actions/table.scss create mode 100644 showcase/src/assets/examples/table/with-sticky-actions/table.ts 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 index 27122db8c1..2b804d9458 100644 --- 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,4 +13,10 @@ 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.scss b/packages/stark-ui/src/modules/table/components/_table.component.scss index c630dabdcd..6bb7722701 100644 --- a/packages/stark-ui/src/modules/table/components/_table.component.scss +++ b/packages/stark-ui/src/modules/table/components/_table.component.scss @@ -32,6 +32,20 @@ } } + .table-container { + overflow: auto; + } + + .mat-table-sticky:first-child { + padding-right: 10px; + border-right: 1px solid rgba(0, 0, 0, 0.12); // material-default + } + + .mat-table-sticky:last-child { + padding-left: 10px; + border-left: 1px solid rgba(0, 0, 0, 0.12); // material-default + } + table { width: 100%; @@ -40,6 +54,9 @@ &.hidden { display: none; } + .stark-action-bar .action-bar-wrapper { + flex-wrap: nowrap; + } } th { diff --git a/packages/stark-ui/src/modules/table/components/column.component.html b/packages/stark-ui/src/modules/table/components/column.component.html index a08938c3fe..b156af8a53 100644 --- a/packages/stark-ui/src/modules/table/components/column.component.html +++ b/packages/stark-ui/src/modules/table/components/column.component.html @@ -1,4 +1,4 @@ - + diff --git a/packages/stark-ui/src/modules/table/components/column.component.ts b/packages/stark-ui/src/modules/table/components/column.component.ts index 40434feb28..e441221d4c 100644 --- a/packages/stark-ui/src/modules/table/components/column.component.ts +++ b/packages/stark-ui/src/modules/table/components/column.component.ts @@ -147,6 +147,12 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent implemen @Input() public headerClassName?: string; + /** + * Make the column stick to the right side of the table + */ + @Input() + public stickyEnd?: boolean = false; + /** * Output that will emit a specific column whenever its filter value has changed */ diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html index 629ee2461d..4339e89965 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.html +++ b/packages/stark-ui/src/modules/table/components/table.component.html @@ -64,7 +64,7 @@ -
+
@@ -111,6 +111,7 @@ *ngIf="tableRowsActionBarConfig && tableRowsActionBarConfig.actions" [sortable]="false" [name]="'STARK.TABLE.ACTIONS' | translate" + [stickyEnd]="tableRowsActionBarConfig.isSticky" > +

SHOWCASE.DEMO.TABLE.WITH_STICKY_ACTIONS

+ diff --git a/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.scss b/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.scss new file mode 100644 index 0000000000..6c3158f514 --- /dev/null +++ b/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.scss @@ -0,0 +1,9 @@ +::ng-deep table { + td, + th { + white-space: nowrap; + &.mat-cell { + padding-right: 20px; + } + } +} diff --git a/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts b/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts new file mode 100644 index 0000000000..fa9fca0c4e --- /dev/null +++ b/showcase/src/app/demo-ui/components/table-with-sticky-actions/table-with-sticky-actions.component.ts @@ -0,0 +1,166 @@ +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"; + +// tslint:disable:no-duplicate-string +const DUMMY_DATA: object[] = [ + { + id: 1, + title: { label: "first title (value: 1)", value: 1 }, + description: "number one", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 10, + title: { label: "second title (value: 2)", value: 2 }, + description: "second description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 12, + title: { label: "third title (value: 3)", value: 3 }, + description: "the third description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 2, + title: { label: "fourth title (value: 4)", value: 4 }, + description: "description number four", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 23, + title: { label: "fifth title (value: 5)", value: 5 }, + description: "fifth description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 222, + title: { label: "sixth title (value: 6)", value: 6 }, + description: "the sixth description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 112, + title: { label: "seventh title (value: 7)", value: 7 }, + description: "seventh description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 232, + title: { label: "eighth title (value: 8)", value: 8 }, + description: "description number eight", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 154, + title: { label: "ninth title (value: 9)", value: 9 }, + description: "the ninth description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 27, + title: { label: "tenth title (value: 10)", value: 10 }, + description: "description number ten", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 86, + title: { label: "eleventh title (value: 11)", value: 11 }, + description: "eleventh description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + { + id: 44, + title: { label: "twelfth title (value: 12)", value: 12 }, + description: "the twelfth description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + } +]; +// tslint:enable:no-duplicate-string + +@Component({ + selector: "showcase-table-with-sticky-actions", + templateUrl: "./table-with-sticky-actions.component.html", + styleUrls: ["./table-with-sticky-actions.component.scss"] +}) +export class TableWithStickyActionsComponent implements OnInit { + public data: object[]; + + public columns: StarkTableColumnProperties[]; + + public filter: StarkTableFilter; + + public pagination: StarkPaginationConfig; + + public tableRowsActionBarConfig: StarkActionBarConfig; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.data = DUMMY_DATA; + + this.columns = [ + { name: "id", label: "Id" }, + { + name: "title", + label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE", + cellFormatter: (value: { label: string }): string => "~" + value.label + }, + { name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }, + // tslint:disable:no-duplicate-string + { name: "info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" }, + { name: "more_info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" }, + { name: "even_more_info", label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO" } + // tslint:enable:no-duplicate-string + ]; + + this.filter = { globalFilterPresent: false, columns: [] }; + + this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; + + this.tableRowsActionBarConfig = { + actions: [ + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT", $event, data), + isEnabled: true + }, + { + id: "delete-item", + label: "STARK.ICONS.DELETE_ITEM", + icon: "delete", + actionCall: ($event: Event, data: object) => this.logger.debug("DELETE", $event, data), + isEnabled: true + } + ], + isSticky: true + }; + } +} diff --git a/showcase/src/app/demo-ui/demo-ui.module.ts b/showcase/src/app/demo-ui/demo-ui.module.ts index 1ef8cf78e6..249da4d616 100644 --- a/showcase/src/app/demo-ui/demo-ui.module.ts +++ b/showcase/src/app/demo-ui/demo-ui.module.ts @@ -82,7 +82,8 @@ import { TableWithCustomStylingComponent, TableWithFixedHeaderComponent, TableWithSelectionComponent, - TableWithTranscludedActionBarComponent + TableWithTranscludedActionBarComponent, + TableWithStickyActionsComponent } from "./components"; @NgModule({ @@ -164,6 +165,7 @@ import { TableWithTranscludedActionBarComponent, TableWithFixedHeaderComponent, TableWithCustomStylingComponent, + TableWithStickyActionsComponent, DemoToastPageComponent, DemoGenericSearchFormComponent, DemoTransformInputDirectivePageComponent 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 63d2996c1d..bbb22e5384 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 @@ -33,6 +33,14 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ + + + +

Table with sticky row actions

+ diff --git a/showcase/src/assets/examples/table/with-sticky-actions/table.scss b/showcase/src/assets/examples/table/with-sticky-actions/table.scss new file mode 100644 index 0000000000..6c3158f514 --- /dev/null +++ b/showcase/src/assets/examples/table/with-sticky-actions/table.scss @@ -0,0 +1,9 @@ +::ng-deep table { + td, + th { + white-space: nowrap; + &.mat-cell { + padding-right: 20px; + } + } +} diff --git a/showcase/src/assets/examples/table/with-sticky-actions/table.ts b/showcase/src/assets/examples/table/with-sticky-actions/table.ts new file mode 100644 index 0000000000..a29a7b2bdc --- /dev/null +++ b/showcase/src/assets/examples/table/with-sticky-actions/table.ts @@ -0,0 +1,83 @@ +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"; + +const DUMMY_DATA: object[] = [ + { + id: 1, + title: { label: "first title (value: 1)", value: 1 }, + description: "number one", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + }, + /*...*/ + { + id: 44, + title: { label: "twelfth title (value: 12)", value: 12 }, + description: "the twelfth description", + info: "This is some info.", + more_info: "This is even more info.", + even_more_info: "This is a ludicrous amount of info." + } +]; + +@Component({ + selector: "showcase-table-with-sticky-actions", + templateUrl: "./table-with-sticky-actions.component.html", + styleUrls: ["./table-with-sticky-actions.component.scss"] +}) +export class TableWithStickyActionsComponent implements OnInit { + public data: object[]; + + public columns: StarkTableColumnProperties[]; + + public filter: StarkTableFilter; + + public pagination: StarkPaginationConfig; + + public tableRowsActionBarConfig: StarkActionBarConfig; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.data = DUMMY_DATA; + + this.columns = [ + { name: "id", label: "Id" }, + { + name: "title", + label: "Title", + cellFormatter: (value: { label: string }): string => "~" + value.label + }, + { name: "description", label: "Description" }, + { name: "info", label: "Extra info" }, + { name: "more_info", label: "Extra info" }, + { name: "even_more_info", label: "Extra info" } + ]; + + this.filter = { globalFilterPresent: false, columns: [] }; + + this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; + + this.tableRowsActionBarConfig = { + actions: [ + { + id: "edit-item", + label: "Edit", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT", $event, data), + isEnabled: true + }, + { + id: "delete-item", + label: "Delete", + icon: "delete", + actionCall: ($event: Event, data: object) => this.logger.debug("DELETE", $event, data), + isEnabled: true + } + ], + isSticky: true + }; + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 8b386c4722..2ab152c2f2 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -287,6 +287,7 @@ "WITH_FIXED_HEADER": "Table with fixed header", "WITH_TRANSCLUDED_ACTION_BAR": "Table with transcluded Action bar", "WITH_CUSTOM_STYLING": "Table with custom styling", + "WITH_STICKY_ACTIONS": "Table with sticky row actions", "TITLE": "Table" }, "TOAST": { diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 8698861104..527621171a 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -287,6 +287,7 @@ "WITH_FIXED_HEADER": "Table avec en-tête fixe", "WITH_TRANSCLUDED_ACTION_BAR": "Table avec Action Bar 'transcluded'", "WITH_CUSTOM_STYLING": "Table avec mise en page personnalisé", + "WITH_STICKY_ACTIONS": "Table avec actions de ligne collante", "TITLE": "Table" }, "TOAST": { @@ -312,22 +313,22 @@ "TITLE": "Démarrer" }, "HOMEPAGE": { - "CORE":"Stark Core", - "DESCRIPTION_DETAIL":"

Stark fournit les principaux outils pour accélérer le développement front-end.
Vous y trouverez un build fiable et réutilisable basé sur Webpack, un projet Starter, des modules core et ui fournissant des composants ui incroyables, ...
Tous ces modules sont comme des LEGO: ajoutez ce dont vous avez besoin, ni plus, ni moins!

", + "CORE": "Stark Core", + "DESCRIPTION_DETAIL": "

Stark fournit les principaux outils pour accélérer le développement front-end.
Vous y trouverez un build fiable et réutilisable basé sur Webpack, un projet Starter, des modules core et ui fournissant des composants ui incroyables, ...
Tous ces modules sont comme des LEGO: ajoutez ce dont vous avez besoin, ni plus, ni moins!

", "DOCUMENTATION_CORE_DESC": "

Stark Core, aussi appelé stark-core, est un module fournissant des APIs réutilisables, comme par exemple une API de routing, de logging, de log shipping,etc...

", "DOCUMENTATION_MAIN_TITLE": "Documentation", "DOCUMENTATION_SHOWCASE_DESC": "

Le Showcase, vous vous y trouvez en ce moment même!
Amusez-vous à parcourir notre liste de composants visuels ainsi que leur documentation et à découvrir de vos propres yeux nos guidelines en matière de design.

", "DOCUMENTATION_UI_DESC": "

Stark UI fournit des composants UI réutilisables: table de données, boite de dialogue, ... mais également des thèmes.

", - "GETTING_STARTED":"Démarrer", + "GETTING_STARTED": "Démarrer", "INTRODUCTION": "Un framework front-end basé sur Angular 7", - "LATEST_API":"Dernière API", - "LATEST_NEWS":"Dernières nouvelles", + "LATEST_API": "Dernière API", + "LATEST_NEWS": "Dernières nouvelles", "MAIN_TITLE": "Qu'est-ce que Stark?", - "PREVIOUS_API":"API précédentes", - "PREVIOUS_VERSIONS":"Versions précédentes", - "SHOWCASE":"Showcase", + "PREVIOUS_API": "API précédentes", + "PREVIOUS_VERSIONS": "Versions précédentes", + "SHOWCASE": "Showcase", "TITLE": "Home", - "UI":"Stark UI" + "UI": "Stark UI" }, "ICONS": { "GITHUB": "Repo Github", diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 0fd0685105..623445835e 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -287,6 +287,7 @@ "WITH_FIXED_HEADER": "Tabel met vaste header", "WITH_TRANSCLUDED_ACTION_BAR": "Tabel met 'transcluded' Action Bar", "WITH_CUSTOM_STYLING": "Tabel met aangepaste opmaak", + "WITH_STICKY_ACTIONS": "Tabel met kleverige rijacties", "TITLE": "Table" }, "TOAST": { @@ -312,22 +313,22 @@ "TITLE": "Begonnen" }, "HOMEPAGE": { - "CORE":"Stark Core", - "DESCRIPTION_DETAIL":"

Stark levert de belangrijkste instrumenten om de front-end ontwikkeling te versnellen.
U zult een betrouwbare en herbruikbare build gebouwd op Webpack vinden, een Starter project, core en ui modules dat interessante visuele componenten verschaffen, ...
Deze modules zijn zoals LEGO: Voegt wat u nodig hebt, niet meer en niet minder!

", + "CORE": "Stark Core", + "DESCRIPTION_DETAIL": "

Stark levert de belangrijkste instrumenten om de front-end ontwikkeling te versnellen.
U zult een betrouwbare en herbruikbare build gebouwd op Webpack vinden, een Starter project, core en ui modules dat interessante visuele componenten verschaffen, ...
Deze modules zijn zoals LEGO: Voegt wat u nodig hebt, niet meer en niet minder!

", "DOCUMENTATION_CORE_DESC": "

Stark Core, ook bekend als stark-core, is een module dat herbruikbare APIs verstrekt, zoals routing, logging, log shipping,enzovoort.

", "DOCUMENTATION_MAIN_TITLE": "Documentatie", "DOCUMENTATION_SHOWCASE_DESC": "

De Showcase, u zich hier bevindt!
Veel plezier met de ontdekking van onze componenten lijst !

", "DOCUMENTATION_UI_DESC": "

Stark UI levert UI herbruikbare componenten : gegevenstabel, dialoogvenster, ... maar ook themas.

", - "GETTING_STARTED":"Ermee beginnen", - "INTRODUCTION":"Een front-end framework gebaseerd op Angular 7", - "LATEST_API":"Laatste API", - "LATEST_NEWS":"Laatste nieuws", + "GETTING_STARTED": "Ermee beginnen", + "INTRODUCTION": "Een front-end framework gebaseerd op Angular 7", + "LATEST_API": "Laatste API", + "LATEST_NEWS": "Laatste nieuws", "MAIN_TITLE": "Wat is Stark?", - "PREVIOUS_API":"Vorige API", - "PREVIOUS_VERSIONS":"Vorige versies", - "SHOWCASE":"Showcase", + "PREVIOUS_API": "Vorige API", + "PREVIOUS_VERSIONS": "Vorige versies", + "SHOWCASE": "Showcase", "TITLE": "Home", - "UI":"Stark UI" + "UI": "Stark UI" }, "ICONS": { "GITHUB": "Github repo",