fix(filter): Removed placeholder from within dropdown, dropdown shows current value (#449)

Author: dtaylor113

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

@@ -29,15 +29,13 @@
       <div class="btn-group bootstrap-select form-control filter-select" dropdown>
         <button type="button" class="btn btn-default dropdown-toggle" dropdownToggle
                 [disabled]="config.disabled === true">
-          <span class="filter-option pull-left">{{currentValue || currentField?.placeholder}}</span>
+          <span class="filter-option pull-left"
+                [ngClass]="{'placeholder': !currentValue}">
+            {{currentValue || currentField?.placeholder}}
+          </span>
           <span aria-hidden="true" class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" *dropdownMenu>
-          <li role="menuitem" *ngIf="currentField?.placeholder">
-            <a class="dropdown-item" href="javascript:void(0);" tabindex="-1" (click)="selectQuery()">
-              {{currentField?.placeholder}}
-            </a>
-          </li>
           <li role="menuitem" *ngFor="let query of currentField?.queries"
               [ngClass]="{'selected': query?.value === currentValue, 'divider dropdown-divider': query?.separator}">
             <a class="dropdown-item" href="javascript:void(0);" tabindex="-1"
@@ -70,11 +68,6 @@
           <span (click)="queryInput.focus()" class="caret"></span>
         </div>
         <ul class="dropdown-menu" role="menu" *dropdownMenu>
-          <li role="menuitem" *ngIf="currentField.placeholder">
-            <a class="dropdown-item" href="javascript:void(0);" tabindex="-1" (click)="selectQuery()">
-              {{currentField?.placeholder}}
-            </a>
-          </li>
           <li role="menuitem" *ngFor="let query of currentField?.queries"
               [ngClass]="{'selected': query.value === currentValue,
                           'divider dropdown-divider': query?.separator,

src/app/filter/filter-fields.component.less

@@ -33,9 +33,11 @@
   .btn-default {
     background-color: @color-pf-white;
     background-image: none;
-    color: @color-pf-black-500;
-    font-style: italic;
-    font-weight: 400;
+    .placeholder {
+      color: @color-pf-black-500;
+      font-style: italic;
+      font-weight: 400;
+    }
   }
   .avatar {
     height: 20px;

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

@@ -8,7 +8,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { cloneDeep, defaults, isEqual } from 'lodash';
+import { cloneDeep, defaults, find, isEqual } from 'lodash';
 
 import { FilterConfig } from './filter-config';
 import { FilterEvent } from './filter-event';
@@ -117,12 +117,24 @@ export class FilterFieldsComponent implements DoCheck, OnInit {
     if (!fieldFound) {
       this._currentField = this.config.fields[0];
       this._currentValue = null;
+    } else if (this._currentField.type === 'select' || this._currentField.type === 'typeahead') {
+      // clear dropdown if there is no applied filter for it
+      if (!this.getAppliedFilterByField(this._currentField)) {
+        this._currentValue = null;
+      }
     }
     if (this._currentValue === undefined) {
       this._currentValue = null;
     }
   }
 
+  protected getAppliedFilterByField(field: any): any {
+    let foundFilter = find(this.config.appliedFilters, {
+      field: field
+    });
+    return foundFilter;
+  }
+
   /**
    * Reset current field and value
    */
@@ -238,7 +250,13 @@ export class FilterFieldsComponent implements DoCheck, OnInit {
 
   private selectField(field: FilterField): void {
     this._currentField = field;
-    this._currentValue = null;
+    if (this._currentField.type === 'select' || this._currentField.type === 'typeahead') {
+      // Restore selected value for dropdown if there is an applied filter for it
+      let filterField: any = this.getAppliedFilterByField(this._currentField);
+      this._currentValue = filterField ? filterField.value : null;
+    } else {
+      this._currentValue = null;
+    }
     this.onFieldSelect.emit({
       field: this._currentField,
       value: this._currentValue
@@ -251,7 +269,7 @@ export class FilterFieldsComponent implements DoCheck, OnInit {
       query: filterQuery,
       value: filterQuery.value
     } as FilterEvent);
-    this._currentValue = null;
+    this._currentValue = filterQuery.value;
   }
 
   private showDelete(): boolean {

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

@@ -3,7 +3,7 @@
   <div class="row toolbar-pf-results">
     <div [ngClass]="{'col-sm-9': config.totalCount !== undefined, 'col-sm-12': config.totalCount === undefined}">
       <h5 *ngIf="config.appliedFilters.length > 0 && config.resultsCount >= 0">{{config.resultsCount}} Results</h5>
-      <p *ngIf="config.appliedFilters.length > 0">Active filters:</p>
+      <p *ngIf="config.appliedFilters.length > 0" class="filter-pf-active-label">Active filters:</p>
       <ul class="list-inline">
         <li *ngFor="let filter of config.appliedFilters">
           <span class="active-filter label label-info">

src/app/filter/filter-results.component.less

@@ -1,5 +1,6 @@
 .filter-pf {
   a { cursor: pointer; }
+  .pficon-close {cursor: pointer; }
 }
 
 .pfng-save-filter-close {

src/app/filter/filter.component.spec.ts

@@ -240,7 +240,7 @@ describe('Filter component - ', () => {
     fixture.detectChanges();
 
     let items = element.querySelectorAll('.filter-select li');
-    expect(items.length).toBe(config.fields[3].queries.length + 1); // +1 for the null value
+    expect(items.length).toBe(config.fields[3].queries.length);
   }));
 
   it('should clear a filter when the close button is clicked', function() {

src/app/table/basic-table/table.component.spec.ts

@@ -486,7 +486,7 @@ describe('Table component - ', () => {
     fixture.detectChanges(); // Workaround to fix dropdown tests
 
     let items = element.querySelectorAll('.filter-select li');
-    expect(items.length).toBe(config.toolbarConfig.filterConfig.fields[3].queries.length + 1); // +1 for the null value
+    expect(items.length).toBe(config.toolbarConfig.filterConfig.fields[3].queries.length);
   }));
 
   it('should clear a filter when the close button is clicked', function() {

src/app/toolbar/toolbar.component.spec.ts

@@ -283,7 +283,7 @@ describe('Toolbar component - ', () => {
     fixture.detectChanges(); // Workaround to fix dropdown tests
 
     let items = element.querySelectorAll('.filter-select li');
-    expect(items.length).toBe(config.filterConfig.fields[3].queries.length + 1); // +1 for the null value
+    expect(items.length).toBe(config.filterConfig.fields[3].queries.length);
   }));
 
   it('should clear a filter when the close button is clicked', function() {