From 031c002f76d8182c2bed63e4508c2badfd5b679a Mon Sep 17 00:00:00 2001 From: Daniel Florian Date: Tue, 12 Dec 2017 13:05:39 -0600 Subject: [PATCH] Changes to the connections list in the dataservice wizard - changed the list to a datatable - some style changes to the core datatable style classes - sorting of connections is not working - next button enablement is not working once a table is elected - fixes some lint errors/warnings --- .../core/nav-header/nav-header.component.ts | 2 +- .../add-dataservice-wizard.component.spec.ts | 3 +- .../add-dataservice-wizard.component.ts | 33 ++++---- .../add-dataservice.component.spec.ts | 3 +- .../connection-table-selector.component.css | 48 ----------- .../connection-table-selector.component.html | 63 +++++++------- ...onnection-table-selector.component.spec.ts | 3 +- .../connection-table-selector.component.ts | 82 ++++++++++++------- .../selected-table.component.html | 2 +- .../shared/dataservice.service.ts | 2 +- .../sql-control/sql-control.component.ts | 2 +- ngapp/src/styles.css | 12 +++ 12 files changed, 120 insertions(+), 135 deletions(-) diff --git a/ngapp/src/app/core/nav-header/nav-header.component.ts b/ngapp/src/app/core/nav-header/nav-header.component.ts index d24f24e6..7a072b3d 100644 --- a/ngapp/src/app/core/nav-header/nav-header.component.ts +++ b/ngapp/src/app/core/nav-header/nav-header.component.ts @@ -31,11 +31,11 @@ import { BsModalRef } from "ngx-bootstrap/modal/modal-options.class"; }) export class NavHeaderComponent { + public aboutInfo: About; private aboutRef: BsModalRef; private logger: LoggerService; private modalService: BsModalService; private aboutService: AboutService; - public aboutInfo: About; constructor( logger: LoggerService, modalService: BsModalService, 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 1d0531d9..fbef22b2 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 @@ -15,6 +15,7 @@ import { NotifierService } from "@dataservices/shared/notifier.service"; import { VdbService } from "@dataservices/shared/vdb.service"; import { PropertyFormPropertyComponent } from "@shared/property-form/property-form-property/property-form-property.component"; import { PropertyFormComponent } from "@shared/property-form/property-form.component"; +import { NgxDatatableModule } from "@swimlane/ngx-datatable"; import { PatternFlyNgModule } from "patternfly-ng"; import { AddDataserviceWizardComponent } from "./add-dataservice-wizard.component"; @@ -24,7 +25,7 @@ describe("AddDataserviceWizardComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule ], + imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule, NgxDatatableModule ], declarations: [ AddDataserviceWizardComponent, ConnectionTableSelectorComponent, JdbcTableSelectorComponent, PropertyFormComponent, PropertyFormPropertyComponent, SelectedTableComponent ], providers: [ diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts index 33b06cdc..081b0fb9 100644 --- a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts +++ b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts @@ -24,7 +24,6 @@ import { import { FormControl, FormGroup } from "@angular/forms"; import { AbstractControl } from "@angular/forms"; -import { Validators } from "@angular/forms"; import { Router } from "@angular/router"; import { LoggerService } from "@core/logger.service"; import { ConnectionTableSelectorComponent } from "@dataservices/connection-table-selector/connection-table-selector.component"; @@ -71,6 +70,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy { @ViewChild("wizard") public wizard: WizardComponent; @ViewChild(ConnectionTableSelectorComponent) public tableSelector: ConnectionTableSelectorComponent; + public nameValidationError = ""; private dataserviceService: DataserviceService; private notifierService: NotifierService; private vdbService: VdbService; @@ -79,7 +79,6 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy { private deploymentChangeSubscription: Subscription; private sourceVdbUnderDeployment: string; private errorDetailMessage: string; - public nameValidationError: string = ""; constructor(router: Router, dataserviceService: DataserviceService, notifierService: NotifierService, logger: LoggerService, vdbService: VdbService ) { @@ -175,27 +174,27 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy { public handleNameChanged( input: AbstractControl ): void { const self = this; - this.dataserviceService.isValidName( input.value ).subscribe( - ( errorMsg ) => { - if ( errorMsg ) { - // only update if error has changed - if ( errorMsg != self.nameValidationError ) { - self.nameValidationError = errorMsg; - } - } else { // name is valid - self.nameValidationError = ""; - } - }, - ( error ) => { - self.logger.error( "[handleNameChanged] Error: %o", error ); - } ); + this.dataserviceService.isValidName( input.value ).subscribe( + ( errorMsg ) => { + if ( errorMsg ) { + // only update if error has changed + if ( errorMsg !== self.nameValidationError ) { + self.nameValidationError = errorMsg; + } + } else { // name is valid + self.nameValidationError = ""; + } + }, + ( error ) => { + self.logger.error( "[handleNameChanged] Error: %o", error ); + } ); } /* * Return the name valid state */ public get nameValid(): boolean { - return this.nameValidationError == null || this.nameValidationError.length == 0; + return this.nameValidationError == null || this.nameValidationError.length === 0; } /* 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 0a9d53b8..cecda7e4 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 @@ -15,6 +15,7 @@ import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; import { NotifierService } from "@dataservices/shared/notifier.service"; import { VdbService } from "@dataservices/shared/vdb.service"; import { SharedModule } from "@shared/shared.module"; +import { NgxDatatableModule } from "@swimlane/ngx-datatable"; import { PatternFlyNgModule } from "patternfly-ng"; import { AddDataserviceComponent } from "./add-dataservice.component"; @@ -24,7 +25,7 @@ describe("AddDataserviceComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ CoreModule, PatternFlyNgModule, FormsModule, ReactiveFormsModule, RouterTestingModule, SharedModule ], + imports: [ CoreModule, PatternFlyNgModule, FormsModule, ReactiveFormsModule, RouterTestingModule, SharedModule, NgxDatatableModule ], declarations: [ AddDataserviceComponent, AddDataserviceWizardComponent, ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ], providers: [ diff --git a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css index 84749021..b0ad8ed3 100644 --- a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css +++ b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css @@ -1,51 +1,3 @@ -.list-div { - position: relative; - height: 100%; - max-height: 300px; - overflow-y: auto; -} - -.connection-list .list-view-pf-main-info { - padding-top: 0.5em; - padding-bottom: 0.5em; -} - -.connection-list .list-group-item-heading { - font-size: 12px; - margin-right: 5px; -} - -.connection-list .list-view-pf-description { - width: 95%; -} - -.connection-list .list-group-item.active { - background-color: darkblue; - color: white; - border-color: transparent; -} - -.connection-column-title { - height: 35px; - padding-top: 7px; - border:1px solid white; - background-color: #cccccc; - padding-left: 10px; -} - -.evenRow { - background-color: #f2f2f2; -} - -.oddRow { - background-color: white; -} - -.connection-selector-container { - padding-left: 0; - padding-right: 0; -} - .jdbc-selector-container { padding-left: 0; padding-right: 0; diff --git a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html index e2385c43..3c7be0e2 100644 --- a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html +++ b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html @@ -1,39 +1,36 @@
- - - -
-
- Connections -
-
- -
-
-
- - Problem Loading Connections! -
-
-
-
-
-
- -
-
-
-
- {{ connection.getId() }} -
-
-
-
-
+
+ +
+
+ + Problem Loading Connections!
+
+ + + + Connections + + + + {{row.name}} + + + +
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 36246b82..04d53dd7 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 @@ -8,6 +8,7 @@ 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 { NgxDatatableModule } from "@swimlane/ngx-datatable"; import { ConnectionTableSelectorComponent } from "./connection-table-selector.component"; describe("ConnectionTableSelectorComponent", () => { @@ -16,7 +17,7 @@ describe("ConnectionTableSelectorComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ FormsModule, HttpModule ], + imports: [ FormsModule, HttpModule, NgxDatatableModule ], declarations: [ ConnectionTableSelectorComponent, JdbcTableSelectorComponent, SelectedTableComponent ], providers: [ AppSettingsService, LoggerService, diff --git a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts index fe69a34b..15eb264d 100644 --- a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts +++ b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts @@ -15,10 +15,7 @@ * limitations under the License. */ -import { ViewChild } from "@angular/core"; -import { Output } from "@angular/core"; -import { EventEmitter } from "@angular/core"; -import { Component, OnInit } from "@angular/core"; +import { Component, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation } from "@angular/core"; import { Connection } from "@connections/shared/connection.model"; import { ConnectionService } from "@connections/shared/connection.service"; import { LoggerService } from "@core/logger.service"; @@ -27,6 +24,7 @@ import { Table } from "@dataservices/shared/table.model"; import { LoadingState } from "@shared/loading-state.enum"; @Component({ + encapsulation: ViewEncapsulation.None, selector: "app-connection-table-selector", templateUrl: "./connection-table-selector.component.html", styleUrls: ["./connection-table-selector.component.css"] @@ -37,6 +35,18 @@ export class ConnectionTableSelectorComponent implements OnInit { @ViewChild(JdbcTableSelectorComponent) public jdbcTableSelector: JdbcTableSelectorComponent; + public readonly nameProp = "name"; // must match html template + public rows: any[] = []; + + public readonly customClasses = { + sortAscending: "fa fa-sort-asc", + sortDescending: "fa fa-sort-desc", + pagerLeftArrow: "fa fa-chevron-left", + pagerRightArrow: "fa fa-chevron-right", + pagerPrevious: "fa fa-step-backward", + pagerNext: "fa fa-step-forward" + }; + private connectionService: ConnectionService; private allConnections: Connection[] = []; private selectedConn: Connection; @@ -61,6 +71,13 @@ export class ConnectionTableSelectorComponent implements OnInit { (conns) => { self.allConnections = conns; self.connectionLoadingState = LoadingState.LOADED_VALID; + + // load table after setting loading state so table has been constructed + self.allConnections.forEach( ( connection ) => { + const row = {}; + row[ this.nameProp ] = connection.getId(); + self.rows.push( row ); + } ); }, (error) => { self.logger.error("[ConnectionTableSelectorComponent] Error getting connections: %o", error); @@ -69,33 +86,13 @@ export class ConnectionTableSelectorComponent implements OnInit { ); } - /** - * Toggles the selection - * @param {Connection} connection the connection whose selection changed - */ - public toggleConnectionSelected(connection: Connection): void { - // Connection currently selected, so deselect it - if (this.isConnectionSelected(connection)) { - this.selectedConn = null; - } else { - // Connection not currently selected or nothing selected, so select it. - this.selectedConn = connection; - } - // Set the specific selector with the current connection - if (this.jdbcTableSelector) { - if (this.selectedConn && this.selectedConn.isJdbc()) { - this.jdbcTableSelector.setConnection(connection); - } else { - this.jdbcTableSelector.setConnection(null); - } - } - } + // callback from connections table selection + public onSelect( { selected }) { + // connection is single select so get first element + const connectionName = selected[ 0 ][ this.nameProp ]; - /** - * Respond to child table selection changes by propagating up my parent - */ - public onTableSelectionChanged( ): void { - this.tableSelectionChanged.emit(); + // find and set selected connection (see setter) + this.selectedConnection = this.allConnections.find(( conn ) => conn.getId() === connectionName ); } /** @@ -174,6 +171,18 @@ export class ConnectionTableSelectorComponent implements OnInit { */ public set selectedConnection(conn: Connection) { this.selectedConn = conn; + + // Set the specific selector with the current connection + if (this.jdbcTableSelector) { + if (this.selectedConn && this.selectedConn.isJdbc()) { + this.jdbcTableSelector.setConnection(this.selectedConnection); + } else { + this.jdbcTableSelector.setConnection(null); + } + } + + // notify upstream that connection selection has changed + this.tableSelectionChanged.emit(); } /* @@ -196,4 +205,17 @@ export class ConnectionTableSelectorComponent implements OnInit { return selectedTables; } + // used by table + public get tableMessages(): { emptyMessage: string; totalMessage: string | string } { + const msg = this.allConnections.length === 1 ? "connection" : "connections"; + + return { + // no data message + emptyMessage: "No connections found", + + // footer total message + totalMessage: msg + }; + } + } diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.html b/ngapp/src/app/dataservices/selected-table/selected-table.component.html index 8a42c9d6..28e263d5 100644 --- a/ngapp/src/app/dataservices/selected-table/selected-table.component.html +++ b/ngapp/src/app/dataservices/selected-table/selected-table.component.html @@ -2,5 +2,5 @@ {{ table.getConnection().getId() }}
- {{ table.name }} + {{ table.getName() }}
diff --git a/ngapp/src/app/dataservices/shared/dataservice.service.ts b/ngapp/src/app/dataservices/shared/dataservice.service.ts index 4d939ec6..a9ea03e6 100644 --- a/ngapp/src/app/dataservices/shared/dataservice.service.ts +++ b/ngapp/src/app/dataservices/shared/dataservice.service.ts @@ -16,7 +16,7 @@ */ import { Injectable } from "@angular/core"; -import { Http} from "@angular/http"; +import { Http } from "@angular/http"; import { ApiService } from "@core/api.service"; import { AppSettingsService } from "@core/app-settings.service"; import { LoggerService } from "@core/logger.service"; 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 c5e3489c..727461a4 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, ViewEncapsulation} 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"; diff --git a/ngapp/src/styles.css b/ngapp/src/styles.css index 0a7d7fd7..47262e20 100644 --- a/ngapp/src/styles.css +++ b/ngapp/src/styles.css @@ -38,12 +38,24 @@ background-color: white; } +.datatable-row-even:hover { + background-color: #def3ff; +} + .datatable-row-odd { background-color: #f2f2f2; } +.datatable-row-odd:hover { + background-color: #def3ff; +} + .datatable-body-cell { padding: 0.25em; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; } + +.datatable-body-row.active .datatable-row-group { + background-color: #39a5dc !important; +}