[HIMA-59] - Filter search action

src/app/components/search-results/search-results.component.html

@@ -1,5 +1,5 @@
 <div class="result-container">
-  <app-filter></app-filter>
+  <app-filter (filtersChanged)="updateSearch()"></app-filter>
   <div *ngIf="!ds || (ds.loading && !ds.results)">
     <div [@stagger]="'yes'">
       <div *ngFor="let dummy of dummies" [style.marginTop.px]="10">

src/app/components/search-results/search-results.component.scss

@@ -5,10 +5,11 @@ app-product-card-loading {
 }
 app-filter {
   display: block;
+  margin-bottom: 10px;
 }
 
 .result-container {
-  height: calc(100% - 100px);
+  height: calc(100% - 80px);
 }
 .viewport {
   padding-bottom: 10px;
@@ -19,5 +20,5 @@ app-filter {
 .product-item {
   height: 180px;
   overflow: hidden;
-  padding-top: 10px;
+  padding-bottom: 10px;
 }

src/app/components/search-results/search-results.component.ts

@@ -65,23 +65,19 @@ export class SearchResultsComponent implements OnInit {
       this.store,
       []
     );
+  }
 
-    this.store
-      .select(FilterState.getFiltersJSON)
-      .pipe(
-        distinctUntilChanged(),
-        switchMap(f => this.store.selectOnce(FilterState.getFilters))
-      )
-      .subscribe(fil => {
-        if (!!fil) {
-          this.ds = new SearchDataSource(
-            this.productService,
-            this.currentSearch.query,
-            this.store,
-            fil
-          );
-        }
-      });
+  updateSearch() {
+    this.store.selectOnce(FilterState.getFilters).subscribe(fil => {
+      if (!!fil) {
+        this.ds = new SearchDataSource(
+          this.productService,
+          this.currentSearch.query,
+          this.store,
+          fil
+        );
+      }
+    });
   }
 
   loadCurrentSearch() {
@@ -153,7 +149,9 @@ export class SearchDataSource extends DataSource<Product | undefined> {
     this.dssub.add(
       this.dataStreamDTO
         .pipe(debounceTime(1000))
-        .subscribe(i => this.store.dispatch(new SetProducts([...i], this.search)))
+        .subscribe(i =>
+          this.store.dispatch(new SetProducts([...i], this.search))
+        )
     );
     this.fetchPage(0);
 
@@ -203,10 +201,10 @@ export class SearchDataSource extends DataSource<Product | undefined> {
           page * this.pageSize,
           this.pageSize,
           ...data.result.map((item, i) => {
-           if (i === 3) {
-             return procuctsMock[3];
-           }
-           return this.productMapping.fromItemDTO(item);
+            if (i === 3) {
+              return procuctsMock[3];
+            }
+            return this.productMapping.fromItemDTO(item);
           })
         );
         this.dataStream.next(this.cachedData);

src/app/components/search-results/stagger.animation.ts

@@ -13,7 +13,7 @@ export const staggerAnimation = trigger('stagger', [
       ':enter',
       [
         style({ opacity: 0 }),
-        stagger(100, [animate(300, style({ opacity: 1 }))])
+        stagger(50, [animate(300, style({ opacity: 1 }))])
       ],
       { optional: true }
     )

src/app/modules/article-search/components/filter-item/filter-item.component.html

@@ -21,4 +21,9 @@
       {{ item.name }}
     </div>
   </div>
+  <div class="button">
+    <a class="active" (click)="confirmed.emit(true) && toggleMenu(filter.id)"
+      >Filtern</a
+    >
+  </div>
 </div>

src/app/modules/article-search/components/filter-item/filter-item.component.scss

@@ -56,3 +56,32 @@
 .active {
   background-color: $hima-content-color;
 }
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+
+  a {
+    font-size: 18px;
+    font-weight: bold;
+    color: $hima-button-color;
+    padding: 8px 0px;
+    text-decoration: none;
+
+    &.active {
+      color: #fff;
+      background-color: $hima-button-color;
+      border-radius: 40px;
+      outline: none;
+      text-align: center;
+      width: 115px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

src/app/modules/article-search/components/filter-item/filter-item.component.ts

@@ -1,5 +1,5 @@
 import { FilterState } from 'src/app/core/store/state/filter.state';
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Filter } from 'src/app/core/models/filter.model';
 import {
   SelectFilterById,
@@ -10,6 +10,7 @@ import { FilterItem } from 'src/app/core/models/filter-item.model';
 import { Store } from '@ngxs/store';
 import { map, take } from 'rxjs/operators';
 import { fadeInAnimation } from './fadeIn.animation';
+import { OuterSubscriber } from 'rxjs/internal/OuterSubscriber';
 
 @Component({
   selector: 'app-filter-item',
@@ -23,6 +24,8 @@ export class FilterItemComponent implements OnInit {
 
   filter: Filter;
 
+  @Output() confirmed = new EventEmitter();
+
   constructor(private store: Store) {}
 
   toggleMenu(id: string) {

src/app/modules/article-search/components/filter/filter.component.html

@@ -2,6 +2,7 @@
   <app-filter-item
     *ngFor="let index of (filterIndexArray$ | async)"
     [index]="index"
+    (confirmed)="filtersChanged.emit(true)"
   ></app-filter-item>
   <div (click)="toggleMore()" class="more-filters-container">
     <span class="more-filters">{{ showMore ? 'Weniger' : 'Mehr' }} Filter</span>

src/app/modules/article-search/components/filter/filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Filter } from 'src/app/core/models/filter.model';
 import {
   LoadFilters,
@@ -19,6 +19,7 @@ export class FilterComponent implements OnInit {
   filterIndexArray$: Observable<number[]>;
   showMore: boolean;
 
+  @Output() filtersChanged = new EventEmitter();
   constructor(private store: Store) {}
 
   ngOnInit() {