From 9bf9e7dc7f58ba74f778c5bb092aa666f94398f4 Mon Sep 17 00:00:00 2001
From: Mark Drilling <mdrillin@redhat.com>
Date: Tue, 12 Dec 2017 08:50:52 -0600
Subject: [PATCH] changes selected table style

---
 .../add-dataservice-wizard.component.spec.ts  |  3 +-
 .../add-dataservice.component.spec.ts         |  3 +-
 ...onnection-table-selector.component.spec.ts |  3 +-
 .../app/dataservices/dataservices.module.ts   |  4 ++-
 .../jdbc-table-selector.component.html        | 16 ++--------
 .../jdbc-table-selector.component.spec.ts     |  3 +-
 .../selected-table.component.css              | 24 ++++++++++++++
 .../selected-table.component.html             |  6 ++++
 .../selected-table.component.spec.ts          | 32 +++++++++++++++++++
 .../selected-table.component.ts               | 24 ++++++++++++++
 .../sql-control/sql-control.component.css     |  4 +++
 .../sql-control/sql-control.component.ts      |  6 ++--
 ngapp/src/styles.css                          |  4 ---
 13 files changed, 107 insertions(+), 25 deletions(-)
 create mode 100644 ngapp/src/app/dataservices/selected-table/selected-table.component.css
 create mode 100644 ngapp/src/app/dataservices/selected-table/selected-table.component.html
 create mode 100644 ngapp/src/app/dataservices/selected-table/selected-table.component.spec.ts
 create mode 100644 ngapp/src/app/dataservices/selected-table/selected-table.component.ts

diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.spec.ts b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.spec.ts
index 127a8484..1d0531d9 100644
--- a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.spec.ts
+++ b/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 },
diff --git a/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.spec.ts b/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.spec.ts
index bc39da93..0a9d53b8 100644
--- a/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.spec.ts
+++ b/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 },
diff --git a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.spec.ts b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.spec.ts
index 3a024a67..36246b82 100644
--- a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.spec.ts
+++ b/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 },
diff --git a/ngapp/src/app/dataservices/dataservices.module.ts b/ngapp/src/app/dataservices/dataservices.module.ts
index 2467a42b..c9f34203 100644
--- a/ngapp/src/app/dataservices/dataservices.module.ts
+++ b/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,
diff --git a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html b/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html
index b52cec34..b0d2f42d 100644
--- a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html
+++ b/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>
diff --git a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.spec.ts b/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.spec.ts
index 0a474d3f..18dc91f3 100644
--- a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.spec.ts
+++ b/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 },
diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.css b/ngapp/src/app/dataservices/selected-table/selected-table.component.css
new file mode 100644
index 00000000..d2b84ec2
--- /dev/null
+++ b/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;
+}
diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.html b/ngapp/src/app/dataservices/selected-table/selected-table.component.html
new file mode 100644
index 00000000..8a42c9d6
--- /dev/null
+++ b/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>
diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.spec.ts b/ngapp/src/app/dataservices/selected-table/selected-table.component.spec.ts
new file mode 100644
index 00000000..c28990f2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.ts b/ngapp/src/app/dataservices/selected-table/selected-table.component.ts
new file mode 100644
index 00000000..83baf9d3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.css b/ngapp/src/app/dataservices/sql-control/sql-control.component.css
index 834c50e4..ccdce30c 100644
--- a/ngapp/src/app/dataservices/sql-control/sql-control.component.css
+++ b/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;
+}
diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.ts b/ngapp/src/app/dataservices/sql-control/sql-control.component.ts
index 1b77bb04..c5e3489c 100644
--- a/ngapp/src/app/dataservices/sql-control/sql-control.component.ts
+++ b/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 );
 
     //
diff --git a/ngapp/src/styles.css b/ngapp/src/styles.css
index b9f25ab8..0a7d7fd7 100644
--- a/ngapp/src/styles.css
+++ b/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;
-}