feat: improving dropdown and update wizard value sent to dd

libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html

@@ -67,7 +67,6 @@
         [extraClass]="'secondary min-w-full'"
         [showTitle]="false"
         [choices]="dropdownChoices"
-        [selectedValueExpectedAsObject]="true"
         [selected]="wizardFieldData"
         ariaName="search-sort-by"
       ></gn-ui-dropdown-selector>

libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts

@@ -103,7 +103,7 @@ export class WizardFieldComponent implements AfterViewInit, OnDestroy {
         return data ? new Date(Number(data)) : new Date()
       }
       case WizardFieldType.DROPDOWN: {
-        return data ? JSON.parse(data) : this.dropdownChoices[1]
+        return data ? JSON.parse(data) : this.dropdownChoices[1].value
       }
     }
   }

libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts

@@ -25,7 +25,6 @@ describe('DropdownSelectorComponent', () => {
       { label: 'B', value: 'b' },
       { label: 'C', value: 'c' },
     ]
-    component.selectedValueExpectedAsObject = false
     fixture.detectChanges()
   })
 
@@ -47,14 +46,30 @@ describe('DropdownSelectorComponent', () => {
       })
     })
 
-    describe('when clicking an item with selectedValueExpectedAsObject', () => {
+    describe('when an existing value is provided', () => {
       beforeEach(() => {
-        component.selectedValueExpectedAsObject = true
+        component.selected = 'b'
       })
-      it('emits the correct item as Json object', () => {
-        component.selectedValueExpectedAsObject = true
-        component.onSelectValue({ label: 'A', value: 'a' })
-        expect(emitted).toEqual(JSON.stringify({ label: 'A', value: 'a' }))
+      it('selects the corresponding choice', () => {
+        expect(component.selectedChoice).toEqual({ label: 'B', value: 'b' })
+      })
+    })
+
+    describe('when no selected value is provided', () => {
+      beforeEach(() => {
+        component.selected = undefined
+      })
+      it('selects the first choice', () => {
+        expect(component.selectedChoice).toEqual({ label: 'A', value: 'a' })
+      })
+    })
+
+    describe('when the selected value is not part of the choices', () => {
+      beforeEach(() => {
+        component.selected = 'blarg'
+      })
+      it('selects the first choice', () => {
+        expect(component.selectedChoice).toEqual({ label: 'A', value: 'a' })
       })
     })
   })

libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.stories.ts

@@ -48,8 +48,7 @@ Primary.args = {
       value: 'choice3',
     },
   ],
-  selected: { label: 'My Choice 1', value: 'choice1' },
-  selectedValueExpectedAsObject: true,
+  selected: 'choice1',
   showTitle: true,
 }
 Primary.argTypes = {

libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts

@@ -4,7 +4,6 @@ import {
   ConnectedPosition,
 } from '@angular/cdk/overlay'
 import {
-  AfterContentChecked,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -26,13 +25,12 @@ export type DDChoices<T> = Array<{
   styleUrls: ['./dropdown-selector.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DropdownSelectorComponent implements AfterContentChecked, OnInit {
+export class DropdownSelectorComponent implements OnInit {
   @Input() title: string
   @Input() showTitle = true
   @Input() ariaName: string
   @Input() choices: DDChoices<unknown>
   @Input() selected: any
-  @Input() selectedValueExpectedAsObject: boolean
   @Input() maxRows: number
   @Input() extraClass = ''
   @Output() selectValue = new EventEmitter<any>()
@@ -57,47 +55,33 @@ export class DropdownSelectorComponent implements AfterContentChecked, OnInit {
       offsetY: -8,
     },
   ]
-  selectedObject: Choice
+  get selectedChoice(): Choice {
+    return (
+      this.choices.find((choice) => choice.value === this.selected) ??
+      this.choices[0]
+    )
+  }
 
   get id() {
     return this.title.toLowerCase().replace(/[^a-z]+/g, '-')
   }
 
   getChoiceLabel(): string {
-    return this.selectedObject ? this.selectedObject.label : ''
+    return this.selectedChoice.label
   }
 
   ngOnInit(): void {
     if (!this.maxRows) this.maxRows = 6
   }
 
-  ngAfterContentChecked(): void {
-    if (!this.selected && this.choices) {
-      this.selected = this.getExpectedSelectionFromChoice(this.choices[0])
-    }
-    if (this.selected && this.choices && this.selectedObjecthasToBeSet()) {
-      const newSelectionObject = this.selectedValueExpectedAsObject
-        ? this.selected
-        : this.choices?.filter((choice) => choice.value == this.selected)[0]
-      if (newSelectionObject) {
-        this.selectedObject = newSelectionObject
-      }
-    }
-  }
-
   isSelected(choice) {
-    return choice === this.selectedObject
+    return choice === this.selectedChoice
   }
 
   onSelectValue(choice: Choice): void {
     this.closeOverlay()
-    this.selectedObject = choice
-    this.selected = this.getExpectedSelectionFromChoice(choice)
-    this.selectValue.emit(
-      this.selectedValueExpectedAsObject
-        ? JSON.stringify(this.selected)
-        : this.selected
-    )
+    this.selected = choice.value
+    this.selectValue.emit(this.selected)
   }
 
   openOverlay() {
@@ -113,17 +97,4 @@ export class DropdownSelectorComponent implements AfterContentChecked, OnInit {
   closeOverlay() {
     this.overlayOpen = false
   }
-
-  private getExpectedSelectionFromChoice(choice: Choice): any {
-    return this.selectedValueExpectedAsObject ? choice : choice.value
-  }
-
-  private selectedObjecthasToBeSet(): boolean {
-    if (this.selectedObject === undefined) return true
-    return (
-      (this.selectedValueExpectedAsObject
-        ? this.selected.value
-        : this.selected) !== this.selectedObject.value
-    )
-  }
 }