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

Commit

Permalink
teiidtools-340: Updated filter and search for connections and dataser…
Browse files Browse the repository at this point in the history 
…vices to PFNG. Also corrected getDescription() method of the connection model.
  • Loading branch information
@tejones
tejones committed Feb 21, 2018
1 parent 77aa75c commit 4ff1528
Show file tree
Hide file tree
Showing 6 changed files with 253 additions and 175 deletions.
2 changes: 1 addition & 1 deletion ngapp/src/app/connections/connections-cards/connection-card/connection-card.component.html
View file
Expand Up @@ -29,7 +29,7 @@
<a [routerLink]="[connection.getId()]" (click)="onClick(editEvent)">{{ connection.name }}</a>
</div>
<div class="row">
<div class="object-card-description">{{ connection.description }}</div>
<div class="object-card-description">{{ connection.getDescription() }}</div>
</div>
</ng-template>
<div class="object-card-body">
Expand Down
27 changes: 4 additions & 23 deletions ngapp/src/app/connections/connections.component.html
View file
Expand Up @@ -14,18 +14,13 @@ <h2 i18n="@@connections.connections">Connections</h2>
</div>
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions" #filterForm="ngForm">
<div class="toolbar-pf-actions" >
<div class="form-group toolbar-pf-filter">
<label i18n="@@connections.name" class="sr-only" for="filter">Name</label>
<div class="input-group" style="width: 100%">
<input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
</div>
<pfng-filter [config]="filterConfig"
(onChange)="filterChanged($event)"></pfng-filter>
</div>
<div class="form-group">
<button class="btn btn-link" type="button" (click)="toggleSortDirection()">
<span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
<span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
</button>
<pfng-sort [config]="sortConfig" (onChange)="sortChange($event)"></pfng-sort>
</div>
<div class="form-group">
<a i18n="@@connections.addConnection" class="btn btn-primary" [routerLink]="[addConnectionLink]">Add Connection</a>
Expand All @@ -36,14 +31,6 @@ <h2 i18n="@@connections.connections">Connections</h2>
<li *ngIf="isCardLayout"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
</ul>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5 i18n="@@connections.connectionsFound" >{{ filteredConnections.length }} Connections found
<a *ngIf="allConnections.length != filteredConnections.length"
class="clear-filters" (click)="clearFilters()">(out of {{
allConnections.length }} total)</a></h5>
</div>
</div>
</div>
</div>
Expand All @@ -65,12 +52,6 @@ <h1 i18n="@@connections.noConnectionsFound">No Connections Found</h1>
</div>
</div>
</div>
<div class="col-md-8 none-matched-state" *ngIf="filteredConnections.length === 0 && isFiltered()">
<div class="alert alert-info">
<span class="pficon pficon-info"></span>
<strong i18n="@@connections.noConnectionsMatchedFilter">No Connections matched the filter!&nbsp;&nbsp;Please try changing your filter criteria... </strong>
</div>
</div>

<!-- The 'loading Connections' card -->
<div class="col-md-12" *ngIf="!isLoaded('connections')">
Expand Down
188 changes: 120 additions & 68 deletions ngapp/src/app/connections/connections.component.ts
View file
Expand Up @@ -15,40 +15,54 @@
* limitations under the License.
*/

import { Component, ViewChild } from "@angular/core";
import { Component, OnInit, ViewChild} from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Connection } from "@connections/shared/connection.model";
import { ConnectionService } from "@connections/shared/connection.service";
import { ConnectionsConstants } from "@connections/shared/connections-constants";
import { AppSettingsService } from "@core/app-settings.service";
import { LoggerService } from "@core/logger.service";
import { ArrayUtils } from "@core/utils/array-utils";
import { AbstractPageComponent } from "@shared/abstract-page.component";
import { ConfirmDeleteComponent } from "@shared/confirm-delete/confirm-delete.component";
import { IdFilter } from "@shared/id-filter";
import { LayoutType } from "@shared/layout-type.enum";
import { SortDirection } from "@shared/sort-direction.enum";
import { Filter } from "patternfly-ng";
import { FilterConfig } from "patternfly-ng";
import { FilterField } from "patternfly-ng";
import { FilterEvent } from "patternfly-ng";
import { FilterType } from "patternfly-ng";
import { SortConfig } from "patternfly-ng";
import { SortField } from "patternfly-ng";
import { SortEvent } from "patternfly-ng";


@Component({
moduleId: module.id,
selector: "app-connections",
templateUrl: "./connections.component.html",
styleUrls: ["./connections.component.css"]
})
export class ConnectionsComponent extends AbstractPageComponent {
export class ConnectionsComponent extends AbstractPageComponent implements OnInit{

public readonly addConnectionLink: string = ConnectionsConstants.addConnectionPath;

public connectionNameForDelete: string;

public filterConfig: FilterConfig;
public filtersText = "";
public separator: object;
public allItems: Connection[];
public items: Connection[];
public sortConfig: SortConfig;
public currentSortField: SortField;
public isAscendingSort: boolean = true;

private allConns: Connection[] = [];
private filteredConns: Connection[] = [];
private selectedConns: Connection[] = [];
private router: Router;
private appSettingsService: AppSettingsService;
private connectionService: ConnectionService;
private filter: IdFilter = new IdFilter();
private layout: LayoutType = LayoutType.CARD;
private sortDirection: SortDirection = SortDirection.ASC;

@ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent;

Expand All @@ -60,6 +74,40 @@ export class ConnectionsComponent extends AbstractPageComponent {
this.connectionService = connectionService;
}

public ngOnInit(): void {

super.ngOnInit();

this.filterConfig = {
fields: [{
id: "name",
title: "Name",
placeholder: "Filter by Name...",
type: FilterType.TEXT
}, {
id: "description",
title: "Description",
placeholder: "Filter by Description...",
type: FilterType.TEXT
}] as FilterField[],
resultsCount: this.filteredConns.length,
appliedFilters: []
} as FilterConfig;

this.sortConfig = {
fields: [{
id: "name",
title: "Name",
sortType: "alpha"
}, {
id: "description",
title: "Description",
sortType: "alpha"
}],
isAscending: this.isAscendingSort
} as SortConfig;
}

public loadAsyncPageData(): void {
const self = this;

Expand All @@ -68,7 +116,7 @@ export class ConnectionsComponent extends AbstractPageComponent {
.subscribe(
(connections) => {
self.allConns = connections;
self.filteredConns = this.filterConnections();
self.filteredConns = connections;
self.loaded("connections");
},
(error) => {
Expand All @@ -91,20 +139,6 @@ export class ConnectionsComponent extends AbstractPageComponent {
return this.appSettingsService.connectionsPageLayout === LayoutType.LIST;
}

/**
* @returns {boolean} true if sorting connection names in ascending order
*/
public get isSortAscending(): boolean {
return this.sortDirection === SortDirection.ASC;
}

/**
* @returns {boolean} true if sorting connection names in descending order
*/
public get isSortDescending(): boolean {
return this.sortDirection === SortDirection.DESC;
}

/**
* @returns {Connection[]} the array of all connections
*/
Expand All @@ -127,7 +161,7 @@ export class ConnectionsComponent extends AbstractPageComponent {
}

public onEdit( connectionName: string ): void {
const connection = this.filterConnections().find( ( conn ) => conn.getId() === connectionName );
const connection = this.filteredConns.find( ( conn ) => conn.getId() === connectionName );
// TODO: implement onEdit
alert( "Edit '" + connectionName + "' connection (not yet implemented)" );
}
Expand All @@ -154,36 +188,6 @@ export class ConnectionsComponent extends AbstractPageComponent {
this.confirmDeleteDialog.open();
}

public isFiltered(): boolean {
return this.allConns.length !== this.filteredConns.length;
}

public get nameFilter(): string {
return this.filter.getPattern();
}

/**
* @param {string} pattern the new pattern for the connection name filter (can be null or empty)
*/
public set nameFilter( pattern: string ) {
this.filter.setFilter( pattern );
this.filterConnections();
}

public toggleSortDirection(): void {
if (this.sortDirection === SortDirection.ASC) {
this.sortDirection = SortDirection.DESC;
} else {
this.sortDirection = SortDirection.ASC;
}
this.filterConnections();
}

public clearFilters(): void {
this.filter.reset();
this.filterConnections();
}

public setListLayout(): void {
this.appSettingsService.connectionsPageLayout = LayoutType.LIST;
}
Expand All @@ -196,7 +200,7 @@ export class ConnectionsComponent extends AbstractPageComponent {
* Called to doDelete all selected APIs.
*/
public onDeleteConnection(): void {
const selectedConn = this.filterConnections().find((x) => x.getId() === this.connectionNameForDelete);
const selectedConn = this.filteredConnections.find((x) => x.getId() === this.connectionNameForDelete);

// const itemsToDelete: Connection[] = ArrayUtils.intersect(this.selectedConns, this.filteredConns);
// const selectedConn = itemsToDelete[0];
Expand All @@ -222,28 +226,76 @@ export class ConnectionsComponent extends AbstractPageComponent {
}

/**
* Filters and sorts the list of connections based on the user input
* Filter functions
*/
public filterConnections(): Connection[] {
// Clear the array first.
this.filteredConns.splice(0, this.filteredConns.length);

// filter
for (const connection of this.allConns) {
if (this.filter.accepts(connection)) {
this.filteredConns.push(connection);
public applyFilters(filters: Filter[]): void {
this.items = [];
if (filters && filters.length > 0) {
this.allConnections.forEach((item) => {
if (this.matchesFilters(item, filters)) {
this.items.push(item);
}
});
} else {
this.items = this.allConnections;
}
this.filteredConns = this.items;
this.filterConfig.resultsCount = this.items.length;
}

public filterChanged($event: FilterEvent): void {
this.filtersText = "";
$event.appliedFilters.forEach((filter) => {
this.filtersText += filter.field.title + " : " + filter.value + "\n";
});
this.applyFilters($event.appliedFilters);
}

public matchesFilter(item: Connection, filter: Filter): boolean {
let match = true;
if (filter.field.id === "name") {
match = item.getId().match(filter.value) !== null;
} else if (filter.field.id === "description") {
match = item.getDescription().match(filter.value) !== null;
}
return match;
}

public matchesFilters(item: any, filters: Filter[]): boolean {
let matches = true;
filters.forEach((filter) => {
if (!this.matchesFilter(item, filter)) {
matches = false;
return matches;
}
});
return matches;
}

/**
* Sort functions
*/
public compare(item1: Connection, item2: Connection): number {
let compValue = 0;
if (this.currentSortField.id === "name") {
compValue = item1.getId().localeCompare(item2.getId());
} else if (this.currentSortField.id === "description") {
compValue = item1.getDescription().localeCompare(item2.getDescription());
}

// sort
Connection.sort( this.filteredConns, this.sortDirection );
this.selectedConns = ArrayUtils.intersect(this.selectedConns, this.filteredConns);
if (!this.isAscendingSort) {
compValue = compValue * -1;
}
return compValue;
}

return this.filteredConns;
public sortChange($event: SortEvent): void {
this.currentSortField = $event.field;
this.isAscendingSort = $event.isAscending;
this.filteredConnections.sort((item1: Connection, item2: Connection) => this.compare(item1, item2));
}

private removeConnectionFromList(connection: Connection): void {
this.allConns.splice(this.allConns.indexOf(connection), 1);
this.filterConnections();
}
}
2 changes: 1 addition & 1 deletion ngapp/src/app/connections/shared/connection.model.ts
View file
Expand Up @@ -82,7 +82,7 @@ export class Connection implements Identifiable< string > {
/**
* @returns {string} the connection description
*/
public get description(): string {
public getDescription(): string {
// TODO do connections have a description
return "This is a connection description. So if you're looking for the description you found it.";
}
Expand Down
27 changes: 4 additions & 23 deletions ngapp/src/app/dataservices/dataservices.component.html
View file
Expand Up @@ -14,18 +14,13 @@ <h2 i18n="@@dataservices.dataservices">Dataservices</h2>
</div>
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions" #filterForm="ngForm">
<div class="toolbar-pf-actions" >
<div class="form-group toolbar-pf-filter">
<label i18n="@@dataservices.name" class="sr-only" for="filter">Name</label>
<div class="input-group" style="width: 100%">
<input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
</div>
<pfng-filter [config]="filterConfig"
(onChange)="filterChanged($event)"></pfng-filter>
</div>
<div class="form-group">
<button class="btn btn-link" type="button" (click)="toggleSortDirection()">
<span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
<span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
</button>
<pfng-sort [config]="sortConfig" (onChange)="sortChange($event)"></pfng-sort>
</div>
<div class="form-group">
<a i18n="@@dataservices.addDataservice" class="btn btn-primary" (click)="onNew()">Add Dataservice</a>
Expand All @@ -36,14 +31,6 @@ <h2 i18n="@@dataservices.dataservices">Dataservices</h2>
<li *ngIf="isCardLayout"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
</ul>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5 i18n="@@dataservices.dataservicesFound" >{{ filteredDataservices.length }} Dataservices found
<a *ngIf="allDataservices.length != filteredDataservices.length"
class="clear-filters" (click)="clearFilters()">(out of {{
allDataservices.length }} total)</a></h5>
</div>
</div>
</div>
</div>
Expand All @@ -65,12 +52,6 @@ <h1 i18n="@@dataservices.noDataservicesFound">No Dataservices Found</h1>
</div>
</div>
</div>
<div class="col-md-8 none-matched-state" *ngIf="filteredDataservices.length === 0 && isFiltered()">
<div class="alert alert-info">
<span class="pficon pficon-info"></span>
<strong i18n="@@dataservices.noDataservicesMatchedFilter">No Dataservices matched the filter!&nbsp;&nbsp;Please try changing your filter criteria... </strong>
</div>
</div>

<!-- The 'loading Dataservices' card -->
<div class="col-md-12" *ngIf="!isLoaded('dataservices')">
Expand Down

0 comments on commit 4ff1528

Please sign in to comment.