From 1d284ea66ac76eeb3590ea4ec8b520bdb6cd5a13 Mon Sep 17 00:00:00 2001 From: Leila Lali Date: Tue, 6 Mar 2018 15:33:47 -0800 Subject: [PATCH] fixed the grid layout schema and fixed layout bugs (#847) * fixed the grid layout schema and fixed layout bugs --- .../dashboardGridContainer.component.ts | 25 ++++++----- .../dashboardNavSection.component.ts | 1 + .../pages/dashboardPageContribution.ts | 42 +++++++++++++++++-- 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts index 8b6ac26684..d9414dfc07 100644 --- a/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts +++ b/src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts @@ -5,7 +5,7 @@ import 'vs/css!./dashboardGridContainer'; -import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter, OnChanges } from '@angular/core'; +import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter } from '@angular/core'; import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid'; import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service'; @@ -19,6 +19,7 @@ import { ConfigurationTarget } from 'vs/platform/configuration/common/configurat import * as objects from 'vs/base/common/objects'; import Event, { Emitter } from 'vs/base/common/event'; import { concat } from 'rxjs/operator/concat'; +import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component'; export interface GridCellConfig { id?: string; @@ -42,7 +43,7 @@ export interface GridWebviewConfig extends GridCellConfig { templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardGridContainer.component.html')), providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridContainer) }] }) -export class DashboardGridContainer extends DashboardTab implements OnDestroy, OnChanges { +export class DashboardGridContainer extends DashboardTab implements OnDestroy { @Input() private tab: TabConfig; private _contents: GridCellConfig[]; private _onResize = new Emitter(); @@ -105,7 +106,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O let content = this.getContent(row, col); let colspan: string = '1'; if (content && content.colspan) { - colspan = content.colspan; + colspan = this.convertToNumber(content.colspan, this.cols.length).toString(); } return colspan; } @@ -113,7 +114,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O protected getRowspan(row: number, col: number): string { let content = this.getContent(row, col); if (content && (content.rowspan)) { - return content.rowspan; + return this.convertToNumber(content.rowspan, this.rows.length).toString(); } else { return '1'; } @@ -122,7 +123,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O protected getWidgetWidth(row: number, col: number): string { let content = this.getContent(row, col); let colspan = this.getColspan(row, col); - let columnCount = this.covertToNumber(colspan, this.cols.length); + let columnCount = this.convertToNumber(colspan, this.cols.length); return columnCount * this.cellWidth + 'px'; } @@ -130,12 +131,12 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O protected getWidgetHeight(row: number, col: number): string { let content = this.getContent(row, col); let rowspan = this.getRowspan(row, col); - let rowCount = this.covertToNumber(rowspan, this.rows.length); + let rowCount = this.convertToNumber(rowspan, this.rows.length); return rowCount * this.cellHeight + 'px'; } - private covertToNumber(value: string, maxNumber: number): number { + private convertToNumber(value: string, maxNumber: number): number { if (value === '*') { return maxNumber; } @@ -147,6 +148,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O } @ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList; + @ViewChildren(WebviewContent) private _webViews: QueryList; constructor( @Inject(forwardRef(() => DashboardServiceInterface)) protected dashboardService: DashboardServiceInterface, @Inject(forwardRef(() => ElementRef)) protected _el: ElementRef, @@ -158,7 +160,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O protected init() { } - ngOnChanges() { + ngOnInit() { if (this.tab.container) { this._contents = Object.values(this.tab.container)[0]; this._contents.forEach(widget => { @@ -177,8 +179,6 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O }); this.rows = this.createIndexes(this._contents.map(w => w.row)); this.cols = this.createIndexes(this._contents.map(w => w.col)); - - this._cd.detectChanges(); } } @@ -205,6 +205,11 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy, O item.layout(); }); } + if (this._webViews) { + this._webViews.forEach(item => { + item.layout(); + }); + } } public refresh(): void { diff --git a/src/sql/parts/dashboard/containers/dashboardNavSection.component.ts b/src/sql/parts/dashboard/containers/dashboardNavSection.component.ts index 175a703f59..d3423ffadd 100644 --- a/src/sql/parts/dashboard/containers/dashboardNavSection.component.ts +++ b/src/sql/parts/dashboard/containers/dashboardNavSection.component.ts @@ -163,6 +163,7 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh public handleTabChange(tab: TabComponent): void { let localtab = this._tabs.find(i => i.id === tab.identifier); + this._cd.detectChanges(); localtab.layout(); } } diff --git a/src/sql/parts/dashboard/pages/dashboardPageContribution.ts b/src/sql/parts/dashboard/pages/dashboardPageContribution.ts index 67136d2190..cef86fd740 100644 --- a/src/sql/parts/dashboard/pages/dashboardPageContribution.ts +++ b/src/sql/parts/dashboard/pages/dashboardPageContribution.ts @@ -75,10 +75,46 @@ export function generateDashboardGridLayoutSchema(type?: 'database' | 'server', type: 'object', properties: { name: { - type: 'string' + type: 'string', + description: localize('dashboardpage.tabName', "The title of the container") }, - icon: { - type: 'string' + row: { + type: 'number', + description: localize('dashboardpage.rowNumber', "The row of the component in the grid") + }, + rowspan: { + type: 'string', + description: localize('dashboardpage.rowSpan', "The rowspan of the component in the grid. Default value is 1. Use '*' to set to number of rows in the grid.") + }, + col: { + type: 'number', + description: localize('dashboardpage.colNumber', "The column of the component in the grid") + }, + colspan: { + type: 'string', + description: localize('dashboardpage.colspan', "The colspan of the component in the grid. Default value is 1. Use '*' to set to number of columns in the grid.") + }, + widget: { + anyOf: [ + { + type: 'object', + properties: schemas, + minItems: 1, + maxItems: 1 + } + ] + }, + webview: { + anyOf: [ + { + type: 'object', + properties: { + id: { + type: 'string', + } + } + } + ] }, when: { description: localize('sqlops.extension.contributes.widget.when', 'Condition which must be true to show this item'),