changes selected table style

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

@@ -7,6 +7,7 @@ import { MockConnectionService } from "@connections/shared/mock-connection.servi
 import { CoreModule } from "@core/core.module";
 import { ConnectionTableSelectorComponent } from "@dataservices/connection-table-selector/connection-table-selector.component";
 import { JdbcTableSelectorComponent } from "@dataservices/jdbc-table-selector/jdbc-table-selector.component";
+import { SelectedTableComponent } from "@dataservices/selected-table/selected-table.component";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service";
 import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
@@ -25,7 +26,7 @@ describe("AddDataserviceWizardComponent", () => {
     TestBed.configureTestingModule({
       imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule ],
       declarations: [ AddDataserviceWizardComponent, ConnectionTableSelectorComponent, JdbcTableSelectorComponent,
-                      PropertyFormComponent, PropertyFormPropertyComponent ],
+                      PropertyFormComponent, PropertyFormPropertyComponent, SelectedTableComponent ],
       providers: [
         NotifierService,
         { provide: DataserviceService, useClass: MockDataserviceService },

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

@@ -8,6 +8,7 @@ import { CoreModule } from "@core/core.module";
 import { AddDataserviceWizardComponent } from "@dataservices/add-dataservice-wizard/add-dataservice-wizard.component";
 import { ConnectionTableSelectorComponent } from "@dataservices/connection-table-selector/connection-table-selector.component";
 import { JdbcTableSelectorComponent } from "@dataservices/jdbc-table-selector/jdbc-table-selector.component";
+import { SelectedTableComponent } from "@dataservices/selected-table/selected-table.component";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service";
 import { MockVdbService } from "@dataservices/shared/mock-vdb.service";
@@ -25,7 +26,7 @@ describe("AddDataserviceComponent", () => {
     TestBed.configureTestingModule({
       imports: [ CoreModule, PatternFlyNgModule, FormsModule, ReactiveFormsModule, RouterTestingModule, SharedModule ],
       declarations: [ AddDataserviceComponent, AddDataserviceWizardComponent,
-                      ConnectionTableSelectorComponent, JdbcTableSelectorComponent ],
+                      ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ],
       providers: [
         NotifierService,
         { provide: DataserviceService, useClass: MockDataserviceService },

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.spec.ts

@@ -7,6 +7,7 @@ import { MockConnectionService } from "@connections/shared/mock-connection.servi
 import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
 import { JdbcTableSelectorComponent } from "@dataservices/jdbc-table-selector/jdbc-table-selector.component";
+import { SelectedTableComponent } from "@dataservices/selected-table/selected-table.component";
 import { ConnectionTableSelectorComponent } from "./connection-table-selector.component";
 
 describe("ConnectionTableSelectorComponent", () => {
@@ -16,7 +17,7 @@ describe("ConnectionTableSelectorComponent", () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ FormsModule, HttpModule ],
-      declarations: [ ConnectionTableSelectorComponent, JdbcTableSelectorComponent ],
+      declarations: [ ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ],
       providers: [
         AppSettingsService, LoggerService,
         { provide: ConnectionService, useClass: MockConnectionService },

ngapp/src/app/dataservices/dataservices.module.ts

@@ -36,6 +36,7 @@ import { AddDataserviceWizardComponent } from "./add-dataservice-wizard/add-data
 import { AddDataserviceComponent } from "./add-dataservice/add-dataservice.component";
 import { ConnectionTableSelectorComponent } from "./connection-table-selector/connection-table-selector.component";
 import { JdbcTableSelectorComponent } from "./jdbc-table-selector/jdbc-table-selector.component";
+import { SelectedTableComponent } from "./selected-table/selected-table.component";
 import { SqlControlComponent } from "./sql-control/sql-control.component";
 import { TestDataserviceComponent } from "./test-dataservice/test-dataservice.component";
 
@@ -61,7 +62,8 @@ import { TestDataserviceComponent } from "./test-dataservice/test-dataservice.co
     ConnectionTableSelectorComponent,
     JdbcTableSelectorComponent,
     TestDataserviceComponent,
-    SqlControlComponent
+    SqlControlComponent,
+    SelectedTableComponent
   ],
   providers: [
     DataserviceService,

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

@@ -94,19 +94,7 @@
   </div>
 </div>
 <div class = "list-div col-sm-4 jdbc-column-results" *ngIf="hasSelectedSchema && hasSelectedTables()">
-  <div class="jdbc-list list-group list-view-pf">
-    <div class="list-group-item list-view-pf-stacked"
-         *ngFor="let table of getSelectedTables(); index as i; odd as isEvenRow; even as isOddRow"
-         [class.oddRow]="isOddRow" [class.evenRow]="isEvenRow">
-      <div class="list-view-pf-main-info">
-        <div class="list-view-pf-body">
-          <div class="list-view-pf-description">
-            <div class="list-group-item-heading">
-              {{ table.getName() }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div *ngFor="let table of getSelectedTables()">
+    <app-selected-table [table]="table"></app-selected-table>
   </div>
 </div>

ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.spec.ts

@@ -6,6 +6,7 @@ import { ConnectionService } from "@connections/shared/connection.service";
 import { MockConnectionService } from "@connections/shared/mock-connection.service";
 import { AppSettingsService } from "@core/app-settings.service";
 import { LoggerService } from "@core/logger.service";
+import { SelectedTableComponent } from "@dataservices/selected-table/selected-table.component";
 import { JdbcTableSelectorComponent } from "./jdbc-table-selector.component";
 
 describe("JdbcTableSelectorComponent", () => {
@@ -15,7 +16,7 @@ describe("JdbcTableSelectorComponent", () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ FormsModule, HttpModule ],
-      declarations: [ JdbcTableSelectorComponent ],
+      declarations: [ JdbcTableSelectorComponent, SelectedTableComponent ],
       providers: [
         AppSettingsService, LoggerService,
         { provide: ConnectionService, useClass: MockConnectionService },

ngapp/src/app/dataservices/selected-table/selected-table.component.css

@@ -0,0 +1,24 @@
+.selected-table-card {
+  background-color: #f2f2f2;
+  border:2px dotted darkblue;
+  margin-top: 5px;
+  margin-left: 15px;
+  min-height: 60px;
+  max-height: 80px;
+  padding-top: 5px;
+  padding-right: 5px;
+}
+
+.selected-table-name {
+  margin-left: 20px;
+  font-weight: bold;
+}
+
+.selected-table-connection {
+  margin-left: 5px;
+}
+
+.selected-table-close-icon {
+  cursor: pointer;
+  color: darkred;
+}

ngapp/src/app/dataservices/selected-table/selected-table.component.html

@@ -0,0 +1,6 @@
+<div class="col-sm-8 selected-table-card">
+  <span class="fa fa-plug"></span><span class="selected-table-connection">{{ table.getConnection().getId() }}</span>
+  <span class="fa fa-close pull-right selected-table-close-icon" (click)="onRemove()"></span>
+  <br>
+  <span class="selected-table-name">{{ table.name }}</span>
+</div>

ngapp/src/app/dataservices/selected-table/selected-table.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { Connection } from "../../connections/shared/connection.model";
+import { Table } from "../shared/table.model";
+import { SelectedTableComponent } from "./selected-table.component";
+
+describe("SelectedTableComponent", () => {
+  let component: SelectedTableComponent;
+  let fixture: ComponentFixture<SelectedTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectedTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectedTableComponent);
+    component = fixture.componentInstance;
+    const connection = new Connection();
+    connection.setId("testConn");
+    const table = new Table();
+    table.setConnection(connection);
+    component.table = table;
+    fixture.detectChanges();
+  });
+
+  it("should be created", () => {
+    expect(component).toBeTruthy();
+  });
+});

ngapp/src/app/dataservices/selected-table/selected-table.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { Table } from "@dataservices/shared/table.model";
+
+@Component({
+  selector: "app-selected-table",
+  templateUrl: "./selected-table.component.html",
+  styleUrls: ["./selected-table.component.css"]
+})
+export class SelectedTableComponent implements OnInit {
+
+  @Input() public table: Table;
+
+  constructor() {
+    // nothing to do
+  }
+
+  public ngOnInit(): void {
+    // nothing to do
+  }
+
+  public onRemove(): void {
+    this.table.selected = false;
+  }
+}

ngapp/src/app/dataservices/sql-control/sql-control.component.css

@@ -26,3 +26,7 @@
 .sql-control-controls-offset input[type=number] {
   width: 5em;
 }
+
+.row-number-column {
+  text-align: center;
+}

ngapp/src/app/dataservices/sql-control/sql-control.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Input } from "@angular/core";
+import {Input, ViewEncapsulation} from "@angular/core";
 import { Component, OnInit } from "@angular/core";
 import { LoggerService } from "@core/logger.service";
 import { ColumnData } from "@dataservices/shared/column-data.model";
@@ -28,6 +28,7 @@ import "codemirror/addon/selection/active-line.js";
 import "codemirror/mode/sql/sql.js";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-sql-control",
   templateUrl: "./sql-control.component.html",
   styleUrls: ["./sql-control.component.css"]
@@ -230,7 +231,8 @@ export class SqlControlComponent implements OnInit {
                      prop: rowNumHeader,
                      resizable: true,
                      sortable: true,
-                     width: 60 };
+                     width: 60,
+                     cellClass: "row-number-column"};
     this.columns.push( column );
 
     //

ngapp/src/styles.css

@@ -47,7 +47,3 @@
   border-left: 1px solid #d8d8d8;
   border-right: 1px solid #d8d8d8;
 }
-
-.datatable-body-cell:first-child {
-  text-align: center;
-}