From 18a29e31f26afb22840fc6d85434d05480c3fec8 Mon Sep 17 00:00:00 2001 From: Mark Drilling Date: Tue, 2 Oct 2018 16:42:39 -0500 Subject: [PATCH] TTOOLS-465 Addition of property editor component --- .../app/dataservices/dataservices.module.ts | 4 +- .../dataservices/shared/composition.model.ts | 21 +++++ .../command/add-composition-command.ts | 3 +- .../command/add-sources-command.ts | 3 +- .../view-editor/command/command-type.enum.ts | 58 ++++++++++++ .../view-editor/command/no-op-command.ts | 3 +- .../command/remove-composition-command.ts | 3 +- .../command/remove-sources-command.ts | 3 +- .../update-view-description-command.ts | 3 +- .../command/update-view-name-command.ts | 3 +- .../view-canvas/view-canvas.component.spec.ts | 2 + .../view-editor/view-editor-i18n.ts | 4 +- .../view-editor/view-editor.component.ts | 30 ++---- .../view-editor/view-editor.service.ts | 47 ++++++++++ .../property-editor.component.css | 7 ++ .../property-editor.component.html | 35 +++++++ .../property-editor.component.spec.ts | 48 ++++++++++ .../property-editor.component.ts | 86 ++++++++++++++++++ .../property-editor/selection-item.model.ts | 91 +++++++++++++++++++ .../property-editor/selection-type.enum.ts | 38 ++++++++ .../view-property-editors.component.css | 1 - .../view-property-editors.component.html | 5 +- .../view-property-editors.component.spec.ts | 3 +- .../view-property-editors.component.ts | 31 ++++--- 24 files changed, 481 insertions(+), 51 deletions(-) create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/command/command-type.enum.ts create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.css create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.html create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.spec.ts create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.ts create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-item.model.ts create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum.ts diff --git a/ngapp/src/app/dataservices/dataservices.module.ts b/ngapp/src/app/dataservices/dataservices.module.ts index 0e7f88e7..c0ef900d 100644 --- a/ngapp/src/app/dataservices/dataservices.module.ts +++ b/ngapp/src/app/dataservices/dataservices.module.ts @@ -75,6 +75,7 @@ import { AddCompositionWizardComponent } from './virtualization/view-editor/add- import { CreateViewDialogComponent } from './virtualization/view-editor/create-view-dialog/create-view-dialog.component'; import { CreateViewsDialogComponent } from './create-views-dialog/create-views-dialog.component'; import { SetDescriptionDialogComponent } from "@dataservices/set-description-dialog/set-description-dialog.component"; +import { PropertyEditorComponent } from './virtualization/view-editor/view-property-editors/property-editor/property-editor.component'; @NgModule({ imports: [ @@ -129,7 +130,8 @@ import { SetDescriptionDialogComponent } from "@dataservices/set-description-dia AddCompositionWizardComponent, CreateViewDialogComponent, CreateViewsDialogComponent, - SetDescriptionDialogComponent + SetDescriptionDialogComponent, + PropertyEditorComponent ], providers: [ { diff --git a/ngapp/src/app/dataservices/shared/composition.model.ts b/ngapp/src/app/dataservices/shared/composition.model.ts index 373b8f01..cb844dd2 100644 --- a/ngapp/src/app/dataservices/shared/composition.model.ts +++ b/ngapp/src/app/dataservices/shared/composition.model.ts @@ -17,6 +17,7 @@ import { CompositionType } from "@dataservices/shared/composition-type.enum"; import { CompositionOperator } from "@dataservices/shared/composition-operator.enum"; +import { PathUtils } from "@dataservices/shared/path-utils"; /** * Composition model @@ -250,4 +251,24 @@ export class Composition { return JSON.stringify(this.toJSON()); } + public getLeftSourceDisplay(): string { + const leftSrcPath = this.getLeftSourcePath(); + const leftConn = PathUtils.getConnectionName(leftSrcPath); + const leftSrc = PathUtils.getSourceName(leftSrcPath); + return "[" + leftConn + "] " + leftSrc; + } + + public getRightSourceDisplay(): string { + const rightSrcPath = this.getRightSourcePath(); + const rightConn = PathUtils.getConnectionName(rightSrcPath); + const rightSrc = PathUtils.getSourceName(rightSrcPath); + return "[" + rightConn + "] " + rightSrc; + } + + public getCriteriaDisplay(): string { + const leftColumn = this.getLeftCriteriaColumn(); + const rightColumn = this.getRightCriteriaColumn(); + return leftColumn + " " + CompositionOperator.toSql(this.getOperator()) + " " + rightColumn; + } + } diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/add-composition-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/add-composition-command.ts index 1a3ddcaf..1ace8a52 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/add-composition-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/add-composition-command.ts @@ -18,6 +18,7 @@ import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; import { Composition } from "@dataservices/shared/composition.model"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class AddCompositionCommand extends Command { @@ -26,7 +27,7 @@ export class AddCompositionCommand extends Command { * * @type {string} */ - public static readonly id = "AddCompositionCommand"; + public static readonly id = CommandType.ADD_COMPOSITION_COMMAND; /** * The name of the command argument whose value is the stringified composition diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/add-sources-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/add-sources-command.ts index ab90e806..de69f13b 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/add-sources-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/add-sources-command.ts @@ -18,6 +18,7 @@ import { SchemaNode } from "@connections/shared/schema-node.model"; import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class AddSourcesCommand extends Command { @@ -26,7 +27,7 @@ export class AddSourcesCommand extends Command { * * @type {string} */ - public static readonly id = "AddSourcesCommand"; + public static readonly id = CommandType.ADD_SOURCES_COMMAND; /** * The name of the command argument whose value is the paths of the sources being added. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/command-type.enum.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/command-type.enum.ts new file mode 100644 index 00000000..5c3b52dd --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/command-type.enum.ts @@ -0,0 +1,58 @@ +/** + * @license + * Copyright 2017 JBoss Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Enumerates the available commands + */ +export enum CommandType { + + /** + * Command id for Add Composition + */ + ADD_COMPOSITION_COMMAND = "AddCompositionCommand", + + /** + * Command id for Add Sources + */ + ADD_SOURCES_COMMAND = "AddSourcesCommand", + + /** + * Command id for No op + */ + NO_OP_COMMAND = "NoOpCommand", + + /** + * Command id for Remove Composition + */ + REMOVE_COMPOSITION_COMMAND = "RemoveCompositionCommand", + + /** + * Command id for Remove Sources + */ + REMOVE_SOURCES_COMMAND = "RemoveSourcesCommand", + + /** + * Command id for Add Composition + */ + UPDATE_VIEW_DESCRIPTION_COMMAND = "UpdateViewDescriptionCommand", + + /** + * Command id for Add Composition + */ + UPDATE_VIEW_NAME_COMMAND = "UpdateViewNameCommand" + +} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/no-op-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/no-op-command.ts index 4cae756a..b542dccf 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/no-op-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/no-op-command.ts @@ -16,6 +16,7 @@ */ import { Command } from "@dataservices/virtualization/view-editor/command/command"; import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class NoOpCommand extends Command { @@ -24,7 +25,7 @@ export class NoOpCommand extends Command { * * @type {string} */ - public static readonly id = "NoOpCommand"; + public static readonly id = CommandType.NO_OP_COMMAND; /** * The shared instance of the no op command. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-composition-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-composition-command.ts index ec992c7d..334b0ee3 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-composition-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-composition-command.ts @@ -18,6 +18,7 @@ import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; import { Composition } from "@dataservices/shared/composition.model"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class RemoveCompositionCommand extends Command { @@ -26,7 +27,7 @@ export class RemoveCompositionCommand extends Command { * * @type {string} */ - public static readonly id = "RemoveCompositionCommand"; + public static readonly id = CommandType.REMOVE_COMPOSITION_COMMAND; /** * The name of the command argument whose value is the compositions being removed. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-sources-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-sources-command.ts index 7174ee29..c99d8b73 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-sources-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/remove-sources-command.ts @@ -18,6 +18,7 @@ import { SchemaNode } from "@connections/shared/schema-node.model"; import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class RemoveSourcesCommand extends Command { @@ -26,7 +27,7 @@ export class RemoveSourcesCommand extends Command { * * @type {string} */ - public static readonly id = "RemoveSourcesCommand"; + public static readonly id = CommandType.REMOVE_SOURCES_COMMAND; /** * The name of the command argument whose value is the paths of the sources being removed. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-description-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-description-command.ts index 051584c4..2ba0b073 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-description-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-description-command.ts @@ -17,6 +17,7 @@ import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class UpdateViewDescriptionCommand extends Command { @@ -25,7 +26,7 @@ export class UpdateViewDescriptionCommand extends Command { * * @type {string} */ - public static readonly id = "UpdateViewDescriptionCommand"; + public static readonly id = CommandType.UPDATE_VIEW_DESCRIPTION_COMMAND; /** * The name of the command argument whose value is the new description of the view. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-name-command.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-name-command.ts index 87fc179d..81bfc3a7 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-name-command.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/update-view-name-command.ts @@ -17,6 +17,7 @@ import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; import { Command } from "@dataservices/virtualization/view-editor/command/command"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; export class UpdateViewNameCommand extends Command { @@ -25,7 +26,7 @@ export class UpdateViewNameCommand extends Command { * * @type {string} */ - public static readonly id = "UpdateViewNameCommand"; + public static readonly id = CommandType.UPDATE_VIEW_NAME_COMMAND; /** * The name of the command argument whose value is the new name of the view. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts index 81807ab5..e05f28f5 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts @@ -25,6 +25,7 @@ import { TabsModule } from "ngx-bootstrap"; import { GraphVisualComponent, LinkVisualComponent, NodeVisualComponent } from "@dataservices/virtualization/view-editor/view-canvas/visuals"; import { CanvasService } from "@dataservices/virtualization/view-editor/view-canvas/canvas.service"; import { SelectionService } from "@core/selection.service"; +import { PropertyEditorComponent } from "@dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component"; describe('ViewCanvasComponent', () => { let component: ViewCanvasComponent; @@ -49,6 +50,7 @@ describe('ViewCanvasComponent', () => { GraphVisualComponent, LinkVisualComponent, NodeVisualComponent, + PropertyEditorComponent, ViewCanvasComponent, ViewPropertyEditorsComponent ], diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts index 0fd05126..1994df2e 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts @@ -81,8 +81,8 @@ export class ViewEditorI18n { public static readonly warn0100 = "The view contains an orphan source which will be ignored"; // property editors - public static readonly columnPropsTabName = "Column"; - public static readonly viewPropsTabName = "View"; + public static readonly columnsTabName = "Columns"; + public static readonly propertiesTabName = "Properties"; // view canvas public static readonly noSourcesAlert = "Select a source for the view"; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.component.ts index f381af02..503d50ff 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.component.ts @@ -410,13 +410,13 @@ export class ViewEditorComponent implements DoCheck, OnDestroy, OnInit { selectionArgs.forEach( ( nextArg ) => { - // need to parse the command to find the source path - const commandPart = this.getCommandId(nextArg); + // get command type from the selection + const commandType = this.editorService.getSelectionCommandType(nextArg); // the payload for src will be the source/connection path // the payload for the composition will be the json representing the composition properties - const argPart = this.getPayload(nextArg); + const argPart = this.editorService.getSelectionPayload(nextArg); - if (commandPart.startsWith(AddSourcesCommand.id)) { + if ( commandType === AddSourcesCommand.id ) { // Look for any composition with src paths links and remove if exist const comps: Composition[] = this.editorService.getEditorView().getCompositions(); comps.forEach( (nextComp) => { @@ -438,12 +438,12 @@ export class ViewEditorComponent implements DoCheck, OnDestroy, OnInit { }); // Remove Source Command - const addSrcsCmd = CommandFactory.createRemoveSourcesCommand(argPart, commandPart); + const addSrcsCmd = CommandFactory.createRemoveSourcesCommand(argPart, commandType); this.notifyRemoved(addSrcsCmd); - } else if (commandPart.startsWith(AddCompositionCommand.id)) { + } else if ( commandType === AddCompositionCommand.id ) { // Remove composition - const addCompCmd = CommandFactory.createRemoveCompositionCommand(argPart, commandPart); + const addCompCmd = CommandFactory.createRemoveCompositionCommand(argPart, commandType); this.notifyRemoved(addCompCmd); } @@ -502,22 +502,6 @@ export class ViewEditorComponent implements DoCheck, OnDestroy, OnInit { return null; } - private getCommandId(selection?: string): string { - if (selection !== null) { - const args = selection.split(Command.identDivider); - return args[0]; - } - return null; - } - - private getPayload(selection?: string): string { - if (selection !== null) { - const args = selection.split(Command.identDivider); - return args[1]; - } - return null; - } - /** * Callback for when a view icon is clicked on the toolbar. * diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts index 2103a4c8..1fb35cb4 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts @@ -42,6 +42,8 @@ import { ViewDefinition } from "@dataservices/shared/view-definition.model"; import { ViewEditorState } from "@dataservices/shared/view-editor-state.model"; import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { SelectionService } from "@core/selection.service"; +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; +import { NoOpCommand } from "@dataservices/virtualization/view-editor/command/no-op-command"; @Injectable() export class ViewEditorService { @@ -720,6 +722,51 @@ export class ViewEditorService { return this._selection.length > 0; } + /** + * Get the Command type from the selection string + * @param selection the selection + * @return {CommandType} the command type + */ + public getSelectionCommandType(selection?: string): CommandType { + let argStr = null; + if (selection !== null) { + const args = selection.split(Command.identDivider); + argStr = args[0]; + } + if ( argStr !== null ) { + if ( argStr.startsWith(AddSourcesCommand.id) ) { + return AddSourcesCommand.id; + } else if ( argStr.startsWith(AddCompositionCommand.id) ) { + return AddCompositionCommand.id; + } else if ( argStr.startsWith(RemoveCompositionCommand.id) ) { + return RemoveCompositionCommand.id; + } else if ( argStr.startsWith(RemoveSourcesCommand.id) ) { + return RemoveSourcesCommand.id; + } else if ( argStr.startsWith(NoOpCommand.id) ) { + return NoOpCommand.id; + } else if ( argStr.startsWith(UpdateViewDescriptionCommand.id) ) { + return UpdateViewDescriptionCommand.id; + } else if ( argStr.startsWith(UpdateViewNameCommand.id) ) { + return UpdateViewNameCommand.id; + } + } + + return null; + } + + /** + * Get the payload from the selection string + * @param selection the selection + * @return {string} the command id + */ + public getSelectionPayload(selection?: string): string { + if (selection !== null) { + const args = selection.split(Command.identDivider); + return args[1]; + } + return null; + } + /** * Reset the UndoManager */ diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.css b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.css new file mode 100644 index 00000000..5aeac588 --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.css @@ -0,0 +1,7 @@ +/* + * The container for the property editor + */ +#property-editor-container { + height: 100%; + margin-left: 15px; +} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.html new file mode 100644 index 00000000..28825a61 --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.html @@ -0,0 +1,35 @@ +
+
+

No View Selected

+
+ +
+

Multiple Items Selected

+
+ +
+

{{getFirstSelection().getSelectionType()}} Properties

+
+
Name:
+
{{getFirstSelection().getSourceName()}}
+
Connection:
+
{{getFirstSelection().getSourceConnectionName()}}
+
+
+
Name:
+
{{getFirstSelection().getComposition().getName()}}
+
Type:
+
{{getFirstSelection().getComposition().getType()}}
+
Left Source:
+
{{getFirstSelection().getComposition().getLeftSourceDisplay()}}
+
Right Source:
+
{{getFirstSelection().getComposition().getRightSourceDisplay()}}
+
Criteria:
+
{{getFirstSelection().getComposition().getCriteriaDisplay()}}
+
+
+ +
+

No item selected

+
+
diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.spec.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.spec.ts new file mode 100644 index 00000000..e49e34be --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.spec.ts @@ -0,0 +1,48 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PropertyEditorComponent } from './property-editor.component'; +import { SelectionService } from "@core/selection.service"; +import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; +import { LoggerService } from "@core/logger.service"; +import { DataserviceService } from "@dataservices/shared/dataservice.service"; +import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service"; +import { HttpModule } from "@angular/http"; +import { VdbService } from "@dataservices/shared/vdb.service"; +import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; +import { AppSettingsService } from "@core/app-settings.service"; +import { MockAppSettingsService } from "@core/mock-app-settings.service"; +import { NotifierService } from "@dataservices/shared/notifier.service"; + +describe('PropertyEditorComponent', () => { + let component: PropertyEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + HttpModule, + ], + declarations: [ PropertyEditorComponent ], + providers: [ + { provide: AppSettingsService, useClass: MockAppSettingsService }, + { provide: DataserviceService, useClass: MockDataserviceService }, + LoggerService, + NotifierService, + SelectionService, + { provide: VdbService, useClass: MockVdbService }, + ViewEditorService + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PropertyEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.ts new file mode 100644 index 00000000..efe39eed --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component.ts @@ -0,0 +1,86 @@ +import { Component, OnInit } from '@angular/core'; +import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; +import { SelectionService } from "@core/selection.service"; +import { SelectionItem } from "@dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-item.model"; +import { SelectionType } from "@dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum"; + +@Component({ + selector: 'app-property-editor', + templateUrl: './property-editor.component.html', + styleUrls: ['./property-editor.component.css'] +}) +/** + * PropertyEditorComponent - display and edit selected items + */ +export class PropertyEditorComponent implements OnInit { + + private readonly editorService: ViewEditorService; + private readonly selectionService: SelectionService; + + private selectedObject: SelectionItem; + + constructor( selectionService: SelectionService, + editorService: ViewEditorService ) { + this.selectionService = selectionService; + this.editorService = editorService; + this.editorService.setEditorVirtualization( selectionService.getSelectedVirtualization() ); + } + + public ngOnInit(): void { + // Nothing to do + } + + /** + * Determine whether the editor has a view currently selected + * + * @return {boolean} 'true' if has a view selection + */ + public get hasSelectedView(): boolean { + const selView = this.editorService.getEditorView(); + return (selView && selView !== null); + } + + /** + * Determine if the first selection item is Source type + * @return {boolean} 'true' if the first item in the list is a 'Source' + */ + public get firstSelectionIsSource(): boolean { + const selectedItem = this.getFirstSelection(); + return selectedItem.getSelectionType() === SelectionType.SOURCE; + } + + /** + * Determine if the first selection item is Composition type + * @return {boolean} 'true' if the first item in the list is a 'Composition' + */ + public get firstSelectionIsComposition(): boolean { + const selectedItem = this.getFirstSelection(); + return selectedItem.getSelectionType() === SelectionType.COMPOSITION; + } + + /** + * Get the number of selected items + * @return {number} the number of selected items + */ + public get numberSelectedItems(): number { + const selections = this.editorService.getSelection(); + if (selections) { + return selections.length; + } + return 0; + } + + /** + * Get the first item in the selections + * @return {SelectionItem} the first item in the selection list + */ + public getFirstSelection(): SelectionItem { + const selectedObj = new SelectionItem(this.editorService); + const selections = this.editorService.getSelection(); + if (selections && selections.length > 0) { + selectedObj.setSelection(selections[0]); + } + return selectedObj; + } + +} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-item.model.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-item.model.ts new file mode 100644 index 00000000..0528e2d7 --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-item.model.ts @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2017 JBoss Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { CommandType } from "@dataservices/virtualization/view-editor/command/command-type.enum"; +import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; +import { Composition } from "@dataservices/shared/composition.model"; +import { PathUtils } from "@dataservices/shared/path-utils"; +import { SelectionType } from "@dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum"; + +/** + * SelectionItem model - interprets the selection string and provides the payload in object form + */ +export class SelectionItem { + + private editorService: ViewEditorService; + private selectionType = SelectionType.UNKNOWN; + private srcPath = ""; + private comp: Composition; + + constructor(editorService: ViewEditorService) { + this.editorService = editorService; + } + + /** + * Set the selection string + * @param {string} selection the selection + */ + public setSelection( selection: string ): void { + if ( !selection || selection === null ) return; + + const commandType = this.editorService.getSelectionCommandType(selection); + const payload = this.editorService.getSelectionPayload(selection); + + if ( commandType === CommandType.ADD_SOURCES_COMMAND ) { + this.selectionType = SelectionType.SOURCE; + this.srcPath = payload; + } else if ( commandType === CommandType.ADD_COMPOSITION_COMMAND ) { + this.selectionType = SelectionType.COMPOSITION; + this.comp = Composition.create(JSON.parse(payload)); + } else { + this.selectionType = SelectionType.UNKNOWN; + } + } + + /** + * Get the type of selection + * @return {SelectionType} the selection type + */ + public getSelectionType(): SelectionType { + return this.selectionType; + } + + /** + * Get the source connection name + * @return {string} the source connection name + */ + public getSourceConnectionName(): string { + return PathUtils.getConnectionName(this.srcPath); + } + + /** + * Get the source name + * @return {string} the source name + */ + public getSourceName(): string { + return PathUtils.getSourceName(this.srcPath); + } + + /** + * Get the composition + * @return {Composition} the composition + */ + public getComposition(): Composition { + return this.comp; + } + +} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum.ts new file mode 100644 index 00000000..3aac347e --- /dev/null +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/property-editor/selection-type.enum.ts @@ -0,0 +1,38 @@ +/** + * @license + * Copyright 2017 JBoss Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Enumeration for property editor item types + */ +export enum SelectionType { + + /** + * Source type + */ + SOURCE = "Source", + + /** + * Composition type + */ + COMPOSITION = "Composition", + + /** + * Unknown type + */ + UNKNOWN = "Unknown" + +} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css index 0d7cf1b8..ec7ccda2 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css @@ -2,7 +2,6 @@ * The editor views tabset. */ #property-editors-tabs .tab-content { - border: 1px solid lightgray; } /* diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html index a94b3df6..dfda4806 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html @@ -4,15 +4,16 @@ (deselect)="tabSelected(tabs[0], false)"> - View + {{propertiesTabName}} + - {{columnPropsTabName}} + {{columnsTabName}} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.spec.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.spec.ts index dc02c4ad..53ed76bd 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.spec.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.spec.ts @@ -13,6 +13,7 @@ import { NotifierService } from "@dataservices/shared/notifier.service"; import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service"; import { SelectionService } from "@core/selection.service"; +import { PropertyEditorComponent } from "@dataservices/virtualization/view-editor/view-property-editors/property-editor/property-editor.component"; describe('ViewPropertyEditorsComponent', () => { let component: ViewPropertyEditorsComponent; @@ -24,7 +25,7 @@ describe('ViewPropertyEditorsComponent', () => { HttpModule, TabsModule.forRoot() ], - declarations: [ ViewPropertyEditorsComponent ], + declarations: [ PropertyEditorComponent, ViewPropertyEditorsComponent ], providers: [ { provide: AppSettingsService, useClass: MockAppSettingsService }, { provide: DataserviceService, useClass: MockDataserviceService }, diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts index 564378f2..c4a0a45d 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts @@ -32,7 +32,8 @@ import 'dragula/dist/dragula.css'; }) export class ViewPropertyEditorsComponent implements OnInit, OnDestroy { - public readonly columnPropsTabName = ViewEditorI18n.columnPropsTabName; + public readonly columnsTabName = ViewEditorI18n.columnsTabName; + public readonly propertiesTabName = ViewEditorI18n.propertiesTabName; private columnEditorIsEnabled = true; private readonly editorService: ViewEditorService; @@ -40,7 +41,7 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy { private subscription: Subscription; private viewEditorIsEnabled = true; - private readonly viewIndex = 0; + private readonly propertyIndex = 0; private readonly columnIndex = 1; /** @@ -48,10 +49,10 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy { */ public tabs = [ { - "active": true // preview + "active": true // properties }, { - "active": false // message log + "active": false // columns }, ]; @@ -68,16 +69,10 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy { this.logger.debug( "ViewPropertyEditorsComponent received event: " + event.toString() ); if ( event.typeIsCanvasSelectionChanged() ) { - // TODO set this.viewEditorIsEnabled to true if all canvas selections are views - // TODO set this.columnEditorIsEnabled to true if all canvas selections are columns - if ( event.args.length !== 0 ) { - if ( event.args[ 0 ] === ViewEditorPart.COLUMNS ) { - this.tabs[ this.viewIndex ].active = false; - this.tabs[ this.columnIndex ].active = true; - } else if ( event.args[ 0 ] === ViewEditorPart.PROPERTIES) { - this.tabs[ this.viewIndex ].active = false; - this.tabs[ this.columnIndex ].active = true; - } + // if single item is selected, show the properties tab + if ( event.args.length === 1 ) { + this.tabs[ this.propertyIndex ].active = true; + this.tabs[ this.columnIndex ].active = false; } } } @@ -113,4 +108,12 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy { tab.active = selected; } + public get numberSelectedItems(): number { + const selections = this.editorService.getSelection(); + if (selections) { + return selections.length; + } + return 0; + } + }