fix(filter): Refactor filter and toolbar (consumer) to accommodate th…

…e Planner UI

config/webpack.demo.js

@@ -35,13 +35,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.webpack.js', '.wep.js', '.js', '.ts'],
-    plugins: [
-      // Todo: config is not loading.
-      new TsConfigPathsPlugin({
-        configFileName: helpers.root("tsconfig-demo.json")
-      })
-    ]
+    extensions: ['.webpack.js', '.wep.js', '.js', '.ts']
   },
 
   stats: {
@@ -124,6 +118,11 @@ module.exports = {
      */
     new NamedModulesPlugin(),
 
+    // Todo: config is not loading.
+    new TsConfigPathsPlugin({
+      configFileName: helpers.root("tsconfig-demo.json")
+    }),
+
     /**
      * Plugin: ContextReplacementPlugin
      * Description: Provides context to Angular's use of System.import

index.ts

@@ -31,6 +31,7 @@ export { FilterEvent } from './src/app/filters/filter-event';
 export { FilterField } from './src/app/filters/filter-field';
 export { FilterFieldsComponent } from './src/app/filters/filter-fields.component';
 export { FilterResultsComponent } from './src/app/filters/filter-results.component';
+export { FilterQuery } from './src/app/filters/filter-query';
 
 // Notification
 export { ToastNotificationComponent } from './src/app/notification/toast-notification.component';

src/app/filters/examples/filter-example.component.ts

@@ -26,63 +26,92 @@ export class FilterExampleComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.allItems = [
-      {
-        name: "Fred Flintstone",
-        address: "20 Dinosaur Way, Bedrock, Washingstone",
-        birthMonth: 'February'
-      },
-      {
-        name: "John Smith",
-        address: "415 East Main Street, Norfolk, Virginia",
-        birthMonth: 'October'
-      },
-      {
-        name: "Frank Livingston",
-        address: "234 Elm Street, Pittsburgh, Pennsylvania",
-        birthMonth: 'March'
-      },
-      {
-        name: "Judy Green",
-        address: "2 Apple Boulevard, Cincinatti, Ohio",
-        birthMonth: 'December'
-      },
-      {
-        name: "Pat Thomas",
-        address: "50 Second Street, New York, New York",
-        birthMonth: 'February'
-      }
-    ];
+    this.allItems = [{
+      name: "Fred Flintstone",
+      address: "20 Dinosaur Way, Bedrock, Washingstone",
+      birthMonth: 'February',
+      birthMonthId: 'month2'
+    },{
+      name: "John Smith", address: "415 East Main Street, Norfolk, Virginia",
+      birthMonth: 'October',
+      birthMonthId: '10'
+    },{
+      name: "Frank Livingston",
+      address: "234 Elm Street, Pittsburgh, Pennsylvania",
+      birthMonth: 'March',
+      birthMonthId: 'month3'
+    },{
+      name: "Judy Green",
+      address: "2 Apple Boulevard, Cincinatti, Ohio",
+      birthMonth: 'December',
+      birthMonthId: 'month12'
+    },{
+      name: "Pat Thomas",
+      address: "50 Second Street, New York, New York",
+      birthMonth: 'February',
+      birthMonthId: 'month2'
+    }];
     this.items = this.allItems;
 
     this.filterConfig = {
-      fields: [
-        {
-          id: 'name',
-          title:  'Name',
-          placeholder: 'Filter by Name...',
-          filterType: 'text'
-        },
-        {
-          id: 'age',
-          title:  'Age',
-          placeholder: 'Filter by Age...',
-          filterType: 'text'
-        },
-        {
-          id: 'address',
-          title:  'Address',
-          placeholder: 'Filter by Address...',
-          filterType: 'text'
-        },
-        {
-          id: 'birthMonth',
-          title:  'Birth Month',
-          placeholder: 'Filter by Birth Month...',
-          filterType: 'select',
-          filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-        }
-      ] as FilterField[],
+      fields: [{
+        id: 'name',
+        title:  'Name',
+        placeholder: 'Filter by Name...',
+        type: 'text'
+      },{
+        id: 'age',
+        title:  'Age',
+        placeholder: 'Filter by Age...',
+        type: 'text'
+      },{
+        id: 'address',
+        title:  'Address',
+        placeholder: 'Filter by Address...',
+        type: 'text'
+      },{
+        id: 'birthMonth',
+        title:  'Birth Month',
+        placeholder: 'Filter by Birth Month...',
+        type: 'select',
+        queries: [{
+          id: 'month1',
+          value: 'January'
+        },{
+          id: 'month2',
+          value: 'February'
+        },{
+          id: 'month3',
+          value: 'March'
+        },{
+          id: 'month4',
+          value: 'April'
+        },{
+          id: 'month5',
+          value: 'May'
+        },{
+          id: 'month6',
+          value: 'June'
+        },{
+          id: 'month7',
+          value: 'July'
+        },{
+          id: 'month8',
+          value: 'August'
+        },{
+          id: 'month9',
+          value: 'September'
+        },{
+          id: 'month10',
+          value: 'October'
+        },{
+          id: 'month11',
+          value: 'November'
+        },{
+          id: 'month12',
+          value: 'December'
+        }]
+      }] as FilterField[],
       resultsCount: this.items.length,
       appliedFilters: []
     } as FilterConfig;
@@ -107,19 +136,19 @@ export class FilterExampleComponent implements OnInit {
   filterChange($event: FilterEvent): void {
     this.filtersText = "";
     $event.appliedFilters.forEach((filter) => {
-      this.filtersText += filter.title + " : " + filter.value + "\n";
+      this.filtersText += filter.field.title + " : " + filter.value + "\n";
     });
     this.applyFilters($event.appliedFilters);
   }
 
   matchesFilter(item: any, filter: Filter): boolean {
     let match = true;
 
-    if (filter.id === 'name') {
+    if (filter.field.id === 'name') {
       match = item.name.match(filter.value) !== null;
-    } else if (filter.id === 'address') {
+    } else if (filter.field.id === 'address') {
       match = item.address.match(filter.value) !== null;
-    } else if (filter.id === 'birthMonth') {
+    } else if (filter.field.id === 'birthMonth') {
       match = item.birthMonth === filter.value;
     }
     return match;

src/app/filters/filter-event.ts

@@ -1,15 +1,18 @@
 import { Filter } from './filter';
 import { FilterField } from './filter-field';
+import { FilterQuery } from './filter-query';
 
 /*
  * A filter event containing:
  *
  * appliedFilters - List of the currently applied filters
  * field - A filterable field
+ * query - A filterable query
  * value - The filter input field value
  */
 export class FilterEvent {
   appliedFilters?: Filter[];
-  field?: FilterField;
+  field: FilterField;
+  query: FilterQuery;
   value?: string;
 }

src/app/filters/filter-field.ts

@@ -1,16 +1,18 @@
+import { FilterQuery } from './filter-query';
+
 /*
  * A filterable field containing:
  *
  * id - Optional unique Id for the filter field, useful for comparisons
- * title - The title to display for the filter field
  * placeholder - Optional text to display when no filter value has been entered
- * filterType - The filter input field type (any html input type, or 'select' for a select box)
- * filterValues - Optional list of values used when filterType is 'select'
+ * queries - Optional list of filter queries used when filterType is 'select'
+ * title - The title to display for the filter field
+ * type - The filter input field type (any html input type, or 'select' for a select box)
  */
 export class FilterField {
   id?: string;
-  title: string;
   placeholder?: string;
-  filterType: string;
-  filterValues?: string[];
+  queries?: FilterQuery[];
+  title: string;
+  type: string;
 }

src/app/filters/filter-fields.component.html

@@ -6,19 +6,19 @@
         <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" dropdownMenu>
-        <li *ngFor="let item of config.fields">
-          <a class="filter-field" role="menuitem" tabindex="-1" (click)="selectField(item)">
-            {{item.title}}
+        <li *ngFor="let field of config.fields">
+          <a class="filter-field" role="menuitem" tabindex="-1" (click)="selectField(field)">
+            {{field.title}}
           </a>
         </li>
       </ul>
     </div>
-    <div *ngIf="currentField.filterType !== 'select'">
-      <input class="form-control" type="{{currentField.filterType}}" [(ngModel)]="currentValue"
+    <div *ngIf="currentField.type !== 'select'">
+      <input class="form-control" type="{{currentField.type}}" [(ngModel)]="currentValue"
              placeholder="{{currentField.placeholder}}"
              (keypress)="onValueKeyPress($event)"/>
     </div>
-    <div *ngIf="currentField.filterType === 'select'">
+    <div *ngIf="currentField.type === 'select'">
       <div class="btn-group bootstrap-select form-control filter-select" dropdown >
         <button type="button" class="btn btn-default dropdown-toggle" dropdownToggle>
           <span class="filter-option pull-left">{{currentValue || currentField.placeholder}}</span>
@@ -30,9 +30,10 @@
               {{currentField.placeholder}}
             </a>
           </li>
-          <li *ngFor="let filterValue of currentField.filterValues" [ngClass]="{'selected': filterValue === currentValue}">
-            <a role="menuitem" tabindex="-1" (click)="selectValue(filterValue)">
-              {{filterValue}}
+          <li *ngFor="let query of currentField.queries"
+              [ngClass]="{'selected': query.value === currentValue}">
+            <a role="menuitem" tabindex="-1" (click)="selectValue(query)">
+              {{query.value}}
             </a>
           </li>
         </ul>

src/app/filters/filter-fields.component.ts

@@ -10,6 +10,7 @@ import {
 import { FilterConfig } from './filter-config';
 import { FilterEvent } from './filter-event';
 import { FilterField } from './filter-field';
+import { FilterQuery } from './filter-query';
 
 import * as _ from 'lodash';
 
@@ -85,16 +86,17 @@ export class FilterFieldsComponent implements OnInit {
     }
   }
 
-  selectField(item: FilterField): void {
-    this.currentField = item;
+  selectField(field: FilterField): void {
+    this.currentField = field;
     this.currentValue = null;
   }
 
-  selectValue(filterValue: string): void {
-    if (filterValue != null) {
+  selectValue(filterQuery: FilterQuery): void {
+    if (filterQuery != null) {
       this.onAdd.emit({
         field: this.currentField,
-        value: filterValue
+        query: filterQuery,
+        value: filterQuery.value
       } as FilterEvent);
       this.currentValue = null;
     }

src/app/filters/filter-query.ts

@@ -0,0 +1,10 @@
+/*
+ * A filterable field containing:
+ *
+ * id - Optional unique Id for the filter field, useful for comparisons
+ * value - Filter query value used when filterType is 'select'
+ */
+export class FilterQuery {
+  id?: string;
+  value: string;
+}

src/app/filters/filter-results.component.html

@@ -1,12 +1,12 @@
-<div class="filter-pf">
+<div class="filter-pf" *ngIf="config && config.appliedFilters && config.appliedFilters.length > 0">
   <div class="row toolbar-pf-results">
     <div class="col-sm-12">
-      <h5>{{config.resultsCount}} Results</h5>
+      <h5 *ngIf="config.resultsCount >= -1">{{config.resultsCount}} Results</h5>
       <p *ngIf="config.appliedFilters.length > 0">Active filters:</p>
       <ul class="list-inline">
         <li *ngFor="let filter of config.appliedFilters">
           <span class="active-filter label label-info">
-            {{filter.title}}: {{filter.value}}
+            {{filter.field.title}}: {{filter.value}}
             <a><span class="pficon pficon-close" (click)="clearFilter(filter)"></span></a>
           </span>
         </li>

src/app/filters/filter-results.component.ts

@@ -63,10 +63,10 @@ export class FilterResultsComponent implements OnInit {
 
   // Result functions
 
-  clearFilter(item: Filter): void {
+  clearFilter(filter: Filter): void {
     let newFilters: Filter[] = [];
     this.config.appliedFilters.forEach((filter) => {
-      if (item.title !== filter.title || item.value !== filter.value) {
+      if (filter.field.title !== filter.field.title || filter.value !== filter.value) {
         newFilters.push(filter);
       }
     });