diff --git a/src/sql/parts/modelComponents/components.contribution.ts b/src/sql/parts/modelComponents/components.contribution.ts index 2403ca7d2f..85f19d4bdf 100644 --- a/src/sql/parts/modelComponents/components.contribution.ts +++ b/src/sql/parts/modelComponents/components.contribution.ts @@ -11,6 +11,7 @@ import DropDownComponent from './dropdown.component'; import ButtonComponent from './button.component'; import CheckBoxComponent from './checkbox.component'; import RadioButtonComponent from './radioButton.component'; +import TextComponent from './text.component'; import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry'; import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes'; @@ -38,3 +39,6 @@ registerComponentType(CHECKBOX_COMPONENT, ModelComponentTypes.CheckBox, CheckBox export const RADIOBUTTON_COMPONENT = 'radiobutton-component'; registerComponentType(RADIOBUTTON_COMPONENT, ModelComponentTypes.RadioButton, RadioButtonComponent); + +export const TEXT_COMPONENT = 'text-component'; +registerComponentType(TEXT_COMPONENT, ModelComponentTypes.Text, TextComponent); diff --git a/src/sql/parts/modelComponents/radioButton.component.ts b/src/sql/parts/modelComponents/radioButton.component.ts index 2030cb9329..ff793223e8 100644 --- a/src/sql/parts/modelComponents/radioButton.component.ts +++ b/src/sql/parts/modelComponents/radioButton.component.ts @@ -50,6 +50,7 @@ export default class RadioButtonComponent extends ComponentBase implements IComp this._register(this._input); this._register(this._input.onClicked(e => { + this.checked = this._input.checked; this._onEventEmitter.fire({ eventType: ComponentEventType.onDidClick, args: e @@ -89,8 +90,12 @@ export default class RadioButtonComponent extends ComponentBase implements IComp return this.getPropertyOrDefault((props) => props.checked, false); } + public set checked(newValue: boolean) { + this.setPropertyFromUI((properties, value) => { properties.checked = value; }, newValue); + } + public set value(newValue: string) { - this.setPropertyFromUI((properties, value) => { properties.checked = value; }, newValue); + this.setPropertyFromUI((properties, value) => { properties.value = value; }, newValue); } public get value(): string { diff --git a/src/sql/parts/modelComponents/text.component.ts b/src/sql/parts/modelComponents/text.component.ts new file mode 100644 index 0000000000..b8446f842c --- /dev/null +++ b/src/sql/parts/modelComponents/text.component.ts @@ -0,0 +1,67 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import 'vs/css!./radioButton'; +import { + Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver, + ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit +} from '@angular/core'; + +import * as sqlops from 'sqlops'; +import Event, { Emitter } from 'vs/base/common/event'; + +import { ComponentBase } from 'sql/parts/modelComponents/componentBase'; +import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; +import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; + +@Component({ + selector: 'label', + template: ` +

{{getValue()}}

` +}) +export default class TextComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { + @Input() descriptor: IComponentDescriptor; + @Input() modelStore: IModelStore; + + constructor( + @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, + @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { + super(changeRef); + } + + ngOnInit(): void { + this.baseInit(); + } + + ngAfterViewInit(): void { + } + + ngOnDestroy(): void { + this.baseDestroy(); + } + + /// IComponent implementation + + public layout(): void { + this._changeRef.detectChanges(); + } + + public setLayout(layout: any): void { + // TODO allow configuring the look and feel + this.layout(); + } + + public set value(newValue: string) { + this.setPropertyFromUI((properties, value) => { properties.value = value; }, newValue); + } + + public get value(): string { + return this.getPropertyOrDefault((props) => props.value, ''); + } + + public getValue(): string { + return this.value; + } +} diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index d2d059352e..ba5fbaee39 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -22,6 +22,7 @@ declare module 'sqlops' { inputBox(): ComponentBuilder; checkBox(): ComponentBuilder; radioButton(): ComponentBuilder; + text(): ComponentBuilder; button(): ComponentBuilder; dropDown(): ComponentBuilder; dashboardWidget(widgetId: string): ComponentBuilder; @@ -262,6 +263,10 @@ declare module 'sqlops' { checked?: boolean; } + export interface TextComponentProperties { + value?: string; + } + export interface DropDownProperties { value?: string; values?: string[]; @@ -279,6 +284,10 @@ declare module 'sqlops' { onDidActionClick: vscode.Event; } + export interface TextComponent extends Component { + value: string; + } + export interface InputBoxComponent extends Component, InputBoxProperties { onTextChanged: vscode.Event; } diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index 03836e0b49..aa302f4966 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -72,6 +72,7 @@ export enum ModelComponentTypes { Button, CheckBox, RadioButton, + Text, DashboardWidget, DashboardWebview, Form diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index 70b86841ca..05d629825b 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -59,6 +59,13 @@ class ModelBuilderImpl implements sqlops.ModelBuilder { return builder; } + text(): sqlops.ComponentBuilder { + let id = this.getNextComponentId(); + let builder: ComponentBuilderImpl = this.getComponentBuilder(new TextComponentWrapper(this._proxy, this._handle, id), id); + this._componentBuilders.set(id, builder); + return builder; + } + radioButton(): sqlops.ComponentBuilder { let id = this.getNextComponentId(); let builder: ComponentBuilderImpl = this.getComponentBuilder(new RadioButtonWrapper(this._proxy, this._handle, id), id); @@ -557,6 +564,21 @@ class RadioButtonWrapper extends ComponentWrapper implements sqlops.RadioButtonC } } +class TextComponentWrapper extends ComponentWrapper implements sqlops.TextComponentProperties { + + constructor(proxy: MainThreadModelViewShape, handle: number, id: string) { + super(proxy, handle, ModelComponentTypes.Text, id); + this.properties = {}; + } + + public get value(): string { + return this.properties['value']; + } + public set value(v: string) { + this.setProperty('value', v); + } +} + class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownComponent { constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {