From ddb7515a73b99469aa6b0daa2204d6d4727c60b7 Mon Sep 17 00:00:00 2001
From: Henry Taeschner <henry.taeschner@capgemini.com>
Date: Wed, 31 Jul 2024 10:58:08 +0200
Subject: [PATCH] feat: fix use of select button in search criteria

---
 .../app-search/app-search.component.html      | 21 ++++++++++++-------
 .../app-search/app-search.component.ts        | 14 ++++++++++++-
 src/assets/i18n/de.json                       |  3 ++-
 src/assets/i18n/en.json                       |  3 ++-
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/app/product-store/app-search/app-search.component.html b/src/app/product-store/app-search/app-search.component.html
index 60132dc..75fc9ea 100644
--- a/src/app/product-store/app-search/app-search.component.html
+++ b/src/app/product-store/app-search/app-search.component.html
@@ -11,8 +11,8 @@
       <span class="p-float-label">
         <input
           pInputText
-          id="app_search_app_id"
           type="text"
+          id="app_search_criteria_app_id"
           class="w-18rem"
           formControlName="appId"
           [clear]="true"
@@ -20,13 +20,13 @@
           tooltipPosition="top"
           tooltipEvent="hover"
         />
-        <label for="app_search_app_id">{{ 'APP.APP_ID' | translate }}</label>
+        <label for="app_search_criteria_app_id">{{ 'APP.APP_ID' | translate }}</label>
       </span>
       <span class="p-float-label">
         <input
           pInputText
-          id="app_search_criteria_product_name"
           type="text"
+          id="app_search_criteria_product_name"
           class="w-18rem"
           formControlName="productName"
           [clear]="true"
@@ -39,14 +39,19 @@
       <div class="flex flex-wrap align-items-center ml-1 gap-2">
         <div
           class="p-selectbutton-title opacity-90 text-sm"
-          [pTooltip]="'ACTIONS.SEARCH.APP.QUICK_FILTER.TOOLTIP' | translate"
+          [pTooltip]="'ACTIONS.SEARCH.APP.FILTER.TOOLTIP' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         >
-          {{ 'ACTIONS.SEARCH.APP.FILTER.TOOLTIP' | translate }}
+          {{ 'ACTIONS.SEARCH.APP.FILTER.LABEL' | translate }}
         </div>
         <div class="slim-selectbutton search-criteria-selectbutton">
-          <p-selectButton inputid="app_search_criteria_app_type" [options]="appTypeItems" formControlName="appType">
+          <p-selectButton
+            inputid="app_search_criteria_app_type"
+            formControlName="appType"
+            [options]="appTypeItems"
+            (onChange)="onAppTypeFilterChange($event)"
+          >
             <ng-template let-item pTemplate
               ><span [pTooltip]="item.label | translate" tooltipPosition="top" tooltipEvent="hover">
                 {{ item.value }}</span
@@ -54,7 +59,7 @@
             >
           </p-selectButton>
           <div class="p-selectbutton-subtitle">
-            {{ 'ACTIONS.SEARCH.APP.QUICK_FILTER.' + appSearchCriteriaGroup.controls['appType'].value | translate }}
+            {{ 'ACTIONS.SEARCH.APP.QUICK_FILTER.' + appTypeFilterValue | translate }}
           </div>
         </div>
       </div>
@@ -93,7 +98,7 @@
               tooltipPosition="top"
               tooltipEvent="hover"
             >
-              {{ 'ACTIONS.SEARCH.APP.FILTER.TOOLTIP' | translate }}
+              {{ 'ACTIONS.SEARCH.APP.FILTER.LABEL' | translate }}
             </div>
             <div class="slim-selectbutton filter-selectbutton">
               <p-selectButton
diff --git a/src/app/product-store/app-search/app-search.component.ts b/src/app/product-store/app-search/app-search.component.ts
index e51173e..c32a7db 100644
--- a/src/app/product-store/app-search/app-search.component.ts
+++ b/src/app/product-store/app-search/app-search.component.ts
@@ -45,7 +45,9 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   public viewMode: 'grid' | 'list' = 'grid'
   public changeMode: ChangeMode = 'VIEW'
   public appTypeItems: SelectItem[]
-  public quickFilterValue: AppFilterType = 'ALL'
+  public appTypeFilterValue: string = 'ALL'
+  public quickFilterValueOld: string = 'ALL'
+  public quickFilterValue: string = 'ALL'
   public quickFilterItems: SelectItem[]
   public filterValue: string | undefined
   public filterValueDefault = 'appId,appType,productName,classifications'
@@ -276,7 +278,17 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   public onLayoutChange(viewMode: 'grid' | 'list'): void {
     this.viewMode = viewMode
   }
+
+  public onAppTypeFilterChange(ev: any): void {
+    // handle PrimeNG bug - start (each 2nd click removes the value)
+    if (ev.value) this.appTypeFilterValue = ev.value
+    // handle PrimeNG bug - end
+  }
   public onQuickFilterChange(ev: any): void {
+    // handle PrimeNG bug - start (each 2nd click removes the value)
+    if (ev.value) this.quickFilterValueOld = this.quickFilterValue
+    if (!ev.value) this.quickFilterValue = this.quickFilterValueOld
+    // handle PrimeNG bug - end
     if (ev.value === 'ALL') {
       this.filterBy = this.filterValueDefault
       this.filterValue = ''
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index af1123c..e3efa55 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -109,7 +109,8 @@
         "LOAD_ERROR": "App konnte nicht geladen werden",
         "NOT_FOUND": "Die Applikation hat noch keine Apps",
         "FILTER": {
-          "TOOLTIP": "App Typ",
+          "LABEL": "App Typ",
+          "TOOLTIP": "App Typ Auswahl",
           "ALL": "Alle",
           "MS": "MS",
           "MFE": "MFE"
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index c0802d8..8106a17 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -109,7 +109,8 @@
         "LOAD_ERROR": "Failed to load App",
         "NOT_FOUND": "The Application does not have an App",
         "FILTER": {
-          "TOOLTIP": "App Type",
+          "LABEL": "App Type",
+          "TOOLTIP": "App Type selection",
           "ALL": "All",
           "MS": "MS",
           "MFE": "MFE"