From b92d9c9e04e97e0d28b9be13fce906c862d958b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Mon, 23 Sep 2024 15:52:20 +0300
Subject: [PATCH] RED-9840: Allow to open global search results in a new
 browser tab

---
 .../search-item-template.component.html       | 112 +++++++++---------
 .../search-item-template.component.scss       |   5 +
 2 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.html b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.html
index a3683d8b2..ce87e4531 100644
--- a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.html
+++ b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.html
@@ -1,62 +1,64 @@
-<div class="cell filename">
-    <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
-        <span
-            *ngIf="item.highlights.filename; else defaultFilename"
-            [innerHTML]="sanitize(item.highlights.filename[0])"
-            class="highlights"
-        ></span>
-        <ng-template #defaultFilename>{{ item.filename }}</ng-template>
-    </div>
-
-    <ng-container *ngIf="item.highlights['sections.text'] as highlights">
-        <div *ngIf="highlights.length > 0" class="small-label">
-            <span [innerHTML]="sanitize(highlights[0])" class="highlights"></span>
+<a [routerLink]="item.routerLink" class="item-link">
+    <div class="cell filename">
+        <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
+            <span
+                *ngIf="item.highlights.filename; else defaultFilename"
+                [innerHTML]="sanitize(item.highlights.filename[0])"
+                class="highlights"
+            ></span>
+            <ng-template #defaultFilename>{{ item.filename }}</ng-template>
         </div>
-        <div *ngIf="highlights.length > 1" class="small-label">
-            <span [innerHTML]="sanitize(highlights[1])" class="highlights"></span>
+
+        <ng-container *ngIf="item.highlights['sections.text'] as highlights">
+            <div *ngIf="highlights.length > 0" class="small-label">
+                <span [innerHTML]="sanitize(highlights[0])" class="highlights"></span>
+            </div>
+            <div *ngIf="highlights.length > 1" class="small-label">
+                <span [innerHTML]="sanitize(highlights[1])" class="highlights"></span>
+            </div>
+        </ng-container>
+
+        <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
+            <span>
+                {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
+                    >&nbsp;<s>{{ term }}</s></span
+                >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
+                <span (click)="mustContain.emit(term)" *ngFor="let term of unmatched" iqserStopPropagation
+                    >&nbsp;<u>{{ term }}</u></span
+                >
+            </span>
         </div>
-    </ng-container>
-
-    <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
-        <span>
-            {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
-                >&nbsp;<s>{{ term }}</s></span
-            >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
-            <span (click)="mustContain.emit(term)" *ngFor="let term of unmatched" iqserStopPropagation
-                >&nbsp;<u>{{ term }}</u></span
-            >
-        </span>
     </div>
-</div>
 
-<div class="cell">
-    <iqser-initials-avatar [user]="item.assignee" [withName]="true"></iqser-initials-avatar>
-</div>
-
-<div class="cell">
-    <iqser-status-bar
-        [configs]="[
-            {
-                color: item.status,
-                label: fileStatusTranslations[item.status] | translate,
-                length: 1,
-                cssClass: 'all-caps-label'
-            }
-        ]"
-        [small]="true"
-    ></iqser-status-bar>
-</div>
-
-<div class="cell small-label full-opacity stats-subtitle">
-    <div>
-        <mat-icon *ngIf="item.archived" svgIcon="red:archive"></mat-icon>
-        <a [routerLink]="routerLink" iqserStopPropagation> {{ item.dossierName }}</a>
+    <div class="cell">
+        <iqser-initials-avatar [user]="item.assignee" [withName]="true"></iqser-initials-avatar>
     </div>
-</div>
 
-<div class="cell small-label stats-subtitle">
-    <div>
-        <mat-icon svgIcon="iqser:pages"></mat-icon>
-        {{ item.numberOfPages }}
+    <div class="cell">
+        <iqser-status-bar
+            [configs]="[
+                {
+                    color: item.status,
+                    label: fileStatusTranslations[item.status] | translate,
+                    length: 1,
+                    cssClass: 'all-caps-label',
+                },
+            ]"
+            [small]="true"
+        ></iqser-status-bar>
     </div>
-</div>
+
+    <div class="cell small-label full-opacity stats-subtitle">
+        <div>
+            <mat-icon *ngIf="item.archived" svgIcon="red:archive"></mat-icon>
+            <a [routerLink]="routerLink" iqserStopPropagation> {{ item.dossierName }}</a>
+        </div>
+    </div>
+
+    <div class="cell small-label stats-subtitle">
+        <div>
+            <mat-icon svgIcon="iqser:pages"></mat-icon>
+            {{ item.numberOfPages }}
+        </div>
+    </div>
+</a>
diff --git a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.scss b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.scss
index 7bf631ad2..d9b2dd141 100644
--- a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.scss
+++ b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.scss
@@ -7,3 +7,8 @@
         background-color: var(--iqser-highlight-color);
     }
 }
+
+a.item-link {
+    display: contents;
+    @include common-mixins.clear-a;
+}