ML- Added a radio button to enter new model table name (#10343)

This commit is contained in:
Leila Lali
2020-05-11 17:29:28 -07:00
committed by GitHub
parent 21e6ba92c2
commit 301ce1cf87
17 changed files with 231 additions and 94 deletions

View File

@@ -29,6 +29,7 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
private _dbTableComponent: azdata.FlexContainer | undefined;
private tableMaxLength = this.componentMaxLength * 2 + 70;
private _onSelectedChanged: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
private _existingTablesSelected: boolean = true;
public readonly onSelectedChanged: vscode.Event<void> = this._onSelectedChanged.event;
/**
@@ -45,24 +46,66 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
public registerComponent(modelBuilder: azdata.ModelBuilder, databaseTitle: string, tableTitle: string): azdata.Component {
this._databases = modelBuilder.dropDown().withProperties({
width: this.componentMaxLength,
editable: this._settings.editable,
fireOnTextChange: this._settings.editable
}).component();
this._tables = modelBuilder.dropDown().withProperties({
width: this.componentMaxLength,
editable: this._settings.editable,
fireOnTextChange: this._settings.editable
width: this.componentMaxLength - 10,
}).component();
this._databases.onValueChanged(async () => {
await this.onDatabaseSelected();
});
const existingTableButton = modelBuilder.radioButton().withProperties({
name: 'tableName',
value: 'existing',
label: 'Existing table',
checked: true
}).component();
const newTableButton = modelBuilder.radioButton().withProperties({
name: 'tableName',
value: 'new',
label: 'New table',
checked: false
}).component();
const newTableName = modelBuilder.inputBox().withProperties({
width: this.componentMaxLength - 10,
enabled: false
}).component();
const group = modelBuilder.groupContainer().withItems([
existingTableButton,
this._tables,
newTableButton,
newTableName
], {
CSSStyles: {
'padding-top': '5px'
}
}).component();
existingTableButton.onDidClick(() => {
if (this._tables) {
this._tables.enabled = existingTableButton.checked;
}
newTableName.enabled = !existingTableButton.checked;
this._existingTablesSelected = existingTableButton.checked || false;
});
newTableButton.onDidClick(() => {
if (this._tables) {
this._tables.enabled = !newTableButton.checked;
}
newTableName.enabled = newTableButton.checked;
this._existingTablesSelected = existingTableButton.checked || false;
});
newTableName.onTextChanged(async () => {
this._selectedTableName = newTableName.value || '';
await this.onTableSelected();
});
this._tables.onValueChanged(async (value) => {
// There's an issue with dropdown doesn't set the value in editable mode. this is the workaround
if (this._tables && value) {
this._selectedTableName = this._settings.editable ? value : value.selected;
this._selectedTableName = value.selected;
}
await this.onTableSelected();
});
@@ -73,22 +116,32 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
}], { info: databaseTitle }).withLayout({
padding: '0px'
}).component();
const tableForm = modelBuilder.formContainer().withFormItems([{
title: tableTitle,
component: this._tables
}], { info: tableTitle }).withLayout({
padding: '0px'
}).component();
const tableForm = modelBuilder.formContainer();
if (this._settings.editable) {
tableForm.addFormItem({
title: tableTitle,
component: group
}, { info: tableTitle });
} else {
tableForm.addFormItem({
title: tableTitle,
component: this._tables
}, { info: tableTitle });
}
this._dbTableComponent = modelBuilder.flexContainer().withItems([
databaseForm,
tableForm
tableForm.withLayout({
padding: '0px'
}).component()
], {
flex: '0 0 auto',
CSSStyles: {
'align-items': 'flex-start'
}
}).withLayout({
flexFlow: 'row',
flexFlow: this._settings.editable ? 'column' : 'row',
justifyContent: 'space-between',
width: this.tableMaxLength
}).component();
@@ -163,31 +216,33 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
}
private async onDatabaseSelected(): Promise<void> {
this._tableNames = await this.listTableNames(this.databaseName || '');
let tableNames = this._tableNames;
if (this._existingTablesSelected) {
this._tableNames = await this.listTableNames(this.databaseName || '');
let tableNames = this._tableNames;
if (this._tableNames && !this._settings.preSelected && !this._tableNames.find(x => x.tableName === constants.selectTableTitle)) {
const firstRow: DatabaseTable = { tableName: constants.selectTableTitle, databaseName: '', schema: '' };
tableNames = [firstRow].concat(this._tableNames);
}
if (this._tables && tableNames && tableNames.length > 0) {
this._tables.values = tableNames.map(t => this.getTableFullName(t));
if (this.importTable) {
const selectedTable = tableNames.find(t => t.tableName === this.importTable?.tableName && t.schema === this.importTable?.schema);
if (selectedTable) {
this._selectedTableName = this.getTableFullName(selectedTable);
this._tables.value = this.getTableFullName(selectedTable);
} else {
this._selectedTableName = this._settings.editable ? this.getTableFullName(this.importTable) : this.getTableFullName(tableNames[0]);
}
} else {
this._selectedTableName = this.getTableFullName(tableNames[0]);
if (this._tableNames && !this._settings.preSelected && !this._tableNames.find(x => x.tableName === constants.selectTableTitle)) {
const firstRow: DatabaseTable = { tableName: constants.selectTableTitle, databaseName: '', schema: '' };
tableNames = [firstRow].concat(this._tableNames);
}
if (this._tables && tableNames && tableNames.length > 0) {
this._tables.values = tableNames.map(t => this.getTableFullName(t));
if (this.importTable) {
const selectedTable = tableNames.find(t => t.tableName === this.importTable?.tableName && t.schema === this.importTable?.schema);
if (selectedTable) {
this._selectedTableName = this.getTableFullName(selectedTable);
this._tables.value = this.getTableFullName(selectedTable);
} else {
this._selectedTableName = this._settings.editable ? this.getTableFullName(this.importTable) : this.getTableFullName(tableNames[0]);
}
} else {
this._selectedTableName = this.getTableFullName(tableNames[0]);
}
this._tables.value = this._selectedTableName;
} else if (this._tables) {
this._tables.values = [];
this._tables.value = '';
}
this._tables.value = this._selectedTableName;
} else if (this._tables) {
this._tables.values = [];
this._tables.value = '';
}
await this.onTableSelected();
}