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

@@ -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;
}