mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-29 01:25:37 -05:00
ML- Added a radio button to enter new model table name (#10343)
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user