Skip to content

Commit

Permalink
feat(stark-ui): add rowClick event emitter to table component
Browse files Browse the repository at this point in the history
  - added event emitter to handle a row click
  - set default row click to selecting the row
  - fixed selecting rows
  - fixed action buttons propagation
  - added hover styling to rows
  - added test for row click
  - added example to demo page
  - fixed issue with double scrollbar
  - fixed issue with extra padding
  - added demo for table with selection
  - added test for selection in table
  - changed type of rows from any to object

ISSUES CLOSED: #795
  • Loading branch information
carlo-nomes committed Nov 22, 2018
1 parent 110901b commit 0182344
Show file tree
Hide file tree
Showing 35 changed files with 544 additions and 120 deletions.
1 change: 0 additions & 1 deletion packages/stark-ui/assets/styles/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ body {
-webkit-overflow-scrolling: touch;
& > ui-view {
flex: 1 0 auto;
padding: 16px;
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const translationsEn: object = {
TOGGLE_SELECTION: "Toggle selection",
SELECT_ALL: "Select all",
DESELECT_ALL: "Deselect all",
SELECT_DESELECT_ALL: "SELECT all/Deselect all",
SELECT_DESELECT_ALL: "Select all/Deselect all",
MORE: "More",
INDEX: "Index",
ACTIONS: "Actions",
Expand Down
19 changes: 19 additions & 0 deletions packages/stark-ui/src/modules/table/components/_table-theme.scss
Original file line number Diff line number Diff line change
@@ -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 */
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,26 @@
<div [ngSwitch]="sortDirection" class="sort-header" (click)="onSortChange()">
<span>{{ getHeaderLabel() }}</span>
<ng-container *ngIf="sortable" [ngSwitch]="sortDirection">
<mat-icon *ngSwitchCase="'asc'" starkSvgViewBox svgIcon="arrow-up" class="stark-small-icon"></mat-icon>
<mat-icon *ngSwitchCase="'desc'" starkSvgViewBox svgIcon="arrow-down" class="stark-small-icon"></mat-icon>
<mat-icon class="order-tip stark-small-icon" *ngSwitchDefault starkSvgViewBox svgIcon="arrow-up"></mat-icon>
<mat-icon *ngSwitchCase="'asc'"
starkSvgViewBox
svgIcon="arrow-up"
class="stark-small-icon"></mat-icon>
<mat-icon *ngSwitchCase="'desc'"
starkSvgViewBox
svgIcon="arrow-down"
class="stark-small-icon"></mat-icon>
<mat-icon class="order-tip stark-small-icon"
*ngSwitchDefault
starkSvgViewBox
svgIcon="arrow-up"></mat-icon>
</ng-container>
<span *ngIf="sortPriority < 1000 && sortDirection" class="priority">{{ sortPriority }}</span>
</div>
<button *ngIf="filterable" class="button-filter" [matMenuTriggerFor]="filterMenu" mat-icon-button>
<mat-icon class="stark-small-icon" starkSvgViewBox svgIcon="filter" [matTooltip]="'STARK.TABLE.TOGGLE_COLUMNS' | translate"></mat-icon>
<mat-icon class="stark-small-icon"
starkSvgViewBox
svgIcon="filter"
[matTooltip]="'STARK.TABLE.TOGGLE_COLUMNS' | translate"></mat-icon>
</button>
</div>
<mat-menu class="mat-table-filter" #filterMenu="matMenu" xPosition="before" [overlapTrigger]="false">
Expand All @@ -32,7 +44,6 @@
<!-- the column template defined by the user will be displayed here -->
<!-- and it will receive the right context containing the displayedValue and the row data-->
<td mat-cell *matCellDef="let rowItem" [ngClass]="getCellClassNames(rowItem)">
<ng-container
*ngTemplateOutlet="columnTemplate; context:{ $implicit: { rowData: rowItem, displayedValue: getDisplayedValue(rowItem) } }"></ng-container>
<ng-container *ngTemplateOutlet="columnTemplate; context:{ $implicit: { rowData: rowItem, displayedValue: getDisplayedValue(rowItem) } }"></ng-container>
</td>
</ng-container>
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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<any>;
public columnTemplate: TemplateRef<object>;

/**
* Class constructor
Expand All @@ -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) {
Expand All @@ -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);

Expand Down Expand Up @@ -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 "";
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,17 @@

<div [ngClass]="{'fixed-header': isFixedHeaderEnabled}">
<table #matTable mat-table [dataSource]="dataSource" [ngClass]="{'multi-sorting': isMultiSorting}">
<ng-container *ngIf="isMultiSelectEnabled" matColumnDef="select">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox *ngIf="isMultiSelectEnabled"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[matTooltip]="'STARK.TABLE.SELECT_DESELECT_ALL' | translate"></mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"></mat-checkbox>
[checked]="selection?.isSelected(row)"></mat-checkbox>
</td>
</ng-container>

Expand Down Expand Up @@ -80,7 +81,8 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isFixedHeaderEnabled"></tr>
<tr mat-row
*matRowDef="let row; columns: displayedColumns; let i = index;"
[ngClass]="getRowClasses(row, i)">
[ngClass]="getRowClasses(row, i)"
(click)="onRowClick(row)">
</tr>
</table>
</div>
Loading

0 comments on commit 0182344

Please sign in to comment.