feat: add events for row click and hover

hjalmers · Aug 30, 2022 · 1fdf8bd · 1fdf8bd
1 parent 9a124b7
commit 1fdf8bd
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 1 deletion.
diff --git 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"
         >
           <ng-container
             *ngFor="let column of table.config?.columns | keyvalue: columnOrder"
@@ -167,6 +171,12 @@
             *ngIf="!row.value?.hidden"
             [attr.id]="'tableRow_' + i"
             ngClass="{{ (row.key | dashCase) + '-row' }}"
+            (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"
           >
             <th class="row-header" scope="row">
               {{ row.value?.header || row.key | capitalCase }}

diff --git 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<GtRowClickEvent>();
+
+  _rowClick(row: TableRow, index: number, event: MouseEvent): void {
+    this.rowClick.emit({ row, index, event });
+  }
+
+  private _rowHover$ = new ReplaySubject<GtRowHoverEvent>(1);
+  @Output() rowHover = new EventEmitter<GtRowHoverEvent>();
+  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<boolean> {
     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
@@ -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
@@ -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
@@ -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';