Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 3d48ae7

Browse files
luiskcs89luiskcs89
committed
feat(app-search-results): initial commit of search header
1 parent a696bc6 commit 3d48ae7

File tree

5 files changed

+200
-0
lines changed

5 files changed

+200
-0
lines changed

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.search-results {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
z-index: 1000000;
6+
width: 100%;
7+
height: 100%;
8+
9+
.header {
10+
position: fixed;
11+
height: 75px;
12+
padding: 0 16px;
13+
background-color: #ffffff;
14+
margin: 0;
15+
z-index: 1;
16+
width: 100%;
17+
}
18+
19+
.results {
20+
margin: 76px 0 0 0;
21+
}
22+
23+
.bkg {
24+
background-color: rgba(41, 42, 45, 0.7);
25+
opacity: 0.95;
26+
position: fixed;
27+
top: 0;
28+
left: 0;
29+
width: 100%;
30+
height: 100%;
31+
}
32+
33+
.blog-search-group {
34+
display: flex;
35+
}
36+
37+
.blog-search-icon {
38+
font-size: 37px;
39+
margin-left: 50px;
40+
41+
@include media-breakpoint-down(sm) {
42+
margin-left: 0;
43+
}
44+
}
45+
46+
#blog-search {
47+
color: #375659;
48+
font-family: Muli;
49+
font-size: 29px;
50+
font-weight: 700;
51+
letter-spacing: 1.45px;
52+
line-height: 35px;
53+
border: 0;
54+
margin-left: 25px;
55+
margin-right: 25px;
56+
width: 100%;
57+
}
58+
59+
.blog-close-icon {
60+
font-size: 37px;
61+
margin-right: 50px;
62+
margin-left: auto;
63+
64+
@include media-breakpoint-down(sm) {
65+
margin-right: 0;
66+
}
67+
}
68+
}

‎src/components/app-search-results/app-search-results.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { render } from '@stencil/core/testing';
2+
3+
import { AppSearchResults } from './app-search-results';
4+
5+
describe('app', () => {
6+
it('should build', () => {
7+
expect(new AppSearchResults()).toBeTruthy();
8+
});
9+
10+
describe('rendering', () => {
11+
beforeEach(async () => {
12+
await render({
13+
components: [AppSearchResults],
14+
html: '<app-search-results></app-search-results>',
15+
});
16+
});
17+
});
18+
});

‎src/components/app-search-results/app-search-results.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Component, h, State } from '@stencil/core';
2+
import { BlogPost } from '../../model/blog-post.model';
3+
import { BlogMeta } from '../../model/blog-meta.model';
4+
import * as Fetch from '../../shared/fetch-handler';
5+
6+
@Component({
7+
tag: 'app-search-results',
8+
styleUrl: 'app-search-results.scss',
9+
})
10+
export class AppSearchResults {
11+
// Use searchQuery to keep track of whether or not search is being used
12+
@State() searchQuery: string = '';
13+
@State() allBlogPosts: BlogPost[] = [];
14+
@State() searchPostsData: BlogPost[] = [];
15+
@State() searchNumberOfPages: number = 0;
16+
@State() searchCurrentPage: number = 1;
17+
@State() searchMeta: BlogMeta;
18+
@State() searchIsError: boolean = false;
19+
@State() searchIsLoading: boolean = false;
20+
pageSize = 3;
21+
22+
handleSearch(query) {
23+
this.searchQuery = query;
24+
if (this.searchQuery) {
25+
this.getSearchPosts(1);
26+
} else {
27+
this.clearSearch();
28+
}
29+
}
30+
31+
clearSearch() {
32+
this.searchQuery = '';
33+
this.searchPostsData = [];
34+
this.searchMeta = null;
35+
this.searchNumberOfPages = 0;
36+
this.searchCurrentPage = 1;
37+
}
38+
39+
getSearchPosts(page) {
40+
this.searchIsLoading = true;
41+
Fetch.fetchSearchPosts(this.searchQuery, page, this.pageSize).then(resp => {
42+
if (resp.data) {
43+
this.searchPostsData = resp.data;
44+
this.searchMeta = resp.meta;
45+
46+
this.searchNumberOfPages = Math.ceil(this.searchPostsData.length / this.pageSize);
47+
this.searchCurrentPage = page;
48+
49+
console.log(this.searchPostsData);
50+
} else {
51+
this.searchIsError = true;
52+
}
53+
});
54+
this.searchIsLoading = false;
55+
}
56+
57+
render() {
58+
return (
59+
<div class="search-results">
60+
<div class="row header">
61+
<div class="col-12">
62+
<div class="blog-search-group">
63+
<span class="blog-search-icon">
64+
<span class="fa fa-search" />
65+
</span>
66+
<input id="blog-search" type="search" class="blog-search-input" placeholder="Search" onKeyUp={e => this.handleSearch(e.target['value'])} />
67+
<span class="blog-close-icon">
68+
<span class="far fa-times-circle" />
69+
</span>
70+
</div>
71+
</div>
72+
</div>
73+
<div class="row results">
74+
<div class="col-12">Results</div>
75+
</div>
76+
<div class="bkg" />
77+
</div>
78+
);
79+
}
80+
}

‎src/components/app-search-results/readme.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# app-cta
2+
3+
<!-- Auto Generated Below -->
4+
5+
6+
## Properties
7+
8+
#### hideButton
9+
10+
boolean
11+
12+
13+
#### linkUrl
14+
15+
string
16+
17+
18+
## Attributes
19+
20+
#### hide-button
21+
22+
boolean
23+
24+
25+
#### link-url
26+
27+
string
28+
29+
30+
31+
----------------------------------------------
32+
33+
*Built with [StencilJS](https://stenciljs.com/)*

‎src/pages/app-home/app-home.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class AppHome {
9393
const featuredPost = this.renderFeaturedPost(this.featuredPost, this.featuredIsLoading, this.featuredIsError);
9494
return (
9595
<div class="home">
96+
<app-search-results />
9697
{/* header - hero */}
9798
<header class="hero">
9899
<div class="container">

0 commit comments

Comments
 (0)