Skip to content

Commit 4ca3f4c

Browse files
jsfrochajsfrocha
committed
FaqComponent - Ready
1 parent 8f05157 commit 4ca3f4c

17 files changed

+603
-11
lines changed

‎src/app/interfaces/faq-item.interface.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {IStakeholder} from './stakeholder.interface';
2+
import {IProvider} from './provider.interface';
3+
4+
export interface IFaqItem {
5+
id?: string;
6+
order?: number;
7+
question?: string;
8+
answer?: string;
9+
published?: boolean;
10+
stakeholder?: IStakeholder;
11+
provider?: IProvider;
12+
}

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {AppService} from '../../app.service';
33
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
44
import {map} from 'rxjs/operators';
55
import {IFilters} from '../../shared/components/filters/interfaces/filters.interface';
6-
import {Apollo, QueryRef} from 'apollo-angular';
6+
import {QueryRef} from 'apollo-angular';
77
import {IContentItem} from '../../interfaces/content-item.interface';
88
import {ActivatedRoute, Router} from '@angular/router';
99
import {ContentItemsService} from '../../shared/services/content-items.service';
@@ -33,7 +33,6 @@ export class ContentComponent implements OnInit {
3333

3434
constructor(
3535
private appService: AppService,
36-
private apollo: Apollo,
3736
private activatedRoute: ActivatedRoute,
3837
private contentItemsService: ContentItemsService,
3938
private router: Router

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

+102-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,102 @@
1-
<p>faqs works!</p>
1+
<t4e-page-header
2+
backgroundImage="assets/pages/faqs/header-bg.png"
3+
title="Dúvidas mais frequentes"
4+
[description]="'Encontre aqui resposta às dúvidas mais frequentes. Se, ainda assim, necessitar de ajuda, por favor contacte-nos enviando um email para <a href=\'mailto:[email protected]\'>[email protected]</a>'"
5+
></t4e-page-header>
6+
<div class="t4e-faqs-page">
7+
<aside class="t4e-content-filters">
8+
<div class="sticky-filters">
9+
<t4e-filters
10+
title="FAQ's para"
11+
[fields]="stakeholderFields$"
12+
[selectedFilters]="selectedStakeholders$"
13+
(onSelectFields)="selectedStakeholders$.next($event)"
14+
></t4e-filters>
15+
16+
<t4e-filters
17+
title="FAQ's por Plataforma"
18+
[fields]="providerFields$"
19+
[selectedFilters]="selectedProviders$"
20+
(onSelectFields)="selectedProviders$.next($event)"
21+
></t4e-filters>
22+
23+
<div class="results-panel">
24+
<div class="results-panel__title">Resultados</div>
25+
<div class="results-panel__text">Temos <span>{{faqItems.length}}</span> items do seu interesse de acordo com a sua pesquisa</div>
26+
<button class="results-panel__clear-btn" (click)="clearFilters()">
27+
<span>Limpar todos os filtros</span>
28+
<i>
29+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
30+
<path d="M7.45935 6.56118L7.45935 1.2844C7.45935 1.01923 7.27373 0.833617 7.00857 0.833617C6.7434 0.833617 6.55779 1.01923 6.55779 1.2844V6.56118L1.281 6.5877C1.0291 6.57444 0.830221 6.77331 0.84348 7.02522C0.856738 7.27713 1.0291 7.476 1.29426 7.476L6.55779 7.46274L6.55779 12.7395C6.55779 13.0047 6.7434 13.1903 7.00857 13.1903C7.12789 13.1771 7.23396 13.1505 7.32676 13.0577C7.41957 12.9649 7.45935 12.8721 7.45935 12.7395L7.47261 7.44949L12.7494 7.42297C12.8687 7.40971 13.0013 7.35668 13.0676 7.29039C13.1339 7.2241 13.2002 7.10477 13.2002 6.97219C13.2002 6.70702 13.0146 6.52141 12.7494 6.52141L7.45935 6.56118Z" fill="white"/>
31+
</svg>
32+
</i>
33+
</button>
34+
</div>
35+
</div>
36+
</aside>
37+
<section class="t4e-faq-items">
38+
<div class="t4e-filter-drawer-opener">
39+
<button (click)="openFilterDrawer()">
40+
<span>SELECCIONAR FILTROS ({{totalSelectedFilters}})</span>
41+
<i>
42+
<svg width="21" height="8" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg">
43+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447708 0 0 0.447715 0 1C0 1.55228 0.447708 2 1 2H20C20.5523 2 21 1.55228 21 1C21 0.447715 20.5523 0 20 0H1ZM1 6C0.447708 6 0 6.44772 0 7C0 7.55228 0.447708 8 1 8H20C20.5523 8 21 7.55228 21 7C21 6.44772 20.5523 6 20 6H1Z" fill="white"/>
44+
</svg>
45+
</i>
46+
</button>
47+
</div>
48+
49+
<t4e-accordion
50+
*ngFor="let faqItem of faqItemList"
51+
[faqItem]="faqItem"
52+
></t4e-accordion>
53+
54+
<div class="current-results" *ngIf="faqItemList.length > 0">
55+
<button class="show-more-btn" (click)="handleShowMore()">
56+
<span>MOSTRAR MAIS</span>
57+
<i>
58+
<svg width="16" height="8" viewBox="0 0 16 8" fill="#5A98D0" xmlns="http://www.w3.org/2000/svg">
59+
<path d="M1 0.999999L8 7L15 1" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
60+
</svg>
61+
</i>
62+
</button>
63+
<div class="content">
64+
A mostrar <strong>{{currentResultCount}}</strong> de <strong>{{totalResultCount}}</strong> perguntas.
65+
</div>
66+
</div>
67+
68+
</section>
69+
<t4e-filter-drawer
70+
[isOpened]="filterDrawerOpened"
71+
(onClose)="filterDrawerOpened = false"
72+
>
73+
74+
<t4e-filters
75+
title="FAQ's para"
76+
[fields]="stakeholderFields$"
77+
[selectedFilters]="selectedStakeholders$"
78+
(onSelectFields)="selectedStakeholders$.next($event)"
79+
></t4e-filters>
80+
81+
<t4e-filters
82+
title="FAQ's por Plataforma"
83+
[fields]="providerFields$"
84+
[selectedFilters]="selectedProviders$"
85+
(onSelectFields)="selectedProviders$.next($event)"
86+
></t4e-filters>
87+
88+
<div class="results-panel">
89+
<div class="results-panel__title">Resultados</div>
90+
<div class="results-panel__text">Temos <span>{{faqItems.length}}</span> items do seu interesse de acordo com a sua pesquisa</div>
91+
<button class="results-panel__clear-btn" (click)="clearFilters()">
92+
<span>Limpar todos os filtros</span>
93+
<i>
94+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
95+
<path d="M7.45935 6.56118L7.45935 1.2844C7.45935 1.01923 7.27373 0.833617 7.00857 0.833617C6.7434 0.833617 6.55779 1.01923 6.55779 1.2844V6.56118L1.281 6.5877C1.0291 6.57444 0.830221 6.77331 0.84348 7.02522C0.856738 7.27713 1.0291 7.476 1.29426 7.476L6.55779 7.46274L6.55779 12.7395C6.55779 13.0047 6.7434 13.1903 7.00857 13.1903C7.12789 13.1771 7.23396 13.1505 7.32676 13.0577C7.41957 12.9649 7.45935 12.8721 7.45935 12.7395L7.47261 7.44949L12.7494 7.42297C12.8687 7.40971 13.0013 7.35668 13.0676 7.29039C13.1339 7.2241 13.2002 7.10477 13.2002 6.97219C13.2002 6.70702 13.0146 6.52141 12.7494 6.52141L7.45935 6.56118Z" fill="white"/>
96+
</svg>
97+
</i>
98+
</button>
99+
</div>
100+
101+
</t4e-filter-drawer>
102+
</div>

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

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
@import 'theme';
2+
3+
.t4e-faqs-page {
4+
margin-top: 60px;
5+
margin-bottom: 120px;
6+
7+
@include containerPadding();
8+
9+
display: grid;
10+
grid-template-columns: 1fr 3fr;
11+
grid-template-areas: 'filters faq-items';
12+
grid-column-gap: 110px;
13+
14+
@include media-desktop-sm {
15+
grid-column-gap: 55px;
16+
}
17+
18+
@include media-laptop {
19+
grid-template-columns: 1fr;
20+
grid-template-areas: 'content-items';
21+
grid-column-gap: 0;
22+
}
23+
24+
.t4e-content-filters {
25+
grid-area: filters;
26+
27+
::ng-deep {
28+
.filters-wrapper {
29+
margin-bottom: 60px;
30+
31+
&__title {
32+
margin-bottom: 16px;
33+
}
34+
&__content {
35+
.filter-item {
36+
margin-bottom: 8px;
37+
}
38+
}
39+
}
40+
}
41+
42+
.results-panel {
43+
&__title {
44+
@include font('bodyTextLargeHighlight', 130%);
45+
color: $color-text-blue;
46+
letter-spacing: 0.005em;
47+
margin-bottom: 16px;
48+
}
49+
50+
&__text {
51+
@include font('bodyText');
52+
color: $color-text-blue;
53+
margin-bottom: 40px;
54+
55+
span {
56+
@include font('bodyTextHighlight');
57+
}
58+
}
59+
60+
&__clear-btn {
61+
background-color: lighten($color-red, 40%);
62+
display: flex;
63+
box-shadow: 0 5px 5px rgba(75, 93, 104, 0.1);
64+
border-radius: 20px;
65+
padding: 8px 16px;
66+
min-width: 236px;
67+
outline: none;
68+
justify-content: flex-start;
69+
align-items: center;
70+
cursor: pointer;
71+
72+
span {
73+
@include font('button');
74+
color: $color-red;
75+
text-transform: uppercase;
76+
}
77+
78+
i {
79+
background-color: $color-red;
80+
width: 24px;
81+
height: 24px;
82+
border-radius: 50%;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
margin-left: auto;
87+
transform: rotate(45deg);
88+
box-shadow: 0px 5px 5px rgba(75, 93, 104, 0.1);
89+
}
90+
}
91+
}
92+
93+
@include media-laptop {
94+
display: none;
95+
}
96+
}
97+
98+
.t4e-faq-items {
99+
grid-area: faq-items;
100+
101+
display: flex;
102+
flex-direction: column;
103+
104+
.current-results {
105+
display: flex;
106+
justify-content: space-between;
107+
align-items: center;
108+
margin-top: 60px;
109+
110+
.show-more-btn {
111+
@include font('button');
112+
color: #FFF;
113+
background-color: $color-primary-blue;
114+
padding: 16px 24px;
115+
box-shadow: 0 5px 5px rgba(75, 93, 104, 0.1);
116+
border-radius: 50px;
117+
outline: none;
118+
119+
span {
120+
margin-right: 16px;
121+
}
122+
}
123+
124+
.content {
125+
@include font('bodyText');
126+
font-size: 16px;
127+
color: $color-text-blue;
128+
strong {
129+
@include font('bodyTextHighlight');
130+
font-size: 16px;
131+
color: $color-text-blue;
132+
}
133+
}
134+
}
135+
136+
}
137+
138+
.t4e-filter-drawer-opener {
139+
display: none;
140+
grid-column: 1 / span 2;
141+
width: 100%;
142+
margin-bottom: 24px;
143+
144+
@include media-tablet {
145+
grid-column: 1;
146+
}
147+
148+
button {
149+
box-shadow: 0px 5px 5px rgba(75, 93, 104, 0.1);
150+
background: $color-primary-blue;
151+
border-radius: 50px;
152+
padding: 16px 24px;
153+
width: 95%;
154+
display: flex;
155+
justify-content: flex-start;
156+
157+
span {
158+
@include font('button');
159+
color: #FFF;
160+
}
161+
162+
i {
163+
margin-left: auto;
164+
svg {
165+
width: 21px;
166+
height: 8px;
167+
}
168+
}
169+
}
170+
171+
@include media-laptop {
172+
display: flex;
173+
justify-content: center;
174+
align-items: center;
175+
}
176+
}
177+
}

0 commit comments

Comments
 (0)