added group container (#1508)

samples/sqlservices/package.json

@@ -19,7 +19,7 @@
         "commands": [
             {
                 "command": "sqlservices.openDialog",
-                "title": "sqlservices.openDialog"
+                "title": "openDialog"
             },
             {
                 "command": "sqlservices.openEditor",

samples/sqlservices/src/controllers/mainController.ts

@@ -79,10 +79,8 @@ export default class MainController implements vscode.Disposable {
 			let inputBox = view.modelBuilder.inputBox()
 				.withProperties({
 					//width: 300
-			})
+				}).component();
-			.component();
+			let inputBox2 = view.modelBuilder.inputBox().component();
-			let inputBox2 = view.modelBuilder.inputBox()
-			.component();
 
 			let checkbox = view.modelBuilder.checkBox()
 				.withProperties({
@@ -136,17 +134,40 @@ export default class MainController implements vscode.Disposable {
 					value: 'option2',
 					name: 'radioButtonOptions',
 					label: 'Option 2'
-
-					//width: 300
 				}).component();
+			let inputBox3 = view.modelBuilder.inputBox().component();
+			let inputBox4 = view.modelBuilder.inputBox().component();
+			let form2Model = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: inputBox3,
+					title: 'inputBox3'
+				}, {
+					component: inputBox4,
+					title: 'inputBox4'
+				}], {
+					horizontal: true
+				}).component();
+			let groupModel1 = view.modelBuilder.groupContainer()
+				.withLayout({
+				}).withItems([
+					form2Model
+				]).component();
+			radioButton.onDidClick(() => {
+				inputBox.value = radioButton.value;
+				groupModel1.enabled = true;
+			});
+			radioButton2.onDidClick(() => {
+				inputBox.value = radioButton.value;
+				groupModel1.enabled = false;
+			});
+
 			let flexRadioButtonsModel = view.modelBuilder.flexContainer()
 				.withLayout({
 					flexFlow: 'column',
 					alignItems: 'left',
-					justifyContent: 'space-evenly',
 					height: 50
 				}).withItems([
-					radioButton, radioButton2]
+					radioButton, groupModel1, radioButton2]
 				, { flex: '1 1 50%' }).component();
 			let formModel = view.modelBuilder.formContainer()
 				.withFormItems([{
@@ -170,7 +191,6 @@ export default class MainController implements vscode.Disposable {
 					title: 'Options'
 				}], {
 					horizontal: false,
-						//width: 500,
 					componentWidth: 400
 				}).component();
 			await view.initializeModel(formModel);

src/sql/parts/modelComponents/componentBase.ts

@@ -105,6 +105,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		return <boolean>enabled;
 	}
 
+	public set enabled(value: boolean) {
+		let properties = this.getProperties();
+		properties['enabled'] = value;
+		this.setProperties(properties);
+	}
+
 	public get valid(): boolean {
 		return this._valid;
 	}
@@ -173,5 +179,15 @@ export abstract class ContainerBase<T> extends ComponentBase {
 		this._changeRef.detectChanges();
 	}
 
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this.items.forEach(item => {
+			let component = this.modelStore.getComponent(item.descriptor.id);
+			if (component) {
+				component.enabled = this.enabled;
+			}
+		});
+	}
+
 	abstract setLayout(layout: any): void;
 }

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

@@ -5,6 +5,7 @@
 
 import FlexContainer from './flexContainer.component';
 import FormContainer from './formContainer.component';
+import GroupContainer from './groupContainer.component';
 import CardComponent from './card.component';
 import InputBoxComponent from './inputbox.component';
 import DropDownComponent from './dropdown.component';
@@ -22,6 +23,9 @@ registerComponentType(FLEX_CONTAINER, ModelComponentTypes.FlexContainer, FlexCon
 export const FORM_CONTAINER = 'form-container';
 registerComponentType(FORM_CONTAINER, ModelComponentTypes.Form, FormContainer);
 
+export const GROUP_CONTAINER = 'group-container';
+registerComponentType(GROUP_CONTAINER, ModelComponentTypes.Group, GroupContainer);
+
 export const CARD_COMPONENT = 'card-component';
 registerComponentType(CARD_COMPONENT, ModelComponentTypes.Card, CardComponent);
 

src/sql/parts/modelComponents/formLayout.css

@@ -1,7 +1,7 @@
 
 .form-table {
 	display: table;
-	padding: 10px 30px 0px 30px;
+	padding: 5px 30px 0px 30px;
 	box-sizing: border-box;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .form-cell {
-	padding-bottom: 20px;
+	padding-bottom: 10px;
 	padding-right: 5px;
 	display: table-cell;
 }

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

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./groupLayout';
+
+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 { GroupLayout, GroupItemLayout } 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';
+
+@Component({
+	selector: 'modelview-groupContainer',
+	template: `
+		<div *ngIf="hasHeader()" class="modelview-group-header" >
+				{{_containerLayout.header}}
+		</div>
+		<div #container *ngIf="items" class="modelview-group-container" [style.width]="getContainerWidth()">
+			<ng-container *ngFor="let item of items">
+			<div class="modelview-group-row" >
+				<div  class="modelview-group-cell">
+				<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
+				</model-component-wrapper>
+				</div>
+			</div>
+			</ng-container>
+		</div>
+	`
+})
+export default class GroupContainer extends ContainerBase<GroupLayout> implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+
+	private _containerLayout: GroupLayout;
+
+	@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 setLayout(layout: GroupLayout): void {
+		this._containerLayout = layout;
+		this.layout();
+	}
+
+	private hasHeader(): boolean {
+		return this._containerLayout && this._containerLayout && this._containerLayout.header !== undefined;
+	}
+
+	private getContainerWidth(): string {
+		if (this._containerLayout && this._containerLayout.width) {
+			let width: string = this._containerLayout.width.toString();
+			if (!width.endsWith('%') && !width.toLowerCase().endsWith('px')) {
+				width = width + 'px';
+			}
+			return width;
+		} else {
+			return '100%';
+		}
+	}
+}

src/sql/parts/modelComponents/groupLayout.css

@@ -0,0 +1,21 @@
+
+.modelview-group-container {
+	display: table;
+	padding: 5px 10px 5px 10px;
+	box-sizing: border-box;
+}
+
+.modelview-group-row {
+	display: table-row;
+
+}
+
+.modelview-group-header {
+	padding-bottom: 5px;
+	font-size: 14px;
+}
+
+.modelview-group-cell {
+	padding-bottom: 5px;
+	display: table-cell;
+}

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

@@ -13,7 +13,8 @@ import * as sqlops from 'sqlops';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 
-import { InputBox, IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputbox/inputBox';
+import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';

src/sql/parts/modelComponents/interfaces.ts

@@ -23,6 +23,7 @@ export interface IComponent {
 	addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
 	setLayout?: (layout: any) => void;
 	setProperties?: (properties: { [key: string]: any; }) => void;
+	enabled: boolean;
 	readonly valid?: boolean;
 	validate(): Thenable<boolean>;
 }

src/sql/sqlops.proposed.d.ts

@@ -29,6 +29,7 @@ declare module 'sqlops' {
 		dashboardWidget(widgetId: string): ComponentBuilder<DashboardWidgetComponent>;
 		dashboardWebview(webviewId: string): ComponentBuilder<DashboardWebviewComponent>;
 		formContainer(): FormBuilder;
+		groupContainer(): GroupBuilder;
 	}
 
 	export interface ComponentBuilder<T extends Component> {
@@ -45,6 +46,9 @@ declare module 'sqlops' {
 
 	}
 
+	export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout> {
+	}
+
 	export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout> {
 		withFormItems(components: FormComponent[], itemLayout?: FormItemLayout): ContainerBuilder<FormContainer, FormLayout, FormItemLayout>;
 
@@ -167,7 +171,7 @@ declare module 'sqlops' {
 		 */
 		alignContent?: string;
 
-		height? : number | string;
+		height?: number | string;
 	}
 
 	export interface FlexItemLayout {
@@ -183,12 +187,20 @@ declare module 'sqlops' {
 	}
 
 	export interface FormItemLayout {
-		horizontal: boolean;
+		horizontal?: boolean;
-		componentWidth: number;
+		componentWidth?: number;
 	}
 
 	export interface FormLayout {
-		width: number;
+		width?: number;
+	}
+
+	export interface GroupLayout {
+		width?: number | string;
+		header?: string;
+	}
+
+	export interface GroupItemLayout {
 	}
 
 	export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> {
@@ -197,6 +209,8 @@ declare module 'sqlops' {
 	export interface FormContainer extends Container<FormLayout, FormItemLayout> {
 	}
 
+	export interface GroupContainer extends Container<GroupLayout, GroupItemLayout> {
+	}
 
 	/**
 	 * Describes an action to be shown in the UI, with a user-readable label

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

@@ -76,7 +76,8 @@ export enum ModelComponentTypes {
 	Text,
 	DashboardWidget,
 	DashboardWebview,
-	Form
+	Form,
+	Group
 }
 
 export interface IComponentShape {

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

@@ -45,6 +45,13 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
 		return container;
 	}
 
+	groupContainer(): sqlops.GroupBuilder {
+		let id = this.getNextComponentId();
+		let container: ContainerBuilderImpl<sqlops.GroupContainer, any, any> = new ContainerBuilderImpl<sqlops.GroupContainer, sqlops.GroupLayout, sqlops.GroupItemLayout>(this._proxy, this._handle, ModelComponentTypes.Group, id);
+		this._componentBuilders.set(id, container);
+		return container;
+	}
+
 	card(): sqlops.ComponentBuilder<sqlops.CardComponent> {
 		let id = this.getNextComponentId();
 		let builder: ComponentBuilderImpl<sqlops.CardComponent> = this.getComponentBuilder(new CardWrapper(this._proxy, this._handle, id), id);
@@ -199,7 +206,6 @@ class ContainerBuilderImpl<T extends sqlops.Component, TLayout, TItemLayout> ext
 }
 
 class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sqlops.FormLayout, sqlops.FormItemLayout> implements sqlops.FormBuilder {
-
 	withFormItems(components: sqlops.FormComponent[], itemLayout?: sqlops.FormItemLayout): sqlops.ContainerBuilder<sqlops.FormContainer, sqlops.FormLayout, sqlops.FormItemLayout> {
 		this._component.itemConfigs = components.map(item => {
 			return this.convertToItemConfig(item, itemLayout);