Table Designer - Save Changes feature and Editor related features (#17335)

* table designer add/remove row support

* save changes and editor support

* address comments

* fix build error

* including missing change

* lower case request name
This commit is contained in:
Alan Ren
2021-10-11 15:09:25 -07:00
committed by GitHub
parent e5f50499ce
commit ce4459a7b2
23 changed files with 495 additions and 90 deletions

View File

@@ -0,0 +1,44 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { TableDesignerComponentInput } from 'sql/workbench/services/tableDesigner/browser/tableDesignerComponentInput';
import { Action } from 'vs/base/common/actions';
import { Codicon } from 'vs/base/common/codicons';
import { IDisposable } from 'vs/base/common/lifecycle';
import { localize } from 'vs/nls';
export class SaveTableChangesAction extends Action {
public static ID = 'tableDesigner.saveTableChanges';
public static LABEL = localize('tableDesigner.saveTableChanges', "Save Changes");
private _input: TableDesignerComponentInput;
private _onStateChangeDisposable: IDisposable;
constructor(
) {
super(SaveTableChangesAction.ID, SaveTableChangesAction.LABEL, Codicon.save.classNames);
}
public setContext(input: TableDesignerComponentInput): void {
this._input = input;
this.updateState();
this._onStateChangeDisposable?.dispose();
this._onStateChangeDisposable = input.onStateChange((e) => {
this.updateState();
});
}
public override async run(): Promise<void> {
await this._input.save();
}
private updateState(): void {
this.enabled = this._input.dirty && this._input.valid && !this._input.saving;
}
override dispose() {
super.dispose();
this._onStateChangeDisposable?.dispose();
}
}

View File

@@ -0,0 +1,23 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.table-designer-main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.table-designer-main-container .actionbar-container {
flex: 0 0 auto;
padding: 5px;
border-width: 0 0 1px 0;
border-style: solid;
border-bottom-color: rgba(128, 128, 128, 0.35);
}
.table-designer-main-container .designer-container {
flex: 1 1 auto;
}

View File

@@ -3,10 +3,12 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/tableDesignerEditor';
import { Designer } from 'sql/base/browser/ui/designer/designer';
import { attachDesignerStyler } from 'sql/platform/theme/common/styler';
import { TableDesignerInput } from 'sql/workbench/browser/editor/tableDesigner/tableDesignerInput';
import * as DOM from 'vs/base/browser/dom';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { CancellationToken } from 'vs/base/common/cancellation';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IEditorOptions } from 'vs/platform/editor/common/editor';
@@ -15,17 +17,21 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane';
import { IEditorOpenContext } from 'vs/workbench/common/editor';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { SaveTableChangesAction } from 'sql/workbench/contrib/tableDesigner/browser/actions';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export class TableDesignerEditor extends EditorPane {
public static readonly ID: string = 'workbench.editor.tableDesigner';
private _designer: Designer;
private _saveChangesAction: SaveTableChangesAction;
constructor(
@ITelemetryService telemetryService: ITelemetryService,
@IWorkbenchThemeService themeService: IWorkbenchThemeService,
@IStorageService storageService: IStorageService,
@IContextViewService private _contextViewService: IContextViewService
@IContextViewService private _contextViewService: IContextViewService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super(TableDesignerEditor.ID, telemetryService, themeService, storageService);
}
@@ -36,12 +42,22 @@ export class TableDesignerEditor extends EditorPane {
override async setInput(input: TableDesignerInput, options: IEditorOptions | undefined, context: IEditorOpenContext, token: CancellationToken): Promise<void> {
await super.setInput(input, options, context, token);
this._designer.setInput(input.getComponentInput());
const designerInput = input.getComponentInput();
this._designer.setInput(designerInput);
this._saveChangesAction.setContext(designerInput);
}
protected createEditor(parent: HTMLElement): void {
// The editor is only created once per editor group.
this._designer = new Designer(parent, this._contextViewService);
const container = parent.appendChild(DOM.$('.table-designer-main-container'));
const actionbarContainer = container.appendChild(DOM.$('.actionbar-container'));
const designerContainer = container.appendChild(DOM.$('.designer-container'));
const actionbar = new ActionBar(actionbarContainer);
this._register(actionbar);
this._saveChangesAction = this._instantiationService.createInstance(SaveTableChangesAction);
this._saveChangesAction.enabled = false;
actionbar.push(this._saveChangesAction, { icon: true, label: false });
this._designer = new Designer(designerContainer, this._contextViewService);
this._register(attachDesignerStyler(this._designer, this.themeService));
}