53881: bugfixing facet search box

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.html

@@ -1,19 +1,19 @@
 <div>
     <div class="filters py-2">
-        <a *ngFor="let value of selectedValues" class="d-block"
+        <a *ngFor="let value of selectedValues" class="d-flex flex-row"
            [routerLink]="[getSearchLink()]"
            [queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
-            <input type="checkbox" [checked]="true"/>
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
-            <span class="filter-value">{{value}}</span>
+            <span class="filter-value pl-1">{{value}}</span>
         </a>
         <ng-container *ngFor="let page of (filterValues$ | async)">
             <ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
-                <a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
+                <a *ngIf="!selectedValues.includes(value.value)" class="d-flex flex-row"
                    [routerLink]="[getSearchLink()]"
-                   [queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
+                   [queryParams]="getAddParams(value.value)" queryParamsHandling="merge">
-                    <input type="checkbox" [checked]="false"/>
+                    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
-                        <span class="filter-value">{{value.value}}</span>
+                    <span class="filter-value px-1">{{value.value}}</span>
-                        <span class="float-right filter-value-count">
+                    <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{value.count}}</span>
                     </span>
                 </a>
@@ -34,7 +34,7 @@
                           [name]="filterConfig.paramName"
                           [(ngModel)]="filter"
                           (submitSuggestion)="onSubmit($event)"
-                          (clickSuggestion)="clickFilter($event)"
+                          (clickSuggestion)="onSubmit($event)"
                           (findSuggestions)="findSuggestions($event)"
                           [getDisplayValue]="getDisplayValue"
                           ngDefaultControl

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.scss

@@ -14,4 +14,7 @@
         cursor: pointer;
     }
 }
-
+::ng-deep em {
+    font-weight: bold;
+    font-style: normal;
+}

src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -68,6 +68,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
       this.filterValues$.next(this.filterValues);
       newValues$.first().subscribe((rd) => this.isLastPage$.next(hasNoValue(rd.payload.next)));
     });
+    this.filter = '';
   }
 
   isChecked(value: FacetValue): Observable<boolean> {
@@ -99,7 +100,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     if (isNotEmpty(data)) {
       this.router.navigate([this.getSearchLink()], {
         queryParams:
-          { [this.filterConfig.paramName]: [...this.selectedValues, data[this.filterConfig.paramName]] },
+          { [this.filterConfig.paramName]: [...this.selectedValues, data] },
         queryParamsHandling: 'merge'
       });
       this.filter = '';
@@ -107,10 +108,6 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
     this.filterSearchResults = Observable.of([]);
   }
 
-  clickFilter(data: string) {
-    this.onSubmit({ [this.filterConfig.paramName]: data });
-  }
-
   hasValue(o: any): boolean {
     return hasValue(o);
   }

src/app/+search-page/search-filters/search-filter/search-filter.component.html

@@ -1,7 +1,7 @@
 <div>
     <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fa float-right"
                                                                       [ngClass]="(isCollapsed() | async) ? 'fa-plus' : 'fa-minus'"></span></div>
-    <div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" class="search-filter-wrapper">
+    <div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{closed: collapsed}">
         <ds-search-facet-filter [filterConfig]="filter" [selectedValues]="getSelectedValues() | async"></ds-search-facet-filter>
     </div>
 </div>

src/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -3,10 +3,7 @@
 
 :host {
     border: 1px solid map-get($theme-colors, light);
-    >div {
+    .search-filter-wrapper.closed {
-        position: relative;
-    }
-    .search-filter-wrapper {
         overflow: hidden;
     }
     .filter-toggle {

src/app/+search-page/search-filters/search-filter/search-filter.component.ts

@@ -1,12 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { SearchFilterConfig } from '../../search-service/search-filter-config.model';
-import { SearchService } from '../../search-service/search.service';
-import { RemoteData } from '../../../core/data/remote-data';
-import { FacetValue } from '../../search-service/facet-value.model';
 import { SearchFilterService } from './search-filter.service';
 import { Observable } from 'rxjs/Observable';
 import { slide } from '../../../shared/animations/slide';
-import { PaginatedList } from '../../../core/data/paginated-list';
 
 /**
  * This component renders a simple item page.
@@ -23,6 +19,7 @@ import { PaginatedList } from '../../../core/data/paginated-list';
 
 export class SearchFilterComponent implements OnInit {
   @Input() filter: SearchFilterConfig;
+  collapsed;
 
   constructor(private filterService: SearchFilterService) {
   }
@@ -47,13 +44,27 @@ export class SearchFilterComponent implements OnInit {
 
   initialCollapse() {
     this.filterService.initialCollapse(this.filter.name);
+    this.collapsed = true;
   }
 
   initialExpand() {
     this.filterService.initialExpand(this.filter.name);
+    this.collapsed = false;
   }
 
   getSelectedValues(): Observable<string[]> {
     return this.filterService.getSelectedValuesForFilter(this.filter);
   }
+
+  finishSlide(event: any): void {
+    if (event.fromState === 'collapsed') {
+      this.collapsed = false;
+    }
+  }
+
+  startSlide(event: any): void {
+    if (event.toState === 'collapsed') {
+      this.collapsed = true;
+    }
+  }
 }

src/app/shared/input-suggestions/input-suggestions.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" (ngSubmit)="submitSuggestion.emit(form.value)"
+<form #form="ngForm" (ngSubmit)="submitSuggestion.emit(ngModel)"
       [action]="action" (keydown)="onKeydown($event)"
       (keydown.arrowdown)="shiftFocusDown($event)"
       (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"

src/app/shared/input-suggestions/input-suggestions.component.scss

@@ -3,5 +3,14 @@
     .dropdown-item {
         white-space: normal;
         word-break: break-word;
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+form {
+    > div {
+        position: relative;
     }
 }

src/app/shared/input-suggestions/input-suggestions.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { hasValue, isNotEmpty } from '../empty.util';
+import { ActivatedRoute } from '@angular/router';
 
 /**
  * This component renders a simple item page.