TTOOLS-465 Addition of property editor component

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: [
     {

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

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

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.

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"
+
+}

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.

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.

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.

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.

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.

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
       ],

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

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.
    *

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
    */

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