-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Select): Provide an optional fix directive for <novo-select> elem…
…ents (#1560) * fix(Select): Provide an optional fix directive for <novo-select> elements that adjusts checkboxes after a value update * fix(QueryBuilder): Missing label on isNull operator
- Loading branch information
Showing
8 changed files
with
33,995 additions
and
33,523 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
projects/novo-elements/src/elements/select/Select.extupdatefix.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
// NG | ||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; | ||
// App | ||
import { NovoSelectElement } from './Select'; | ||
import { NovoSelectModule } from './Select.module'; | ||
import { NovoLabelService } from 'novo-elements/services'; | ||
import { NovoOptionModule } from 'novo-elements/elements/common'; | ||
import { Component, ViewChild } from '@angular/core'; | ||
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
|
||
@Component({ | ||
template: ` | ||
<form [formGroup]="form"> | ||
<novo-select #select extupdatefix formControlName="value" multiple> | ||
<novo-option value="1">One</novo-option> | ||
<novo-option value="2">Two</novo-option> | ||
<novo-option value="3">Three</novo-option> | ||
</novo-select> | ||
</form>` | ||
}) | ||
class FixedSelectComponent { | ||
@ViewChild('select') | ||
select: NovoSelectElement; | ||
|
||
form = new FormGroup({ | ||
value: new FormControl(['2']) | ||
}); | ||
} | ||
|
||
describe('Directive: NovoSelectExtUpdateFix', () => { | ||
let fixture: ComponentFixture<FixedSelectComponent>; | ||
let comp: FixedSelectComponent; | ||
|
||
beforeEach(waitForAsync(() => { | ||
TestBed.configureTestingModule({ | ||
imports: [NovoSelectModule, NovoOptionModule, FormsModule, ReactiveFormsModule], | ||
providers: [NovoLabelService], | ||
declarations: [FixedSelectComponent], | ||
}).compileComponents(); | ||
fixture = TestBed.createComponent(FixedSelectComponent); | ||
comp = fixture.debugElement.componentInstance; | ||
fixture.detectChanges(); | ||
})); | ||
|
||
it('should update checkboxes when the ngmodel value is updated externally', () => { | ||
expect(comp.select.contentOptions.map(opt => opt.selected)).toEqual([false, true, false]); | ||
comp.form.controls.value.setValue(['1']); | ||
expect(comp.select.contentOptions.map(opt => opt.selected)).toEqual([true, false, false]); | ||
}); | ||
|
||
// This case may arise if, for instance, a dynamic form is about to transform this | ||
// control from a novo-select to something else. | ||
it('should not trigger errors from negative use-case variables', () => { | ||
(comp.form.controls.value as FormControl).setValue('candy'); | ||
}) | ||
}); |
30 changes: 30 additions & 0 deletions
30
projects/novo-elements/src/elements/select/Select.extupdatefix.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { Directive, OnInit, inject } from '@angular/core'; | ||
import { FormControl, NgControl } from '@angular/forms'; | ||
import { NovoSelectElement } from './Select'; | ||
|
||
/** | ||
* Fixes a <novo-select> element so that if its value is updated externally, the checkboxes in the dropdown selector | ||
* update accordingly. Because this is a functionality change to a core control, this fix is provided as a directive | ||
* to only be used if needed. | ||
*/ | ||
@Directive({ | ||
selector: 'novo-select[extupdatefix]' | ||
}) | ||
export class NovoSelectExtUpdateFix implements OnInit { | ||
control = inject(NgControl); | ||
selectElement = inject(NovoSelectElement); | ||
|
||
ngOnInit() { | ||
if (this.control?.control && 'registerOnChange' in this.control.control) { | ||
(this.control.control as FormControl).registerOnChange((rawValue, viewToModelUpdate) => { | ||
if (this.selectElement.multiple === Array.isArray(rawValue)) { | ||
this.afterExternalUpdate(rawValue); | ||
} | ||
}); | ||
} | ||
} | ||
|
||
afterExternalUpdate(rawValue: any) { | ||
this.selectElement['_setSelectionByValue'](rawValue); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './Select'; | ||
export * from './Select.module'; | ||
export * from './Select.extupdatefix.directive'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters