mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-21 09:35:38 -05:00
rename dataModel to viewModel (#17387)
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user