Make dropdown editable but not allow okay till a valid value is selected (#5991)

Make dropdown editable but not allow OK till a valid value is selected
This commit is contained in:
udeeshagautam
2019-06-12 10:18:05 -07:00
committed by GitHub
parent b0fdaedfdb
commit 6c69eaef4c

View File

@@ -53,6 +53,8 @@ export class SchemaCompareDialog {
private targetIsDacpac: boolean;
private database: string;
private connectionId: string;
private sourceDbEditable: string;
private taregtDbEditable: string;
protected initializeDialog(): void {
this.schemaCompareTab = azdata.window.createTab(SchemaCompareLabel);
@@ -396,8 +398,11 @@ export class SchemaCompareDialog {
}
private shouldEnableOkayButton(): boolean {
let sourcefilled = (this.sourceIsDacpac && this.existsDacpac(this.sourceTextBox.value)) || (!this.sourceIsDacpac && !isNullOrUndefined(this.sourceDatabaseDropdown.value));
let targetfilled = (this.targetIsDacpac && this.existsDacpac(this.targetTextBox.value)) || (!this.targetIsDacpac && !isNullOrUndefined(this.targetDatabaseDropdown.value));
let sourcefilled = (this.sourceIsDacpac && this.existsDacpac(this.sourceTextBox.value))
|| (!this.sourceIsDacpac && !isNullOrUndefined(this.sourceDatabaseDropdown.value) && this.sourceDatabaseDropdown.values.findIndex(x => this.matchesValue(x, this.sourceDbEditable)) !== -1);
let targetfilled = (this.targetIsDacpac && this.existsDacpac(this.targetTextBox.value))
|| (!this.targetIsDacpac && !isNullOrUndefined(this.targetDatabaseDropdown.value) && this.targetDatabaseDropdown.values.findIndex(x => this.matchesValue(x, this.taregtDbEditable)) !== -1);
return sourcefilled && targetfilled;
}
@@ -407,9 +412,21 @@ export class SchemaCompareDialog {
}
protected async createSourceServerDropdown(view: azdata.ModelView): Promise<azdata.FormComponent> {
this.sourceServerDropdown = view.modelBuilder.dropDown().component();
this.sourceServerDropdown.onValueChanged(async () => {
await this.populateDatabaseDropdown((this.sourceServerDropdown.value as ConnectionDropdownValue).connection.connectionId, false);
this.sourceServerDropdown = view.modelBuilder.dropDown().withProperties(
{
editable: true,
fireOnTextChange: true
}
).component();
this.sourceServerDropdown.onValueChanged(async (value) => {
if (this.sourceServerDropdown.values.findIndex(x => this.matchesValue(x, value)) === -1) {
this.sourceDatabaseDropdown.updateProperties({
values: []
});
}
else {
await this.populateDatabaseDropdown((this.sourceServerDropdown.value as ConnectionDropdownValue).connection.connectionId, false);
}
});
return {
@@ -419,9 +436,21 @@ export class SchemaCompareDialog {
}
protected async createTargetServerDropdown(view: azdata.ModelView): Promise<azdata.FormComponent> {
this.targetServerDropdown = view.modelBuilder.dropDown().component();
this.targetServerDropdown.onValueChanged(async () => {
await this.populateDatabaseDropdown((this.targetServerDropdown.value as ConnectionDropdownValue).connection.connectionId, true);
this.targetServerDropdown = view.modelBuilder.dropDown().withProperties(
{
editable: true,
fireOnTextChange: true
}
).component();
this.targetServerDropdown.onValueChanged(async (value) => {
if (this.targetServerDropdown.values.findIndex(x => this.matchesValue(x, value)) === -1) {
this.targetDatabaseDropdown.updateProperties({
values: []
});
}
else {
await this.populateDatabaseDropdown((this.targetServerDropdown.value as ConnectionDropdownValue).connection.connectionId, true);
}
});
return {
@@ -492,8 +521,14 @@ export class SchemaCompareDialog {
}
protected async createSourceDatabaseDropdown(view: azdata.ModelView): Promise<azdata.FormComponent> {
this.sourceDatabaseDropdown = view.modelBuilder.dropDown().component();
this.sourceDatabaseDropdown.onValueChanged(() => {
this.sourceDatabaseDropdown = view.modelBuilder.dropDown().withProperties(
{
editable: true,
fireOnTextChange: true
}
).component();
this.sourceDatabaseDropdown.onValueChanged((value) => {
this.sourceDbEditable = value;
this.dialog.okButton.enabled = this.shouldEnableOkayButton();
});
@@ -504,8 +539,14 @@ export class SchemaCompareDialog {
}
protected async createTargetDatabaseDropdown(view: azdata.ModelView): Promise<azdata.FormComponent> {
this.targetDatabaseDropdown = view.modelBuilder.dropDown().component();
this.targetDatabaseDropdown.onValueChanged(() => {
this.targetDatabaseDropdown = view.modelBuilder.dropDown().withProperties(
{
editable: true,
fireOnTextChange: true,
}
).component();
this.targetDatabaseDropdown.onValueChanged((value) => {
this.taregtDbEditable = value;
this.dialog.okButton.enabled = this.shouldEnableOkayButton();
});
@@ -515,6 +556,10 @@ export class SchemaCompareDialog {
};
}
private matchesValue(listValue: any, value: string): boolean {
return listValue.displayName === value || listValue === value;
}
protected async populateDatabaseDropdown(connectionId: string, isTarget: boolean): Promise<void> {
let currentDropdown = isTarget ? this.targetDatabaseDropdown : this.sourceDatabaseDropdown;
currentDropdown.updateProperties({ values: [] });