added checkbox component (#1330)

src/sql/parts/modelComponents/checkbox.component.ts

@@ -0,0 +1,108 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+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 { Checkbox, ICheckboxOptions } from 'sql/base/browser/ui/checkbox/checkbox';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
+
+@Component({
+	selector: 'inputBox',
+	template: `
+		<div #input style="width: 100%"></div>
+	`
+})
+export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _input: Checkbox;
+
+	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+
+	}
+
+	ngAfterViewInit(): void {
+		if (this._inputContainer) {
+			let inputOptions: ICheckboxOptions = {
+				label: ''
+			};
+
+			this._input = new Checkbox(this._inputContainer.nativeElement, inputOptions);
+
+			this._register(this._input);
+			this._register(this._input.onChange(e => {
+				this.value = this._input.checked;
+				this._onEventEmitter.fire({
+					eventType: ComponentEventType.onDidChange,
+					args: e
+				});
+			}));
+		}
+	}
+
+	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 setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this._input.checked = this.checked;
+		this._input.label = this.label;
+	}
+
+	// CSS-bound properties
+
+	public get checked(): boolean {
+		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, boolean>((props) => props.value, false);
+	}
+
+	public set value(newValue: boolean) {
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, boolean>(this.setInputBoxProperties, newValue);
+	}
+
+	private setInputBoxProperties(properties: sqlops.CheckBoxProperties, value: boolean): void {
+		properties.checked = value;
+	}
+
+	private get label(): string {
+		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, string>((props) => props.label, '');
+	}
+
+	private set label(newValue: string) {
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, string>(this.setValueProperties, newValue);
+	}
+
+	private setValueProperties(properties: sqlops.CheckBoxProperties, label: string): void {
+		properties.label = label;
+	}
+}

src/sql/parts/modelComponents/components.contribution.ts

@@ -9,6 +9,7 @@ import CardComponent from './card.component';
 import InputBoxComponent from './inputbox.component';
 import DropDownComponent from './dropdown.component';
 import ButtonComponent from './button.component';
+import CheckBoxComponent from './checkbox.component';
 import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
 
@@ -29,3 +30,7 @@ registerComponentType(DROPDOWN_COMPONENT, ModelComponentTypes.DropDown, DropDown
 
 export const BUTTON_COMPONENT = 'button-component';
 registerComponentType(BUTTON_COMPONENT, ModelComponentTypes.Button, ButtonComponent);
+
+
+export const CHECKBOX_COMPONENT = 'checkbox-component';
+registerComponentType(CHECKBOX_COMPONENT, ModelComponentTypes.CheckBox, CheckBoxComponent);

src/sql/parts/modelComponents/formContainer.component.ts

@@ -21,6 +21,7 @@ export interface TitledFormItemLayout {
 	title: string;
 	actions?: string[];
 	isFormComponent: Boolean;
+	horizontal: boolean;
 }
 class FormItem {
 	constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { }
@@ -32,17 +33,36 @@ class FormItem {
 				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
 			<div *ngFor="let item of items" class="form-row">
 				<ng-container *ngIf="isFormComponent(item)">
-					<div class="form-cell">{{getItemTitle(item)}}</div>
+					<ng-container *ngIf="isHorizontal(item)">
-					<div class="form-cell">
+						<div class="form-cell">{{getItemTitle(item)}}</div>
-						<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+						<div class="form-cell">
-						</model-component-wrapper>
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
-					</div>
-					<div *ngIf="itemHasActions(item)" class="form-cell">
-						<div *ngFor="let actionItem of getActionComponents(item)" >
-							<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
 							</model-component-wrapper>
 						</div>
-					</div>
+						<div *ngIf="itemHasActions(item)" class="form-cell">
+							<div class="form-actions-table">
+								<div *ngFor="let actionItem of getActionComponents(item)" class="form-cell" >
+									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
+									</model-component-wrapper>
+								</div>
+							</div>
+						</div>
+					</ng-container>
+					<ng-container *ngIf="isVertical(item)">
+						<div class="form-item-row form-item-title">{{getItemTitle(item)}}</div>
+						<div class="form-item-row">
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+							</model-component-wrapper>
+						</div>
+						<div *ngIf="itemHasActions(item)" class="form-actions-table">
+
+							<div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" >
+								<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
+								</model-component-wrapper>
+							</div>
+
+						</div>
+					</ng-container>
 				</ng-container>
 			</div>
 		</div>
@@ -58,9 +78,9 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
-	constructor (
+	constructor(
-			@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
-		 	@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
 		super(changeRef);
 	}
 
@@ -98,7 +118,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		return itemConfig ? itemConfig.title : '';
 	}
 
-	private getActionComponents(item: FormItem): FormItem[]{
+	private getActionComponents(item: FormItem): FormItem[] {
 		let items = this.items;
 		let itemConfig = item.config;
 		if (itemConfig && itemConfig.actions) {
@@ -125,4 +145,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	public setLayout(layout: any): void {
 		this.layout();
 	}
+
+	private isHorizontal(item: FormItem): boolean {
+		return item && item.config && item.config.horizontal;
+	}
+
+	private isVertical(item: FormItem): boolean {
+		return item && item.config && !item.config.horizontal;
+	}
 }

src/sql/parts/modelComponents/formLayout.css

@@ -5,13 +5,35 @@
 	padding: 30px;
 }
 
+.form-actions-table {
+	display:table;
+}
+
 .form-row {
 	display: table-row;
 	width: 100px;
+	padding-bottom: 10px;
+}
+
+.form-item-row {
+	padding-bottom: 5px;
+	width: 300px;
+}
+
+.form-item-title {
+
+	padding-top: 20px;
 }
 
 .form-cell {
-	padding: 5px;
+	padding-top: 20px;
+	padding-right: 5px;
+	display: table-cell;
+}
+
+.form-actions-cell {
+	padding-top: 5px;
+	padding-right: 5px;
 	display: table-cell;
 }
 

src/sql/sqlops.proposed.d.ts

@@ -20,6 +20,7 @@ declare module 'sqlops' {
 		flexContainer(): FlexBuilder;
 		card(): ComponentBuilder<CardComponent>;
 		inputBox(): ComponentBuilder<InputBoxComponent>;
+		checkBox(): ComponentBuilder<CheckBoxComponent>;
 		button(): ComponentBuilder<ButtonComponent>;
 		dropDown(): ComponentBuilder<DropDownComponent>;
 		dashboardWidget(widgetId: string): ComponentBuilder<WidgetComponent>;
@@ -144,7 +145,7 @@ declare module 'sqlops' {
 	}
 
 	export interface FormItemLayout {
-
+		horizontal: boolean;
 	}
 
 	export interface FormLayout {
@@ -188,6 +189,11 @@ declare module 'sqlops' {
 		value?: string;
 	}
 
+	export interface CheckBoxProperties {
+		checked?: boolean;
+		label?: string;
+	}
+
 	export interface DropDownProperties {
 		value?: string;
 		values?: string[];
@@ -208,6 +214,12 @@ declare module 'sqlops' {
 		onTextChanged: vscode.Event<any>;
 	}
 
+	export interface CheckBoxComponent extends Component {
+		checked: boolean;
+		label: string;
+		onChanged: vscode.Event<any>;
+	}
+
 	export interface DropDownComponent extends Component {
 		value: string;
 		values: string[];

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -70,6 +70,7 @@ export enum ModelComponentTypes {
 	InputBox,
 	DropDown,
 	Button,
+	CheckBox,
 	DashboardWidget,
 	DashboardWebview,
 	Form

src/sql/workbench/api/node/extHostModelView.ts

@@ -48,6 +48,11 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
 		return this.withEventHandler(new InputBoxWrapper(this._proxy, this._handle, id), id);
 	}
 
+	checkBox(): sqlops.ComponentBuilder<sqlops.CheckBoxComponent> {
+		let id = this.getNextComponentId();
+		return this.withEventHandler(new CheckBoxWrapper(this._proxy, this._handle, id), id);
+	}
+
 	button(): sqlops.ComponentBuilder<sqlops.ButtonComponent> {
 		let id = this.getNextComponentId();
 		return this.withEventHandler(new ButtonWrapper(this._proxy, this._handle, id), id);
@@ -343,6 +348,34 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 	}
 }
 
+class CheckBoxWrapper extends ComponentWrapper implements sqlops.CheckBoxComponent {
+
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.CheckBox, id);
+		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
+	}
+
+	public get checked(): boolean {
+		return this.properties['checked'];
+	}
+	public set checked(v: boolean) {
+		this.setProperty('checked', v);
+	}
+
+	public get label(): string {
+		return this.properties['label'];
+	}
+	public set label(v: string) {
+		this.setProperty('label', v);
+	}
+
+	public get onChanged(): vscode.Event<any> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter && emitter.event;
+	}
+}
+
 class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownComponent {
 
 	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {