Skip to content
This repository has been archived by the owner on Nov 22, 2019. It is now read-only.

Commit

Permalink
Convert schemas list and tables list in data service wizard to be dat…
Browse files Browse the repository at this point in the history 
…a 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
  • Loading branch information
@elvisisking
elvisisking committed Jan 4, 2018
1 parent b543c17 commit 1ec832b
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 93 deletions.
9 changes: 4 additions & 5 deletions ...p/src/app/dataservices/connection-table-selector/connection-table-selector.component.html
View file
Expand Up @@ -9,9 +9,8 @@
</div>
</div>
<div class="col-sm-3 connection-selector-container" *ngIf="connectionsLoadedValid">
<ngx-datatable [rows]="rows"
[columns]="columns"
[messages]="tableMessages"
<ngx-datatable [rows]="allConnections"
[messages]="connectionsTableMessages"
[footerHeight]="24"
[scrollbarV]="false"
[scrollbarH]="true"
Expand All @@ -20,10 +19,10 @@
[selectionType]="'single'"
(select)="onSelect($event)"
[cssClasses]="customClasses">
<ngx-datatable-column name="Connections" [prop]="'name'" [sortable]="true" [resizeable]="false">
<ngx-datatable-column name="Connections" [prop]="'keng__id'" [sortable]="true" [width]="300" [resizeable]="false">
<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.keng__id }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
Expand Down
34 changes: 14 additions & 20 deletions ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts
View file
Expand Up @@ -36,9 +36,6 @@ export class ConnectionTableSelectorComponent implements OnInit {
@ViewChild(JdbcTableSelectorComponent) public jdbcTableSelector: JdbcTableSelectorComponent;
@Output() public selectedTableListUpdated: EventEmitter<void> = new EventEmitter<void>();

public readonly nameProp = "name"; // must match html template
public rows: any[] = [];

public readonly customClasses = {
sortAscending: "fa fa-sort-asc",
sortDescending: "fa fa-sort-desc",
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
}

/**
Expand Down Expand Up @@ -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;
}

/**
Expand Down Expand Up @@ -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 {
Expand All @@ -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, "");
Expand Down
89 changes: 46 additions & 43 deletions ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html
View file
@@ -1,13 +1,4 @@
<!-- ------------- -->
<!-- Column Titles -->
<!-- ------------- -->
<div class="col-sm-6 jdbc-column-title">
<strong>Schemas</strong>
</div>
<div class="col-sm-6 jdbc-column-title">
<strong>Tables</strong>
</div>
<!-- ------------- -->
<!-- Schemas List -->
<!-- ------------- -->
<div class="col-sm-6" *ngIf="schemasLoading">
Expand All @@ -26,22 +17,28 @@
</div>
</div>
<div class="list-div col-sm-6 jdbc-column-results" *ngIf="schemasLoadedValidNotEmpty">
<div class="jdbc-list list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked"
*ngFor="let schema of getSchemas(); index as i; odd as isEvenRow; even as isOddRow"
[class.oddRow]="isOddRow" [class.evenRow]="isEvenRow" [class.active]="isSchemaSelected(schema)"
(click)="toggleSchemaSelected(schema)">
<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">
{{ schema.getDisplayName() }}
</div>
</div>
</div>
</div>
</div>
</div>
<ngx-datatable [rows]="schemas"
[messages]="schemaTableMessages"
[footerHeight]="24"
[scrollbarV]="false"
[scrollbarH]="true"
[columnMode]="'force'"
[reorderable]="false"
[selectionType]="'single'"
(select)="onSchemaSelect($event)"
[cssClasses]="customClasses">
<ngx-datatable-column name="Schemas"
[prop]="'name'"
[sortable]="true"
[canAutoResize]="true"
[width]="300"
[draggable]="false"
[resizeable]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.getDisplayName() }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
<!-- ------------- -->
<!-- Tables List -->
Expand All @@ -62,22 +59,28 @@
</div>
</div>
<div class = "list-div col-sm-6 jdbc-column-results" *ngIf="hasSelectedSchema && tablesLoadedValidNotEmpty">
<div class="jdbc-list list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked"
*ngFor="let table of getTables(); index as i; odd as isEvenRow; even as isOddRow"
[class.oddRow]="isOddRow" [class.evenRow]="isEvenRow">
<div class="list-view-pf-checkbox">
<input type="checkbox" title="" [(ngModel)]="table.selected" (change)="selectedTablesChanged(table)">
</div>
<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>
<ngx-datatable [rows]="tables"
[messages]="tableTableMessages"
[footerHeight]="24"
[scrollbarV]="false"
[scrollbarH]="true"
[columnMode]="'force'"
[reorderable]="false"
[selectionType]="'checkbox'"
[cssClasses]="customClasses">
<ngx-datatable-column name="Tables"
[prop]="'name'"
[sortable]="true"
[canAutoResize]="true"
[width]="300"
[draggable]="false"
[resizeable]="false">
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="selectedAllRows" let-selectFn="selectAllTables">
<input type="checkbox" [checked]="selectedAllRows" (change)="selectAllTables()"/>Tables
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row" let-isSelected="row.selected" let-onCheckboxChangeFn="selectedTableChanged">
<input type="checkbox" [checked]="row.selected" (change)="selectedTableChanged( row )"/>{{ row.name }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
3 changes: 2 additions & 1 deletion ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.spec.ts
View file
Expand Up @@ -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", () => {
Expand All @@ -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,
Expand Down

0 comments on commit 1ec832b

Please sign in to comment.