From aa8388f69bd612e13addece2c23ccff4570813f2 Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Wed, 13 Feb 2019 11:58:12 +0100 Subject: [PATCH] [HIMA-59] - Filter search action --- .../search-results.component.html | 2 +- .../search-results.component.scss | 5 ++- .../search-results.component.ts | 40 +++++++++---------- .../search-results/stagger.animation.ts | 2 +- .../filter-item/filter-item.component.html | 5 +++ .../filter-item/filter-item.component.scss | 29 ++++++++++++++ .../filter-item/filter-item.component.ts | 5 ++- .../components/filter/filter.component.html | 1 + .../components/filter/filter.component.ts | 3 +- 9 files changed, 65 insertions(+), 27 deletions(-) diff --git a/src/app/components/search-results/search-results.component.html b/src/app/components/search-results/search-results.component.html index bcc2da466..9759f9a99 100644 --- a/src/app/components/search-results/search-results.component.html +++ b/src/app/components/search-results/search-results.component.html @@ -1,5 +1,5 @@
- +
diff --git a/src/app/components/search-results/search-results.component.scss b/src/app/components/search-results/search-results.component.scss index 1b33394f9..02d5c636d 100644 --- a/src/app/components/search-results/search-results.component.scss +++ b/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; } diff --git a/src/app/components/search-results/search-results.component.ts b/src/app/components/search-results/search-results.component.ts index 76218e5c8..8747e778c 100644 --- a/src/app/components/search-results/search-results.component.ts +++ b/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 { 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 { 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); diff --git a/src/app/components/search-results/stagger.animation.ts b/src/app/components/search-results/stagger.animation.ts index 27fe8ae32..cd4181ee5 100644 --- a/src/app/components/search-results/stagger.animation.ts +++ b/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 } ) diff --git a/src/app/modules/article-search/components/filter-item/filter-item.component.html b/src/app/modules/article-search/components/filter-item/filter-item.component.html index fb00bfda9..4080bc16c 100644 --- a/src/app/modules/article-search/components/filter-item/filter-item.component.html +++ b/src/app/modules/article-search/components/filter-item/filter-item.component.html @@ -21,4 +21,9 @@ {{ item.name }}
+
+ Filtern +
diff --git a/src/app/modules/article-search/components/filter-item/filter-item.component.scss b/src/app/modules/article-search/components/filter-item/filter-item.component.scss index d0322d4e3..8aaf781a1 100644 --- a/src/app/modules/article-search/components/filter-item/filter-item.component.scss +++ b/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; + } + } +} diff --git a/src/app/modules/article-search/components/filter-item/filter-item.component.ts b/src/app/modules/article-search/components/filter-item/filter-item.component.ts index d6a8bac9f..5b91e8610 100644 --- a/src/app/modules/article-search/components/filter-item/filter-item.component.ts +++ b/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) { diff --git a/src/app/modules/article-search/components/filter/filter.component.html b/src/app/modules/article-search/components/filter/filter.component.html index 31362bd53..ab14ade67 100644 --- a/src/app/modules/article-search/components/filter/filter.component.html +++ b/src/app/modules/article-search/components/filter/filter.component.html @@ -2,6 +2,7 @@
{{ showMore ? 'Weniger' : 'Mehr' }} Filter diff --git a/src/app/modules/article-search/components/filter/filter.component.ts b/src/app/modules/article-search/components/filter/filter.component.ts index a10216141..16238a120 100644 --- a/src/app/modules/article-search/components/filter/filter.component.ts +++ b/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; showMore: boolean; + @Output() filtersChanged = new EventEmitter(); constructor(private store: Store) {} ngOnInit() {