feat(filter): enable filter in hierarchy mode

src/lib/array-exists-and-contains.ts

@@ -0,0 +1,4 @@
+// Checks whether an array exists and contains items
+export function arrayExistsAndContains (arr: any[] | null): boolean {
+  return !!arr && arr.length > 0;
+}

src/lib/filter-internal-options.ts

@@ -0,0 +1,16 @@
+import {InternalOption} from '../model/internal-option.model';
+import {arrayExistsAndContains} from './array-exists-and-contains';
+
+export const filterInternals = function (resourceList: InternalOption[], searchStr: string): InternalOption[] {
+  return resourceList.map(it => {
+    if (arrayExistsAndContains(it.children)) {
+      it.children = filterInternals(it.children, searchStr);
+    }
+    it.isSearchResultOrParent = it.label.toString().toLowerCase().includes(searchStr) || ContainsResult(it.children);
+    return it;
+  });
+};
+
+function ContainsResult (resource: InternalOption[]): boolean {
+  return resource.some(resource => resource.isSearchResultOrParent || ContainsResult(resource.children));
+}

src/lib/set-selected.ts

@@ -10,3 +10,12 @@ export function setSelected (options: InternalOption[], selected: boolean) {
     setSelected(options[i].children || [], selected);
   }
 }
+
+// Sets all options to selected (deep) where isSearchResultOrParent is true
+export function setFilteredSelected (options: InternalOption[]) {
+  options.forEach(option => {
+    option.selected = option.isSearchResultOrParent;
+    option.state = option.selected ? OptionState.selected : OptionState.unselected;
+    setFilteredSelected(option.children || []);
+  });
+}

src/model/internal-option.model.ts

@@ -7,16 +7,18 @@ export class InternalOption {
   model: any;
   selected: boolean;
   state: OptionState;
-  children: any[];
+  children: InternalOption[];
+  isSearchResultOrParent: boolean;
   parent: any;
 
-  constructor (trackingId: string, label: string, model: any, selected: boolean, state: OptionState, children: any[], parent: any) {
+  constructor (trackingId: string, label: string, model: any, selected: boolean, state: OptionState, children: InternalOption[], parent: any) {
     this.trackingId = trackingId;
     this.label = label;
     this.model = model;
     this.selected = selected;
     this.state = state;
     this.children = children;
     this.parent = parent;
+    this.isSearchResultOrParent = true;
   }
 }

src/w11k-select-option/w11k-select-option.directive.ts

@@ -79,6 +79,10 @@ export function w11kSelectOptionDirective (w11kSelectConfig: Config): IDirective
       $scope.downWardstoggleAll = function (toSetState: OptionState) {
         $scope.options = toggleDownWards($scope.options, toSetState, $scope);
       };
+
+      $scope.filterSearchResultsInView = function (item) {
+        return item.isSearchResultOrParent;
+      };
     }
   };
 }

src/w11k-select-option/w11k-select-option.tpl.html

@@ -1,4 +1,4 @@
-<li ng-repeat="option in options track by option.trackingId">
+<li ng-repeat="option in options | filter: filterSearchResultsInView track by option.trackingId ">
     <div class="table-row" ng-click="onOptionStateClick($event, option)" key-listener="onOptionStateClick($event, option)" ng-class="{'selected': option.state === 1 }" tabindex="0">
         <w11k-select-checkbox state="option.state"></w11k-select-checkbox>
         <span>{{::option.label}}</span>

src/w11k-select.directive.ts

@@ -1,7 +1,7 @@
 /** @internal */
 import * as angular from 'angular';
 import {IPromise, IScope, IFilterService, IWindowService, IQService, IDocumentService, IParseService, ITimeoutService} from 'angular';
-import {setSelected} from './lib/set-selected';
+import {setFilteredSelected, setSelected} from './lib/set-selected';
 import {internalOptions2externalModel} from './lib/internal-options-2-external-model';
 import {value2trackingId} from './lib/value-2-tracking-id';
 import {externalOptions2internalOptions} from './lib/external-options-2-internal-options';
@@ -11,6 +11,7 @@ import {Config, ConfigInstance} from './model/config.model';
 import {collectActiveLabels} from './lib/collect-active-labels';
 import {buildInternalOptionsMap} from './lib/build-internal-options-map';
 import {W11KSelectHelper} from './w11k-select-helper.factory';
+import {filterInternals} from './lib/filter-internal-options';
 
 export interface Scope extends IScope {
   config: ConfigInstance;
@@ -332,14 +333,13 @@ export function w11kSelect (w11kSelectConfig: Config,
          * filter
          * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-        let filter: angular.IFilterFilter = $filter('filter');
         let initialLimitTo = 80;
         let increaseLimitTo = initialLimitTo * 0.5;
 
         function filterOptions () {
           if (hasBeenOpened) {
             // false as third parameter: use contains to compare
-            optionsFiltered = filter(internalOptions, scope.filter.values, false);
+            optionsFiltered = filterInternals(internalOptions, scope.filter.values.label ? scope.filter.values.label.toLowerCase() : '');
             scope.options.visible = optionsFiltered.slice(0, initialLimitTo);
           }
         }
@@ -376,8 +376,9 @@ export function w11kSelect (w11kSelectConfig: Config,
             $event.preventDefault();
             $event.stopPropagation();
           }
-
-          if (scope.config.multiple) {
+          if (scope.config.children) {
+            setFilteredSelected(internalOptions);
+          } else if (scope.config.multiple) {
             setSelected(optionsFiltered, true);
           } else if (optionsFiltered.length === 1) {
             scope.select(optionsFiltered[0]); // behaves like if the option was clicked using the mouse