ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-08 17:24:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add grouping feature for model view forms (#1853)

Browse Source
This commit is contained in:
Matt Irvine
2018-07-05 11:36:29 -07:00
committed by GitHub
parent cb060cb5db
commit 9c4580fe40
5 changed files with 141 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/sql/parts/modelComponents/formContainer.component.ts
View File

@@ -22,13 +22,15 @@ import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/do
export interface TitledFormItemLayout {
title: string;
actions?: string[];
isFormComponent: Boolean;
isFormComponent: boolean;
horizontal: boolean;
componentWidth?: number | string;
componentHeight?: number | string;
titleFontSize?: number | string;
required?: boolean;
info?: string;
isInGroup?: boolean;
isGroupLabel?: boolean;
}
export interface FormLayout {
@@ -43,10 +45,16 @@ class FormItem {
template: `
<div #container *ngIf="items" class="form-table" [style.padding]="getFormPadding()" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
<ng-container *ngFor="let item of items">
<div class="form-row" *ngIf="isGroupLabel(item)">
<div class="form-item-row form-group-label">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
</div>
</div>
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
<ng-container *ngIf="isHorizontal(item)">
<div class="form-cell" [style.font-size]="getItemTitleFontSize(item)">
<div class="form-cell" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="icon info form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div>
@@ -65,7 +73,7 @@ class FormItem {
</div>
</div>
</ng-container>
<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)">
<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
<div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="icon info form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
@@ -190,11 +198,19 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
return [];
}
private isFormComponent(item: FormItem): Boolean {
private isGroupLabel(item: FormItem): boolean {
return item && item.config && item.config.isGroupLabel;
}
private isInGroup(item: FormItem): boolean {
return item && item.config && item.config.isInGroup;
}
private isFormComponent(item: FormItem): boolean {
return item && item.config && item.config.isFormComponent;
}
private itemHasActions(item: FormItem): Boolean {
private itemHasActions(item: FormItem): boolean {
let itemConfig = item.config;
return itemConfig && itemConfig.actions !== undefined && itemConfig.actions.length > 0;
}

9
src/sql/parts/modelComponents/formLayout.css
View File

@@ -56,3 +56,12 @@
padding-right: 5px;
display: table-cell;
}
.form-group-item .form-item-row,
.form-group-item.form-cell {
padding-left: 30px;
}
.form-group-label {
padding-bottom: 0px;
}

21
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -82,7 +82,7 @@ declare module 'sqlops' {
}
export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout> {
withFormItems(components: FormComponent[], itemLayout?: FormItemLayout): ContainerBuilder<FormContainer, FormLayout, FormItemLayout>;
withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder;
/**
* Creates a collection of child components and adds them all to this container
@@ -90,7 +90,7 @@ declare module 'sqlops' {
* @param formComponents the definitions
* @param {*} [itemLayout] Optional layout for the child items
*/
addFormItems(formComponents: Array<FormComponent>, itemLayout?: FormItemLayout): void;
addFormItems(formComponents: Array<FormComponent | FormComponentGroup>, itemLayout?: FormItemLayout): void;
/**
* Creates a child component and adds it to this container.
@@ -98,7 +98,7 @@ declare module 'sqlops' {
* @param formComponent the component to be added
* @param {*} [itemLayout] Optional layout for this child item
*/
addFormItem(formComponent: FormComponent, itemLayout?: FormItemLayout): void;
addFormItem(formComponent: FormComponent | FormComponentGroup, itemLayout?: FormItemLayout): void;
}
export interface Component {
@@ -137,6 +137,21 @@ declare module 'sqlops' {
required?: boolean;
}
/**
* Used to create a group of components in a form layout
*/
export interface FormComponentGroup {
/**
* The form components to display in the group along with optional layouts for each item
*/
components: (FormComponent & { layout?: FormItemLayout })[];
/**
* The title of the group, displayed above its components
*/
title: string;
}
export interface ToolbarComponent {
component: Component;
title?: string;

39
src/sql/workbench/api/node/extHostModelView.ts
View File

@@ -41,7 +41,7 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
formContainer(): sqlops.FormBuilder {
let id = this.getNextComponentId();
let container = new FormContainerBuilder(this._proxy, this._handle, ModelComponentTypes.Form, id);
let container = new FormContainerBuilder(this._proxy, this._handle, ModelComponentTypes.Form, id, this);
this._componentBuilders.set(id, container);
return container;
}
@@ -249,14 +249,12 @@ 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);
});
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, private _builder: ModelBuilderImpl) {
super(proxy, handle, type, id);
}
components.forEach(formItem => {
this.addComponentActions(formItem, itemLayout);
});
withFormItems(components: (sqlops.FormComponent | sqlops.FormComponentGroup)[], itemLayout?: sqlops.FormItemLayout): sqlops.FormBuilder {
this.addFormItems(components, itemLayout);
return this;
}
@@ -290,16 +288,31 @@ class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sq
}
}
addFormItems(formComponents: Array<sqlops.FormComponent>, itemLayout?: sqlops.FormItemLayout): void {
addFormItems(formComponents: Array<sqlops.FormComponent | sqlops.FormComponentGroup>, itemLayout?: sqlops.FormItemLayout): void {
formComponents.forEach(formComponent => {
this.addFormItem(formComponent, itemLayout);
});
}
addFormItem(formComponent: sqlops.FormComponent, itemLayout?: sqlops.FormItemLayout): void {
let itemImpl = this.convertToItemConfig(formComponent, itemLayout);
this._component.addItem(formComponent.component as ComponentWrapper, itemImpl.config);
this.addComponentActions(formComponent, itemLayout);
addFormItem(formComponent: sqlops.FormComponent | sqlops.FormComponentGroup, itemLayout?: sqlops.FormItemLayout): void {
let componentGroup = formComponent as sqlops.FormComponentGroup;
if (componentGroup && componentGroup.components !== undefined) {
let labelComponent = this._builder.text().component();
labelComponent.value = componentGroup.title;
this._component.addItem(labelComponent, { isGroupLabel: true });
componentGroup.components.forEach(component => {
let layout = component.layout || itemLayout;
let itemConfig = this.convertToItemConfig(component, layout);
itemConfig.config.isInGroup = true;
this._component.addItem(component.component as ComponentWrapper, itemConfig.config);
this.addComponentActions(component, layout);
});
} else {
formComponent = formComponent as sqlops.FormComponent;
let itemImpl = this.convertToItemConfig(formComponent, itemLayout);
this._component.addItem(formComponent.component as ComponentWrapper, itemImpl.config);
this.addComponentActions(formComponent, itemLayout);
}
}
}