From f641624b3277ac3be8cbbb38e84cebd57d90bd23 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Mon, 10 Apr 2023 11:51:18 +0300
Subject: [PATCH] search page: show the search term in the title, above results

---
 .../displayClaims.component.html              |  2 +-
 .../displayClaims/displayClaims.component.ts  |  4 +--
 .../searchUtils/newSearchPage.component.html  | 13 ++++++---
 .../searchUtils/newSearchPage.component.ts    | 10 +++++++
 utils/resultsAndPagesNum.component.ts         | 28 ++++++++++++++-----
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index 8eba3930..2c5dd4eb 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -16,7 +16,7 @@
     </div>
     <div [class.uk-padding]="actions" class="uk-padding-remove-vertical">
       <div class="uk-margin-medium-top">
-        <results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size"
+        <results-and-pages [type]="resultsNum !== 1?'Links':'Link'" [page]="page" [pageSize]="size" [hasSearch]="true" [searchTerm]="keyword"
                            [totalResults]="resultsNum" customClasses="uk-margin-remove"></results-and-pages>
       </div>
       <div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
diff --git a/claims/claim-utils/displayClaims/displayClaims.component.ts b/claims/claim-utils/displayClaims/displayClaims.component.ts
index 0f9b03ad..84e90ca7 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.ts
+++ b/claims/claim-utils/displayClaims/displayClaims.component.ts
@@ -240,7 +240,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   
   handleErrors(err, message) {
     NotificationHandler.rise(message, "danger");
-    console.error("Dispaly Claims (component): " + message + " " + (err && err.error ? err.error : ''));
+    console.error("Display Claims (component): " + message + " " + (err && err.error ? err.error : ''));
   }
   
   goTo(page: number = 1) {
@@ -290,7 +290,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   }
   
   changeKeyword() {
-    if (this.filterForm.get("keyword") && (this.filterForm.get("keyword").value.length >= 3 || this.filterForm.get("keyword").value.length == 0)) {
+    if (this.filterForm.get("keyword") && (this.filterForm.get("keyword").value?.length >= 3 || this.filterForm.get("keyword").value?.length == 0)) {
       this.searchTermStream.next(this.filterForm.get("keyword").value);
     }
   }
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index 0f3bf4bf..d52614c8 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -255,12 +255,17 @@
               <div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-1-1 uk-child-width-auto@m" [class.uk-flex-between]="!mobile"
                    [class.uk-margin-top]="mobile">
                 <!-- Total results, number of pages -->
-                <div class="uk-margin-remove" [class.uk-h6]="!mobile" [class.uk-text-center]="mobile">
+                <div class="uk-width-xlarge@m uk-margin-remove-bottom uk-text-truncate uk-margin-medium-right" [class.uk-h6]="!mobile" [class.uk-text-center]="mobile">
                   <ng-container *ngIf="results && searchUtils.totalResults > 0">
                     <span>{{searchUtils.totalResults|number}}</span>
-                    <span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
-                    <span>{{searchUtils.page | number}}</span>
-                    <span class="uk-text-meta"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
+                    <span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
+                    <ng-container *ngIf="searchTerm && simpleView">
+                      <span class="uk-text-meta"> for </span>
+                      <span class="uk-text-bold">{{searchTerm}}</span>
+                    </ng-container>
+                    <!-- <ng-container *ngIf="!simpleView && advancedSearchTerms > 0">
+                      <span class="uk-text-bold"> ({{advancedSearchTerms}} rule{{advancedSearchTerms == 1 ? '' : 's'}} applied)</span>
+                    </ng-container> -->
                   </ng-container>
                   <ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
                     <span>{{oldTotalResults|number}}</span>
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index 6f6e5c10..83aa9045 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -151,6 +151,8 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
   showOffCanvas:boolean = false;
 	isMobile: boolean = false;
 	isServer: boolean;
+  searchTerm: string = null;
+  advancedSearchTerms: number = 0;
   
   constructor(private route: ActivatedRoute,
               private location: Location,
@@ -1689,6 +1691,14 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
     this.getRangeFiltersFromURL(params);
     this.getRefineFiltersFromURL(params);
     this.createAdvancedSearchSelectedFiltersFromURLParameters(params);
+    this.searchTerm = '';
+    if(params && params['fv0'] && params['f0'] && params['f0'] == 'q'){
+      let keyword = StringUtils.URIDecode(params['fv0']);
+      this.searchTerm = keyword;
+    }
+    if(params){
+      this.advancedSearchTerms = Object.keys(params).filter(key => key.includes('fv')).length;
+    }
   }
   
   removeResultType(type) {
diff --git a/utils/resultsAndPagesNum.component.ts b/utils/resultsAndPagesNum.component.ts
index e4de31f1..b41896bc 100644
--- a/utils/resultsAndPagesNum.component.ts
+++ b/utils/resultsAndPagesNum.component.ts
@@ -3,13 +3,25 @@ import {Component, Input} from "@angular/core";
 @Component({
   selector: 'results-and-pages',
   template: `
-    <h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
-      <span>{{totalResults | number}}</span>
-      <span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
-      <span>{{currentPage}}</span>
-      <span class="uk-text-meta"> of </span>
-      <span>{{getTotalPages() | number}}</span>
-    </h6>
+    <ng-container *ngIf="!hasSearch; else elseBlock">
+      <h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
+        <span>{{totalResults | number}}</span>
+        <span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
+        <span>{{currentPage}}</span>
+        <span class="uk-text-meta"> of </span>
+        <span>{{getTotalPages() | number}}</span>
+      </h6>
+    </ng-container>
+    <ng-template #elseBlock>
+      <h6 *ngIf="type && totalResults > 0" [ngClass]="customClasses">
+        <span>{{totalResults | number}}</span>
+        <span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
+        <ng-container *ngIf="searchTerm">
+          <span class="uk-text-meta"> for </span>
+          <span class="uk-text-bold">{{searchTerm}}</span>
+        </ng-container>
+      </h6>
+    </ng-template>
   `
 })
 
@@ -19,6 +31,8 @@ export class ResultsAndPagesNumComponent {
   @Input() pageSize: number = 10;
   @Input() totalResults: number = 0;
   @Input() customClasses: string = "";
+  @Input() hasSearch: boolean = false;
+  @Input() searchTerm: string;
 
   constructor() {}