From 78c4ee119aa0b1148afceaa0c95ee1a1faa4c91f Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Fri, 17 Mar 2023 14:35:55 +0100
Subject: [PATCH] Improving table list display

---
 front/app/src/common/crud/list/list.component.css  | 3 +++
 front/app/src/common/crud/list/list.component.html | 6 +++---
 front/app/src/common/crud/list/list.component.ts   | 7 ++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/front/app/src/common/crud/list/list.component.css b/front/app/src/common/crud/list/list.component.css
index e69de29b..043108a4 100644
--- a/front/app/src/common/crud/list/list.component.css
+++ b/front/app/src/common/crud/list/list.component.css
@@ -0,0 +1,3 @@
+.table-row-link {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/front/app/src/common/crud/list/list.component.html b/front/app/src/common/crud/list/list.component.html
index 986298bd..726a9361 100644
--- a/front/app/src/common/crud/list/list.component.html
+++ b/front/app/src/common/crud/list/list.component.html
@@ -19,15 +19,15 @@
 		<span class="col col-form-label" i18n *ngIf="loading$ | async">Loading...</span>
 	</div>
 	<div class="table-responsive-md">
-		<table class="table table-striped">
+		<table class="table table-striped table-hover">
 			<thead>
 				<tr>
 					<th *ngFor="let col of this.displayedColumns" scope="col" sortable="name" (sort)="onSort($event)">{{ col.title }}</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr *ngFor="let row of listData$ | async" (click)="onSelect(row._id)">
-					<td *ngFor="let col of this.displayedColumns">
+				<tr *ngFor="let row of listData$ | async" (click)="onRowClick(row._id)" (auxclick)="onRowMiddleClick(row._id);" class="table-row-link">
+					<td class="text-truncate" *ngFor="let col of this.displayedColumns"  style="max-width: 150px;">
 						<ngb-highlight [result]="getColumnValue(row, col.path)" [term]="searchTerm"></ngb-highlight>
 					</td>
 				</tr>
diff --git a/front/app/src/common/crud/list/list.component.ts b/front/app/src/common/crud/list/list.component.ts
index 3e01f565..c916ce9d 100644
--- a/front/app/src/common/crud/list/list.component.ts
+++ b/front/app/src/common/crud/list/list.component.ts
@@ -144,10 +144,15 @@ export class ListComponent implements OnInit {
       this.sortDirection = direction;
   }
 
-  onSelect(id: string) {
+  onRowClick(id: string) {
       this.router.navigate([`../${id}`], {relativeTo: this.route});
   }
 
+  onRowMiddleClick(id: string) {
+      let newUrl = window.location.href.replace('list', id)
+      window.open(newUrl, '_blank');
+  }
+
   onCreate() {
       this.router.navigate([`../new`], {relativeTo: this.route});
   }