diff --git a/projects/core/src/lib/core.component.html b/projects/core/src/lib/core.component.html index f40a54f..33ad9c7 100644 --- a/projects/core/src/lib/core.component.html +++ b/projects/core/src/lib/core.component.html @@ -112,6 +112,10 @@ let i = index " [attr.id]="'tableRow_' + i" + (click)="table?.config?.rowClick && _rowClick(row, i, $event)" + (mouseover)="table?.config?.rowHover && _hoverRow(row, i, $event)" + (mouseout)="table?.config?.rowHover && _hoverRow(null, null, $event)" + [class.gt-hover]="(rowHover$ | async)?.index === i" > {{ row.value?.header || row.key | capitalCase }} diff --git a/projects/core/src/lib/core.component.ts b/projects/core/src/lib/core.component.ts index 8c49797..4de7bc1 100644 --- a/projects/core/src/lib/core.component.ts +++ b/projects/core/src/lib/core.component.ts @@ -1,4 +1,10 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output, +} from '@angular/core'; import { BehaviorSubject, combineLatest, @@ -12,10 +18,14 @@ import { import { TableConfig } from './models/table-config.interface'; import { KeyValue } from '@angular/common'; import { + debounceTime, + distinctUntilChanged, map, shareReplay, startWith, switchMap, + take, + tap, withLatestFrom, } from 'rxjs/operators'; import { TableColumn } from './models/table-column.interface'; @@ -24,6 +34,10 @@ import { chunk, search } from './utilities/utilities'; import { TableRow } from './models/table-row.interface'; import { TableSort } from './models/table-sort.interface'; import { TableMeta } from './models/table-meta.interface'; +import { + GtRowClickEvent, + GtRowHoverEvent, +} from './models/table-events.interface'; @Component({ selector: 'angular-generic-table', @@ -55,6 +69,46 @@ export class CoreComponent { this._data$.next(data); } + @Output() rowClick = new EventEmitter(); + + _rowClick(row: TableRow, index: number, event: MouseEvent): void { + this.rowClick.emit({ row, index, event }); + } + + private _rowHover$ = new ReplaySubject(1); + @Output() rowHover = new EventEmitter(); + rowHover$ = this._rowHover$.asObservable().pipe( + debounceTime(50), + distinctUntilChanged((p, q) => p.index === q.index), + tap((event) => this.rowHover.emit(event)), + shareReplay(1) + ); + + hoverRow(id: string): void; + hoverRow(index: number): void; + hoverRow(none: null): void; + hoverRow(arg: string | number | null): void { + if (typeof arg === 'number') { + this.data$ + .pipe( + map((data) => data[arg]), + take(1) + ) + .subscribe((row) => this._hoverRow(row, arg)); + } else if (typeof arg === 'string') { + // TODO: implement hover by id + } else { + this._hoverRow(null, null); + } + } + _hoverRow( + row: TableRow | null, + index: number | null, + event?: MouseEvent + ): void { + this._rowHover$.next({ row, index, event }); + } + get loading$(): Observable { return this._loading$.pipe( startWith(false), diff --git a/projects/core/src/lib/models/table-config.interface.ts b/projects/core/src/lib/models/table-config.interface.ts index b71950a..0ee8dd0 100644 --- a/projects/core/src/lib/models/table-config.interface.ts +++ b/projects/core/src/lib/models/table-config.interface.ts @@ -1,4 +1,5 @@ import { TableColumn } from './table-column.interface'; +import { TableRow } from './table-row.interface'; export interface TableConfig { hidden?: boolean; @@ -17,4 +18,6 @@ export interface TableConfig { pagination?: { length?: number; }; + rowClick?: boolean; + rowHover?: boolean; } diff --git a/projects/core/src/lib/models/table-events.interface.ts b/projects/core/src/lib/models/table-events.interface.ts new file mode 100644 index 0000000..434b957 --- /dev/null +++ b/projects/core/src/lib/models/table-events.interface.ts @@ -0,0 +1,13 @@ +import { TableRow } from './table-row.interface'; + +export interface GtRowClickEvent { + row: TableRow; + index: number; + event: MouseEvent; +} + +export interface GtRowHoverEvent { + row: TableRow | null; + index: number | null; + event?: MouseEvent; +} diff --git a/projects/core/src/public-api.ts b/projects/core/src/public-api.ts index 8db6ebb..2211b4f 100644 --- a/projects/core/src/public-api.ts +++ b/projects/core/src/public-api.ts @@ -14,3 +14,4 @@ export * from './lib/models/table-info.interface'; export * from './lib/models/table-row.interface'; export * from './lib/models/table-sort.interface'; export * from './lib/models/table-meta.interface'; +export * from './lib/models/table-events.interface';