Add grouping feature for model view forms (#1853)

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

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;
}