Skip to content

Commit 21ee20d

Browse files
Added Search function for front.
1 parent 7f3109f commit 21ee20d

17 files changed

+230
-26
lines changed

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ You get bonus points if:
9090
-**WireMock**✅ for testing external APIs. In progress ♻️ **Could not get this working, for now** ♻️.
9191
- [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/)
9292
-**Docker**✅ for easy deployment.
93-
93+
- ⚠️**Although**⚠️, this task should be approached as microservice as possible. This solution have been dockerize under one `.yml` file for sake of simplicity.
9494
- [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)](#)
9595
-**Angular**✅ front end, because i like it!
9696

@@ -141,10 +141,12 @@ docker-compose up --build
141141
# Front end.
142142

143143
<p align="center">
144-
<img id="nordea" src="frontForNow.PNG" width=600>
144+
<img src="frontForNow.PNG" width=600>
145145
</p>
146146

147-
- As being back end developer front end is low priority, but for now it has somewhat working list! Focusing now back end test/docker/running.
147+
- Front end with search function.
148+
149+
- As being back end developer front end is low priority, but for now it has somewhat working list! Focusing now back end tests.
148150

149151
## How to run the front end.
150152

@@ -167,7 +169,8 @@ docker-compose up --build
167169
./mvnw spring-boot::run
168170
```
169171
- To check backend separately. Try `http://localhost:8080/countries/v1/`. For other endpoints check documentation.
170-
## Maven(backup way)
172+
173+
## Maven (backup way).
171174

172175
```bash
173176
cd country-service-backend

country-service-front/package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

country-service-front/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@angular/forms": "^14.0.0",
1818
"@angular/platform-browser": "^14.0.0",
1919
"@angular/platform-browser-dynamic": "^14.0.0",
20-
"@angular/router": "^14.0.0",
20+
"@angular/router": "^14.3.0",
2121
"rxjs": "~7.5.0",
2222
"tslib": "^2.3.0",
2323
"zone.js": "~0.11.4"
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { BodyComponent } from './body/body.component';
4+
import { SearchComponent } from './search/search.component';
5+
6+
const routes : Routes = [
7+
{ path: '', component:BodyComponent },
8+
{ path: 'search/:searchCountry', component: BodyComponent },
9+
];
10+
11+
@NgModule({
12+
imports: [
13+
RouterModule.forRoot(routes)
14+
],
15+
exports: [RouterModule]
16+
})
17+
export class AppRoutingModule { }
Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,47 @@
11
@import url(https://db.onlinewebfonts.com/c/22bbdd53424bef8a0c11fde5ed420f5f?family=NordeaSansSmall-Regular);
22
/*Source: ht tps://www.onlinewebfonts.com/download/22bbdd53424bef8a0c11fde5ed420f5f */
33

4+
5+
46
* {
5-
font-family: "NordeaSansSmall-Regular";
7+
box-sizing: border-box;
8+
color: blue;
9+
}
10+
11+
ul {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-wrap: wrap;
16+
list-style-type: none;
17+
padding: 0;
18+
}
19+
20+
ul li a {
21+
min-height: 4rem;
22+
min-width: 15rem;
23+
display: flex;
24+
margin: 0.5rem;
25+
display: flex;
26+
flex-direction: column;
27+
overflow: hidden;
28+
border: 2px solid black;
29+
border-radius: 10px;
30+
box-shadow: 2px 5px 5px gray;
31+
}
32+
33+
ul li a div {
34+
margin-left: 1.0rem;
35+
margin-right: 1.0rem;
36+
margin-top: .5rem;
37+
}
38+
39+
a {
40+
text-decoration: none;
41+
}
42+
43+
li a:hover {
44+
opacity: 0.5;
45+
cursor: pointer;
46+
647
}
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
<app-header></app-header>
2-
<app-body></app-body>
2+
<router-outlet></router-outlet> <!-- Body will be rendered here -->
3+
<!-- <app-body></app-body> will be rendered inside router-outlet -->
4+

country-service-front/src/app/app.module.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,22 @@ import { AppComponent } from './app.component';
55
import { HeaderComponent } from './header/header.component';
66
import { BodyComponent } from './body/body.component';
77
import { HttpClientModule } from '@angular/common/http';
8+
import { AppRoutingModule } from './app-routing.module';
9+
import { SearchComponent } from './search/search.component';
10+
import { FormsModule } from '@angular/forms';
811

912
@NgModule({
1013
declarations: [
1114
AppComponent,
1215
HeaderComponent,
13-
BodyComponent
16+
SearchComponent,
17+
BodyComponent,
1418
],
1519
imports: [
1620
BrowserModule,
17-
HttpClientModule
21+
HttpClientModule,
22+
FormsModule,
23+
AppRoutingModule,
1824
],
1925
providers: [],
2026
bootstrap: [AppComponent]

country-service-front/src/app/body/body.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<app-search [searchCountry]="searchCountry"></app-search><!-- this is here for sake of it needs to be inside body for Parent-Child route definition. -->
2+
13
<ul>
24
<li *ngFor="let country of countries">
35
<a>
Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Component, OnInit } from '@angular/core';
22
import { CountryService } from '../services/country/country.service';
33
import { Country } from '../types/Country';
4+
import { ActivatedRoute } from '@angular/router';
5+
import { Countries } from '../types/Countries';
6+
import { map } from 'rxjs';
47

58
@Component({
69
selector: 'app-body',
@@ -9,19 +12,46 @@ import { Country } from '../types/Country';
912
})
1013
export class BodyComponent implements OnInit {
1114

12-
countries : Country[] = [];
15+
countries: Country[] = [];
16+
17+
searchCountry : string = ''; //Filtering by search
18+
19+
constructor(private cs: CountryService, private route: ActivatedRoute) { }
20+
1321

14-
constructor(private cs: CountryService) { }
1522

1623
ngOnInit(): void {
17-
this.cs.getAllCountries().subscribe(
18-
(data) => {
19-
console.log(data);
20-
this.countries = data;
21-
},
22-
(error) => {
23-
console.error('Error fetching countries:', error);
24+
25+
26+
this.route.params.subscribe(params => {
27+
28+
console.log(params);
29+
this.searchCountry = params['searchCountry']; //Filtering by search
30+
31+
if (this.searchCountry && this.searchCountry.trim() !== '') {
32+
33+
const searchCountryLower = params['searchCountry'].toLocaleLowerCase();
34+
35+
this.cs.getAllCountries().pipe(
36+
map(countries => countries.filter(country =>
37+
country.name.toLocaleLowerCase().includes(searchCountryLower.toLocaleLowerCase())
38+
))
39+
).subscribe(
40+
(filteredCountries) => {
41+
this.countries = filteredCountries;
42+
console.log('Filtered countries:', this.countries);
43+
},
44+
(error) => {
45+
console.error('Error fetching countries:', error);
46+
}
47+
);
48+
49+
} else {
50+
//call from home page
51+
this.cs.getAllCountries().subscribe(allCountries => {
52+
this.countries = allCountries;
53+
});
2454
}
25-
);
55+
});
2656
}
2757
}

country-service-front/src/app/header/header.component.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import url(https://db.onlinewebfonts.com/c/22bbdd53424bef8a0c11fde5ed420f5f?family=NordeaSansSmall-Regular);
2-
/*Source: https://www.onlinewebfonts.com/download/22bbdd53424bef8a0c11fde5ed420f5f */
31

42
header {
53
background-color: #00005e;
Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { CountryService } from '../services/country/country.service';
4+
import { map } from 'rxjs';
5+
import { Country } from '../types/Country';
26

37
@Component({
48
selector: 'app-header',
59
templateUrl: './header.component.html',
610
styleUrls: ['./header.component.css']
711
})
812
export class HeaderComponent implements OnInit {
9-
10-
constructor() { }
11-
13+
1214
ngOnInit(): void {
1315
}
14-
1516
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
div {
2+
display: flex;
3+
justify-content: center;
4+
align-items: stretch;
5+
margin-top: 3rem;
6+
margin-bottom: 1.5rem;
7+
}
8+
9+
10+
div input {
11+
border-radius: 10rem 0 0 10rem;
12+
border: 3px solid #00005e;
13+
border-right: none;
14+
height: 2.5rem;
15+
width: 20rem;
16+
background-color: white;
17+
color: #00005e;
18+
padding: 1.2rem;
19+
font-size: 1rem;
20+
font-weight: 500;
21+
outline: none;
22+
23+
}
24+
25+
div button {
26+
color: white;
27+
font-size: 1rem;
28+
border-radius: 0 10rem 10rem 0;
29+
border: none;
30+
background-color: #00005e;
31+
opacity: .8;
32+
outline: none;
33+
}
34+
35+
div button:hover {
36+
opacity: 1;
37+
cursor: pointer;
38+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div>
2+
<input type="text" placeholder="Search Country" [value]="searchCountry" [(ngModel)]="searchCountry">
3+
<button (click)="search()"> Search</button>
4+
</div>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SearchComponent } from './search.component';
4+
5+
describe('SearchComponent', () => {
6+
let component: SearchComponent;
7+
let fixture: ComponentFixture<SearchComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ SearchComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(SearchComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { ActivatedRoute, Router } from '@angular/router';
3+
import { Action } from 'rxjs/internal/scheduler/Action';
4+
5+
6+
@Component({
7+
selector: 'app-search',
8+
templateUrl: './search.component.html',
9+
styleUrls: ['./search.component.css']
10+
})
11+
export class SearchComponent implements OnInit {
12+
13+
@Input() searchCountry : string = ''; //Input form parent. Route won't send to multiple component.
14+
15+
constructor(private route : ActivatedRoute, private router : Router) { }
16+
17+
ngOnInit(): void {
18+
this.route.params.subscribe(params => {
19+
if (params['searchCountry']) {
20+
this.searchCountry = params['searchCountry'];
21+
}
22+
})
23+
}
24+
25+
search() : void {
26+
if(this.searchCountry)
27+
{
28+
this.router.navigateByUrl('/search/' + this.searchCountry);
29+
} else
30+
{
31+
this.router.navigateByUrl('/search/');
32+
}
33+
34+
}
35+
36+
}

country-service-front/src/styles.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
/* You can add global styles to this file, and also import other style files */
22

3+
* {
4+
font-family: "NordeaSansSmall-Regular";
5+
}

frontForNow.PNG

31.8 KB
Loading

0 commit comments

Comments
 (0)