Reorg of the AddDataservice Wizard

ngapp/src/app/activities/activities-cards/activities-cards.component.spec.ts

@@ -23,6 +23,7 @@ describe("ActivitiesCardsComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [ActivitiesCardsComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/activities/activities-list/activities-list.component.spec.ts

@@ -23,6 +23,7 @@ describe("ActivitiesListComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [ActivitiesListComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/activities/activities.component.spec.ts

@@ -38,23 +38,27 @@ describe("ActivitiesComponent", () => {
   }));
 
   it("should be created", () => {
+    console.log("========== [ActivitiesComponent] should be created");
     expect(component).toBeTruthy();
   });
 
   it("should have Activities Title", () => {
+    console.log("========== [ActivitiesComponent] should have Activities Title");
     // query for the title <h2> by CSS element selector
     const de = fixture.debugElement.query(By.css("h2"));
     const el = de.nativeElement;
     expect(el.textContent).toEqual("Activities");
   });
 
   it("should have Toolbar", () => {
+    console.log("========== [ActivitiesComponent] should have Toolbar");
     // query for the toolbar by css classname
     const de = fixture.debugElement.query(By.css(".toolbar-pf"));
     expect(de).toBeDefined();
   });
 
   it("should have Activities", () => {
+    console.log("========== [ActivitiesComponent] should have Activities");
     // Check component object
     const activities = component.allActivities;
     expect(activities.length).toEqual(3);
@@ -66,6 +70,7 @@ describe("ActivitiesComponent", () => {
   });
 
   it("should have initial card layout", () => {
+    console.log("========== [ActivitiesComponent] should have initial card layout");
     // app-activities-cards should be present
     let debugEl = fixture.debugElement.query(By.css("app-activities-cards"));
     const element = debugEl.nativeElement;
@@ -77,6 +82,7 @@ describe("ActivitiesComponent", () => {
   });
 
   it("should toggle layout", () => {
+    console.log("========== [ActivitiesComponent] should toggle layout");
     // Initial layout should be Card Layout
     let cardDebugElem = fixture.debugElement.query(By.css("app-activities-cards"));
     let listDebugElem = fixture.debugElement.query(By.css("app-activities-list"));
@@ -99,6 +105,7 @@ describe("ActivitiesComponent", () => {
   });
 
   it("should filter activities", () => {
+    console.log("========== [ActivitiesComponent] should filter activities");
     // Expect 3 activities initially.
     let activities = component.filteredActivities;
     expect(activities.length).toEqual(3);

ngapp/src/app/activities/add-activity-wizard/add-activity-wizard.component.spec.ts

@@ -37,6 +37,7 @@ describe("AddActivityWizardComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddActivityWizardComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/activities/add-activity/add-activity.component.spec.ts

@@ -37,6 +37,7 @@ describe("AddActivityComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddActivityComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/activities/shared/add-activity-form/add-activity-form.component.spec.ts

@@ -25,6 +25,7 @@ describe("AddActivityFormComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddActivityFormComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/app.component.spec.ts

@@ -17,6 +17,7 @@ describe("AppComponent", () => {
   }));
 
   it("should create the app", async(() => {
+    console.log("========== [AppComponent] should be created");
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();

ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.spec.ts

@@ -34,6 +34,7 @@ describe("AddConnectionWizardComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddConnectionWizardComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/connections/add-connection/add-connection.component.spec.ts

@@ -34,6 +34,7 @@ describe("AddConnectionComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddConnectionComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/connections/connections-cards/connections-cards.component.spec.ts

@@ -23,6 +23,7 @@ describe("ConnectionsCardsComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [ConnectionCardsComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/connections/connections-list/connections-list.component.spec.ts

@@ -23,6 +23,7 @@ describe("ConnectionsListComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [ConnectionsListComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/connections/connections.component.spec.ts

@@ -37,23 +37,27 @@ describe("ConnectionsComponent", () => {
   }));
 
   it("should be created", () => {
+    console.log("========== [ConnectionsComponent] should be created");
     expect(component).toBeTruthy();
   });
 
   it("should have Connections Title", () => {
+    console.log("========== [ConnectionsComponent] should have Connections Title");
     // query for the title <h2> by CSS element selector
     const de = fixture.debugElement.query(By.css("h2"));
     const el = de.nativeElement;
     expect(el.textContent).toEqual("Connections");
   });
 
   it("should have Toolbar", () => {
+    console.log("========== [ConnectionsComponent] should have Toolbar");
     // query for the toolbar by css classname
     const de = fixture.debugElement.query(By.css(".toolbar-pf"));
     expect(de).toBeDefined();
   });
 
   it("should have Connections", () => {
+    console.log("========== [ConnectionsComponent] should have Connections");
     // Check component object
     const connections = component.allConnections;
     expect(connections.length).toEqual(3);
@@ -65,6 +69,7 @@ describe("ConnectionsComponent", () => {
   });
 
   it("should have initial card layout", () => {
+    console.log("========== [ConnectionsComponent] should have initial card layout");
     // app-connections-cards should be present
     let debugEl = fixture.debugElement.query(By.css("app-connections-cards"));
     const element = debugEl.nativeElement;
@@ -76,6 +81,7 @@ describe("ConnectionsComponent", () => {
   });
 
   it("should toggle layout", () => {
+    console.log("========== [ConnectionsComponent] should toggle layout");
     // Initial layout should be Card Layout
     let cardDebugElem = fixture.debugElement.query(By.css("app-connections-cards"));
     let listDebugElem = fixture.debugElement.query(By.css("app-connections-list"));
@@ -98,6 +104,7 @@ describe("ConnectionsComponent", () => {
   });
 
   it("should filter connections", () => {
+    console.log("========== [ConnectionsComponent] should filter connections");
     // Expect 3 connections initially.
     let connections = component.filteredConnections;
     expect(connections.length).toEqual(3);

ngapp/src/app/core/about-dialog/about-dialog.component.spec.ts

@@ -23,6 +23,7 @@ describe("AboutDialogComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AboutDialogComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/core/about-dialog/about.service.spec.ts

@@ -15,6 +15,7 @@ describe("AboutService", () => {
   it("should be created",
       inject([ AboutService, AppSettingsService, LoggerService ],
      ( service: AboutService ) => {
-    expect( service ).toBeTruthy();
+        console.log("========== [AboutServiceComponent] should be created");
+        expect( service ).toBeTruthy();
   }));
 });

ngapp/src/app/core/api.service.spec.ts

@@ -14,6 +14,7 @@ describe("ApiService", () => {
 
   it("should be created", inject([LoggerService],
                                             (service: MockService ) => {
+    console.log("========== [ApiServiceComponent] should be created");
     expect(service).toBeTruthy();
   }));
 });

ngapp/src/app/core/app-settings.service.spec.ts

@@ -10,6 +10,7 @@ describe("AppSettingsService", () => {
   });
 
   it("should be created", inject([AppSettingsService], (service: AppSettingsService) => {
+    console.log("========== [AppSettingsServiceComponent] should be created");
     expect(service).toBeTruthy();
   }));
 });

ngapp/src/app/core/breadcrumbs/breadcrumb/breadcrumb.component.spec.ts

@@ -23,6 +23,7 @@ describe("BreadcrumbComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [BreadcrumbComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/core/breadcrumbs/breadcrumbs.component.spec.ts

@@ -21,6 +21,7 @@ describe("BreadcrumbsComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [BreadcrumbsComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/core/nav-header/nav-header.component.spec.ts

@@ -41,6 +41,7 @@ describe("NavHeaderComponent", () => {
 
   it("should be created", inject([ LoggerService ],
                                             (logger: LoggerService ) => {
+    console.log("========== [NavHeaderComponent] should be created");
     expect(component).toBeTruthy();
   }));
 });

ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts

@@ -26,6 +26,7 @@ describe("VerticalNavComponent", () => {
 
   it("should be created", inject([ LoggerService ],
     (logger: LoggerService ) => {
+    console.log("========== [VerticalNavComponent] should be created");
     expect(component).toBeTruthy();
   }));
 });

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.html

@@ -9,7 +9,7 @@
   <pfng-wizard-step [config]="step1Config">
     <h3><i>{{ step1InstructionMessage }}</i></h3>
     <br>
-    <app-connection-table-selector (tableSelectionChanged)="updatePage1ValidStatus()"></app-connection-table-selector>
+    <app-connection-table-selector (selectedTableListUpdated)="updatePage1ValidStatus()"></app-connection-table-selector>
   </pfng-wizard-step>
   <!-- -------------------------- -->
   <!-- Step 2 : Review and Create -->
@@ -35,7 +35,11 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
         </div>
         <div class="form-group">
           <label class="col-sm-2 control-label">Selected Tables:</label>
-          <label class="col-sm-5">{{ dataserviceSourceTables }}</label>
+          <div class="col-sm-5">
+            <div *ngFor="let table of dataserviceSourceTables">
+              <label>[ {{ table.getConnection().getId() }} ]  {{table.getName()}}</label>
+            </div>
+          </div>
         </div>
       </form>
     </pfng-wizard-substep>

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.spec.ts

@@ -47,6 +47,7 @@ describe("AddDataserviceWizardComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddDataserviceWizardComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts

@@ -31,6 +31,7 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { DataservicesConstants } from "@dataservices/shared/dataservices-constants";
 import { NewDataservice } from "@dataservices/shared/new-dataservice.model";
 import { NotifierService } from "@dataservices/shared/notifier.service";
+import { Table } from "@dataservices/shared/table.model";
 import { VdbStatus } from "@dataservices/shared/vdb-status.model";
 import { VdbService } from "@dataservices/shared/vdb.service";
 import { VdbsConstants } from "@dataservices/shared/vdbs-constants";
@@ -368,18 +369,13 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy {
   /**
    * @returns {string} the selected source table names in string form
    */
-  public get dataserviceSourceTables(): string {
-    let tableStr = "None";
-    const tables = this.tableSelector.getSelectedTables();
-    if (tables.length > 0) {
-      tableStr = tables[0].getConnection().getId() + " [" + tables[0].getName() + "]";
-    }
-    if (tables.length === 2) {
-      tableStr = tableStr + ", " + tables[1].getConnection().getId() + " [" + tables[1].getName() + "]";
-    }
-    return tableStr;
+  public get dataserviceSourceTables(): Table[] {
+    return this.tableSelector.getSelectedTables();
   }
 
+  /**
+   * Updates the page1 status
+   */
   public updatePage1ValidStatus( ): void {
     this.step1Config.nextEnabled = this.tableSelector.valid();
     this.setNavAway(this.step1Config.nextEnabled);

ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.spec.ts

@@ -47,6 +47,7 @@ describe("AddDataserviceComponent", () => {
   });
 
   it("should be created", () => {
+    console.log("========== [AddDataserviceComponent] should be created");
     expect(component).toBeTruthy();
   });
 });

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css

@@ -2,3 +2,12 @@
   padding-left: 0;
   padding-right: 0;
 }
+
+.jdbc-column-title {
+  height: 30px;
+  border:1px solid white;
+  background-color: #cccccc;
+  padding-top: 5px;
+  padding-left: 10px;
+  padding-right: 0;
+}

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html

@@ -26,7 +26,7 @@
         </ng-template>
         <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
           <i class="fa fa-plug list-view-pf-icon-sm"></i>
-          {{row.name}}
+          {{ row.name }}
         </ng-template>
       </ngx-datatable-column>
     </ngx-datatable>
@@ -37,19 +37,43 @@
   <!-- 2) Non-JDBC Connection selected             -->
   <!-- 3) No Connection selected                   -->
   <!-- ------------------------------------------- -->
-  <div class="col-sm-9 jdbc-selector-container">
-    <app-jdbc-table-selector [connection]="selectedConnection" (tableSelectionChanged)="onTableSelectionChanged()" *ngIf="hasJdbcConnectionSelected()"></app-jdbc-table-selector>
+  <div class="col-sm-6 jdbc-column-title">
+    <strong>Table Selection</strong>
   </div>
-  <div class="col-sm-9" *ngIf="hasNonJdbcConnectionSelected()">
+  <div class="col-sm-3 jdbc-column-title">
+    <strong>Current Selections</strong>
+  </div>
+  <div class="col-sm-6 jdbc-selector-container">
+    <app-jdbc-table-selector [connection]="selectedConnection"
+                             (tableSelectionAdded)="onTableSelectionAdded($event)"
+                             (tableSelectionRemoved)="onTableSelectionRemoved($event)"
+                             *ngIf="hasJdbcConnectionSelected()">
+    </app-jdbc-table-selector>
+  </div>
+  <div class="col-sm-6" *ngIf="hasNonJdbcConnectionSelected()">
     <div class="alert alert-info">
       <span class="pficon pficon-info"></span>
       <strong>Non-JDBC Connections are not supported</strong>
     </div>
   </div>
-  <div class="col-sm-9" *ngIf="!hasSelectedConnection()">
+  <div class="col-sm-6" *ngIf="!hasSelectedConnection()">
     <div class="alert alert-info">
       <span class="pficon pficon-info"></span>
       <strong>Please select a Connection</strong>
     </div>
   </div>
+  <!-- ----------------------- -->
+  <!--  Selected Tables List   -->
+  <!-- ----------------------- -->
+  <div class="col-sm-3" *ngIf="!hasSelectedTables">
+      <div class="alert alert-info">
+        <span class="pficon pficon-info"></span>
+        <strong>No tables selected</strong>
+      </div>
+  </div>
+  <div class = "list-div col-sm-3 jdbc-column-results" *ngIf="hasSelectedTables">
+      <div *ngFor="let table of getSelectedTables()">
+        <app-selected-table [table]="table" (selectionListTableRemoved)="onTableSelectionRemoved($event)"></app-selected-table>
+      </div>
+  </div>
 </div>