From fab82308e42fd0ded65fd1d555b8676b15f591f6 Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Sat, 9 Dec 2023 10:46:51 +0100
Subject: [PATCH 1/3] feat: support click events on the complete row and show
 pointer

---
 .../table/inner-table/inner-table.component.html           | 7 ++++++-
 .../components/table/inner-table/inner-table.component.ts  | 2 ++
 .../src/lib/components/table/table.component.html          | 2 ++
 .../components/src/lib/components/table/table.component.ts | 4 +++-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/lib/components/table/inner-table/inner-table.component.html b/projects/components/src/lib/components/table/inner-table/inner-table.component.html
index 97ed128..f0e5874 100644
--- a/projects/components/src/lib/components/table/inner-table/inner-table.component.html
+++ b/projects/components/src/lib/components/table/inner-table/inner-table.component.html
@@ -53,7 +53,12 @@
   <tr *matHeaderRowDef="displayedColumns; sticky: true" mat-header-row></tr>
   <tr *matHeaderRowDef="['loading']; sticky: true" mat-header-row style="height: auto;"></tr>
 
-  <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+  <tr
+      *matRowDef="let row; columns: displayedColumns;"
+      [style]="rowClickedObserved ? 'cursor: pointer' : ''"
+      (click)="rowClickedObserved && rowClicked.emit(row)"
+      mat-row>
+  </tr>
 </table>
 <div class="tw-flex-1"></div>
 @if (paging && dataset) {
diff --git a/projects/components/src/lib/components/table/inner-table/inner-table.component.ts b/projects/components/src/lib/components/table/inner-table/inner-table.component.ts
index 2b30fe1..6e736af 100644
--- a/projects/components/src/lib/components/table/inner-table/inner-table.component.ts
+++ b/projects/components/src/lib/components/table/inner-table/inner-table.component.ts
@@ -72,12 +72,14 @@ export class InnerTableComponent<T> implements OnChanges, AfterViewInit {
   @Input() editIcon: IconName = 'address-card';
   @Input() edit = false;
   @Input() delete = false;
+  @Input() rowClickedObserved = false;
   @Input() progress = false;
   @Input() loading = true;
   @Input() pageSizeOptions = [10, 20, 50];
 
   @Output() readonly deleteEvent = new EventEmitter<T>();
   @Output() readonly editEvent = new EventEmitter<T>();
+  @Output() readonly rowClicked = new EventEmitter<T>();
 
   @ViewChild(MatPaginator) private readonly paginator !: MatPaginator;
   @ViewChild(MatSort) private readonly sort !: MatSort;
diff --git a/projects/components/src/lib/components/table/table.component.html b/projects/components/src/lib/components/table/table.component.html
index d25436c..f2d1ab2 100644
--- a/projects/components/src/lib/components/table/table.component.html
+++ b/projects/components/src/lib/components/table/table.component.html
@@ -6,6 +6,7 @@
       [paging]="paging"
       [edit]="edit"
       [delete]="delete"
+      [rowClickedObserved]="rowClickedObserved"
       [translateKey]="translateKey"
       [dataset]="innerData"
       [displayedColumns]="displayedColumns"
@@ -14,6 +15,7 @@
       [pageSizeOptions]="pageSizeOptions"
       (deleteEvent)="deleteAction($event)"
       (editEvent)="editAction($event)"
+      (rowClicked)="rowClicked.emit($event)"
       class="tw-flex tw-flex-col tw-flex-1">
     <ng-content></ng-content>
   </bpa-inner-table>
diff --git a/projects/components/src/lib/components/table/table.component.ts b/projects/components/src/lib/components/table/table.component.ts
index c37cf17..eed3410 100644
--- a/projects/components/src/lib/components/table/table.component.ts
+++ b/projects/components/src/lib/components/table/table.component.ts
@@ -24,13 +24,14 @@ export class TableComponent<T> implements OnChanges {
   @Input() editIcon: IconName = 'address-card';
   @Input() pageSizeOptions = [10, 20, 50];
 
+  @Output() readonly rowClicked = new EventEmitter<T>();
   @Output() readonly deleteEvent = new EventEmitter<T>();
   @Output() readonly editEvent = new EventEmitter<T>();
 
   protected loading = true;
   protected edit = false;
   protected delete = false;
-
+  protected rowClickedObserved = false;
   protected displayedColumns!: string[];
   protected innerData: T[] | undefined | null = [];
 
@@ -42,6 +43,7 @@ export class TableComponent<T> implements OnChanges {
   ngOnChanges(): void {
     this.delete = this.deleteEvent.observed;
     this.edit = this.editEvent.observed;
+    this.rowClickedObserved = this.rowClicked.observed;
 
     this.displayedColumns = [...this.columns];
     if (this.delete || this.edit) {

From d78a37274cb40e729fd1d025efb04f89067e6a20 Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Sat, 9 Dec 2023 10:47:04 +0100
Subject: [PATCH 2/3] feat: update example

---
 src/app/components/table/table.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index 60f09b8..5e95015 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -13,6 +13,7 @@ <h3 translate>content.headline.static_data</h3>
       [dataset]="data"
       [pageSizeOptions]="[7, 14, 21]"
       (deleteEvent)="die($event)"
+      (rowClicked)="view($event)"
       (editEvent)="view($event)"
       translateKey="hero.components.hero-list.">
   </bpa-table>

From 892c3e0f1adb7f5b1878f698471751a207fd27bd Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Sat, 9 Dec 2023 10:48:34 +0100
Subject: [PATCH 3/3] feat: avoid the click handles the click on the action
 column

---
 .../lib/components/table/inner-table/inner-table.component.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/components/src/lib/components/table/inner-table/inner-table.component.html b/projects/components/src/lib/components/table/inner-table/inner-table.component.html
index f0e5874..bb3269b 100644
--- a/projects/components/src/lib/components/table/inner-table/inner-table.component.html
+++ b/projects/components/src/lib/components/table/inner-table/inner-table.component.html
@@ -35,6 +35,7 @@
       <button
           [matMenuTriggerData]="{ element: element }"
           [matMenuTriggerFor]="menu"
+          (click)="$event.stopPropagation()"
           aria-label="Actions"
           mat-icon-button>
         <fa-icon icon="ellipsis-vertical"></fa-icon>