fix: dropdown handling

onecx · Dec 19, 2024 · e752b9d · e752b9d
1 parent 9c88488
commit e752b9d
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 35 deletions.
diff --git a/src/app/parameter/parameter-detail/parameter-detail.component.html b/src/app/parameter/parameter-detail/parameter-detail.component.html
@@ -25,7 +25,7 @@
                 styleClass="w-full text-responsive"
                 formControlName="productName"
                 [options]="allProductOptions"
-                (onChange)="onChangeProductName($event.value, appIdOptionsElement)"
+                (onChange)="onChangeProductName($event.value)"
                 [autoDisplayFirst]="true"
                 [appendTo]="'body'"
                 [readonly]="['EDIT', 'VIEW'].includes(this.changeMode)"
@@ -45,7 +45,6 @@
           <div class="mt-1 px-2 w-12 sm:w-6">
             <span class="p-float-label" controlErrorAnchor>
               <p-dropdown
-                #appIdOptionsElement
                 id="pm_detail_form_app_id"
                 class="input-field"
                 styleClass="w-full text-responsive"

diff --git a/src/app/parameter/parameter-detail/parameter-detail.component.spec.ts b/src/app/parameter/parameter-detail/parameter-detail.component.spec.ts
@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { provideHttpClient, HttpClient } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormControl, FormGroup } from '@angular/forms'
-import { By } from '@angular/platform-browser'
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { of, throwError } from 'rxjs'
 import { SelectItem } from 'primeng/api'
@@ -36,7 +35,6 @@ const parameter: Parameter = {
 describe('ParameterDetailComponent', () => {
   let component: ParameterDetailComponent
   let fixture: ComponentFixture<ParameterDetailComponent>
-  let appDropdownElement: any
 
   const msgServiceSpy = jasmine.createSpyObj<PortalMessageService>('PortalMessageService', ['success', 'error'])
   const apiServiceSpy = {
@@ -251,11 +249,8 @@ describe('ParameterDetailComponent', () => {
   })
 
   describe('onChangeProductName', () => {
-    beforeEach(() => {
-      appDropdownElement = fixture.debugElement.query(By.css('#pm_detail_form_app_id')).nativeElement
-    })
     it('should reject update appIdOptions if no product name is provided', () => {
-      component.onChangeProductName(null, appDropdownElement)
+      component.onChangeProductName(null)
 
       expect(component.appIdOptions).toEqual([])
     })

diff --git a/src/app/parameter/parameter-detail/parameter-detail.component.ts b/src/app/parameter/parameter-detail/parameter-detail.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { TranslateService } from '@ngx-translate/core'
 import { finalize } from 'rxjs'
-import { Dropdown } from 'primeng/dropdown'
 import { SelectItem } from 'primeng/api'
 
 import { PortalMessageService } from '@onecx/portal-integration-angular'
@@ -54,7 +53,10 @@ export class ParameterDetailComponent implements OnChanges {
   }
 
   private prepareForm(data?: Parameter): void {
-    if (data) this.formGroup.patchValue(data)
+    if (data) {
+      this.onChangeProductName(data?.productName ?? null)
+      this.formGroup.patchValue(data)
+    }
     this.formGroup.disable()
     this.formGroup.controls['name'].disable()
     switch (this.changeMode) {
@@ -69,7 +71,6 @@ export class ParameterDetailComponent implements OnChanges {
         this.formGroup.enable()
         break
     }
-    if (data?.productName) this.onChangeProductName(data?.productName)
   }
 
   private getData(id?: string): void {
@@ -103,10 +104,9 @@ export class ParameterDetailComponent implements OnChanges {
   }
 
   // load appId dropdown with app ids from product
-  public onChangeProductName(name: string | null, subElement?: Dropdown) {
+  public onChangeProductName(name: string | null) {
     this.appIdOptions = []
-    if (subElement?.clear) subElement.clear()
-    this.formGroup.controls['productName'].setValue(name)
+    this.formGroup.controls['applicationId'].setValue(null)
     if (!name) return
     this.allProducts
       .filter((p) => p.productName === name)

diff --git a/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.html b/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.html
@@ -13,7 +13,7 @@
         styleClass="w-18rem text-responsive"
         formControlName="productName"
         [options]="productOptions"
-        (onChange)="onChangeProductName($event.value, appIdOptionsElement)"
+        (onChange)="onChangeProductName($event.value)"
         [showClear]="true"
         [appendTo]="'body'"
         [emptyMessage]="'ACTIONS.SEARCH.CRITERIA.NO_PRODUCT' | translate"
@@ -26,7 +26,6 @@
     </span>
     <span class="hidden sm:block p-float-label">
       <p-dropdown
-        #appIdOptionsElement
         id="pm_search_criteria_application_id"
         styleClass="w-18rem text-responsive"
         formControlName="applicationId"

diff --git a/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.spec.ts b/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.spec.ts
@@ -3,22 +3,21 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { provideHttpClient, HttpClient } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormControl, FormGroup } from '@angular/forms'
-import { By } from '@angular/platform-browser'
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { SelectItem } from 'primeng/api'
 
 import { AppStateService, UserService } from '@onecx/angular-integration-interface'
 import { createTranslateLoader } from '@onecx/portal-integration-angular'
 
 import { Product } from 'src/app/shared/generated'
-import { ParameterCriteriaComponent, ParameterCriteriaForm } from './parameter-criteria.component'
+import { ParameterCriteriaComponent, CriteriaForm } from './parameter-criteria.component'
 
-const filledCriteria = new FormGroup<ParameterCriteriaForm>({
+const filledCriteria = new FormGroup<CriteriaForm>({
   name: new FormControl<string | null>('name'),
   productName: new FormControl<string | null>('productName'),
   applicationId: new FormControl<string | null>('applicationId')
 })
-const emptyCriteria = new FormGroup<ParameterCriteriaForm>({
+const emptyCriteria = new FormGroup<CriteriaForm>({
   name: new FormControl<string | null>(null),
   productName: new FormControl<string | null>(null),
   applicationId: new FormControl<string | null>(null)
@@ -35,7 +34,6 @@ const usedProductsSI: SelectItem[] = [
 describe('ParameterCriteriaComponent', () => {
   let component: ParameterCriteriaComponent
   let fixture: ComponentFixture<ParameterCriteriaComponent>
-  let appDropdownElement: any
 
   const mockUserService = { lang$: { getValue: jasmine.createSpy('getValue') } }
 
@@ -117,11 +115,8 @@ describe('ParameterCriteriaComponent', () => {
   })
 
   describe('onChangeProductName', () => {
-    beforeEach(() => {
-      appDropdownElement = fixture.debugElement.query(By.css('#pm_search_criteria_application_id')).nativeElement
-    })
-    it('should reject update appIdOptions if no product name is provided', () => {
-      component.onChangeProductName(null, appDropdownElement)
+    it('should reject update appIdOptions and clear target dropdown if no product name is provided', () => {
+      component.onChangeProductName(null) // clear product name
 
       expect(component.appIdOptions).toEqual([])
     })
@@ -131,7 +126,7 @@ describe('ParameterCriteriaComponent', () => {
         { productName: 'productA', applications: ['app1', 'app2'] },
         { productName: 'productB', displayName: 'Prouct B', applications: ['app3'] }
       ]
-      component.onChangeProductName(component.usedProducts[0].productName!, appDropdownElement)
+      component.onChangeProductName(component.usedProducts[0].productName!)
 
       expect(component.appIdOptions).toEqual([
         { label: 'app1', value: 'app1' },
@@ -142,8 +137,7 @@ describe('ParameterCriteriaComponent', () => {
     it('should clear appIdOptions if productName does not match', () => {
       component.usedProducts = [{ productName: 'Product A', applications: ['App1', 'App2'] }]
 
-      if (appDropdownElement) appDropdownElement.click()
-      component.onChangeProductName('Product C', appDropdownElement)
+      component.onChangeProductName('Product C')
 
       expect(component.appIdOptions).toEqual([])
     })

diff --git a/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.ts b/src/app/parameter/parameter-search/parameter-criteria/parameter-criteria.component.ts
@@ -1,15 +1,14 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { TranslateService } from '@ngx-translate/core'
-import { Dropdown } from 'primeng/dropdown'
 import { SelectItem } from 'primeng/api'
 
 import { Action } from '@onecx/portal-integration-angular'
 
 import { ParameterSearchCriteria, Product } from 'src/app/shared/generated'
 import { dropDownSortItemsByLabel } from 'src/app/shared/utils'
 
-export interface ParameterCriteriaForm {
+export interface CriteriaForm {
   applicationId: FormControl<string | null>
   productName: FormControl<string | null>
   name: FormControl<string | null>
@@ -26,12 +25,12 @@ export class ParameterCriteriaComponent implements OnChanges {
   @Output() public searchEmitter = new EventEmitter<ParameterSearchCriteria>()
   @Output() public resetSearchEmitter = new EventEmitter<boolean>()
 
-  public criteriaForm: FormGroup<ParameterCriteriaForm>
+  public criteriaForm: FormGroup<CriteriaForm>
   public productOptions: SelectItem[] = []
   public appIdOptions: SelectItem[] = []
 
   constructor(public readonly translate: TranslateService) {
-    this.criteriaForm = new FormGroup<ParameterCriteriaForm>({
+    this.criteriaForm = new FormGroup<CriteriaForm>({
       productName: new FormControl<string | null>(null),
       applicationId: new FormControl<string | null>(null),
       name: new FormControl<string | null>(null)
@@ -61,9 +60,13 @@ export class ParameterCriteriaComponent implements OnChanges {
     this.resetSearchEmitter.emit(true)
   }
 
-  public onChangeProductName(name: string | null, subElement?: Dropdown) {
+  /* product name was changed to 
+     1. null        => clear appid dropdown content and item list
+     2. diff. value => clear appid dropdown content and prepare new list
+  */
+  public onChangeProductName(name: string | null) {
     this.appIdOptions = []
-    if (subElement?.clear) subElement.clear()
+    this.criteriaForm.controls['applicationId'].setValue(null)
     if (!name) return
     this.usedProducts
       .filter((p) => p.productName === name)