From 1ec832bf749f12dd248668c7082e7e31f62c52ce Mon Sep 17 00:00:00 2001 From: Daniel Florian Date: Thu, 4 Jan 2018 08:22:20 -0600 Subject: [PATCH] Convert schemas list and tables list in data service wizard to be data tables - converted schemas list to be an ngx-datatable - converted tables list to be an ngx-datatable - in connections table, now using JSON response objects as table row data instead of creating new row objects --- .../connection-table-selector.component.html | 9 +- .../connection-table-selector.component.ts | 34 ++--- .../jdbc-table-selector.component.html | 89 +++++++------ .../jdbc-table-selector.component.spec.ts | 3 +- .../jdbc-table-selector.component.ts | 122 ++++++++++++++---- 5 files changed, 164 insertions(+), 93 deletions(-) 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 cfd1d2db..6d4ab2d3 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 @@ -9,9 +9,8 @@
- - + - {{ row.name }} + {{ row.keng__id }} 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 08e7dfcf..06319ad0 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 @@ -36,9 +36,6 @@ export class ConnectionTableSelectorComponent implements OnInit { @ViewChild(JdbcTableSelectorComponent) public jdbcTableSelector: JdbcTableSelectorComponent; @Output() public selectedTableListUpdated: EventEmitter = new EventEmitter(); - public readonly nameProp = "name"; // must match html template - public rows: any[] = []; - public readonly customClasses = { sortAscending: "fa fa-sort-asc", sortDescending: "fa fa-sort-desc", @@ -78,13 +75,6 @@ export class ConnectionTableSelectorComponent implements OnInit { if (self.wizardService.isEdit()) { self.initEdit(); } - - // 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); @@ -93,13 +83,19 @@ export class ConnectionTableSelectorComponent implements OnInit { ); } - // callback from connections table selection - public onSelect( { selected }): void { - // connection is single select so get first element - const connectionName = selected[ 0 ][ this.nameProp ]; + // callback from connection table selection + public onSelect( { selected } ): void { + // connection table is single select so use first element + const conn: Connection = selected[ 0 ]; - // find and set selected connection (see setter) - this.selectedConnection = this.allConnections.find(( conn ) => conn.getId() === connectionName ); + // only set if schema selection has changed (see setter) + if ( this.hasSelectedConnection() ) { + if ( this.selectedConn.getId() !== conn.getId() ) { + this.selectedConnection = conn; + } + } else { + this.selectedConnection = conn; + } } /** @@ -161,7 +157,7 @@ export class ConnectionTableSelectorComponent implements OnInit { * @returns {boolean} true if a connection is selected */ public hasSelectedConnection( ): boolean { - return this.selectedConn !== null; + return this.selectedConn != null; } /** @@ -236,8 +232,7 @@ export class ConnectionTableSelectorComponent implements OnInit { return this.wizardService.getWizardSelectedTables(); } - // used by table - public get tableMessages(): { emptyMessage: string; totalMessage: string | string } { + public get connectionsTableMessages(): { emptyMessage: string; totalMessage: string | string } { const msg = this.allConnections.length === 1 ? "connection" : "connections"; return { @@ -259,7 +254,6 @@ export class ConnectionTableSelectorComponent implements OnInit { // Initialize the selected tables in the wizard service this.wizardService.clearWizardSelectedTables(); const srcTables: string[] = this.wizardService.getSelectedDataservice().getServiceViewTables(); - const selectedTables: Table[] = []; for ( const tableStr of srcTables ) { const subParts = tableStr.split("."); const connectionName = subParts[0].replace(VdbsConstants.SOURCE_VDB_SUFFIX, ""); 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 173f6d8a..ae676ca0 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 @@ -1,13 +1,4 @@ - - -
- Schemas -
-
- Tables -
-
@@ -26,22 +17,28 @@
-
-
-
-
-
-
- {{ schema.getDisplayName() }} -
-
-
-
-
-
+ + + + {{ row.getDisplayName() }} + + +
@@ -62,22 +59,28 @@
-
-
-
- -
-
-
-
-
- {{ table.getName() }} -
-
-
-
-
-
+ + + + Tables + + + {{ row.name }} + + +
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 81636530..9fa5f2c7 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 @@ -11,6 +11,7 @@ import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; import { NotifierService } from "@dataservices/shared/notifier.service"; import { VdbService } from "@dataservices/shared/vdb.service"; import { WizardService } from "@dataservices/shared/wizard.service"; +import { NgxDatatableModule } from "@swimlane/ngx-datatable"; import { JdbcTableSelectorComponent } from "./jdbc-table-selector.component"; describe("JdbcTableSelectorComponent", () => { @@ -19,7 +20,7 @@ describe("JdbcTableSelectorComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ FormsModule, HttpModule ], + imports: [ FormsModule, HttpModule, NgxDatatableModule ], declarations: [ JdbcTableSelectorComponent, SelectedTableComponent ], providers: [ AppSettingsService, LoggerService, NotifierService, WizardService, diff --git a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts b/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts index d11a0864..e2d0231e 100644 --- a/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts +++ b/ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts @@ -42,6 +42,17 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { @Output() public tableSelectionAdded: EventEmitter = new EventEmitter
(); @Output() public tableSelectionRemoved: EventEmitter
= new EventEmitter
(); + public selectedAllRows = false; + + 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 wizardService: WizardService; private logger: LoggerService; @@ -101,23 +112,18 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { this.tableLoadingState = LoadingState.LOADING; } - /* - * Toggle the schema selection - * @param {CatalogSchema} schema the schema that has been selected or deselected - */ - public toggleSchemaSelected(schema: CatalogSchema): void { - if (this.isSchemaSelected(schema)) { - this.currentSchema = null; - // Deselection of schema clears tables - this.tables = []; + // callback from schema selection in datatable + public onSchemaSelect( { selected }): void { + // schema table is single select so use first element + const schema: CatalogSchema = selected[ 0 ]; + + // only set if schema selection has changed (see setter) + if ( this.hasSelectedSchema ) { + if ( this.selectedSchema.getDisplayName() !== schema.getDisplayName() ) { + this.selectedSchema = schema; + } } else { - this.currentSchema = schema; - const filterInfo = new JdbcTableFilter(); - filterInfo.setConnectionName(this.connection.getId()); - filterInfo.setCatalogFilter(schema.getCatalogName()); - filterInfo.setSchemaFilter(schema.getName()); - filterInfo.setTableFilter("%"); - this.loadTablesForSchema(filterInfo); + this.selectedSchema = schema; } } @@ -137,6 +143,17 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { return this.currentSchema; } + public set selectedSchema( schema: CatalogSchema ) { + this.currentSchema = schema; + + const filterInfo = new JdbcTableFilter(); + filterInfo.setConnectionName(this.connection.getId()); + filterInfo.setCatalogFilter(schema.getCatalogName()); + filterInfo.setSchemaFilter(schema.getName()); + filterInfo.setTableFilter("%"); + this.loadTablesForSchema(filterInfo); + } + /* * Returns the currently selected schema. * @returns {CatalogSchema} the selected schema @@ -173,6 +190,18 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { return this.schemaLoadingState === LoadingState.LOADED_INVALID; } + public get schemaTableMessages(): { emptyMessage: string; totalMessage: string | string } { + const msg = this.schemas.length === 1 ? "schema" : "schemas"; + + return { + // no data message + emptyMessage: "No schemas found", + + // footer total message + totalMessage: msg + }; + } + /* * Get all schemas * @returns {CatalogSchema[]} the array of schema @@ -209,6 +238,18 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { return this.tableLoadingState === LoadingState.LOADED_INVALID; } + public get tableTableMessages(): { emptyMessage: string; totalMessage: string | string } { + const msg = this.tables.length === 1 ? "table" : "tables"; + + return { + // no data message + emptyMessage: "No tables found", + + // footer total message + totalMessage: msg + }; + } + /* * Get all tables * @returns {Table[]} the current tables for the selected schema @@ -222,7 +263,13 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { * @returns {boolean} true if one or more tables are selected */ public hasSelectedTables(): boolean { - return this.getSelectedTables().length > 0; + for ( const table of this.tables ) { + if ( table.selected ) { + return true; + } + } + + return false; } /* @@ -230,23 +277,50 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector { * @returns {Table[]} the array of selected Tables */ public getSelectedTables(): Table[] { - const selectedTables = []; - for ( const tbl of this.getTables() ) { - if (tbl.selected) { - selectedTables.push(tbl); + return this.tables.filter( ( table ) => table.selected ); + } + + public selectAllTables(): void { + this.selectedAllRows = !this.selectedAllRows; + const self = this; + + this.tables.forEach( ( table ) => { + if ( table.selected !== self.selectedAllRows ) { + self.selectedTableChanged( table ); } - } - return selectedTables; + } ); } /* * Handler for changes in table selection */ - public selectedTablesChanged(table: Table): void { + public selectedTableChanged(table: Table): void { + table.selected = !table.selected; + if (table.selected) { this.tableSelectionAdded.emit(table); + + // check column header checkbox if all are selected + if ( !this.selectedAllRows ) { + let selectAll = true; + + for ( const tbl of this.tables ) { + if ( !tbl.selected ) { + selectAll = false; + } + } + + if ( selectAll ) { + this.selectedAllRows = true; + } + } } else { this.tableSelectionRemoved.emit(table); + + // uncheck column header checkbox if needed + if ( this.selectedAllRows ) { + this.selectedAllRows = false; + } } }