Skip to content

Commit 9e4ed7f

Browse files
jsfrochajsfrocha
committed
Implement "Clear All Filters";
1 parent 7fa1378 commit 9e4ed7f

File tree

7 files changed

+66
-46
lines changed

7 files changed

+66
-46
lines changed

‎src/app/screens/content-detail/content-detail.component.ts

+1-26
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import {ActivatedRoute} from '@angular/router';
33
import {IContentItem} from '../../interfaces/content-item.interface';
4-
import {IPillItem} from '../../interfaces/pill-item.interface';
54

65
@Component({
76
selector: 't4e-content-detail',
@@ -13,7 +12,6 @@ export class ContentDetailComponent implements OnInit {
1312
contentItem: IContentItem
1413
loading: boolean;
1514
contentInfoBlocks: Array<{ title: string, value: string }> = [];
16-
tagPills: Array<IPillItem> = [];
1715

1816
constructor(
1917
private route: ActivatedRoute
@@ -24,32 +22,9 @@ export class ContentDetailComponent implements OnInit {
2422
this.loading = queryResult.data.loading;
2523
this.contentItem = queryResult.data.contentItem;
2624
this.contentInfoBlocks = this.getContentInfoBlocks();
27-
this.tagPills = [];
28-
if (this.contentItem.stakeholder) {
29-
this.tagPills.push({
30-
title: this.contentItem.stakeholder?.title,
31-
actionType: 'NAVIGATE',
32-
actionValue: '/conteudo?stakeholder='+this.contentItem.stakeholder?.id
33-
});
34-
}
35-
if (this.contentItem.provider) {
36-
this.tagPills.push({
37-
title: this.contentItem.provider?.title,
38-
actionType: 'NAVIGATE',
39-
actionValue: '/conteudo?provider='+this.contentItem.provider?.id
40-
})
41-
}
42-
if (this.contentItem.tags) {
43-
this.tagPills.push({
44-
title: this.contentItem.tags[0]?.title,
45-
actionType: 'NAVIGATE',
46-
actionValue: '/conteudo?tag='+this.contentItem.tags[0]?.id
47-
})
48-
}
4925
})
50-
51-
5226
}
27+
5328
getBackgroundHeader(): string {
5429
if (this.contentItem.stakeholder) {
5530
switch(this.contentItem.stakeholder.code) {

‎src/app/screens/content/content.component.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@
88
<t4e-filters
99
title="Providers"
1010
[fields]="providerFields$"
11-
[initialFilters]="selectedProviders$.getValue()"
11+
[selectedFilters]="selectedProviders$"
1212
(onSelectFields)="selectedProviders$.next($event)"
1313
></t4e-filters>
1414

1515
<t4e-filters
1616
title="Stakeholders"
1717
[fields]="stakeholderFields$"
18-
[initialFilters]="selectedStakeholders$.getValue()"
18+
[selectedFilters]="selectedStakeholders$"
1919
(onSelectFields)="selectedStakeholders$.next($event)"
2020
></t4e-filters>
2121

2222
<t4e-filters
2323
title="Tags"
2424
[fields]="tagFields$"
25-
[initialFilters]="selectedTags$.getValue()"
25+
[selectedFilters]="selectedTags$"
2626
(onSelectFields)="selectedTags$.next($event)"
2727
></t4e-filters>
2828

2929
<div class="results-panel">
3030
<div class="results-panel__title">Resultados</div>
3131
<div class="results-panel__text">Temos <span>{{contentItems.length}}</span> items do seu interesse de acordo com a sua pesquisa</div>
32-
<button class="results-panel__clear-btn">
32+
<button class="results-panel__clear-btn" (click)="clearFilters()">
3333
<span>Limpar todos os filtros</span>
3434
<i>
3535
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -67,28 +67,28 @@
6767
<t4e-filters
6868
title="Providers"
6969
[fields]="providerFields$"
70-
[initialFilters]="selectedProviders$.getValue()"
70+
[selectedFilters]="selectedProviders$"
7171
(onSelectFields)="selectedProviders$.next($event)"
7272
></t4e-filters>
7373

7474
<t4e-filters
7575
title="Stakeholders"
7676
[fields]="stakeholderFields$"
77-
[initialFilters]="selectedStakeholders$.getValue()"
77+
[selectedFilters]="selectedStakeholders$"
7878
(onSelectFields)="selectedStakeholders$.next($event)"
7979
></t4e-filters>
8080

8181
<t4e-filters
8282
title="Tags"
8383
[fields]="tagFields$"
84-
[initialFilters]="selectedTags$.getValue()"
84+
[selectedFilters]="selectedTags$"
8585
(onSelectFields)="selectedTags$.next($event)"
8686
></t4e-filters>
8787

8888
<div class="results-panel">
8989
<div class="results-panel__title">Resultados</div>
9090
<div class="results-panel__text">Temos <span>{{contentItems.length}}</span> items do seu interesse de acordo com a sua pesquisa</div>
91-
<button class="results-panel__clear-btn">
91+
<button class="results-panel__clear-btn" (click)="clearFilters()">
9292
<span>Limpar todos os filtros</span>
9393
<i>
9494
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">

‎src/app/screens/content/content.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
outline: none;
6969
justify-content: flex-start;
7070
align-items: center;
71+
cursor: pointer;
7172

7273
span {
7374
@include font('button');

‎src/app/screens/content/content.component.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {map} from 'rxjs/operators';
55
import {IFilters} from '../../shared/components/filters/interfaces/filters.interface';
66
import {Apollo, QueryRef} from 'apollo-angular';
77
import {IContentItem} from '../../interfaces/content-item.interface';
8-
import {ActivatedRoute} from '@angular/router';
8+
import {ActivatedRoute, Router} from '@angular/router';
99
import {ContentItemsService} from '../../shared/services/content-items.service';
1010

1111
@Component({
@@ -35,7 +35,8 @@ export class ContentComponent implements OnInit {
3535
private appService: AppService,
3636
private apollo: Apollo,
3737
private activatedRoute: ActivatedRoute,
38-
private contentItemsService: ContentItemsService
38+
private contentItemsService: ContentItemsService,
39+
private router: Router
3940
) { }
4041

4142
ngOnInit(): void {
@@ -96,4 +97,16 @@ export class ContentComponent implements OnInit {
9697
this.filterDrawerOpened = true;
9798
}
9899

100+
clearFilters() {
101+
// Remove Query Params
102+
this.router.navigate(
103+
['.'],
104+
{ relativeTo: this.activatedRoute, queryParams: {} }
105+
).then(() => {
106+
this.selectedTags$.next([])
107+
this.selectedStakeholders$.next([])
108+
this.selectedProviders$.next([]);
109+
});
110+
}
111+
99112
}

‎src/app/screens/home/home.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3>SOU ALUNO</h3>
2424
<div class="cta-item cta-item__ee" routerLink="/conteudo" [queryParams]="{stakeholder: '5e7cdd721c9d44000054f36a'}">
2525
<img class="img" src="../../../assets/card/cta-ee.png" alt="">
2626
<img class="img mobile" src="../../../assets/card/cta-mobile-ee.png" alt="">
27-
<h3>SOU ENCARREGADO(A) DE EDUCAÇÃO</h3>
27+
<h3>SOU ENC. DE EDUCAÇÃO</h3>
2828
<button>SABER MAIS →</button>
2929
</div>
3030
</div>
@@ -45,7 +45,7 @@ <h3>SOU ALUNO</h3>
4545
<div class="cta-item cta-item__ee" routerLink="/conteudo" [queryParams]="{stakeholder: '5e7cdd721c9d44000054f36a'}">
4646
<img class="img" src="../../../assets/card/cta-ee.png" alt="">
4747
<img class="img mobile" src="../../../assets/card/cta-mobile-ee.png" alt="">
48-
<h3>SOU ENCARREGADO(A) DE EDUCAÇÃO</h3>
48+
<h3>SOU ENC. DE EDUCAÇÃO</h3>
4949
<button>SABER MAIS →</button>
5050
</div>
5151
</div>

‎src/app/shared/components/filter-drawer/filter-drawer.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
outline: none;
105105
justify-content: flex-start;
106106
align-items: center;
107+
cursor: pointer;
107108

108109
span {
109110
@include font('button');

‎src/app/shared/components/filters/filters.component.ts

+38-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,34 @@
1-
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
1+
import {
2+
AfterViewChecked,
3+
AfterViewInit,
4+
Component,
5+
EventEmitter,
6+
Input,
7+
OnChanges,
8+
OnDestroy,
9+
OnInit,
10+
Output,
11+
SimpleChanges
12+
} from '@angular/core';
213
import {IFilterField, IFilters} from './interfaces/filters.interface';
3-
import {Observable} from 'rxjs';
14+
import {BehaviorSubject, Observable, Subscription} from 'rxjs';
415
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
16+
import {filter} from 'rxjs/operators';
517

618
@Component({
719
selector: 't4e-filters',
820
templateUrl: './filters.component.html',
921
styleUrls: ['./filters.component.scss']
1022
})
11-
export class FiltersComponent implements OnInit {
23+
export class FiltersComponent implements OnInit, OnChanges, OnDestroy {
1224

1325
@Input() title: string;
1426
@Input() fields: Observable<IFilters>;
15-
@Input() initialFilters: string[] = [];
27+
@Input() selectedFilters: BehaviorSubject<string[]>;
1628
@Output() onSelectFields: EventEmitter<string[]> = new EventEmitter<string[]>();
1729

30+
selectedFiltersSubscription: Subscription;
31+
1832
filterForm: FormGroup
1933
filterFields: IFilterField[];
2034

@@ -34,9 +48,7 @@ export class FiltersComponent implements OnInit {
3448

3549
result.filterFields.forEach((field, index) => {
3650
let state = '';
37-
console.log('initial filters', this.initialFilters)
38-
console.log('field value', field.value)
39-
if (this.initialFilters.length > 0 && this.initialFilters.includes(field.value)) {
51+
if (this.selectedFilters && this.selectedFilters.getValue().length > 0 && this.selectedFilters.getValue().includes(field.value)) {
4052
state = field.value;
4153
}
4254
(this.filterForm.controls.filters as FormArray).push(
@@ -52,7 +64,6 @@ export class FiltersComponent implements OnInit {
5264

5365
this.onSelectFields.emit(result)
5466
})
55-
5667
}
5768

5869
toggleFieldValue(index: number, newValue: string) {
@@ -76,4 +87,23 @@ export class FiltersComponent implements OnInit {
7687
return (this.filterForm.get('filters') as FormArray).controls
7788
}
7889

90+
ngOnChanges(changes: SimpleChanges): void {
91+
if (this.selectedFilters && !this.selectedFiltersSubscription) {
92+
this.selectedFiltersSubscription = this.selectedFilters.subscribe((result) => {
93+
for (let filterControl of (this.filterForm.get('filters') as FormArray).controls) {
94+
if (!result.includes(filterControl.value)) {
95+
filterControl.setValue("");
96+
}
97+
}
98+
})
99+
}
100+
101+
}
102+
103+
ngOnDestroy(): void {
104+
if (this.selectedFiltersSubscription) {
105+
this.selectedFiltersSubscription.unsubscribe();
106+
}
107+
}
108+
79109
}

0 commit comments

Comments
 (0)