ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-14 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

switch exclude object types table to use declarative table component (#22390)

Browse Source 
* switch exclude options to use declarative table component

* add to disposableListeners
This commit is contained in:
Kim Santiago
2023-03-21 14:09:31 -07:00
committed by GitHub
parent 21f271671d
commit 2be49a9911
3 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/sql-database-projects/src/common/uiConstants.ts
View File

@@ -11,6 +11,10 @@ export namespace cssStyles {
export const fontWeightBold = { 'font-weight': 'bold' };
export const titleFontSize = 13;
export const optionsTableHeader = { 'display': 'none', 'border': 'none !important' };
export const optionsTableRowLabel = { ...text, 'border-left': 'none', 'border-right': 'none', 'border-top': 'none', 'border-bottom': 'none' }
export const optionsTableRowCheckbox = { 'border-left': 'none', 'border-right': 'none', 'border-top': 'none', 'border-bottom': 'none' }
export const publishDialogLabelWidth = '205px';
export const publishDialogTextboxWidth = '190px';
export const publishDialogDropdownWidth = '192px';

63
extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts
View File

@@ -11,6 +11,7 @@ import type * as azdataType from 'azdata';
import { PublishDatabaseDialog } from './publishDatabaseDialog';
import { DeployOptionsModel } from '../models/options/deployOptionsModel';
import { TelemetryActions, TelemetryReporter, TelemetryViews } from '../common/telemetry';
import { cssStyles } from '../common/uiConstants';
export class PublishOptionsDialog {
@@ -25,7 +26,7 @@ export class PublishOptionsDialog {
private optionsChanged: boolean = false;
private isResetOptionsClicked: boolean = false;
private excludeObjectTypesOptionsTab: azdataType.window.DialogTab | undefined;
private excludeObjectTypesOptionsTable: azdataType.TableComponent | undefined;
private excludeObjectTypesOptionsTable: azdataType.DeclarativeTableComponent | undefined;
private excludeObjectTypesOptionsFlexBuilder: azdataType.FlexContainer | undefined;
constructor(defaultOptions: mssql.DeploymentOptions, private publish: PublishDatabaseDialog) {
@@ -135,20 +136,38 @@ export class PublishOptionsDialog {
private initializeExcludeObjectTypesOptionsDialogTab(): void {
this.excludeObjectTypesOptionsTab?.registerContent(async view => {
this.excludeObjectTypesOptionsTable = view.modelBuilder.table().component();
this.excludeObjectTypesOptionsTable = view.modelBuilder.declarativeTable().withProps({
width: '480px',
columns: [
{
valueType: utils.getAzdataApi()!.DeclarativeDataType.boolean,
width: '10%',
isReadOnly: false,
displayName: '',
headerCssStyles: cssStyles.optionsTableHeader,
},
{
valueType: utils.getAzdataApi()!.DeclarativeDataType.string,
width: '90%',
displayName: '',
isReadOnly: true,
headerCssStyles: cssStyles.optionsTableHeader,
}
],
}).component();
await this.updateExcludeObjectsTable();
// Update exclude type options value on checkbox onchange
this.disposableListeners.push(this.excludeObjectTypesOptionsTable!.onCellAction!((rowState) => {
const checkboxState = <azdataType.ICheckboxCellActionEventArgs>rowState;
if (checkboxState && checkboxState.row !== undefined) {
// data[row][1] contains the exclude type option display name
const displayName = this.excludeObjectTypesOptionsTable?.data[checkboxState.row][1];
this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxState.checked);
this.optionsChanged = true;
// customButton[0] is the reset button, enabling it when option checkbox is changed
this.dialog.customButtons[0].enabled = true;
}
this.disposableListeners.push(this.excludeObjectTypesOptionsTable.onDataChanged(() => {
this.excludeObjectTypesOptionsTable!.dataValues?.forEach((row) => {
const displayName = <string>row[1].value;
const checkboxValue = <boolean>row[0].value;
this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxValue);
});
this.optionsChanged = true;
// customButton[0] is the reset button, enabling it when option checkbox is changed
this.dialog.customButtons[0].enabled = true;
}));
this.excludeObjectTypesOptionsFlexBuilder = view.modelBuilder.flexContainer()
@@ -194,25 +213,9 @@ export class PublishOptionsDialog {
*/
private async updateExcludeObjectsTable(): Promise<void> {
const data = this.optionsModel.getExcludeObjectTypesOptionsData();
await this.excludeObjectTypesOptionsTable?.setDataValues(data);
await this.excludeObjectTypesOptionsTable?.updateProperties({
data: data,
columns: [
<azdataType.CheckboxColumn>
{
value: constants.OptionInclude,
type: utils.getAzdataApi()!.ColumnType.checkBox,
action: utils.getAzdataApi()!.ActionOnCellCheckboxCheck.customAction,
headerCssClass: 'display-none',
cssClass: 'no-borders align-with-header',
width: 50
},
{
value: constants.OptionName,
headerCssClass: 'display-none',
cssClass: 'no-borders align-with-header',
width: 50
}
],
ariaRowCount: data.length
});
}

14
extensions/sql-database-projects/src/models/options/deployOptionsModel.ts
View File

@@ -6,6 +6,7 @@
import * as mssql from 'mssql';
import * as vscode from 'vscode';
import * as constants from '../../common/constants';
import { cssStyles } from '../../common/uiConstants';
export class DeployOptionsModel {
// key is the option display name and values are checkboxValue and optionName
@@ -93,10 +94,19 @@ export class DeployOptionsModel {
let data: any[][] = [];
Object.entries(this.deploymentOptions.objectTypesDictionary).forEach(option => {
// option[1] is the display name and option[0] is the optionName
data.push([this.getExcludeObjectTypeOptionCheckStatus(option[0]), option[1]]);
data.push([
{
value: this.getExcludeObjectTypeOptionCheckStatus(option[0]),
style: cssStyles.optionsTableRowCheckbox,
ariaLabel: option[1]
},
{
value: option[1],
style: cssStyles.optionsTableRowLabel
}]);
});
return data.sort((a, b) => a[1].localeCompare(b[1]));
return data.sort((a, b) => a[1].value.localeCompare(b[1].value));
}
/*