minor property editor addition and views dialog fix

ngapp/src/app/dataservices/create-views-dialog/create-views-dialog.component.html

@@ -69,7 +69,6 @@ <h4 class="modal-title pull-left">{{ title }}</h4>
         <pfng-table
           [columns]="tableColumns"
           [config]="tableConfig"
-          [dataTableConfig]="ngxTableConfig"
           (onSelectionChange)="handleViewSelectionChange($event)"
           [rows]="allViews">
         </pfng-table>

ngapp/src/app/dataservices/create-views-dialog/create-views-dialog.component.ts

@@ -54,7 +54,6 @@ export class CreateViewsDialogComponent implements OnInit {
   public allViews: NewView[] = [];
   public listConfig: ListConfig;
   public tableColumns: any[] = [];
-  public ngxTableConfig: NgxDataTableConfig;
   public tableConfig: TableConfig;
   public virtNameValidationError = "";
   public virtualizationPropertyForm: FormGroup;
@@ -99,35 +98,28 @@ export class CreateViewsDialogComponent implements OnInit {
       {
         draggable: false,
         name: "Connection",
-        prop: "connectionName",
+        prop: "connection",
         resizeable: true,
         sortable: false,
-        maxWidth: "100",
-        minWidth: "100",
         width: "100"
       },
       {
         draggable: false,
         name: "View Name",
-        prop: "viewName",
+        prop: "view",
         resizeable: true,
         sortable: false,
         width: "100"
       },
       {
         draggable: false,
         name: "Source Node",
-        prop: "pathString",
+        prop: "path",
         resizeable: true,
         sortable: false,
         width: "100"
       }
     ];
-    this.ngxTableConfig = {
-      reorderable: false,
-      selectionType: "'single'",
-      sorts: [ { prop: "name", dir: "asc" } ],
-    } as NgxDataTableConfig;
 
     this.emptyStateConfig = {
       title: ViewEditorI18n.noViewsDisplayedMessage
@@ -260,16 +252,13 @@ export class CreateViewsDialogComponent implements OnInit {
    * @param {SchemaNode} conn the connection node
    */
   private onConnectionDeselected(conn: SchemaNode): void {
-    const refreshViews  = this.arrayClone(this.allViews);
-
-    let i = refreshViews.length;
+    let i = this.allViews.length;
     while (i--) {
-      if (refreshViews[i].getConnectionName() === conn.getName()) {
-        refreshViews.splice(i, 1);
+      if (this.allViews[i].getConnectionName() === conn.getName()) {
+        this.allViews.splice(i, 1);
       }
     }
-
-    this.allViews = refreshViews;
+    this.allViews = [...this.allViews];
   }
 
   /**
@@ -374,17 +363,15 @@ export class CreateViewsDialogComponent implements OnInit {
       .getConnectionSchema(connName)
       .subscribe(
         (schemaNodes) => {
-          // Copy existing view.  Need to reset array to get table to refresh??
-          const refreshViews  = this.arrayClone(self.allViews);
           const newViews: NewView[] = [];
           for ( const schemaNode of schemaNodes ) {
             const nodePath: string[] = [];
             self.generateViewInfos(connName, schemaNode, nodePath, newViews);
           }
           for (const newView of newViews) {
-            refreshViews.push(newView);
+            self.allViews.push(newView);
           }
-          self.allViews = refreshViews;
+          self.allViews = [...self.allViews];
           self.viewsLoadingState = LoadingState.LOADED_VALID;
         },
         (error) => {
@@ -418,14 +405,4 @@ export class CreateViewsDialogComponent implements OnInit {
     }
   }
 
-  private arrayClone(oldArray: NewView[]): NewView[] {
-    const newArray: NewView[] = [];
-    oldArray.forEach((item) => {
-      const nView = new NewView();
-      Object.assign(nView, item);
-      newArray.push(nView);
-    });
-    return newArray;
-  }
-
 }

ngapp/src/app/dataservices/create-views-dialog/new-view.model.ts

@@ -22,8 +22,8 @@ import { SchemaNode } from "@connections/shared/schema-node.model";
  */
 export class NewView {
 
-  private connectionName: string;
-  private viewName: string;
+  private connection: string;
+  private view: string;
   private viewDescription = "";
   private viewSourceNode: SchemaNode;
   private nodePath: string[] = [];
@@ -36,28 +36,28 @@ export class NewView {
    * @returns {string} the connection name
    */
   public getConnectionName(): string {
-    return this.connectionName;
+    return this.connection;
   }
 
   /**
    * @param {string} name the connection name
    */
   public setConnectionName( name?: string ): void {
-    this.connectionName = name ? name : null;
+    this.connection = name ? name : null;
   }
 
   /**
    * @returns {string} the view name
    */
   public getViewName(): string {
-    return this.viewName;
+    return this.view;
   }
 
   /**
    * @param {string} name the view name
    */
   public setViewName( name?: string ): void {
-    this.viewName = name ? name : null;
+    this.view = name ? name : null;
   }
 
   /**
@@ -91,7 +91,7 @@ export class NewView {
   /**
    * @returns {string} the stringified node path
    */
-  public get pathString(): string {
+  public get path(): string {
     let path = "";
     const segLength = this.nodePath.length;
     for ( let i = 0; i < segLength; i++ ) {

ngapp/src/app/dataservices/virtualization/view-editor/view-editor-part.enum.ts

@@ -45,6 +45,11 @@ export enum ViewEditorPart {
   /**
    * The source of the event is the properties part.
    */
-  PROPERTIES = "PROPERTIES"
+  PROPERTIES = "PROPERTIES",
+
+  /**
+   * The source of the event is the properties part.
+   */
+  COLUMNS = "COLUMNS"
 
 }

ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css

@@ -21,3 +21,10 @@
 .property-editors-tab-heading {
   font-size: smaller;
 }
+
+/*
+ * Adds a space to the right of the icon and before the tab heading.
+ */
+.property-editors-tab-icon:after {
+  margin-right: 2px;
+}

ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html

@@ -1,13 +1,18 @@
 <tabset id="property-editors-tabs">
-  <tab *ngFor="let tabz of tabs"
-       [heading]="tabz.title"
-       [active]="tabz.active"
-       (select)="tabz.active = true"
-       (deselect)="tabz.active = false"
-       [disabled]="tabz.disabled"
-       [removable]="tabz.removable"
-       (removed)="removeTab(tabz)"
-       [customClass]="tabz.customClass">
-    {{tabz?.content}}
+  <tab [active]="tabs[0].active"
+       (select)="tabSelected(tabs[0], true)"
+       (deselect)="tabSelected(tabs[0], false)">
+    <ng-template tabHeading>
+      <span class="fa fa-list-alt property-editors-tab-icon"></span>
+      <span class="editor-views-tab-heading">View</span>
+    </ng-template>
+  </tab>
+  <tab [active]="tabs[1].active"
+       (select)="tabSelected(tabs[1], true)"
+       (deselect)="tabSelected(tabs[1], false)">
+    <ng-template tabHeading>
+      <span class="pficon pficon-info property-editors-tab-icon"></span>
+      <span class="editor-views-tab-heading">{{columnPropsTabName}}</span>
+    </ng-template>
   </tab>
 </tabset>

ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts

@@ -18,9 +18,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { LoggerService } from "@core/logger.service";
 import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
+import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-editor-part.enum";
 import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service";
 import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event";
 import { Subscription } from "rxjs/Subscription";
+import 'dragula/dist/dragula.css';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -30,28 +32,27 @@ import { Subscription } from "rxjs/Subscription";
 })
 export class ViewPropertyEditorsComponent implements OnInit, OnDestroy {
 
+  public readonly columnPropsTabName = ViewEditorI18n.columnPropsTabName;
+
   private columnEditorIsEnabled = true;
   private readonly editorService: ViewEditorService;
   private readonly logger: LoggerService;
   private subscription: Subscription;
   private viewEditorIsEnabled = true;
 
-  public readonly tabs: any[] = [
+  private readonly viewIndex = 0;
+  private readonly columnIndex = 1;
+
+  /**
+   * The tabs component configuration.
+   */
+  public tabs = [
     {
-      active: true,
-      content: "View properties",
-      customClass: "property-editors-tab-heading",
-      disabled: !this.viewEditorIsEnabled,
-      removable: false,
-      title: ViewEditorI18n.viewPropsTabName
+      "active": true // preview
     },
     {
-      content: "Column editor",
-      customClass: "property-editors-tab-heading",
-      disabled: !this.columnEditorIsEnabled,
-      removable: false,
-      title: ViewEditorI18n.columnPropsTabName
-    }
+      "active": false // message log
+    },
   ];
 
   constructor( editorService: ViewEditorService,
@@ -69,6 +70,15 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy {
     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;
+        }
+      }
     }
   }
 
@@ -93,4 +103,14 @@ export class ViewPropertyEditorsComponent implements OnInit, OnDestroy {
     this.tabs.splice( this.tabs.indexOf( tab ), 1);
   }
 
+  /**
+   * Callback for when a tab is clicked.
+   *
+   * @param tab the tab being select or deselected
+   * @param selected `true` is selected
+   */
+  public tabSelected( tab, selected ): void {
+    tab.active = selected;
+  }
+
 }