feat: fix use of select button in search criteria

onecx · Jul 31, 2024 · ddb7515 · ddb7515
1 parent 5bd8307
commit ddb7515
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 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
@@ -11,22 +11,22 @@
       <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"
           [pTooltip]="'APP.TOOLTIPS.APP_ID' | translate"
           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,22 +39,27 @@
       <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
               ></ng-template
             >
           </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
@@ -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
@@ -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
@@ -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"