From c476f48c78d4751885f231076712cb14f813bf3f Mon Sep 17 00:00:00 2001
From: "kim.tran" <kim.tran@capgemini.com>
Date: Thu, 9 Nov 2023 09:21:07 +0100
Subject: [PATCH] feat: trigger search on enter

---
 .../search-header.component.html              |  2 +-
 .../search-header/search-header.component.ts  | 33 +++++++++++++++++--
 package-lock.json                             |  6 ++--
 package.json                                  |  2 +-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html
index ac790725..21af9f25 100644
--- a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html
+++ b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.html
@@ -4,7 +4,7 @@
   [actions]="headerActions"
 >
   <div class="search-criteria-container">
-    <div>
+    <div #searchParameterFields>
       <ng-content></ng-content>
       <div class="search-criteria-buttons">
         <p-button
diff --git a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts
index 11a979c9..fdcd1749 100644
--- a/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/search-header/search-header.component.ts
@@ -1,12 +1,18 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'
 import { Action } from '../page-header/page-header.component'
 
+/**
+ * To trigger the search when Enter key is pressed inside a search parameter field,
+ * an EventListener for keyup enter event is added for HTML elements which have an input.
+ * Please add the EventListener yourself manually, if you want to have that functionality for some other elements
+ * which do not have an input element.
+ */
 @Component({
   selector: 'ocx-search-header',
   templateUrl: './search-header.component.html',
   styleUrls: ['./search-header.component.scss'],
 })
-export class SearchHeaderComponent {
+export class SearchHeaderComponent implements AfterViewInit {
   @Input() headline = ''
   @Input() manualBreadcrumbs = false
   _actions: Action[] = []
@@ -22,13 +28,20 @@ export class SearchHeaderComponent {
   @Output() searched: EventEmitter<any> = new EventEmitter()
   @Output() resetted: EventEmitter<any> = new EventEmitter()
 
+  @ViewChild('searchParameterFields') searchParameterFields: ElementRef | undefined
+
   viewMode: 'basic' | 'advanced' = 'basic'
   hasAdvanced = false
   headerActions: Action[] = []
 
+  ngAfterViewInit(): void {
+    this.addKeyUpEventListener()
+  }
+
   toggleViewMode() {
     this.viewMode = this.viewMode === 'basic' ? 'advanced' : 'basic'
     this.updateHeaderActions()
+    setTimeout(() => this.addKeyUpEventListener())
   }
 
   onResetClicked() {
@@ -54,4 +67,20 @@ export class SearchHeaderComponent {
     }
     this.headerActions = headerActions.concat(this.actions)
   }
+
+  addKeyUpEventListener() {
+    const inputElements = this.searchParameterFields?.nativeElement.querySelectorAll('input')
+    inputElements.forEach((inputElement: any) => {
+      if (!inputElement.listenerAdded) {
+        inputElement.addEventListener('keyup', (event: any) => this.onSearchKeyup(event))
+        inputElement.listenerAdded = true
+      }
+    })
+  }
+
+  onSearchKeyup(event: any) {
+    if (event.code === 'Enter') {
+      this.onSearchClicked()
+    }
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index ce5db428..9b7565bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@onecx/onecx-portal-ui-libs",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@onecx/onecx-portal-ui-libs",
-      "version": "3.0.1",
+      "version": "3.1.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@angular-architects/module-federation": "15.0.0",
@@ -35,7 +35,7 @@
         "ngx-color": "^8.0.3",
         "primeflex": "^3.3.0",
         "primeicons": "^6.0.1",
-        "primeng": "~15.2.1",
+        "primeng": "^15.2.1",
         "rxjs": "7.8.1",
         "tslib": "^2.5.0",
         "zod": "^3.22.1",
diff --git a/package.json b/package.json
index c5e591dd..fd687b41 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "ngx-color": "^8.0.3",
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
-    "primeng": "~15.2.1",
+    "primeng": "^15.2.1",
     "rxjs": "7.8.1",
     "tslib": "^2.5.0",
     "zod": "^3.22.1",