added dropdown and form layout to model view (#1269)

* added dropdown and form layout to model view

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

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler } from 'sql/common/theme/styler';
+import { Button } from 'sql/base/browser/ui/button/button';
+import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
+
+@Component({
+	selector: 'button',
+	template: `
+		<div #input style="width: 100%"></div>
+	`
+})
+export default class ButtonComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _button: Button;
+
+	@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) {
+
+
+			this._button = new Button(this._inputContainer.nativeElement);
+
+			this._register(this._button);
+			this._register(attachButtonStyler(this._button, this._commonService.themeService, {
+				buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND
+			}));
+			this._register(this._button.onDidClick(e => {
+				this._onEventEmitter.fire({
+					eventType: ComponentEventType.onDidClick,
+					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._button.label = this.label;
+	}
+
+	// CSS-bound properties
+
+	private get label(): string {
+		return this.getPropertyOrDefault<sqlops.ButtonProperties, string>((props) => props.label, '');
+	}
+
+	private set label(newValue: string) {
+		this.setPropertyFromUI<sqlops.ButtonProperties, string>(this.setValueProperties, newValue);
+	}
+
+	private setValueProperties(properties: sqlops.ButtonProperties, label: string): void {
+		properties.label = label;
+	}
+}

src/sql/parts/modelComponents/componentBase.ts

@@ -75,7 +75,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		return types.isUndefinedOrNull(property) ? defaultVal : property;
 	}
 
-	protected setProperty<TPropertyBag, TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
+	protected setPropertyFromUI<TPropertyBag, TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
 		propertySetter(this.getProperties<TPropertyBag>(), value);
 		this._onEventEmitter.fire({
 			eventType: ComponentEventType.PropertiesChanged,
@@ -86,6 +86,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	public get onEvent(): Event<IComponentEventArgs> {
 		return this._onEventEmitter.event;
 	}
+
+	public get title(): string {
+		let properties = this.getProperties();
+		let title = properties['title'];
+		return title ? <string>title : '';
+	}
 }
 
 export abstract class ContainerBase<T> extends ComponentBase {

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

@@ -4,16 +4,28 @@
  *--------------------------------------------------------------------------------------------*/
 
 import FlexContainer from './flexContainer.component';
+import FormContainer from './formContainer.component';
 import CardComponent from './card.component';
 import InputBoxComponent from './inputbox.component';
+import DropDownComponent from './dropdown.component';
+import ButtonComponent from './button.component';
 import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 export const FLEX_CONTAINER = 'flex-container';
 registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexContainer);
 
+export const FORM_CONTAINER = 'form-container';
+registerComponentType(FORM_CONTAINER, ModelComponentTypes.Form, FormContainer);
+
 export const CARD_COMPONENT = 'card-component';
 registerComponentType(CARD_COMPONENT, ModelComponentTypes.Card, CardComponent);
 
 export const INPUTBOX_COMPONENT = 'inputbox-component';
 registerComponentType(INPUTBOX_COMPONENT, ModelComponentTypes.InputBox, InputBoxComponent);
+
+export const DROPDOWN_COMPONENT = 'dropdown-component';
+registerComponentType(DROPDOWN_COMPONENT, ModelComponentTypes.DropDown, DropDownComponent);
+
+export const BUTTON_COMPONENT = 'button-component';
+registerComponentType(BUTTON_COMPONENT, ModelComponentTypes.Button, ButtonComponent);

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

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/dropdown';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachEditableDropdownStyler } from 'sql/common/theme/styler';
+
+@Component({
+	selector: 'inputBox',
+	template: `
+		<div #input style="width: 100%"></div>
+	`
+})
+export default class DropDownComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _dropdown: Dropdown;
+
+	@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 dropdownOptions: IDropdownOptions = {
+				values: [],
+				strictSelection: false,
+				placeholder: '',
+				maxHeight: 125,
+				ariaLabel: ''
+			};
+
+			this._dropdown = new Dropdown(this._inputContainer.nativeElement, this._commonService.contextViewService, this._commonService.themeService,
+				dropdownOptions);
+
+			this._register(this._dropdown);
+			this._register(attachEditableDropdownStyler(this._dropdown, this._commonService.themeService));
+			this._register(this._dropdown.onValueChange(e => {
+				this.value = this._dropdown.value;
+				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._dropdown.values = this.values ? this.values : [];
+		if (this.value) {
+			this._dropdown.value = this.value;
+		}
+	}
+
+	// CSS-bound properties
+
+	private get value(): string {
+		return this.getPropertyOrDefault<sqlops.DropDownProperties, string>((props) => props.value, '');
+	}
+
+	private set value(newValue: string) {
+		this.setPropertyFromUI<sqlops.DropDownProperties, string>(this.setValueProperties, newValue);
+	}
+
+	private get values(): string[] {
+		return this.getPropertyOrDefault<sqlops.DropDownProperties, string[]>((props) => props.values, undefined);
+	}
+
+	private set values(newValue: string[]) {
+		this.setPropertyFromUI<sqlops.DropDownProperties, string[]>(this.setValuesProperties, newValue);
+	}
+
+	private setValueProperties(properties: sqlops.DropDownProperties, value: string): void {
+		properties.value = value;
+	}
+
+	private setValuesProperties(properties: sqlops.DropDownProperties, values: string[]): void {
+		properties.values = values;
+	}
+}

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

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./formLayout';
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+} from '@angular/core';
+
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { FormLayout, FormItemLayout } from 'sqlops';
+
+import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
+import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+
+export interface TitledFormItemLayout {
+	title: string;
+	actions?: string[];
+	isFormComponent: Boolean;
+}
+class FormItem {
+	constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { }
+}
+
+@Component({
+	template: `
+		<div #container *ngIf="items" class="form-table"
+				[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>
+					<div class="form-cell">
+						<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+						</model-component-wrapper>
+					</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>
+				</ng-container>
+			</div>
+		</div>
+	`
+})
+export default class FormContainer extends ContainerBase<FormItemLayout> implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	private _alignItems: string;
+	private _alignContent: string;
+
+	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
+	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
+
+	constructor (
+			@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		 	@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	ngAfterViewInit(): void {
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		if (this._componentWrappers) {
+			this._componentWrappers.forEach(wrapper => {
+				wrapper.layout();
+			});
+		}
+	}
+
+	public get alignItems(): string {
+		return this._alignItems;
+	}
+
+	public get alignContent(): string {
+		return this._alignContent;
+	}
+
+	private getItemTitle(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig ? itemConfig.title : '';
+	}
+
+	private getActionComponents(item: FormItem): FormItem[]{
+		let items = this.items;
+		let itemConfig = item.config;
+		if (itemConfig && itemConfig.actions) {
+			let resultItems = itemConfig.actions.map(x => {
+				let actionComponent = items.find(i => i.descriptor.id === x);
+				return <FormItem>actionComponent;
+			});
+
+			return resultItems.filter(r => r && r.descriptor);
+		}
+
+		return [];
+	}
+
+	private isFormComponent(item: FormItem): Boolean {
+		return item && item.config && item.config.isFormComponent;
+	}
+
+	private itemHasActions(item: FormItem): Boolean {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.actions !== undefined && itemConfig.actions.length > 0;
+	}
+
+	public setLayout(layout: any): void {
+		this.layout();
+	}
+}

src/sql/parts/modelComponents/formLayout.css

@@ -0,0 +1,20 @@
+
+.form-table {
+	width:400px;
+	display:table;
+	padding: 30px;
+}
+
+.form-row {
+	display: table-row;
+	width: 100px;
+}
+
+.form-cell {
+	padding: 5px;
+	display: table-cell;
+}
+
+.form-action {
+	width: 20px;
+}

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

@@ -3,7 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
 } from '@angular/core';
 
@@ -70,7 +71,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this._changeRef.detectChanges();
 	}
 
-	public setLayout (layout: any): void {
+	public setLayout(layout: any): void {
 		// TODO allow configuring the look and feel
 		this.layout();
 	}
@@ -87,7 +88,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	}
 
 	public set value(newValue: string) {
-		 this.setProperty<sqlops.InputBoxProperties, string>(this.setInputBoxProperties, newValue);
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>(this.setInputBoxProperties, newValue);
 	}
 
 	private setInputBoxProperties(properties: sqlops.InputBoxProperties, value: string): void {

src/sql/parts/modelComponents/interfaces.ts

@@ -21,6 +21,7 @@ export interface IComponent {
 	addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
 	setLayout?: (layout: any) => void;
 	setProperties?: (properties: { [key: string]: any; }) => void;
+	title?: string;
 	onEvent?: Event<IComponentEventArgs>;
 }
 
@@ -53,11 +54,13 @@ export interface IComponentDescriptor {
 export interface IComponentEventArgs {
 	eventType: ComponentEventType;
 	args: any;
+	componentId?: string;
 }
 
 export enum ComponentEventType {
 	PropertiesChanged,
-	onDidChange
+	onDidChange,
+	onDidClick
 }
 
 export interface IModelStore {

src/sql/parts/modelComponents/viewBase.ts

@@ -10,7 +10,7 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import nls = require('vs/nls');
 
 import * as sqlops from 'sqlops';
-import { IModelStore, IComponentDescriptor, IComponent } from './interfaces';
+import { IModelStore, IComponentDescriptor, IComponent, IComponentEventArgs } from './interfaces';
 import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IModelView } from 'sql/services/model/modelViewService';
 import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
@@ -18,7 +18,7 @@ import { AngularDisposable } from 'sql/base/common/lifecycle';
 import { ModelStore } from 'sql/parts/modelComponents/modelStore';
 import Event, { Emitter } from 'vs/base/common/event';
 
-const componentRegistry = <IComponentRegistry> Registry.as(Extensions.ComponentContribution);
+const componentRegistry = <IComponentRegistry>Registry.as(Extensions.ComponentContribution);
 
 /**
  * Provides common logic required for any implementation that hooks to a model provided by
@@ -57,7 +57,7 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 		this.setLayout(component.id, component.layout);
 		this.registerEvent(component.id);
 		if (component.itemConfigs) {
-			for(let item of component.itemConfigs) {
+			for (let item of component.itemConfigs) {
 				this.addToContainer(component.id, item);
 			}
 		}
@@ -66,12 +66,12 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 	}
 
 	clearContainer(componentId: string): void {
-		this.queueAction(componentId, (component)  => component.clearContainer());
+		this.queueAction(componentId, (component) => component.clearContainer());
 	}
 
 	addToContainer(containerId: string, itemConfig: IItemConfig): void {
 		// Do not return the promise as this should be non-blocking
-		this.queueAction(containerId, (component)  => {
+		this.queueAction(containerId, (component) => {
 			let childDescriptor = this.defineComponent(itemConfig.componentShape);
 			component.addToContainer(childDescriptor, itemConfig.config);
 		});
@@ -81,14 +81,14 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 		if (!layout) {
 			return;
 		}
-		this.queueAction(componentId, (component)  => component.setLayout(layout));
+		this.queueAction(componentId, (component) => component.setLayout(layout));
 	}
 
 	setProperties(componentId: string, properties: { [key: string]: any; }): void {
 		if (!properties) {
 			return;
 		}
-		this.queueAction(componentId, (component)  => component.setProperties(properties));
+		this.queueAction(componentId, (component) => component.setProperties(properties));
 	}
 
 	private queueAction<T>(componentId: string, action: (component: IComponent) => T): void {
@@ -98,16 +98,17 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 	}
 
 	registerEvent(componentId: string) {
-		this.queueAction(componentId, (component)  => {
+		this.queueAction(componentId, (component) => {
 			if (component.onEvent) {
 				this._register(component.onEvent(e => {
+					e.componentId = componentId;
 					this._onEventEmitter.fire(e);
 				}));
 			}
 		});
 	}
 
-	public get onEvent(): Event<any> {
+	public get onEvent(): Event<IComponentEventArgs> {
 		return this._onEventEmitter.event;
 	}
 }