added possibility to open row in new tab for major grids

Author: EvgenySafronov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aquality-tracking-ui",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/elements/table-filter/table-filter.component.ts

@@ -734,7 +734,7 @@ export class TableFilterComponent implements OnInit, AfterViewInit, OnDestroy, O
     const canClick = notInlineEditorButton || (notClickableElement && notEditable);
 
     if (canClick) {
-      if ($event.ctrlKey || $event.metaKey) {
+      if (typeof this.urlGenerator == 'function' && ($event.ctrlKey || $event.metaKey)) {
         const url = this.urlGenerator(entity);
         window.open(`/#${url}`, '_blank');
       } else {

src/app/pages/administration/global/users/administration.users.component.html

@@ -1,5 +1,7 @@
 <app-modal *ngIf="tbCols && !hideModal" [title]="removeModalTitle" [message]="removeModalMessage" [type]="'warning'" [buttons]="[{name:'yes', execute:true }, {name:'no', execute:false}]"
     (execute)="execute($event)" (closed)="wasClosed()">
 </app-modal>
-<table-filter id="users-table" *ngIf="tbCols" [data]="users" [queryParams]="true" [columns]="tbCols" [hide]="hideVal" (rowClick)="rowClicked($event)" (customEvent)="resetPassword()" [allowCreate]="true" [allowDelete]="true" (dataChange)="updateUser($event)"
-    (action)="handleAction($event)" (createEntity)="createEntityChange($event)"></table-filter>
+<table-filter id="users-table" *ngIf="tbCols" [data]="users" [queryParams]="true" [columns]="tbCols" [hide]="hideVal"
+    (rowClick)="rowClicked($event)" (customEvent)="resetPassword()" [allowCreate]="true"
+    [allowDelete]="true" (dataChange)="updateUser($event)" (action)="handleAction($event)"
+    (createEntity)="createEntityChange($event)"></table-filter>

src/app/pages/audit/audit-list/audit.component.html

@@ -22,5 +22,5 @@ <h2>Audits Dashboard</h2>
 </div>
 <div *ngIf="stats && auditors && columns && services" class="col-sm-12 no-padding">
   <table-filter [data]="stats" [rowColors]="rowColors" [columns]="columns" [defaultSortBy]="defSort"
-    [queryParams]="true" (rowClick)="rowClicked($event)" rowsOnPage="20"></table-filter>
+    [queryParams]="true" [urlGenerator]="generateAuditUrl" (rowClick)="rowClicked($event)" rowsOnPage="20"></table-filter>
 </div>

src/app/pages/audit/audit-list/audit.component.ts

@@ -98,8 +98,12 @@ export class AuditComponent implements OnInit {
     BlobUtils.download(result.blob, filename);
   }
 
-  rowClicked($event) {
-    this.router.navigate([`/audit/${$event.id}`]);
+  generateAuditUrl(entity: AuditStat) {
+    return`/audit/${entity.id}`;
+  }
+
+  rowClicked($event: AuditStat) {
+    this.router.navigate([this.generateAuditUrl($event)]);
   }
 
   createColumns() {

src/app/pages/customer/customer-list/customer.component.html

@@ -13,6 +13,6 @@ <h2>Customers Dashboard</h2>
 
 <div class="col-sm-12 no-padding">
   <table-filter *ngIf="customers && columns" [data]="customers" [columns]="columns" [defaultSortBy]="defSort"
-    (action)="handleAction($event)" [allowDelete]="allowCreate" [queryParams]="true" (rowClick)="rowClicked($event)"
-    rowsOnPage="20"></table-filter>
+    (action)="handleAction($event)" [allowDelete]="allowCreate" [queryParams]="true" [urlGenerator]="generateCustomerUrl"
+    (rowClick)="rowClicked($event)" rowsOnPage="20"></table-filter>
 </div>

src/app/pages/customer/customer-list/customer.component.ts

@@ -62,8 +62,12 @@ export class CustomerComponent implements OnInit {
         ];
     }
 
-    rowClicked($event) {
-        this.router.navigate([`/customer/${$event.id}`]);
+    generateCustomerUrl(entity: Customer) {
+        return`/customer/${entity.id}`;
+    }
+
+    rowClicked($event: Customer) {
+        this.router.navigate([this.generateCustomerUrl($event)]);
     }
 
     handleAction($event) {

src/app/pages/project/issue/issue-list/issue-list.component.html

@@ -16,7 +16,7 @@ <h2 id="issues-list">Issues</h2>
   <issue-create-modal *ngIf="!hideCreateModal" (execute)="execute($event)" (closed)="wasClosed()" [resolutions]="resolutions" [users]="users"
   [existingIssues]="issues"></issue-create-modal>
   <table-filter id="issues-table" *ngIf="issues && columns" [data]="issues" [columns]="columns"
-    [hiddenColumns]="hiddenColumns" [defaultSortBy]="defSort" [queryParams]="true"
+    [hiddenColumns]="hiddenColumns" [defaultSortBy]="defSort" [queryParams]="true" [urlGenerator]="generateIssueUrl"
     (dataChange)="updateIssue($event)" (rowClick)="rowClicked($event)" rowsOnPage="20"
     (filterLookupChange)="handleFilterLookupChange($event)">
   </table-filter>

src/app/pages/project/issue/issue-list/issue-list.component.ts

@@ -142,8 +142,12 @@ export class IssueListComponent implements OnInit {
     this.hideCreateModal = true;
   }
 
-  rowClicked(issue: Issue) {
-    return this.router.navigate([`/project/${this.route.snapshot.params['projectId']}/issue/${issue.id}`]);
+  generateIssueUrl(entity: Issue) {
+    return `/project/${this.route.snapshot.params['projectId']}/issue/${entity.id}`;
+  }
+
+  rowClicked($event: Issue) {
+    return this.router.navigate([this.generateIssueUrl($event)]);
   }
 
   private async updateList() {

src/app/pages/project/milestone/list-milestone/list-milestone.component.html

@@ -9,5 +9,6 @@ <h2 id="milestones-list">Milestones</h2>
 
   <table-filter id="milestones-table" *ngIf="milestones && columns" [data]="milestones" [columns]="columns" [defaultSortBy]="defSort"
     (action)="handleAction($event)" [queryParams]="true" [allowDelete]="canEdit" [allowCreate]="canEdit"
-    (dataChange)="updateMilestone($event)" (rowClick)="rowClicked($event)" rowsOnPage="20"></table-filter>
+    [urlGenerator]="generateMilestoneUrl" (dataChange)="updateMilestone($event)" (rowClick)="rowClicked($event)"
+    rowsOnPage="20"></table-filter>
 </div>