Changes to the summary pages name filter behavior

- filtering of items now occurs as the user is typing in the filter (no longer need to hit enter)
- added a compareTo funtion to the Identifiable interface so Connection and Activity now implement
- added sort functions to Connection and Activity
- summary page name filter now accepts the '*' wildcard

ngapp/src/app/activities/activities.component.html

@@ -14,7 +14,7 @@ <h2 i18n="@@activities.Activities" >Activities</h2>
     </div>
     <div class="row toolbar-pf">
       <div class="col-sm-12">
-        <form class="toolbar-pf-actions" (submit)="filterActivities()" #filterForm="ngForm">
+        <form class="toolbar-pf-actions" #filterForm="ngForm">
           <div class="form-group toolbar-pf-filter">
             <label i18n="@@activity.Name" class="sr-only" for="filter">Name</label>
             <div class="input-group" style="width: 100%">

ngapp/src/app/activities/activities.component.ts

@@ -119,6 +119,7 @@ export class ActivitiesComponent extends AbstractPageComponent {
    */
   public set nameFilter( pattern: string ) {
     this.filter.setFilter( pattern );
+    this.filterActivities();
   }
 
   public toggleSortDirection(): void {
@@ -233,19 +234,16 @@ export class ActivitiesComponent extends AbstractPageComponent {
   public filterActivities(): Activity[] {
     // Clear the array first.
     this.filteredActs.splice(0, this.filteredActs.length);
+
+    // filter
     for (const activity of this.allActs) {
       if (this.filter.accepts(activity)) {
         this.filteredActs.push(activity);
       }
     }
-    this.filteredActs.sort( (a1: Activity, a2: Activity) => {
-      let rval: number = a1.getId().localeCompare(a2.getId());
-      if (this.sortDirection === SortDirection.DESC) {
-        rval *= -1;
-      }
-      return rval;
-    });
 
+    // sort
+    Activity.sort( this.filteredActs, this.sortDirection );
     this.selectedActs = ArrayUtils.intersect(this.selectedActs, this.filteredActs);
 
     return this.filteredActs;

ngapp/src/app/activities/shared/activity.model.ts

@@ -15,7 +15,10 @@
  * limitations under the License.
  */
 
-export class Activity {
+import { Identifiable } from "@shared/identifiable";
+import { SortDirection } from "@shared/sort-direction.enum";
+
+export class Activity implements Identifiable< string > {
 
   private keng__id: string;
   private dv__sourceConnection: string;
@@ -31,10 +34,49 @@ export class Activity {
     return activity;
   }
 
+  /**
+   * @param {Activity[]} activities the activities being sorted
+   * @param {SortDirection} sortDirection the sort direction
+   */
+  public static sort( activities: Activity[],
+                      sortDirection: SortDirection ): void {
+    activities.sort( ( thisActivity: Activity, thatActivity: Activity ) => {
+      const result = thisActivity.compareTo( thatActivity );
+
+      if ( sortDirection === SortDirection.DESC ) {
+        return result * -1;
+      }
+
+      return result;
+    } );
+  }
+
   constructor() {
     // nothing to do
   }
 
+  /**
+   * See {Identifiable}.
+   */
+  public compareTo( that: Activity ): number {
+    let result = 0;
+
+    if ( this.getId() ) {
+      if ( that.getId() ) {
+        // both have an ID
+        result = this.getId().localeCompare( that.getId() );
+      } else {
+        // thatItem does not have an ID
+        result = 1;
+      }
+    } else if ( that.getId() ) {
+      // thisItem does not have an ID and thatItem does
+      result = -1;
+    }
+
+    return result;
+  }
+
   /**
    * @returns {string} the activity identifier (can be null)
    */

ngapp/src/app/connections/connections.component.html

@@ -14,7 +14,7 @@ <h2 i18n="@@connections.connections">Connections</h2>
     </div>
     <div class="row toolbar-pf">
       <div class="col-sm-12">
-        <form class="toolbar-pf-actions" (submit)="filterConnections()" #filterForm="ngForm">
+        <form class="toolbar-pf-actions" #filterForm="ngForm">
           <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%">

ngapp/src/app/connections/connections.component.ts

@@ -158,6 +158,7 @@ export class ConnectionsComponent extends AbstractPageComponent {
    */
   public set nameFilter( pattern: string ) {
     this.filter.setFilter( pattern );
+    this.filterConnections();
   }
 
   public toggleSortDirection(): void {
@@ -217,34 +218,16 @@ export class ConnectionsComponent extends AbstractPageComponent {
   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);
       }
     }
-    this.filteredConns.sort( (c1: Connection, c2: Connection) => {
-      let rval = 0;
-
-      if ( c1.getId() ) {
-        if ( c2.getId() ) {
-          // both connections have an ID
-          rval = c1.getId().localeCompare( c2.getId() );
-        } else {
-          // c2 does not have an ID
-          rval = 1;
-        }
-      } else if ( c2.getId() ) {
-        // c1 does not have an ID and c2 does
-        rval = -1;
-      }
-
-      if ( this.sortDirection === SortDirection.DESC ) {
-        rval *= -1;
-      }
-
-      return rval;
-    });
 
+    // sort
+    Connection.sort( this.filteredConns, this.sortDirection );
     this.selectedConns = ArrayUtils.intersect(this.selectedConns, this.filteredConns);
 
     return this.filteredConns;

ngapp/src/app/connections/shared/connection.model.ts

@@ -16,6 +16,7 @@
  */
 
 import { Identifiable } from "@shared/identifiable";
+import { SortDirection } from "@shared/sort-direction.enum";
 
 export class Connection implements Identifiable< string > {
 
@@ -34,10 +35,49 @@ export class Connection implements Identifiable< string > {
     return conn;
   }
 
+  /**
+   * @param {Connection[]} connections the connections being sorted
+   * @param {SortDirection} sortDirection the sort direction
+   */
+  public static sort( connections: Connection[],
+                      sortDirection: SortDirection ): void {
+    connections.sort( ( thisConnection: Connection, thatConnection: Connection ) => {
+      const result = thisConnection.compareTo( thatConnection );
+
+      if ( sortDirection === SortDirection.DESC ) {
+        return result * -1;
+      }
+
+      return result;
+    } );
+  }
+
   constructor() {
     // nothing to do
   }
 
+  /**
+   * See {Identifiable}.
+   */
+  public compareTo( that: Connection ): number {
+    let result = 0;
+
+    if ( this.getId() ) {
+      if ( that.getId() ) {
+        // both have an ID
+        result = this.getId().localeCompare( that.getId() );
+      } else {
+        // thatItem does not have an ID
+        result = 1;
+      }
+    } else if ( that.getId() ) {
+      // thisItem does not have an ID and thatItem does
+      result = -1;
+    }
+
+    return result;
+  }
+
   /**
    * @returns {string} the connection driver name (can be null)
    */

ngapp/src/app/shared/id-filter.ts

@@ -19,9 +19,13 @@ import { Identifiable } from "@shared/identifiable";
 
 const emptyPattern = "";
 
+/**
+ * A string identifier filter.
+ */
 export class IdFilter {
 
   private pattern: string = emptyPattern;
+  private regex: string = emptyPattern;
 
   constructor() {
     // nothing to do
@@ -32,13 +36,12 @@ export class IdFilter {
    * @returns {boolean} true if the ID matches the filter
    */
   public accepts( obj: Identifiable< string > ): boolean {
-    if ( this.pattern === "" ) {
+    if ( this.pattern === emptyPattern ) {
       return true;
     }
 
-    const id: string = obj.getId().toLocaleLowerCase();
-    const localized: string = this.pattern.toLocaleLowerCase();
-    return id.indexOf( localized ) >= 0;
+    const id: string = obj.getId();
+    return id.match( this.regex ) != null;
   }
 
   /**
@@ -53,6 +56,7 @@ export class IdFilter {
    */
   public reset(): void {
     this.pattern = emptyPattern;
+    this.regex = emptyPattern;
   }
 
   /**
@@ -61,8 +65,11 @@ export class IdFilter {
   public setFilter( pattern?: string ): void {
     if ( pattern ) {
       this.pattern = pattern;
+      this.regex = pattern.replace( ".", "\\." );
+      this.regex = "^" + this.regex.replace( "*", ".*" );
     } else {
       this.pattern = emptyPattern;
+      this.regex = emptyPattern;
     }
   }
 

ngapp/src/app/shared/identifiable.ts

@@ -20,6 +20,13 @@
  */
 export interface Identifiable< T > {
 
+  /**
+   * @typedef { object } T the type of the property that is used to identify the object
+   * @param {Identifiable<T>} that the object being compared to
+   * @returns {number} 0 if IDs are equal, -1 if this ID is less than, or 1 if this ID is greater than
+   */
+  compareTo( that: Identifiable< T > ): number;
+
   /**
    * @typedef { object } T the type of the property that is used to identify the object
    * @returns {T} the object identifier (can be null)