diff --git a/samples/sqlservices/package.json b/samples/sqlservices/package.json index c41815e28c..5cdebd7918 100644 --- a/samples/sqlservices/package.json +++ b/samples/sqlservices/package.json @@ -19,7 +19,7 @@ "commands": [ { "command": "sqlservices.openDialog", - "title": "sqlservices.openDialog" + "title": "openDialog" }, { "command": "sqlservices.openEditor", diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index 3cb17ed902..95e7c22d82 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -44,7 +44,7 @@ export default class MainController implements vscode.Disposable { vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`); }); - vscode.commands.registerCommand('sqlservices.openDialog', () => { + vscode.commands.registerCommand('sqlservices.openDialog', () => { this.openDialog(); }); @@ -77,51 +77,49 @@ export default class MainController implements vscode.Disposable { dialog.customButtons = [customButton1, customButton2]; tab1.registerContent(async (view) => { let inputBox = view.modelBuilder.inputBox() - .withProperties({ - //width: 300 - }) - .component(); - let inputBox2 = view.modelBuilder.inputBox() - .component(); + .withProperties({ + //width: 300 + }).component(); + let inputBox2 = view.modelBuilder.inputBox().component(); let checkbox = view.modelBuilder.checkBox() - .withProperties({ - label: 'Copy-only backup' - }) - .component(); + .withProperties({ + label: 'Copy-only backup' + }) + .component(); checkbox.onChanged(e => { - console.info("inputBox.enabled " + inputBox.enabled); - inputBox.enabled = !inputBox.enabled; + console.info("inputBox.enabled " + inputBox.enabled); + inputBox.enabled = !inputBox.enabled; }); let button = view.modelBuilder.button() - .withProperties({ - label: '+' - }).component(); + .withProperties({ + label: '+' + }).component(); let button3 = view.modelBuilder.button() - .withProperties({ - label: '-' + .withProperties({ + label: '-' - }).component(); + }).component(); let button2 = view.modelBuilder.button() - .component(); + .component(); button.onDidClick(e => { - inputBox2.value = 'Button clicked'; + inputBox2.value = 'Button clicked'; }); let dropdown = view.modelBuilder.dropDown() - .withProperties({ - value: 'Full', - values: ['Full', 'Differential', 'Transaction Log'] - }) - .component(); + .withProperties({ + value: 'Full', + values: ['Full', 'Differential', 'Transaction Log'] + }) + .component(); let f = 0; inputBox.onTextChanged((params) => { - vscode.window.showInformationMessage(inputBox.value); + vscode.window.showInformationMessage(inputBox.value); f = f + 1; inputBox2.value = f.toString(); }); dropdown.onValueChanged((params) => { - vscode.window.showInformationMessage(inputBox2.value); - inputBox.value = dropdown.value; + vscode.window.showInformationMessage(inputBox2.value); + inputBox.value = dropdown.value; }); let radioButton = view.modelBuilder.radioButton() .withProperties({ @@ -136,43 +134,65 @@ 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([{ - component: inputBox, - title: 'Backup name' + .withFormItems([{ + component: inputBox, + title: 'Backup name' }, { - component: inputBox2, - title: 'Recovery model' + component: inputBox2, + title: 'Recovery model' }, { - component: dropdown, - title: 'Backup type' + component: dropdown, + title: 'Backup type' }, { - component: checkbox, - title: '' + component: checkbox, + title: '' }, { - component: inputBox2, - title: 'Backup files', - actions: [button, button3] + component: inputBox2, + title: 'Backup files', + actions: [button, button3] }, { - component: flexRadioButtonsModel, - title: 'Options' + component: flexRadioButtonsModel, + title: 'Options' }], { - horizontal: false, - //width: 500, - componentWidth: 400 - }).component(); + horizontal: false, + componentWidth: 400 + }).component(); await view.initializeModel(formModel); }); diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index 66972bfd40..998f57d12f 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/src/sql/parts/modelComponents/componentBase.ts @@ -105,6 +105,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On return 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 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; } diff --git a/src/sql/parts/modelComponents/components.contribution.ts b/src/sql/parts/modelComponents/components.contribution.ts index d25de4266b..249dd1c3d2 100644 --- a/src/sql/parts/modelComponents/components.contribution.ts +++ b/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); diff --git a/src/sql/parts/modelComponents/formLayout.css b/src/sql/parts/modelComponents/formLayout.css index b81e56f6f0..3d9266c211 100644 --- a/src/sql/parts/modelComponents/formLayout.css +++ b/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; } diff --git a/src/sql/parts/modelComponents/groupContainer.component.ts b/src/sql/parts/modelComponents/groupContainer.component.ts new file mode 100644 index 0000000000..2f59ac1870 --- /dev/null +++ b/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: ` +
+ {{_containerLayout.header}} +
+
+ +
+
+ + +
+
+ +
+ ` +}) +export default class GroupContainer extends ContainerBase implements IComponent, OnDestroy, AfterViewInit { + @Input() descriptor: IComponentDescriptor; + @Input() modelStore: IModelStore; + + private _containerLayout: GroupLayout; + + @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; + @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%'; + } + } +} diff --git a/src/sql/parts/modelComponents/groupLayout.css b/src/sql/parts/modelComponents/groupLayout.css new file mode 100644 index 0000000000..bd9374365c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/sql/parts/modelComponents/inputbox.component.ts b/src/sql/parts/modelComponents/inputbox.component.ts index e4d0617410..c15544c071 100644 --- a/src/sql/parts/modelComponents/inputbox.component.ts +++ b/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'; diff --git a/src/sql/parts/modelComponents/interfaces.ts b/src/sql/parts/modelComponents/interfaces.ts index a96750305c..c6e281aeee 100644 --- a/src/sql/parts/modelComponents/interfaces.ts +++ b/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; } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 00c16e82ba..6c8897d603 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -29,6 +29,7 @@ declare module 'sqlops' { dashboardWidget(widgetId: string): ComponentBuilder; dashboardWebview(webviewId: string): ComponentBuilder; formContainer(): FormBuilder; + groupContainer(): GroupBuilder; } export interface ComponentBuilder { @@ -45,6 +46,9 @@ declare module 'sqlops' { } + export interface GroupBuilder extends ContainerBuilder { + } + export interface FormBuilder extends ContainerBuilder { withFormItems(components: FormComponent[], itemLayout?: FormItemLayout): ContainerBuilder; @@ -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; - componentWidth: number; + horizontal?: boolean; + 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 { @@ -197,6 +209,8 @@ declare module 'sqlops' { export interface FormContainer extends Container { } + export interface GroupContainer extends Container { + } /** * Describes an action to be shown in the UI, with a user-readable label diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index d486cacf2d..4bb345bdd1 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -76,7 +76,8 @@ export enum ModelComponentTypes { Text, DashboardWidget, DashboardWebview, - Form + Form, + Group } export interface IComponentShape { diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index afc3bfa8f8..84013d9b96 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/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 = new ContainerBuilderImpl(this._proxy, this._handle, ModelComponentTypes.Group, id); + this._componentBuilders.set(id, container); + return container; + } + card(): sqlops.ComponentBuilder { let id = this.getNextComponentId(); let builder: ComponentBuilderImpl = this.getComponentBuilder(new CardWrapper(this._proxy, this._handle, id), id); @@ -199,7 +206,6 @@ class ContainerBuilderImpl ext } class FormContainerBuilder extends ContainerBuilderImpl implements sqlops.FormBuilder { - withFormItems(components: sqlops.FormComponent[], itemLayout?: sqlops.FormItemLayout): sqlops.ContainerBuilder { this._component.itemConfigs = components.map(item => { return this.convertToItemConfig(item, itemLayout);