Added display name as criteria in product search (#166)

* feat: added displayName as criteria in product search * feat: fix use of select button in search criteria * feat: fix use of select button in search criteria
onecx · Jul 31, 2024 · f5b6e3c · f5b6e3c
1 parent 8240d92
commit f5b6e3c
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 18 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
@@ -219,7 +224,7 @@
                 <div
                   *ngIf="app.appType === 'MS'"
                   class="text-sm"
-                  [pTooltip]="'APP.APP_TYPE' | translate"
+                  [pTooltip]="'ACTIONS.SEARCH.APP.QUICK_FILTER.MS' | translate"
                   tooltipPosition="top"
                   tooltipEvent="hover"
                 >

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,15 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   public onLayoutChange(viewMode: 'grid' | 'list'): void {
     this.viewMode = viewMode
   }
+
+  public onAppTypeFilterChange(ev: any): void {
+    if (ev.value) this.appTypeFilterValue = ev.value
+  }
   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/app/product-store/product-search/product-search.component.html b/src/app/product-store/product-search/product-search.component.html
@@ -12,15 +12,29 @@
       [formGroup]="productSearchCriteriaGroup"
       class="flex flex-wrap gap-4 row-gap-3 px-2"
     >
+      <span class="p-float-label">
+        <input
+          id="product_search_criteria_display_name"
+          pInputText
+          type="text"
+          class="w-18rem"
+          [clear]="true"
+          formControlName="displayName"
+          [pTooltip]="('PRODUCT.TOOLTIPS.DISPLAY_NAME' | translate) + ('ACTIONS.SEARCH.WILDCARD_SUPPORT' | translate)"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        />
+        <label for="product_search_criteria_display_name">{{ 'PRODUCT.DISPLAY_NAME' | translate }}</label>
+      </span>
       <span class="p-float-label">
         <input
           id="product_search_criteria_product_name"
           pInputText
           type="text"
-          formControlName="productName"
           class="w-18rem"
           [clear]="true"
-          [pTooltip]="'PRODUCT.TOOLTIPS.NAME' | translate"
+          formControlName="productName"
+          [pTooltip]="('PRODUCT.TOOLTIPS.NAME' | translate) + ('ACTIONS.SEARCH.WILDCARD_SUPPORT' | translate)"
           tooltipPosition="top"
           tooltipEvent="hover"
         />
@@ -60,17 +74,17 @@
           [supportedViews]="['grid', 'list']"
           [initialViewMode]="viewMode"
           [sortingOptions]="[
-            { label: 'PRODUCT.NAME' | translate, value: 'name' },
             { label: 'PRODUCT.DISPLAY_NAME' | translate, value: 'displayName' },
+            { label: 'PRODUCT.NAME' | translate, value: 'name' },
             { label: 'PRODUCT.UNDEPLOYED' | translate, value: 'undeployed' }
           ]"
           [defaultSortOption]="sortField"
           [defaultSortDirection]="false"
           (dataViewChange)="onLayoutChange($event)"
           (filterChange)="onFilterChange($event)"
           [filterColumns]="[
-            'PRODUCT.NAME' | translate,
             'PRODUCT.DISPLAY_NAME' | translate,
+            'PRODUCT.NAME' | translate,
             'PRODUCT.CLASSIFICATIONS' | translate
           ]"
           (sortChange)="onSortChange($event)"

diff --git a/src/app/product-store/product-search/product-search.component.scss b/src/app/product-store/product-search/product-search.component.scss
@@ -2,6 +2,7 @@
 
 @include correct-data-view-control;
 @include correct-search-criteria;
+@include correct-select-button;
 @include dataview-zebra-rows;
 @include card-badges;
 @include danger-action;
diff --git a/src/app/product-store/product-search/product-search.component.ts b/src/app/product-store/product-search/product-search.component.ts
@@ -17,6 +17,7 @@ import {
 import { bffImageUrl, limitText } from 'src/app/shared/utils'
 
 export interface ProductSearchCriteria {
+  displayName: FormControl<string | null>
   productName: FormControl<string | null>
 }
 
@@ -47,6 +48,7 @@ export class ProductSearchComponent implements OnInit {
     private imageApi: ImagesInternalAPIService
   ) {
     this.productSearchCriteriaGroup = new FormGroup<ProductSearchCriteria>({
+      displayName: new FormControl<string | null>(null),
       productName: new FormControl<string | null>(null)
     })
   }
@@ -63,6 +65,7 @@ export class ProductSearchComponent implements OnInit {
       .searchProducts({
         productSearchCriteria: {
           name: this.productSearchCriteriaGroup.controls['productName'].value,
+          displayName: this.productSearchCriteriaGroup.controls['displayName'].value,
           pageSize: 1000
         }
       })
@@ -103,10 +106,10 @@ export class ProductSearchComponent implements OnInit {
           filterInputPlaceholder: data['ACTIONS.DATAVIEW.FILTER'],
           filterInputTooltip:
             data['ACTIONS.DATAVIEW.FILTER_OF'] +
-            data['PRODUCT.NAME'] +
-            ', ' +
             data['PRODUCT.DISPLAY_NAME'] +
             ', ' +
+            data['PRODUCT.NAME'] +
+            ', ' +
             data['PRODUCT.CLASSIFICATIONS'],
           viewModeToggleTooltips: {
             grid: data['ACTIONS.DATAVIEW.VIEW_MODE_GRID'],

diff --git a/src/app/shared/generated/model/productSearchCriteria.ts b/src/app/shared/generated/model/productSearchCriteria.ts
@@ -13,6 +13,7 @@
 
 export interface ProductSearchCriteria { 
     name?: string | null;
+    displayName?: string | null;
     /**
      * The number of page.
      */

diff --git a/src/assets/api/openapi-bff.yaml b/src/assets/api/openapi-bff.yaml
@@ -829,6 +829,9 @@ components:
         name:
           type: string
           nullable: true
+        displayName:
+          type: string
+          nullable: true
         pageNumber:
           format: int32
           description: The number of page.

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -103,12 +103,14 @@
     },
     "SEARCH": {
       "NOT_FOUND": "Keine Daten gefunden",
+      "WILDCARD_SUPPORT": " (Wildcards: ?, *)",
       "APP": {
         "NOT_EXISTS": "Eine App mit diesem Namen konnte nicht gefunden werden.",
         "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
@@ -103,12 +103,14 @@
     },
     "SEARCH": {
       "NOT_FOUND": "No data found",
+      "WILDCARD_SUPPORT": " Wildcards: ?, *",
       "APP": {
         "NOT_EXISTS": "An App with this name could not be found.",
         "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"