diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss index b66c15b816..35725b0199 100644 --- a/packages/stark-ui/assets/styles/_base.scss +++ b/packages/stark-ui/assets/styles/_base.scss @@ -71,7 +71,6 @@ body { -webkit-overflow-scrolling: touch; & > ui-view { flex: 1 0 auto; - padding: 16px; } } } diff --git a/packages/stark-ui/src/modules/action-bar/components/action-bar.component.ts b/packages/stark-ui/src/modules/action-bar/components/action-bar.component.ts index b02b58d995..158dd25569 100644 --- a/packages/stark-ui/src/modules/action-bar/components/action-bar.component.ts +++ b/packages/stark-ui/src/modules/action-bar/components/action-bar.component.ts @@ -100,6 +100,11 @@ export class StarkActionBarComponent extends AbstractStarkUiComponent implements * Action onClick handler */ public onClick(action: StarkAction, $event: Event): void { + if ($event) { + // Prevents further propagation of the current event in the capturing and bubbling phases. + // This makes it so that the parent does not also trigger on the event. + $event.stopPropagation(); + } if (action.isEnabled) { let scope: any = {}; if (this.actionBarScope) { diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss index 3601b6ab77..7dfcacadfe 100644 --- a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss +++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar.component.scss @@ -6,6 +6,7 @@ .stark-app-sidebar { .mat-sidenav-content { margin-top: $stark-header-size; + overflow: initial; // fixes double scrollbar [stark-app-sidenav-content] { align-items: center; display: flex; diff --git a/packages/stark-ui/src/modules/table/components/_table-theme.scss b/packages/stark-ui/src/modules/table/components/_table-theme.scss new file mode 100644 index 0000000000..25be8325e2 --- /dev/null +++ b/packages/stark-ui/src/modules/table/components/_table-theme.scss @@ -0,0 +1,19 @@ +/* ============================================================================== */ +/* S t a r k A p p T a b l e */ +/* ============================================================================== */ +/* stark-ui: src/modules/app-menu/components/_table-theme.scss */ + +.stark-table { + tr { + &:hover td { + background-color: mat-color($grey-palette, 100); + } + + &.selected td { + background-color: mat-color($accent-palette, 100); + color: mat-contrast($accent-palette, 100); + } + } +} + +/* END stark-ui: src/modules/app-menu/components/_table-theme.scss */ diff --git a/packages/stark-ui/src/modules/table/components/column-properties.intf.ts b/packages/stark-ui/src/modules/table/components/column-properties.intf.ts index 84d57845d8..146e362d5d 100644 --- a/packages/stark-ui/src/modules/table/components/column-properties.intf.ts +++ b/packages/stark-ui/src/modules/table/components/column-properties.intf.ts @@ -13,7 +13,7 @@ export interface StarkTableColumnProperties { * * This could also be a static string with class(es) */ - cellClassName?: ((value: any, row?: any, columnName?: string) => string) | string; + cellClassName?: ((value: any, row?: object, columnName?: string) => string) | string; /** * Function that returns a formatted value (string) to be set in the cell. It can be used to set different formats @@ -22,18 +22,18 @@ export interface StarkTableColumnProperties { * @param row - The row object that contains the cell * @param columnName - The column that the cell belongs to */ - cellFormatter?: (value: any, row?: any, columnName?: string) => string; + cellFormatter?: (value: any, row?: object, columnName?: string) => string; /** * Function that returns - * 1 : if obj1 > obj2 - * 0 : if obj1 === obj2 - * -1 : if obj1 < obj2 + * 1 : if val1 > val2 + * 0 : if val1 === val2 + * -1 : if val1 < val2 * - * @param obj1 - First object in the comparison - * @param obj2 - Second object in the comparison + * @param val1 - First value in the comparison + * @param val2 - Second value in the comparison */ - compareFn?: (obj1: any, obj2: any) => number; + compareFn?: (val1: any, val2: any) => number; /** * Class(es) to be set to the column's header. @@ -66,7 +66,7 @@ export interface StarkTableColumnProperties { * @param row - The row object that contains the cell that was clicked * @param columnName - The column that the cell belongs to */ - onClickCallback?: (value: any, row?: any, columnName?: string) => void; + onClickCallback?: (value: any, row?: object, columnName?: string) => void; /** * Priority of the column. Default: PERSIST 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 42b8ba2655..f81dddeb7e 100644 --- a/packages/stark-ui/src/modules/table/components/column.component.html +++ b/packages/stark-ui/src/modules/table/components/column.component.html @@ -6,14 +6,26 @@
{{ getHeaderLabel() }} - - - + + + {{ sortPriority }}
@@ -32,7 +44,6 @@ - + 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 6bdea55f71..d6e0556bce 100644 --- a/packages/stark-ui/src/modules/table/components/column.component.ts +++ b/packages/stark-ui/src/modules/table/components/column.component.ts @@ -65,13 +65,13 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * @param obj2 - Second object in the comparison */ @Input() - public compareFn?: ((obj1: any, obj2: any) => number); + public compareFn?: ((obj1: object, obj2: object) => number); /** * Function that returns the raw value of this column in case the access to such value can't be provided via the column name. */ @Input() - public dataAccessor?: ((data: any, name: string) => string); // TODO: really needed? + public dataAccessor?: ((data: object, name: string) => string); // TODO: really needed? /** * Function that returns a formatted value (string) to be set in the cell. It can be used to set different formats @@ -81,7 +81,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * @param columnName - The column that the cell belongs to */ @Input() - public cellFormatter?: ((value: any, row?: any, columnName?: string) => string); + public cellFormatter?: ((value: any, row?: object, columnName?: string) => string); /** * Sorting direction of the column. @@ -126,7 +126,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * Or a static string with the classNames. */ @Input() - public cellClassName?: ((value: any, row?: any, columnName?: string) => string) | string; + public cellClassName?: ((value: any, row?: object, columnName?: string) => string) | string; /** * A static className for the header @@ -156,7 +156,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * Reference to the transcluded template in this component via the ngTemplateOutlet */ @ContentChild(TemplateRef) - public columnTemplate: TemplateRef; + public columnTemplate: TemplateRef; /** * Class constructor @@ -179,7 +179,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * @param row - The row item * @returns The raw value of the property from the given row item */ - public getRawValue(row: any): any | undefined { + public getRawValue(row: object): any | undefined { let rawValue: any | undefined = _get(row, this.name); if (this.dataAccessor) { @@ -196,7 +196,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * @returns The displayed value of the property from the given row item after applying the * formatter (if there was any defined in the column) and translating the value (in case the value is a translation key) */ - public getDisplayedValue(row: any): string | number { + public getDisplayedValue(row: object): string | number { let formattedValue: string = ""; const rawValue: any | undefined = this.getRawValue(row); @@ -244,7 +244,7 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent { * @param row - The data object of the row the cell is in. * @returns The classes for the cell. */ - public getCellClassNames(row: any): string { + public getCellClassNames(row: object): string { if (!this.cellClassName) { return ""; } 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 029124f709..6baa226476 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.html +++ b/packages/stark-ui/src/modules/table/components/table.component.html @@ -38,16 +38,17 @@
- + @@ -80,7 +81,8 @@ + [ngClass]="getRowClasses(row, i)" + (click)="onRowClick(row)">
- + [checked]="selection?.isSelected(row)">
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 index 1ca0445cc1..e62a98f6a9 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts @@ -34,10 +34,12 @@ import createSpy = jasmine.createSpy; [filter]="tableFilter" [fixedHeader]="fixedHeader" [multiSort]="multiSort" + [rowsSelectable]="rowsSelectable" [multiSelect]="multiSelect" [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" - [rowClassNameFn]="rowClassNameFn"> + [rowClassNameFn]="rowClassNameFn" + (rowClicked)="rowClickHandler($event)"> ` }) class TestHostComponent { @@ -45,14 +47,16 @@ class TestHostComponent { public tableComponent: StarkTableComponent; public columnProperties: StarkTableColumnProperties[]; - public dummyData: any[]; + public dummyData: object[]; public fixedHeader?: string; + public rowsSelectable?: boolean; public multiSelect?: string; public multiSort?: string; public tableRowsActionBarConfig: StarkActionBarConfig; public tableFilter: StarkTableFilter; public orderProperties?: string[]; - public rowClassNameFn?: (row: any, index: number) => string; + public rowClassNameFn?: (row: object, index: number) => string; + public rowClickHandler?: (row: object) => void; } /* tslint:disable:no-big-function */ @@ -177,6 +181,7 @@ describe("TableComponent", () => { it("should assign right value to isMultiSelectEnabled when multiSelect changes and adapt displayedColumns", () => { spyOn(component.displayedColumns, "unshift"); + hostComponent.rowsSelectable = true; hostComponent.multiSelect = "true"; hostFixture.detectChanges(); expect(component.isMultiSelectEnabled).toBe(true); @@ -489,7 +494,7 @@ describe("TableComponent", () => { }); describe("applyFilter", () => { - function assertFilteredData(tableComponent: StarkTableComponent, tableFilter: StarkTableFilter, expectedData: any[]): void { + function assertFilteredData(tableComponent: StarkTableComponent, tableFilter: StarkTableFilter, expectedData: object[]): void { hostComponent.tableFilter = tableFilter; hostFixture.detectChanges(); // trigger data binding tableComponent.ngAfterViewInit(); @@ -712,7 +717,7 @@ describe("TableComponent", () => { describe("getUnmetFilterCriteria", () => { it("should return an empty criteria array when the item met ALL the filter criteria", () => { const itemStr: string = "some dummy item string"; - const itemObj: any = { + const itemObj: object = { name: "some dummy name", user: "item string" }; @@ -726,7 +731,7 @@ describe("TableComponent", () => { it("should return a non-empty criteria array when the item met SOME or NONE filter criteria", () => { const itemStr: string = "some dummy item string"; - const itemObj: any = { + const itemObj: object = { name: "some dummy name", user: "item string" }; @@ -880,13 +885,7 @@ describe("TableComponent", () => { hostComponent.tableFilter = { globalFilterValue: dummyGlobalFilterValue, resetGlobalFilterOnDataChange: false, - columns: [ - { - columnName: "a", - filterValue: dummyColumnFilterValue, - resetFilterOnDataChange: false - } - ] + columns: [{ columnName: "a", filterValue: dummyColumnFilterValue, resetFilterOnDataChange: false }] }; hostFixture.detectChanges(); // trigger data binding component.ngAfterViewInit(); @@ -899,8 +898,12 @@ describe("TableComponent", () => { }); describe("setStyling", () => { - const dummyData: any[] = [{ id: 1, description: "dummy 1" }, { id: 2, description: "dummy 2" }, { id: 3, description: "dummy 3" }]; - const returnEvenAndOdd: (row: any, index: number) => string = (_row: any, index: number): string => + const dummyData: object[] = [ + { id: 1, description: "dummy 1" }, + { id: 2, description: "dummy 2" }, + { id: 3, description: "dummy 3" } + ]; + const returnEvenAndOdd: (row: object, index: number) => string = (_row: object, index: number): string => (index + 1) % 2 === 0 ? "even" : "odd"; // offset index with 1 beforeEach(() => { @@ -951,4 +954,82 @@ describe("TableComponent", () => { ); }); }); + + describe("rowClick", () => { + const dummyData: object[] = [ + { id: 1, description: "dummy 1" }, + { id: 2, description: "dummy 2" }, + { + id: 3, + description: "dummy 3" + } + ]; + + beforeEach(() => { + hostComponent.columnProperties = [{ name: "id" }, { name: "description" }]; + hostComponent.dummyData = dummyData; + + hostFixture.detectChanges(); // trigger data binding + component.ngAfterViewInit(); + }); + + it("should emit event when row is clicked", () => { + // set observer + hostComponent.rowClickHandler = () => undefined; // add empty function so spy can find it + spyOn(hostComponent, "rowClickHandler"); + hostFixture.detectChanges(); + + // get a row + const rowElement: HTMLElement | null = hostFixture.nativeElement.querySelector("tbody tr"); + if (!rowElement) { + fail("No row element found"); + return; + } + + // click on the row + rowElement.dispatchEvent(new Event("click")); + hostFixture.detectChanges(); + + // listener should be called with the data of the first row + expect(hostComponent.rowClickHandler).toHaveBeenCalled(); + expect(hostComponent.rowClickHandler).toHaveBeenCalledWith(dummyData[0]); + + // the row should not have been selected + expect(component.selection.isSelected(dummyData[0])).toBe(false); + }); + }); + + describe("selection", () => { + const dummyData: object[] = [ + { id: 1, description: "dummy 1" }, + { id: 2, description: "dummy 2" }, + { + id: 3, + description: "dummy 3" + } + ]; + + beforeEach(() => { + hostComponent.columnProperties = [{ name: "id" }, { name: "description" }]; + hostComponent.dummyData = dummyData; + hostComponent.rowsSelectable = true; + + hostFixture.detectChanges(); // trigger data binding + component.ngAfterViewInit(); + }); + + it("should emit event when row is selected", () => { + spyOn(component.selectChanged, "emit"); + + const checkboxElement: HTMLElement | null = hostFixture.nativeElement.querySelector("table tbody tr input[type=checkbox]"); + if (!checkboxElement) { + fail("Checkbox not found."); + return; + } + checkboxElement.dispatchEvent(new Event("click")); + hostFixture.detectChanges(); + + expect(component.selectChanged.emit).toHaveBeenCalledWith([dummyData[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 a563fbfe40..68e8d39e5d 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.ts @@ -9,6 +9,7 @@ import { Inject, Input, OnChanges, + OnDestroy, OnInit, Output, QueryList, @@ -20,8 +21,9 @@ import { } from "@angular/core"; import { MatDialog, MatDialogRef } from "@angular/material/dialog"; import { MatColumnDef, MatTable, MatTableDataSource } from "@angular/material/table"; -import { SelectionModel } from "@angular/cdk/collections"; +import { SelectionChange, SelectionModel } from "@angular/cdk/collections"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { Subscription } from "rxjs"; import { StarkTableColumnComponent, StarkTableColumnSortingDirection } from "./column.component"; import { StarkSortingRule, StarkTableMultisortDialogComponent, StarkTableMultisortDialogData } from "./dialogs/multisort.component"; @@ -53,7 +55,7 @@ const componentName: string = "stark-table"; } }) /* tslint:enable */ -export class StarkTableComponent extends AbstractStarkUiComponent implements OnInit, AfterContentInit, AfterViewInit, OnChanges { +export class StarkTableComponent extends AbstractStarkUiComponent implements OnInit, AfterContentInit, AfterViewInit, OnChanges, OnDestroy { /** * Array of {@link StarkColumnProperties} objects which define the columns of the data table. */ @@ -76,7 +78,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI * Data that will be display inside your table. */ @Input() - public data: any[]; + public data: object[]; /** * Object which contains filtering information for the table. @@ -103,6 +105,12 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI @Input() public htmlId: string; + /** + * Determine if you can select the rows in the table + */ + @Input() + public rowsSelectable?: boolean; + /** * Allows multiple row selection. Setting the attribute to "true" or empty will enable this feature. */ @@ -143,7 +151,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI * Function to generate classNames for rows */ @Input() - public rowClassNameFn?: (row: any, index: number) => string; + public rowClassNameFn?: (row: object, index: number) => string; /** * Output event emitter that will emit the latest global filter value whenever it changes. @@ -166,16 +174,23 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI public paginationChanged: EventEmitter = new EventEmitter(); /** - * Output event emitter that will emit the array of columns selected (column id's). + * Output event emitter that will emit the array of selected rows. */ @Output() - public selectChanged: EventEmitter = new EventEmitter(); + public selectChanged: EventEmitter = new EventEmitter(); + + /** + * Output event emitter that will emit the data of a row when it is clicked. + * If there are no observers it will not emit, but instead select the row. + */ + @Output() + public rowClicked: EventEmitter = new EventEmitter(); /** * Reference to the MatTable embedded in this component */ @ViewChild(MatTable) - public table: MatTable; + public table: MatTable; /** * Reference to the MatPaginator embedded in this component @@ -213,12 +228,12 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI /** * MatTableDataSource associated to the MatTable embedded in this component */ - public dataSource: MatTableDataSource; + public dataSource: MatTableDataSource; /** * Array of columns (column id's) to be displayed in the table. */ - public displayedColumns: string[]; + public displayedColumns: string[] = []; /** * Whether the fixed header is enabled. @@ -238,12 +253,19 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI /** * Whether the multiple row selection is enabled. */ - public isMultiSelectEnabled: boolean = false; + public get isMultiSelectEnabled(): boolean { + return StarkComponentUtil.isInputEnabled(this.multiSelect); + } + + /** + * @ignore + */ + private _selectionSub: Subscription; /** * Angular CDK selection model used for the "master" selection of the table */ - public selection: SelectionModel = new SelectionModel(true, []); + public selection: SelectionModel = new SelectionModel(true, []); /** * Class constructor @@ -268,7 +290,8 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI */ public ngOnInit(): void { this.logger.debug(componentName + ": component initialized"); - this.displayedColumns = []; + + this._resetSelection(); if (this.customTableActionsType === "regular") { this.customTableRegularActions = { actions: this.customTableActions || [] }; @@ -336,13 +359,27 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI this.isMultiSortEnabled = StarkComponentUtil.isInputEnabled(this.multiSort); } - if (changes["multiSelect"]) { - this.isMultiSelectEnabled = StarkComponentUtil.isInputEnabled(this.multiSelect); - - if (this.isMultiSelectEnabled && this.displayedColumns) { - this.displayedColumns.unshift("select"); + if (changes["rowsSelectable"]) { + if (this.rowsSelectable) { + if (!this.displayedColumns.includes("select")) { + this.displayedColumns.unshift("select"); + } + } else { + const i: number = this.displayedColumns.indexOf("select"); + this.displayedColumns.splice(i); } } + + if (changes["multiSelect"]) { + this._resetSelection(); + } + } + + /** + * Component lifecycle hook + */ + public ngOnDestroy(): void { + this._selectionSub.unsubscribe(); } /** @@ -420,7 +457,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI this.starkPaginator.emitMatPaginationEvent(); - this.dataSource.filterPredicate = (rowData: any, globalFilter: string) => { + this.dataSource.filterPredicate = (rowData: object, globalFilter: string) => { const matchFilter: boolean[] = []; if (globalFilter !== "%empty%") { @@ -574,6 +611,22 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI } } + /** + * @ignore + */ + private _resetSelection(): void { + this.selection = new SelectionModel(this.isMultiSelectEnabled, []); + + // Emit event when selection changes + if (this._selectionSub) { + this._selectionSub.unsubscribe(); + } + this._selectionSub = this.selection.changed.subscribe((change: SelectionChange) => { + const selected: object[] = change.source.selected; + this.selectChanged.emit(selected); + }); + } + /** * Sort the data according to the direction and priority (if any) defined for each column. * In case there is a compareFn defined for any of the columns then such method is called to perform the custom sorting. @@ -591,7 +644,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI this.isMultiSorting = sortableColumns.length > 1; - this.data.sort((row1: any, row2: any) => { + this.data.sort((row1: object, row2: object) => { for (const column of sortableColumns) { const isAscendingDirection: boolean = column.sortDirection === "asc"; if (column.compareFn instanceof Function) { @@ -725,13 +778,42 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI } /** - * Gets the class for a specific row if a rowClassNameFn function has been given as an Input + * Gets the class for a specific row if a rowClassNameFn function has been given as an Input. + * Also checks if the row is selected. * @param row - The data object passed to the row. * @param index - The index of the row. - * @returns The className generated by the rowClassNameFn function + * @returns The classNames generated by the rowClassNameFn function */ - public getRowClasses(row: any, index: number): string { - return typeof this.rowClassNameFn === "function" ? this.rowClassNameFn(row, index) : ""; + public getRowClasses(row: object, index: number): string { + const classes: string[] = []; + + //Check if selected + if (this.selection && this.selection.isSelected(row)) { + classes.push("selected"); + } + // Run rowClassNameFn + if (typeof this.rowClassNameFn === "function") { + classes.push(this.rowClassNameFn(row, index)); + } + + return classes.join(" ") || ""; + } + + /** + * Handles if a row is clicked. If there are listeners on the rowClick event of the table these should handle the event. + * If there are no listeners we fall back to the default behaviour, which is (de)selecting the row (if rowsSelectable is enabled) + * @param row - The data object passed to the row + */ + public onRowClick(row: object): void { + if (this.rowClicked.observers.length > 0) { + // If there is an observer, emit an event + this.rowClicked.emit(row); + } else if (this.rowsSelectable) { + // If multi-select is enabled, (un)select the row + this.selection.toggle(row); + } else { + // Do nothing + } } /** diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 4fdb43df46..21649ad713 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -63,6 +63,7 @@ import { SharedModule } from "../shared/shared.module"; import { DEMO_STATES } from "./routes"; import { TableRegularComponent, + TableWithSelectionComponent, TableWithCustomActionsComponent, TableWithTranscludedActionBarComponent, TableWithFixedHeaderComponent, @@ -131,6 +132,7 @@ import { DemoSliderComponent, DemoTableComponent, TableRegularComponent, + TableWithSelectionComponent, TableWithCustomActionsComponent, TableWithTranscludedActionBarComponent, TableWithFixedHeaderComponent, @@ -162,8 +164,7 @@ import { DemoSliderComponent, DemoTableComponent, DemoToastComponent, - DemoTypographyComponent, - DemoTableComponent + DemoTypographyComponent ], providers: [{ provide: MAT_DATE_FORMATS, useValue: STARK_DATE_FORMATS }] }) diff --git a/showcase/src/app/demo/table/components/index.ts b/showcase/src/app/demo/table/components/index.ts index 96f7dd0feb..27d50b8763 100644 --- a/showcase/src/app/demo/table/components/index.ts +++ b/showcase/src/app/demo/table/components/index.ts @@ -1,4 +1,5 @@ export * from "./table-regular/table-regular.component"; +export * from "./table-with-selection/table-with-selection"; export * from "./table-with-custom-actions/table-with-custom-actions.component"; export * from "./table-with-transcluded-action-bar/table-with-transcluded-action-bar.component"; export * from "./table-with-fixed-header/table-with-fixed-header.component"; diff --git a/showcase/src/app/demo/table/components/table-regular/table-regular.component.html b/showcase/src/app/demo/table/components/table-regular/table-regular.component.html index 1f5e1829db..66950c18a7 100644 --- a/showcase/src/app/demo/table/components/table-regular/table-regular.component.html +++ b/showcase/src/app/demo/table/components/table-regular/table-regular.component.html @@ -5,6 +5,7 @@ [orderProperties]="order" [paginationConfig]="pagination" [tableRowsActionBarConfig]="rowActionBarConfig" - multiSort> + multiSort + (rowClicked)="handleRowClicked($event)">

SHOWCASE.DEMO.TABLE.REGULAR

diff --git a/showcase/src/app/demo/table/components/table-regular/table-regular.component.ts b/showcase/src/app/demo/table/components/table-regular/table-regular.component.ts index 0c3a9c7e6a..d9fc569f41 100644 --- a/showcase/src/app/demo/table/components/table-regular/table-regular.component.ts +++ b/showcase/src/app/demo/table/components/table-regular/table-regular.component.ts @@ -2,7 +2,7 @@ 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"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -24,7 +24,7 @@ const DUMMY_DATA: any[] = [ encapsulation: ViewEncapsulation.None // Important }) export class TableRegularComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -46,10 +46,10 @@ export class TableRegularComponent implements OnInit { { name: "title", label: "Title", - cellFormatter: (value: any): string => "~" + value.label, + cellFormatter: (value: { label: string }): string => "~" + value.label, isFilterable: true, isSortable: true, - compareFn: (n1: any, n2: any) => n1.value - n2.value + compareFn: (n1: { value: number }, n2: { value: number }) => n1.value - n2.value }, { name: "description", label: "Description", isFilterable: true, isSortable: true } ]; @@ -62,9 +62,25 @@ export class TableRegularComponent implements OnInit { this.rowActionBarConfig = { actions: [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: true }, - { id: "delete-item", label: "STARK.ICONS.DELETE_ITEM", icon: "delete", actionCall: this.logger.debug, isEnabled: false } + { + 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: false + } ] }; } + + public handleRowClicked(data: object): void { + this.logger.debug("ROW CLICKED:", data); + } } diff --git a/showcase/src/app/demo/table/components/table-with-custom-actions/table-with-custom-actions.component.ts b/showcase/src/app/demo/table/components/table-with-custom-actions/table-with-custom-actions.component.ts index ba7ccef6b7..c56d978533 100644 --- a/showcase/src/app/demo/table/components/table-with-custom-actions/table-with-custom-actions.component.ts +++ b/showcase/src/app/demo/table/components/table-with-custom-actions/table-with-custom-actions.component.ts @@ -2,7 +2,7 @@ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -22,7 +22,7 @@ const DUMMY_DATA: any[] = [ templateUrl: "./table-with-custom-actions.component.html" }) export class TableWithCustomActionsComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -39,7 +39,7 @@ export class TableWithCustomActionsComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; @@ -48,8 +48,20 @@ export class TableWithCustomActionsComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; this.tableActions = [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: false }, - { id: "reload", label: "STARK.ICONS.RELOAD_PAGE", icon: "autorenew", actionCall: this.logger.debug, isEnabled: true } + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT:", $event, data), + isEnabled: false + }, + { + id: "reload", + label: "STARK.ICONS.RELOAD_PAGE", + icon: "autorenew", + actionCall: ($event: Event, data: object) => this.logger.debug("RELOAD:", $event, data), + isEnabled: true + } ]; } } diff --git a/showcase/src/app/demo/table/components/table-with-custom-styling/table-with-custom-styling.component.ts b/showcase/src/app/demo/table/components/table-with-custom-styling/table-with-custom-styling.component.ts index 730a522cf7..9f96997dd3 100644 --- a/showcase/src/app/demo/table/components/table-with-custom-styling/table-with-custom-styling.component.ts +++ b/showcase/src/app/demo/table/components/table-with-custom-styling/table-with-custom-styling.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core"; import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -23,7 +23,7 @@ const DUMMY_DATA: any[] = [ encapsulation: ViewEncapsulation.None // Important }) export class TableWithCustomStylingComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -31,7 +31,7 @@ export class TableWithCustomStylingComponent implements OnInit { public pagination: StarkPaginationConfig; - public getRowClassName: (_row: any, index: number) => string; + public getRowClassName: (_row: object, index: number) => string; public ngOnInit(): void { this.data = DUMMY_DATA; @@ -41,7 +41,7 @@ export class TableWithCustomStylingComponent implements OnInit { { name: "title", label: "Title", - cellFormatter: (value: any): string => "~" + value.label, + cellFormatter: (value: { label: string }): string => "~" + value.label, cellClassName: (title: { value: number }) => (title.value < 5 ? "danger" : title.value < 9 ? "warning" : "success") }, { name: "description", label: "Description" } @@ -51,6 +51,6 @@ export class TableWithCustomStylingComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; - this.getRowClassName = (_row: any, index: number) => (index % 2 === 0 ? "even" : "odd"); + this.getRowClassName = (_row: object, index: number) => (index % 2 === 0 ? "even" : "odd"); } } diff --git a/showcase/src/app/demo/table/components/table-with-fixed-header/table-with-fixed-header.component.ts b/showcase/src/app/demo/table/components/table-with-fixed-header/table-with-fixed-header.component.ts index 40ef192245..44b8d15834 100644 --- a/showcase/src/app/demo/table/components/table-with-fixed-header/table-with-fixed-header.component.ts +++ b/showcase/src/app/demo/table/components/table-with-fixed-header/table-with-fixed-header.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from "@angular/core"; import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -21,7 +21,7 @@ const DUMMY_DATA: any[] = [ templateUrl: "./table-with-fixed-header.component.html" }) export class TableWithFixedHeaderComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -34,7 +34,7 @@ export class TableWithFixedHeaderComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; diff --git a/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.component.html b/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.component.html new file mode 100644 index 0000000000..0a9c5adb49 --- /dev/null +++ b/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.component.html @@ -0,0 +1,9 @@ + +

SHOWCASE.DEMO.TABLE.WITH_SELECTION

+ diff --git a/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.ts b/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.ts new file mode 100644 index 0000000000..72fd51b422 --- /dev/null +++ b/showcase/src/app/demo/table/components/table-with-selection/table-with-selection.ts @@ -0,0 +1,56 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; + +const DUMMY_DATA: object[] = [ + { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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-selection", + templateUrl: "./table-with-selection.component.html" +}) +export class TableWithSelectionComponent implements OnInit { + public data: object[]; + + public columns: StarkTableColumnProperties[]; + + public filter: StarkTableFilter; + + public pagination: StarkPaginationConfig; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.data = DUMMY_DATA; + + this.columns = [ + { name: "id", label: "Id", isFilterable: true, isSortable: true }, + { + name: "title", + label: "Title", + cellFormatter: (value: { label: string }): string => "~" + value.label + }, + { name: "description", label: "Description" } + ]; + + this.filter = { globalFilterPresent: false, columns: [] }; + + this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; + } + + public handleRowSelected(data: object[]): void { + this.logger.debug("SELECTED ROW:", data); + } +} diff --git a/showcase/src/app/demo/table/components/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts b/showcase/src/app/demo/table/components/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts index cf443c8f2c..58582431c8 100644 --- a/showcase/src/app/demo/table/components/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts +++ b/showcase/src/app/demo/table/components/table-with-transcluded-action-bar/table-with-transcluded-action-bar.component.ts @@ -2,7 +2,7 @@ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -23,7 +23,7 @@ const DUMMY_DATA: any[] = [ styleUrls: ["./table-with-transcluded-action-bar.scss"] }) export class TableWithTranscludedActionBarComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -40,7 +40,7 @@ export class TableWithTranscludedActionBarComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; @@ -49,8 +49,20 @@ export class TableWithTranscludedActionBarComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; this.tableActions = [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: false }, - { id: "reload", label: "STARK.ICONS.RELOAD_PAGE", icon: "autorenew", actionCall: this.logger.debug, isEnabled: true } + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT:", $event, data), + isEnabled: false + }, + { + id: "reload", + label: "STARK.ICONS.RELOAD_PAGE", + icon: "autorenew", + actionCall: ($event: Event, data: object) => this.logger.debug("RELOAD:", $event, data), + isEnabled: true + } ]; } } diff --git a/showcase/src/app/demo/table/demo-table.component.html b/showcase/src/app/demo/table/demo-table.component.html index f4d7fe6cc0..dab59edec2 100644 --- a/showcase/src/app/demo/table/demo-table.component.html +++ b/showcase/src/app/demo/table/demo-table.component.html @@ -7,6 +7,12 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ + + + diff --git a/showcase/src/assets/examples/table/regular/table.html b/showcase/src/assets/examples/table/regular/table.html index 7647efd3c8..47b3535b7f 100644 --- a/showcase/src/assets/examples/table/regular/table.html +++ b/showcase/src/assets/examples/table/regular/table.html @@ -5,6 +5,7 @@ [orderProperties]="order" [paginationConfig]="pagination" [tableRowsActionBarConfig]="rowActionBarConfig" - multiSort> + multiSort + (rowClicked)="handleRowClicked($event)">

Regular Table

diff --git a/showcase/src/assets/examples/table/regular/table.ts b/showcase/src/assets/examples/table/regular/table.ts index 0c3a9c7e6a..d9fc569f41 100644 --- a/showcase/src/assets/examples/table/regular/table.ts +++ b/showcase/src/assets/examples/table/regular/table.ts @@ -2,7 +2,7 @@ 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"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -24,7 +24,7 @@ const DUMMY_DATA: any[] = [ encapsulation: ViewEncapsulation.None // Important }) export class TableRegularComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -46,10 +46,10 @@ export class TableRegularComponent implements OnInit { { name: "title", label: "Title", - cellFormatter: (value: any): string => "~" + value.label, + cellFormatter: (value: { label: string }): string => "~" + value.label, isFilterable: true, isSortable: true, - compareFn: (n1: any, n2: any) => n1.value - n2.value + compareFn: (n1: { value: number }, n2: { value: number }) => n1.value - n2.value }, { name: "description", label: "Description", isFilterable: true, isSortable: true } ]; @@ -62,9 +62,25 @@ export class TableRegularComponent implements OnInit { this.rowActionBarConfig = { actions: [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: true }, - { id: "delete-item", label: "STARK.ICONS.DELETE_ITEM", icon: "delete", actionCall: this.logger.debug, isEnabled: false } + { + 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: false + } ] }; } + + public handleRowClicked(data: object): void { + this.logger.debug("ROW CLICKED:", data); + } } diff --git a/showcase/src/assets/examples/table/with-custom-actions/table.ts b/showcase/src/assets/examples/table/with-custom-actions/table.ts index ba7ccef6b7..c56d978533 100644 --- a/showcase/src/assets/examples/table/with-custom-actions/table.ts +++ b/showcase/src/assets/examples/table/with-custom-actions/table.ts @@ -2,7 +2,7 @@ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -22,7 +22,7 @@ const DUMMY_DATA: any[] = [ templateUrl: "./table-with-custom-actions.component.html" }) export class TableWithCustomActionsComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -39,7 +39,7 @@ export class TableWithCustomActionsComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; @@ -48,8 +48,20 @@ export class TableWithCustomActionsComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; this.tableActions = [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: false }, - { id: "reload", label: "STARK.ICONS.RELOAD_PAGE", icon: "autorenew", actionCall: this.logger.debug, isEnabled: true } + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT:", $event, data), + isEnabled: false + }, + { + id: "reload", + label: "STARK.ICONS.RELOAD_PAGE", + icon: "autorenew", + actionCall: ($event: Event, data: object) => this.logger.debug("RELOAD:", $event, data), + isEnabled: true + } ]; } } diff --git a/showcase/src/assets/examples/table/with-custom-styling/table.scss b/showcase/src/assets/examples/table/with-custom-styling/table.scss index 9be5215e81..5f3af9636d 100644 --- a/showcase/src/assets/examples/table/with-custom-styling/table.scss +++ b/showcase/src/assets/examples/table/with-custom-styling/table.scss @@ -6,7 +6,7 @@ // Id cell class .large { font-weight: bold; - font-size: 30px; + font-size: 20px; } // Title cell classes diff --git a/showcase/src/assets/examples/table/with-custom-styling/table.ts b/showcase/src/assets/examples/table/with-custom-styling/table.ts index 730a522cf7..9f96997dd3 100644 --- a/showcase/src/assets/examples/table/with-custom-styling/table.ts +++ b/showcase/src/assets/examples/table/with-custom-styling/table.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core"; import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -23,7 +23,7 @@ const DUMMY_DATA: any[] = [ encapsulation: ViewEncapsulation.None // Important }) export class TableWithCustomStylingComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -31,7 +31,7 @@ export class TableWithCustomStylingComponent implements OnInit { public pagination: StarkPaginationConfig; - public getRowClassName: (_row: any, index: number) => string; + public getRowClassName: (_row: object, index: number) => string; public ngOnInit(): void { this.data = DUMMY_DATA; @@ -41,7 +41,7 @@ export class TableWithCustomStylingComponent implements OnInit { { name: "title", label: "Title", - cellFormatter: (value: any): string => "~" + value.label, + cellFormatter: (value: { label: string }): string => "~" + value.label, cellClassName: (title: { value: number }) => (title.value < 5 ? "danger" : title.value < 9 ? "warning" : "success") }, { name: "description", label: "Description" } @@ -51,6 +51,6 @@ export class TableWithCustomStylingComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; - this.getRowClassName = (_row: any, index: number) => (index % 2 === 0 ? "even" : "odd"); + this.getRowClassName = (_row: object, index: number) => (index % 2 === 0 ? "even" : "odd"); } } diff --git a/showcase/src/assets/examples/table/with-fixed-header/table.ts b/showcase/src/assets/examples/table/with-fixed-header/table.ts index 40ef192245..44b8d15834 100644 --- a/showcase/src/assets/examples/table/with-fixed-header/table.ts +++ b/showcase/src/assets/examples/table/with-fixed-header/table.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from "@angular/core"; import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -21,7 +21,7 @@ const DUMMY_DATA: any[] = [ templateUrl: "./table-with-fixed-header.component.html" }) export class TableWithFixedHeaderComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -34,7 +34,7 @@ export class TableWithFixedHeaderComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; diff --git a/showcase/src/assets/examples/table/with-selection/table.html b/showcase/src/assets/examples/table/with-selection/table.html new file mode 100644 index 0000000000..5029956e2d --- /dev/null +++ b/showcase/src/assets/examples/table/with-selection/table.html @@ -0,0 +1,9 @@ + +

Table with selection

+ diff --git a/showcase/src/assets/examples/table/with-selection/table.ts b/showcase/src/assets/examples/table/with-selection/table.ts new file mode 100644 index 0000000000..72fd51b422 --- /dev/null +++ b/showcase/src/assets/examples/table/with-selection/table.ts @@ -0,0 +1,56 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; + +const DUMMY_DATA: object[] = [ + { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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-selection", + templateUrl: "./table-with-selection.component.html" +}) +export class TableWithSelectionComponent implements OnInit { + public data: object[]; + + public columns: StarkTableColumnProperties[]; + + public filter: StarkTableFilter; + + public pagination: StarkPaginationConfig; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.data = DUMMY_DATA; + + this.columns = [ + { name: "id", label: "Id", isFilterable: true, isSortable: true }, + { + name: "title", + label: "Title", + cellFormatter: (value: { label: string }): string => "~" + value.label + }, + { name: "description", label: "Description" } + ]; + + this.filter = { globalFilterPresent: false, columns: [] }; + + this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; + } + + public handleRowSelected(data: object[]): void { + this.logger.debug("SELECTED ROW:", data); + } +} diff --git a/showcase/src/assets/examples/table/with-transcluded-action-bar/table.ts b/showcase/src/assets/examples/table/with-transcluded-action-bar/table.ts index cf443c8f2c..58582431c8 100644 --- a/showcase/src/assets/examples/table/with-transcluded-action-bar/table.ts +++ b/showcase/src/assets/examples/table/with-transcluded-action-bar/table.ts @@ -2,7 +2,7 @@ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { StarkAction, StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; -const DUMMY_DATA: any[] = [ +const DUMMY_DATA: object[] = [ { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number 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" }, @@ -23,7 +23,7 @@ const DUMMY_DATA: any[] = [ styleUrls: ["./table-with-transcluded-action-bar.scss"] }) export class TableWithTranscludedActionBarComponent implements OnInit { - public data: any[]; + public data: object[]; public columns: StarkTableColumnProperties[]; @@ -40,7 +40,7 @@ export class TableWithTranscludedActionBarComponent implements OnInit { this.columns = [ { name: "id", label: "Id" }, - { name: "title", label: "Title", cellFormatter: (value: any): string => "~" + value.label }, + { name: "title", label: "Title", cellFormatter: (value: { label: string }): string => "~" + value.label }, { name: "description", label: "Description" } ]; @@ -49,8 +49,20 @@ export class TableWithTranscludedActionBarComponent implements OnInit { this.pagination = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10 }; this.tableActions = [ - { id: "edit-item", label: "STARK.ICONS.EDIT_ITEM", icon: "pencil", actionCall: this.logger.debug, isEnabled: false }, - { id: "reload", label: "STARK.ICONS.RELOAD_PAGE", icon: "autorenew", actionCall: this.logger.debug, isEnabled: true } + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: object) => this.logger.debug("EDIT:", $event, data), + isEnabled: false + }, + { + id: "reload", + label: "STARK.ICONS.RELOAD_PAGE", + icon: "autorenew", + actionCall: ($event: Event, data: object) => this.logger.debug("RELOAD:", $event, data), + isEnabled: true + } ]; } } diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 70a715014b..2bd069e0e5 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -243,6 +243,7 @@ }, "TABLE": { "REGULAR": "Regular Table", + "WITH_SELECTION": "Table with selection", "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 0f8a564716..2fdd8a8ace 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -243,6 +243,7 @@ }, "TABLE": { "REGULAR": "Table régulière", + "WITH_SELECTION": "Table avec sélection", "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 4edf16f223..103e13f113 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -243,6 +243,7 @@ }, "TABLE": { "REGULAR": "Normale tabel", + "WITH_SELECTION": "Tabel met selectie", "WITH_CUSTOM_ACTIONS": "Tabel met aangepaste acties", "WITH_FIXED_HEADER": "Tabel met vaste header", "WITH_TRANSCLUDED_ACTION_BAR": "Tabel met 'transcluded' Action Bar", diff --git a/showcase/src/styles/_stark-styles.scss b/showcase/src/styles/_stark-styles.scss index bfc66db5c3..c7f11fd203 100644 --- a/showcase/src/styles/_stark-styles.scss +++ b/showcase/src/styles/_stark-styles.scss @@ -29,6 +29,7 @@ IMPORTANT: Stark styles are provided as SCSS styles so they should be imported i @import "~@nationalbankbelgium/stark-ui/src/modules/pagination/components/pagination-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/pretty-print/components/pretty-print.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/table/components/table.component"; +@import "~@nationalbankbelgium/stark-ui/src/modules/table/components/table-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/table/components/dialogs/multisort.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown-theme"; @import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification.component";