rename dataModel to viewModel (#17387)

This commit is contained in:
Alan Ren
2021-10-19 09:52:03 -07:00
committed by GitHub
parent e1a8885e43
commit 569d5cf694
10 changed files with 72 additions and 72 deletions

View File

@@ -1017,17 +1017,17 @@ declare module 'azdata' {
/**
* Process the table change.
* @param table the table information
* @param data the object contains the state of the table designer
* @param viewModel the object contains the state of the table designer
* @param tableChangeInfo the information about the change user made through the UI.
*/
processTableEdit(table: TableInfo, data: DesignerData, tableChangeInfo: DesignerEdit): Thenable<DesignerEditResult>;
processTableEdit(table: TableInfo, viewModel: DesignerViewModel, tableChangeInfo: DesignerEdit): Thenable<DesignerEditResult>;
/**
* Save the table
* @param table the table information
* @param data the object contains the state of the table designer
* @param viewModel the object contains the state of the table designer
*/
saveTable(table: TableInfo, data: DesignerData): Thenable<void>;
saveTable(table: TableInfo, viewModel: DesignerViewModel): Thenable<void>;
}
/**
@@ -1073,9 +1073,9 @@ declare module 'azdata' {
*/
view: TableDesignerView;
/**
* The data model.
* The initial state of the designer.
*/
data: DesignerData;
viewModel: DesignerViewModel;
/**
* The supported column types
*/
@@ -1121,17 +1121,17 @@ declare module 'azdata' {
/**
* Additional table column properties.Common table properties are handled by Azure Data Studio. see {@link TableColumnProperty}
*/
addtionalTableColumnProperties?: DesignerDataPropertyInfo[];
additionalTableColumnProperties?: DesignerDataPropertyInfo[];
/**
* Additional tabs.
*/
addtionalTabs?: DesignerTab[];
additionalTabs?: DesignerTab[];
}
/**
* The data model object of the designer.
* The view model of the designer.
*/
export interface DesignerData {
export interface DesignerViewModel {
[key: string]: InputBoxProperties | CheckBoxProperties | DropDownProperties | DesignerTableProperties;
}
@@ -1254,9 +1254,9 @@ declare module 'azdata' {
*/
export interface DesignerEditResult {
/**
* The data model object.
* The view model object.
*/
data: DesignerData;
viewModel: DesignerViewModel;
/**
* Whether the current state is valid.
*/

View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { DesignerComponentInput, DesignerEditType, DesignerTab, DesignerEdit, DesignerEditIdentifier, DesignerData, DesignerDataPropertyInfo, DesignerTableComponentRowData, DesignerTableProperties, InputBoxProperties, DropDownProperties, CheckBoxProperties, DesignerComponentTypeName } from 'sql/base/browser/ui/designer/interfaces';
import { DesignerComponentInput, DesignerEditType, DesignerTab, DesignerEdit, DesignerEditIdentifier, DesignerViewModel, DesignerDataPropertyInfo, DesignerTableComponentRowData, DesignerTableProperties, InputBoxProperties, DropDownProperties, CheckBoxProperties, DesignerComponentTypeName } from 'sql/base/browser/ui/designer/interfaces';
import { IPanelTab, ITabbedPanelStyles, TabbedPanel } from 'sql/base/browser/ui/panel/panel';
import * as DOM from 'vs/base/browser/dom';
import { Event } from 'vs/base/common/event';
@@ -41,7 +41,7 @@ export interface IDesignerStyle {
export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox;
export type CreateComponentFunc = (container: HTMLElement, component: DesignerDataPropertyInfo, editIdentifier: DesignerEditIdentifier) => DesignerUIComponent;
export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerData) => void;
export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerViewModel) => void;
export class Designer extends Disposable implements IThemable {
private _horizontalSplitViewContainer: HTMLElement;
@@ -140,8 +140,8 @@ export class Designer extends Disposable implements IThemable {
this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, component, identifier) => {
return this.createComponent(container, component, identifier, false, false);
}, (definition, component, data) => {
this.setComponentValue(definition, component, data);
}, (definition, component, viewModel) => {
this.setComponentValue(definition, component, viewModel);
}, (component) => {
this.styleComponent(component);
});
@@ -220,45 +220,45 @@ export class Designer extends Disposable implements IThemable {
}
private async updatePropertiesPane(newContext: PropertiesPaneObjectContext): Promise<void> {
const data = await this._input.getData();
const viewModel = await this._input.getViewModel();
let type: string;
let components: DesignerDataPropertyInfo[];
let inputData: DesignerData;
let inputViewModel: DesignerViewModel;
let context: PropertiesPaneObjectContext;
if (newContext !== 'root') {
context = newContext;
const tableData = data[newContext.parentProperty] as DesignerTableProperties;
const tableData = viewModel[newContext.parentProperty] as DesignerTableProperties;
const tableProperties = this._componentMap.get(newContext.parentProperty).defintion.componentProperties as DesignerTableProperties;
inputData = tableData.data[newContext.index] as DesignerData;
inputViewModel = tableData.data[newContext.index] as DesignerViewModel;
components = tableProperties.itemProperties;
type = tableProperties.objectTypeDisplayName;
}
if (!inputData) {
if (!inputViewModel) {
context = 'root';
components = [];
this._componentMap.forEach(value => {
components.push(value.defintion);
});
type = this._input.objectTypeDisplayName;
inputData = data;
inputViewModel = viewModel;
}
if (inputData) {
if (inputViewModel) {
this._propertiesPane.show({
context: context,
type: type,
components: components,
data: inputData
viewModel: inputViewModel
});
}
}
private async updateComponentValues(): Promise<void> {
const data = await this._input.getData();
const viewModel = await this._input.getViewModel();
// data[ScriptPropertyName] -- todo- set the script editor
this._componentMap.forEach((value) => {
this.setComponentValue(value.defintion, value.component, data);
this.setComponentValue(value.defintion, value.component, viewModel);
});
await this.updatePropertiesPane(this._propertiesPane.context ?? 'root');
}
@@ -274,7 +274,7 @@ export class Designer extends Disposable implements IThemable {
await this.updateComponentValues();
if (edit.type === DesignerEditType.Add) {
// Move focus to the first cell of the newly added row.
const data = await this._input.getData();
const data = await this._input.getViewModel();
const propertyName = edit.property as string;
const tableData = data[propertyName] as DesignerTableProperties;
const table = this._componentMap.get(propertyName).component as Table<Slick.SlickData>;
@@ -287,21 +287,21 @@ export class Designer extends Disposable implements IThemable {
}
private async applyEdit(edit: DesignerEdit): Promise<void> {
const data = await this._input.getData();
const viewModel = await this._input.getViewModel();
switch (edit.type) {
case DesignerEditType.Update:
if (typeof edit.property === 'string') {
// if the type of the property is string then the property is a top level property
if (!data[edit.property]) {
data[edit.property] = {};
if (!viewModel[edit.property]) {
viewModel[edit.property] = {};
}
const componentData = data[edit.property];
const componentData = viewModel[edit.property];
const componentType = this._componentMap.get(edit.property).defintion.componentType;
this.setComponentData(componentType, componentData, edit.value);
} else {
const columnPropertyName = edit.property.property;
const tableInfo = this._componentMap.get(edit.property.parentProperty).defintion.componentProperties as DesignerTableProperties;
const tableProperties = data[edit.property.parentProperty] as DesignerTableProperties;
const tableProperties = viewModel[edit.property.parentProperty] as DesignerTableProperties;
if (!tableProperties.data[edit.property.index][columnPropertyName]) {
tableProperties.data[edit.property.index][columnPropertyName] = {};
}
@@ -342,23 +342,23 @@ export class Designer extends Disposable implements IThemable {
};
}
private setComponentValue(definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerData): void {
private setComponentValue(definition: DesignerDataPropertyInfo, component: DesignerUIComponent, viewModel: DesignerViewModel): void {
// Skip the property if it is not in the data model
if (!data[definition.propertyName]) {
if (!viewModel[definition.propertyName]) {
return;
}
this._supressEditProcessing = true;
switch (definition.componentType) {
case 'input':
const input = component as InputBox;
const inputData = data[definition.propertyName] as InputBoxProperties;
const inputData = viewModel[definition.propertyName] as InputBoxProperties;
input.setEnabled(inputData.enabled ?? true);
input.value = inputData.value?.toString() ?? '';
break;
case 'table':
const table = component as Table<Slick.SlickData>;
const tableDataView = table.getData() as TableDataView<Slick.SlickData>;
const newData = (data[definition.propertyName] as DesignerTableProperties).data;
const newData = (viewModel[definition.propertyName] as DesignerTableProperties).data;
let activeCell: Slick.Cell;
if (table.container.contains(document.activeElement)) {
// Note down the current active cell if the focus is currently in the table
@@ -374,7 +374,7 @@ export class Designer extends Disposable implements IThemable {
break;
case 'checkbox':
const checkbox = component as Checkbox;
const checkboxData = data[definition.propertyName] as CheckBoxProperties;
const checkboxData = viewModel[definition.propertyName] as CheckBoxProperties;
if (checkboxData.enabled === false) {
checkbox.disable();
} else {
@@ -385,7 +385,7 @@ export class Designer extends Disposable implements IThemable {
case 'dropdown':
const dropdown = component as SelectBox;
const defaultDropdownData = definition.componentProperties as DropDownProperties;
const dropdownData = data[definition.propertyName] as DropDownProperties;
const dropdownData = viewModel[definition.propertyName] as DropDownProperties;
if (dropdownData.enabled === false) {
dropdown.disable();
} else {
@@ -531,8 +531,8 @@ export class Designer extends Disposable implements IThemable {
isFontIcon: true
});
deleteRowColumn.onClick(async (e) => {
const data = await this._input.getData();
(data[componentDefinition.propertyName] as DesignerTableProperties).data.splice(e.row, 1);
const viewModel = await this._input.getViewModel();
(viewModel[componentDefinition.propertyName] as DesignerTableProperties).data.splice(e.row, 1);
await this.handleEdit({
type: DesignerEditType.Remove,
property: componentDefinition.propertyName,

View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { CreateComponentFunc, DesignerUIComponent, SetComponentValueFunc } from 'sql/base/browser/ui/designer/designer';
import { DesignerData, DesignerEditIdentifier, DesignerDataPropertyInfo, InputBoxProperties, NameProperty } from 'sql/base/browser/ui/designer/interfaces';
import { DesignerViewModel, DesignerEditIdentifier, DesignerDataPropertyInfo, InputBoxProperties, NameProperty } from 'sql/base/browser/ui/designer/interfaces';
import * as DOM from 'vs/base/browser/dom';
import { equals } from 'vs/base/common/objects';
import { localize } from 'vs/nls';
@@ -18,7 +18,7 @@ export interface ObjectInfo {
context: PropertiesPaneObjectContext;
type: string;
components: DesignerDataPropertyInfo[];
data: DesignerData;
viewModel: DesignerViewModel;
}
export class DesignerPropertiesPane {
@@ -73,13 +73,13 @@ export class DesignerPropertiesPane {
}
});
}
const name = (<InputBoxProperties>item.data[NameProperty])?.value ?? '';
const name = (<InputBoxProperties>item.viewModel[NameProperty])?.value ?? '';
this._titleElement.innerText = localize({
key: 'tableDesigner.propertiesPaneTitleWithContext',
comment: ['{0} is the place holder for object type', '{1} is the place holder for object name']
}, "Properties - {0} {1}", item.type, name);
this._componentMap.forEach((value) => {
this._setComponentValue(value.defintion, value.component, item.data);
this._setComponentValue(value.defintion, value.component, item.viewModel);
});
}
}

View File

@@ -22,9 +22,9 @@ export interface DesignerComponentInput {
getView(): Promise<DesignerView>;
/**
* Gets the data.
* Gets the view model.
*/
getData(): Promise<DesignerData>;
getViewModel(): Promise<DesignerViewModel>;
/**
* Process the edit made in the designer.
@@ -68,7 +68,7 @@ export interface DesignerTab {
components: DesignerDataPropertyInfo[];
}
export interface DesignerData {
export interface DesignerViewModel {
[key: string]: InputBoxProperties | CheckBoxProperties | DropDownProperties | DesignerTableProperties;
}

View File

@@ -519,7 +519,7 @@ export class MainThreadDataProtocol extends Disposable implements MainThreadData
processTableEdit(table, data, edit): Thenable<azdata.designers.DesignerEditResult> {
return self._proxy.$processTableDesignerEdit(handle, table, data, edit);
},
saveTable(tableInfo: azdata.designers.TableInfo, data: azdata.designers.DesignerData): Thenable<void> {
saveTable(tableInfo: azdata.designers.TableInfo, data: azdata.designers.DesignerViewModel): Thenable<void> {
return self._proxy.$saveTable(handle, tableInfo, data);
}
});

View File

@@ -896,11 +896,11 @@ export class ExtHostDataProtocol extends ExtHostDataProtocolShape {
return this._resolveProvider<azdata.designers.TableDesignerProvider>(handle).getTableDesignerInfo(table);
}
public override $processTableDesignerEdit(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerData, edit: azdata.designers.DesignerEdit): Thenable<azdata.designers.DesignerEditResult> {
public override $processTableDesignerEdit(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerViewModel, edit: azdata.designers.DesignerEdit): Thenable<azdata.designers.DesignerEditResult> {
return this._resolveProvider<azdata.designers.TableDesignerProvider>(handle).processTableEdit(table, data, edit);
}
public override $saveTable(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerData): Thenable<void> {
public override $saveTable(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerViewModel): Thenable<void> {
return this._resolveProvider<azdata.designers.TableDesignerProvider>(handle).saveTable(table, data);
}

View File

@@ -535,12 +535,12 @@ export abstract class ExtHostDataProtocolShape {
/**
* Process the table edit.
*/
$processTableDesignerEdit(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerData, edit: azdata.designers.DesignerEdit): Thenable<azdata.designers.DesignerEditResult> { throw ni(); }
$processTableDesignerEdit(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerViewModel, edit: azdata.designers.DesignerEdit): Thenable<azdata.designers.DesignerEditResult> { throw ni(); }
/**
* Process the table edit.
*/
$saveTable(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerData): Thenable<void> { throw ni(); }
$saveTable(handle, table: azdata.designers.TableInfo, data: azdata.designers.DesignerViewModel): Thenable<void> { throw ni(); }
/**
* Open a new instance of table designer.

View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import * as azdata from 'azdata';
import { DesignerData, DesignerEdit, DesignerEditResult, DesignerComponentInput, DesignerView, DesignerTab, DesignerDataPropertyInfo, DropDownProperties, DesignerTableProperties, DesignerState } from 'sql/base/browser/ui/designer/interfaces';
import { DesignerViewModel, DesignerEdit, DesignerEditResult, DesignerComponentInput, DesignerView, DesignerTab, DesignerDataPropertyInfo, DropDownProperties, DesignerTableProperties, DesignerState } from 'sql/base/browser/ui/designer/interfaces';
import { TableDesignerProvider } from 'sql/workbench/services/tableDesigner/common/interface';
import { localize } from 'vs/nls';
import { designers } from 'sql/workbench/api/common/sqlExtHostTypes';
@@ -13,7 +13,7 @@ import { INotificationService, Severity } from 'vs/platform/notification/common/
export class TableDesignerComponentInput implements DesignerComponentInput {
private _data: DesignerData;
private _viewModel: DesignerViewModel;
private _view: DesignerView;
private _valid: boolean = true;
private _dirty: boolean = false;
@@ -50,17 +50,17 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
return this._view;
}
async getData(): Promise<DesignerData> {
if (!this._data) {
async getViewModel(): Promise<DesignerViewModel> {
if (!this._viewModel) {
await this.initialize();
}
return this._data;
return this._viewModel;
}
async processEdit(edit: DesignerEdit): Promise<DesignerEditResult> {
const result = await this._provider.processTableEdit(this._tableInfo, this._data!, edit);
const result = await this._provider.processTableEdit(this._tableInfo, this._viewModel!, edit);
if (result.isValid) {
this._data = result.data;
this._viewModel = result.viewModel;
}
this.updateState(result.isValid, true, this.saving);
return {
@@ -76,7 +76,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
});
try {
this.updateState(this.valid, this.dirty, true);
await this._provider.saveTable(this._tableInfo, this._data);
await this._provider.saveTable(this._tableInfo, this._viewModel);
this.updateState(true, false, false);
notificationHandle.updateMessage(localize('tableDesigner.savedChangeSuccess', "The changes have been successfully saved."));
} catch (error) {
@@ -106,7 +106,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
private async initialize(): Promise<void> {
const designerInfo = await this._provider.getTableDesignerInfo(this._tableInfo);
this._data = designerInfo.data;
this._viewModel = designerInfo.viewModel;
this.setDefaultData();
const advancedTabComponents: DesignerDataPropertyInfo[] = [
@@ -180,8 +180,8 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
}
];
if (designerInfo.view.addtionalTableColumnProperties) {
columnProperties.push(...designerInfo.view.addtionalTableColumnProperties);
if (designerInfo.view.additionalTableColumnProperties) {
columnProperties.push(...designerInfo.view.additionalTableColumnProperties);
}
const columnsTab = <DesignerTab>{
@@ -208,7 +208,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
};
const tabs = [columnsTab, advancedTab];
if (designerInfo.view.addtionalTabs) {
if (designerInfo.view.additionalTabs) {
tabs.push(...tabs);
}
@@ -226,7 +226,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
}
private setDefaultData(): void {
const properties = Object.keys(this._data);
const properties = Object.keys(this._viewModel);
this.setDefaultInputData(properties, designers.TableProperty.Name);
this.setDefaultInputData(properties, designers.TableProperty.Schema);
this.setDefaultInputData(properties, designers.TableProperty.Description);
@@ -234,7 +234,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
private setDefaultInputData(allProperties: string[], property: string): void {
if (allProperties.indexOf(property) === -1) {
this._data[property] = {};
this._viewModel[property] = {};
}
}
}