Merge pull request #36 from bolzplatzarena/35-ganze-zeile-klickbar-ma…

…chen 35 ganze zeile klickbar machen
bolzplatzarena · Dec 9, 2023 · 2323432 · 2323432
2 parents 6390f75 + 892c3e0
commit 2323432
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 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
@@ -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>
@@ -53,7 +54,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
@@ -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
@@ -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
@@ -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) {

diff --git 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>