ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add required value validations for checkbox and dropdown (#9770)

Browse Source
This commit is contained in:
Charles Gagnon
2020-03-30 12:44:56 -07:00
committed by GitHub
parent 90277d627c
commit 9b641490ea
3 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/resource-deployment/src/ui/modelViewUtils.ts
View File

@@ -105,9 +105,10 @@ export function createNumberInput(view: azdata.ModelView, info: { defaultValue?:
}).component(); }).component();
} }
export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string }): azdata.CheckBoxComponent { export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string, required?: boolean }): azdata.CheckBoxComponent {
return view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({ return view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
checked: info.initialValue, checked: info.initialValue,
required: info.required,
label: info.label label: info.label
}).component(); }).component();
} }
@@ -119,6 +120,7 @@ export function createDropdown(view: azdata.ModelView, info: { defaultValue?: st
width: info.width, width: info.width,
editable: info.editable, editable: info.editable,
fireOnTextChange: true, fireOnTextChange: true,
required: info.required,
ariaLabel: info.label ariaLabel: info.label
}).component(); }).component();
} }
@@ -420,7 +422,7 @@ function processReadonlyTextField(context: FieldContext): void {
} }
function processCheckboxField(context: FieldContext): void { function processCheckboxField(context: FieldContext): void {
const checkbox = createCheckbox(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label }); const checkbox = createCheckbox(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label, required: context.fieldInfo.required });
context.components.push(checkbox); context.components.push(checkbox);
context.onNewInputComponentCreated(context.fieldInfo.variableName!, checkbox); context.onNewInputComponentCreated(context.fieldInfo.variableName!, checkbox);
} }

7
src/sql/workbench/browser/modelComponents/checkbox.component.ts
View File

@@ -32,7 +32,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
constructor( constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@Inject(forwardRef(() => ElementRef)) el: ElementRef,) { @Inject(forwardRef(() => ElementRef)) el: ElementRef) {
super(changeRef, el); super(changeRef, el);
} }
@@ -50,14 +50,16 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
this._input = new Checkbox(this._inputContainer.nativeElement, inputOptions); this._input = new Checkbox(this._inputContainer.nativeElement, inputOptions);
this._register(this._input); this._register(this._input);
this._register(this._input.onChange(e => { this._register(this._input.onChange(async e => {
this.checked = this._input.checked; this.checked = this._input.checked;
await this.validate();
this.fireEvent({ this.fireEvent({
eventType: ComponentEventType.onDidChange, eventType: ComponentEventType.onDidChange,
args: e args: e
}); });
})); }));
this._register(attachCheckboxStyler(this._input, this.themeService)); this._register(attachCheckboxStyler(this._input, this.themeService));
this._validations.push(() => !this.required || this.checked);
} }
} }
@@ -93,6 +95,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
if (this.required) { if (this.required) {
this._input.required = this.required; this._input.required = this.required;
} }
this.validate();
} }
// CSS-bound properties // CSS-bound properties

9
src/sql/workbench/browser/modelComponents/dropdown.component.ts
View File

@@ -74,30 +74,34 @@ export default class DropDownComponent extends ComponentBase implements ICompone
this._register(this._editableDropdown); this._register(this._editableDropdown);
this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService)); this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService));
this._register(this._editableDropdown.onValueChange(e => { this._register(this._editableDropdown.onValueChange(async e => {
if (this.editable) { if (this.editable) {
this.setSelectedValue(this._editableDropdown.value); this.setSelectedValue(this._editableDropdown.value);
await this.validate();
this.fireEvent({ this.fireEvent({
eventType: ComponentEventType.onDidChange, eventType: ComponentEventType.onDidChange,
args: e args: e
}); });
} }
})); }));
this._validations.push(() => !this.required || !this.editable || !!this._editableDropdown.value);
} }
if (this._dropDownContainer) { if (this._dropDownContainer) {
this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement); this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement);
this._selectBox.render(this._dropDownContainer.nativeElement); this._selectBox.render(this._dropDownContainer.nativeElement);
this._register(this._selectBox); this._register(this._selectBox);
this._register(attachSelectBoxStyler(this._selectBox, this.themeService)); this._register(attachSelectBoxStyler(this._selectBox, this.themeService));
this._register(this._selectBox.onDidSelect(e => { this._register(this._selectBox.onDidSelect(async e => {
if (!this.editable) { if (!this.editable) {
this.setSelectedValue(this._selectBox.value); this.setSelectedValue(this._selectBox.value);
await this.validate();
this.fireEvent({ this.fireEvent({
eventType: ComponentEventType.onDidChange, eventType: ComponentEventType.onDidChange,
args: e args: e
}); });
} }
})); }));
this._validations.push(() => !this.required || this.editable || !!this._selectBox.value);
} }
} }
@@ -139,6 +143,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone
this._selectBox.selectElem.required = this.required; this._selectBox.selectElem.required = this.required;
this._editableDropdown.inputElement.required = this.required; this._editableDropdown.inputElement.required = this.required;
this.validate();
} }
private getValues(): string[] { private getValues(): string[] {