feat: updates form components to support long form items plus specs #1062
Conversation
Nx Cloud ReportCI ran the following commands for commit ebcae05. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch
Sent with 💌 from NxCloud. |
| implements OnInit, OnDestroy, OnChanges, ControlValueAccessor { | ||
| @Input() field: Option; | ||
|
|
||
| export class AutocompleteComponent implements OnInit, ControlValueAccessor { |
There was a problem hiding this comment.
I don't really think this needs to be a ControlValueAccessor with the input connected thru ControlContainer, but I'll save that for later. Same with FieldComponent; seems like it should just be a pass thru to child form components using the built in ControlValueAccessors.
| @@ -114,6 +92,21 @@ export class AutocompleteComponent | |||
| ) | |||
| ).pipe(startWith(false), debounceTime(300), shareReplay(1)); | |||
|
|
|||
| this.visibleOptions = this._options$.pipe( | |||
| switchMap((options) => | |||
| this.control.valueChanges.pipe( | |||
There was a problem hiding this comment.
- moved all setup to OnInit
- Fixed Autocomplete component doesn't retain the filtered options in the list when you select an option or click outside after typing in the input. #984 with this change from
startWith('')tostartWith(this.control.value || '')
| ) | ||
| ) | ||
| ); | ||
|
|
||
| this.selectedOption$ = this.isFocused$.pipe( |
There was a problem hiding this comment.
selectedOption$ is a little bit 😬 but I left it alone. I did remove the subscribe to it below though.
There was a problem hiding this comment.
Yea, that subscribe is a weird pattern..
| } | ||
|
|
||
| ngOnChanges(changes: SimpleChanges) { | ||
| if (changes.field) { |
There was a problem hiding this comment.
move this to set field()
| import { ItemsWithEnum, Option } from '@nx-console/schema'; | ||
|
|
||
| export const getOptionItems = (field: Option): string[] | undefined => { | ||
| return ( |
There was a problem hiding this comment.
this typing can be a little annoying on items, especially to access these items in the template, so the pipe
sandikbarr
changed the title
| @@ -46,9 +47,6 @@ export class FieldComponent implements ControlValueAccessor, OnDestroy { | |||
| valueChangeSub: Subscription; | |||
| OptionComponent = OptionComponent; | |||
|
|
|||
| control = new FormControl(''); | |||
There was a problem hiding this comment.
finally removing all of this new FormControl down in these components and just connecting thru the ControlContainer 😸
| this.subscriptions.add( | ||
| this.selectControl.valueChanges.subscribe((value) => | ||
| this.valueChange.emit(value) | ||
| ) | ||
| ); | ||
| if (this.field.items) { |
There was a problem hiding this comment.
Another significant change I made is to not set items OnInit but instead just access them from the field.
OnInit was fine given the form is created each time a new generator or executor is opened, but it was a pain to build tests around. Now the fields update OnChange as you would expect.
| }); | ||
| }); | ||
|
|
||
| it('should show long form options', () => { |
There was a problem hiding this comment.
the SelectComponent wasn't supporting long form items
vscode-ui-feature-task-execution-form-e2ewas failing because the tests expected support for long form options, which was not consistently supported across the dropdown components. Should be fixed.