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

Commit

Permalink
Added table column filtering in the data service wizard
Browse files Browse the repository at this point in the history 
- connection table can be filtered
- schema table can be filtered
- table table can be filtered
- change table headers to be left aligned
  • Loading branch information
@elvisisking
elvisisking committed Jan 4, 2018
1 parent 1ec832b commit 4d729f1
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 26 deletions.
18 changes: 16 additions & 2 deletions ...p/src/app/dataservices/connection-table-selector/connection-table-selector.component.html
View file
Expand Up @@ -9,17 +9,31 @@
</div>
</div>
<div class="col-sm-3 connection-selector-container" *ngIf="connectionsLoadedValid">
<ngx-datatable [rows]="allConnections"
<ngx-datatable [rows]="filteredConnections"
[messages]="connectionsTableMessages"
[footerHeight]="24"
[headerHeight]="60"
[scrollbarV]="false"
[scrollbarH]="true"
[columnMode]="'force'"
[reorderable]="false"
[selectionType]="'single'"
(select)="onSelect($event)"
[sorts]="[{prop: 'keng__id', dir: 'asc'}]"
[cssClasses]="customClasses">
<ngx-datatable-column name="Connections" [prop]="'keng__id'" [sortable]="true" [width]="300" [resizeable]="false">
<ngx-datatable-column name="Connections"
[prop]="'keng__id'"
[sortable]="true"
[comparator]="connectionComparator"
[width]="300"
[resizeable]="false">
<ng-template ngx-datatable-header-template title="Connections" let-value="value">Connections
<input type="text"
class="col-sm-12"
style='border:solid 1px #dddddd;padding:8px;margin:0 auto;width:100%;height:24px'
placeholder='Filter connections'
(keyup)='connectionFilterChanged($event)'/>
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<i class="fa fa-plug list-view-pf-icon-sm"></i>
{{ row.keng__id }}
Expand Down
51 changes: 43 additions & 8 deletions ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.ts
View file
Expand Up @@ -38,16 +38,14 @@ export class ConnectionTableSelectorComponent implements OnInit {

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"
sortDescending: "fa fa-sort-desc"
};

private connectionService: ConnectionService;
private wizardService: WizardService;
private allConnections: Connection[] = [];
private filteredConnections: Connection[] = [];
private connectionFilter = "";
private selectedConn: Connection;
private connectionLoadingState: LoadingState = LoadingState.LOADING;
private logger: LoggerService;
Expand All @@ -71,6 +69,7 @@ export class ConnectionTableSelectorComponent implements OnInit {
.subscribe(
(conns) => {
self.allConnections = conns;
self.filteredConnections = conns;
self.connectionLoadingState = LoadingState.LOADED_VALID;
if (self.wizardService.isEdit()) {
self.initEdit();
Expand Down Expand Up @@ -233,17 +232,53 @@ export class ConnectionTableSelectorComponent implements OnInit {
}

public get connectionsTableMessages(): { emptyMessage: string; totalMessage: string | string } {
const msg = this.allConnections.length === 1 ? "connection" : "connections";
const numAll = this.allConnections.length;
const numFiltered = this.filteredConnections.length;
let msg: string;

if ( numAll === numFiltered ) {
if ( this.connectionFilter.length === 0 ) {
msg = numAll === 1 ? "connection" : "connections";
} else {
msg = numAll === 1 ? "matched connection" : "matched connections";
}
} else {
msg = numFiltered === 1 ? "matched connection" : "matched connections";
}

return {
// no data message
emptyMessage: "No connections found",
// message shows in an empty row in table
emptyMessage: "",

// footer total message
totalMessage: msg
};
}

/**
* Callback when key is pressed in column filter.
*/
public connectionFilterChanged( event: any ): void {
this.connectionFilter = event.target.value;

if ( this.connectionFilter.length !== 0 ) {
this.connectionFilter = "^" + this.connectionFilter.replace( "*", ".*" );
}

this.filteredConnections = this.allConnections.filter( ( connection ) => connection.getId().match( this.connectionFilter ) != null );
}

/**
* Called when the table is sorted.
* @param {string} thisName the connection name being sorted
* @param {string} thatName the connection name being compared to
* @returns {number} -1 if less than, 0 if equal, or 1 if greater than
*/
public connectionComparator( thisName: string,
thatName: string ): number {
return thisName.localeCompare( thatName );
}

/**
* Initialization for edit mode
*/
Expand Down
22 changes: 20 additions & 2 deletions ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html
View file
Expand Up @@ -17,23 +17,33 @@
</div>
</div>
<div class="list-div col-sm-6 jdbc-column-results" *ngIf="schemasLoadedValidNotEmpty">
<ngx-datatable [rows]="schemas"
<ngx-datatable [rows]="filteredSchemas"
[messages]="schemaTableMessages"
[footerHeight]="24"
[headerHeight]="60"
[scrollbarV]="false"
[scrollbarH]="true"
[columnMode]="'force'"
[reorderable]="false"
[selectionType]="'single'"
[sorts]="[{prop: 'name', dir: 'asc'}]"
(select)="onSchemaSelect($event)"
[cssClasses]="customClasses">
<ngx-datatable-column name="Schemas"
[prop]="'name'"
[sortable]="true"
[comparator]="nameComparator"
[canAutoResize]="true"
[width]="300"
[draggable]="false"
[resizeable]="false">
<ng-template ngx-datatable-header-template title="Schemas" let-value="value">Schemas
<input type="text"
class="col-sm-12"
style='border:solid 1px #dddddd;padding:8px;margin:0 auto;width:100%;height:24px'
placeholder='Filter schemas'
(keyup)='schemaFilterChanged($event)'/>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.getDisplayName() }}
</ng-template>
Expand All @@ -59,24 +69,32 @@
</div>
</div>
<div class = "list-div col-sm-6 jdbc-column-results" *ngIf="hasSelectedSchema && tablesLoadedValidNotEmpty">
<ngx-datatable [rows]="tables"
<ngx-datatable [rows]="filteredTables"
[messages]="tableTableMessages"
[footerHeight]="24"
[headerHeight]="60"
[scrollbarV]="false"
[scrollbarH]="true"
[columnMode]="'force'"
[reorderable]="false"
[selectionType]="'checkbox'"
[sorts]="[{prop: 'name', dir: 'asc'}]"
[cssClasses]="customClasses">
<ngx-datatable-column name="Tables"
[prop]="'name'"
[sortable]="true"
[comparator]="nameComparator"
[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
<input type="text"
class="col-sm-12"
style='border:solid 1px #dddddd;padding:8px;margin:0 auto;width:100%;height:24px'
placeholder='Filter tables'
(keyup)='tableFilterChanged($event)'/>
</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 }}
Expand Down
94 changes: 81 additions & 13 deletions ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.ts
View file
Expand Up @@ -46,18 +46,18 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {

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"
sortDescending: "fa fa-sort-desc"
};

private connectionService: ConnectionService;
private wizardService: WizardService;
private logger: LoggerService;
private schemas: CatalogSchema[] = [];
private filteredSchemas: CatalogSchema[] = [];
private schemaFilter = "";
private tables: Table[] = [];
private filteredTables: Table[] = [];
private tableFilter = "";
private currentSchema: CatalogSchema = null;
private schemaLoadingState: LoadingState = LoadingState.LOADING;
private tableLoadingState: LoadingState = LoadingState.LOADING;
Expand Down Expand Up @@ -104,11 +104,13 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {

public clearSchemas(): void {
this.schemas = [];
this.filteredSchemas = [];
this.currentSchema = null;
}

public clearTables(): void {
this.tables = [];
this.filteredTables = [];
this.tableLoadingState = LoadingState.LOADING;
}

Expand Down Expand Up @@ -190,18 +192,54 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
return this.schemaLoadingState === LoadingState.LOADED_INVALID;
}

/**
* Callback when key is pressed in schema column filter.
*/
public schemaFilterChanged( event: any ): void {
this.schemaFilter = event.target.value;

if ( this.schemaFilter.length !== 0 ) {
this.schemaFilter = "^" + this.schemaFilter.replace( "*", ".*" );
}

this.filteredSchemas = this.schemas.filter( ( schema ) => schema.getDisplayName().match( this.schemaFilter ) != null );
}

public get schemaTableMessages(): { emptyMessage: string; totalMessage: string | string } {
const msg = this.schemas.length === 1 ? "schema" : "schemas";
const numAll = this.schemas.length;
const numFiltered = this.filteredSchemas.length;
let msg: string;

if ( numAll === numFiltered ) {
if ( this.schemaFilter.length === 0 ) {
msg = numAll === 1 ? "schema" : "schemas";
} else {
msg = numAll === 1 ? "matched schema" : "matched schemas";
}
} else {
msg = numFiltered === 1 ? "matched schema" : "matched schemas";
}

return {
// no data message
emptyMessage: "No schemas found",
// message shows in an empty row in table
emptyMessage: "",

// footer total message
totalMessage: msg
};
}

/**
* Called when the table is sorted.
* @param {string} thisName the name being sorted
* @param {string} thatName the name being compared to
* @returns {number} -1 if less than, 0 if equal, or 1 if greater than
*/
public nameComparator( thisName: string,
thatName: string ): number {
return thisName.localeCompare( thatName );
}

/*
* Get all schemas
* @returns {CatalogSchema[]} the array of schema
Expand Down Expand Up @@ -239,17 +277,42 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
}

public get tableTableMessages(): { emptyMessage: string; totalMessage: string | string } {
const msg = this.tables.length === 1 ? "table" : "tables";
const numAll = this.tables.length;
const numFiltered = this.filteredTables.length;
let msg: string;

if ( numAll === numFiltered ) {
if ( this.tableFilter.length === 0 ) {
msg = numAll === 1 ? "table" : "tables";
} else {
msg = numAll === 1 ? "matched table" : "matched tables";
}
} else {
msg = numFiltered === 1 ? "matched table" : "matched tables";
}

return {
// no data message
emptyMessage: "No tables found",
// message shows in an empty row in table
emptyMessage: "",

// footer total message
totalMessage: msg
};
}

/**
* Callback when key is pressed in table column filter.
*/
public tableFilterChanged( event: any ): void {
this.tableFilter = event.target.value;

if ( this.tableFilter.length !== 0 ) {
this.tableFilter = "^" + this.tableFilter.replace( "*", ".*" );
}

this.filteredTables = this.tables.filter( ( table ) => table.getName().match( this.tableFilter ) != null );
}

/*
* Get all tables
* @returns {Table[]} the current tables for the selected schema
Expand Down Expand Up @@ -284,7 +347,7 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
this.selectedAllRows = !this.selectedAllRows;
const self = this;

this.tables.forEach( ( table ) => {
this.filteredTables.forEach( ( table ) => {
if ( table.selected !== self.selectedAllRows ) {
self.selectedTableChanged( table );
}
Expand All @@ -304,7 +367,7 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
if ( !this.selectedAllRows ) {
let selectAll = true;

for ( const tbl of this.tables ) {
for ( const tbl of this.filteredTables ) {
if ( !tbl.selected ) {
selectAll = false;
}
Expand Down Expand Up @@ -359,18 +422,21 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
item.setType("Schema");
item.setCatalogName(infoName);
this.schemas.push(item);
this.filteredSchemas.push(item);
}
} else {
const item: CatalogSchema = new CatalogSchema();
item.setName(infoName);
item.setType("Catalog");
this.schemas.push(item);
this.filteredSchemas.push(item);
}
} else if (infoType === "Schema") {
const item: CatalogSchema = new CatalogSchema();
item.setName(infoName);
item.setType("Schema");
this.schemas.push(item);
this.filteredSchemas.push(item);
}
}
}
Expand All @@ -382,6 +448,7 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
private loadTablesForSchema(tableFilter: JdbcTableFilter): void {
// Load the table names for the selected Connection and Schema
this.tables = [];
this.filteredTables = [];
this.tableLoadingState = LoadingState.LOADING;
const self = this;
this.connectionService
Expand All @@ -395,6 +462,7 @@ export class JdbcTableSelectorComponent implements OnInit, TableSelector {
table.setCatalogName(self.selectedSchema.getCatalogName());
table.setSchemaName(self.selectedSchema.getName());
self.tables.push(table);
self.filteredTables.push(table);
}
// select any of the tables that are already selected
self.setInitialTableSelections();
Expand Down
2 changes: 1 addition & 1 deletion ngapp/src/styles.css
View file
Expand Up @@ -16,7 +16,7 @@
.datatable-header {
color: white;
background-color: #bbbbbb;
text-align: center;
text-align: left;
}

.datatable-header-cell {
Expand Down

0 comments on commit 4d729f1

Please sign in to comment.