Added Search function for front.

Author: developersCradle

README.md

@@ -90,7 +90,7 @@ You get bonus points if:
             - ✅**WireMock**✅ for testing external APIs. In progress ♻️ **Could not get this working, for now** ♻️.
 - [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/) 
     - ✅**Docker**✅ for easy deployment. 
-
+        - ⚠️**Although**⚠️, this task should be approached as microservice as possible. This solution have been dockerize under one `.yml` file for sake of simplicity. 
 - [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)](#)
     - ✅**Angular**✅  front end, because i like it!
 
@@ -141,10 +141,12 @@ docker-compose up --build
 # Front end.
 
 <p align="center">
-    <img id="nordea" src="frontForNow.PNG" width=600>
+    <img src="frontForNow.PNG" width=600>
 </p>
 
-- 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.
+- Front end with search function.
+
+- As being back end developer front end is low priority, but for now it has somewhat working list! Focusing now back end tests.
 
 ## How to run the front end.
 
@@ -167,7 +169,8 @@ docker-compose up --build
  ./mvnw spring-boot::run
 ```
  - To check backend separately. Try `http://localhost:8080/countries/v1/`. For other endpoints check documentation.
-## Maven(backup way)
+
+## Maven (backup way).
 
 ```bash
 cd country-service-backend

country-service-front/package-lock.json

@@ -17,7 +17,7 @@
     "@angular/forms": "^14.0.0",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/router": "^14.0.0",
+    "@angular/router": "^14.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

country-service-front/package.json

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BodyComponent } from './body/body.component';
+import { SearchComponent } from './search/search.component';
+
+const routes : Routes = [
+  { path: '', component:BodyComponent },
+  { path: 'search/:searchCountry', component: BodyComponent },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

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

@@ -1,6 +1,47 @@
 @import url(https://db.onlinewebfonts.com/c/22bbdd53424bef8a0c11fde5ed420f5f?family=NordeaSansSmall-Regular); 
 /*Source: ht tps://www.onlinewebfonts.com/download/22bbdd53424bef8a0c11fde5ed420f5f */
 
+
+
 * {
-    font-family: "NordeaSansSmall-Regular"; 
+    box-sizing: border-box;
+    color: blue;
+}
+
+ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0;
+}
+
+ul li a {
+    min-height: 4rem;
+    min-width: 15rem;
+    display: flex;
+    margin: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 2px solid black;
+    border-radius: 10px;
+    box-shadow: 2px 5px 5px gray;
+}
+
+ul li a div {
+    margin-left: 1.0rem;
+    margin-right: 1.0rem;
+    margin-top: .5rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+li a:hover {
+    opacity: 0.5;
+    cursor: pointer;
+    
 }

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

@@ -1,2 +1,4 @@
 <app-header></app-header>
-<app-body></app-body>
+<router-outlet></router-outlet> <!-- Body will be rendered here  -->
+<!-- <app-body></app-body> will be rendered inside router-outlet -->
+

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

@@ -5,16 +5,22 @@ import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { BodyComponent } from './body/body.component';
 import { HttpClientModule } from '@angular/common/http';
+import { AppRoutingModule } from './app-routing.module';
+import { SearchComponent } from './search/search.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    BodyComponent
+    SearchComponent,
+    BodyComponent,
   ],
   imports: [
     BrowserModule,
-    HttpClientModule 
+    HttpClientModule,
+    FormsModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,3 +1,5 @@
+ <app-search [searchCountry]="searchCountry"></app-search><!-- this is here for sake of it needs to be inside body for Parent-Child route definition.  -->
+
 <ul>
     <li *ngFor="let country of countries">
         <a>

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

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { CountryService } from '../services/country/country.service';
 import { Country } from '../types/Country';
+import { ActivatedRoute } from '@angular/router';
+import { Countries } from '../types/Countries';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-body',
@@ -9,19 +12,46 @@ import { Country } from '../types/Country';
 })
 export class BodyComponent implements OnInit {
 
-  countries : Country[] = [];
+  countries: Country[] = [];
+
+  searchCountry : string = ''; //Filtering by search
+
+  constructor(private cs: CountryService, private route: ActivatedRoute) { }
+
 
-  constructor(private cs: CountryService) { }
 
   ngOnInit(): void {
-    this.cs.getAllCountries().subscribe(
-      (data) => {
-        console.log(data);
-        this.countries = data;
-      },
-      (error) => {
-        console.error('Error fetching countries:', error);
+
+
+    this.route.params.subscribe(params => {
+
+      console.log(params);
+      this.searchCountry = params['searchCountry']; //Filtering by search
+
+      if (this.searchCountry && this.searchCountry.trim() !== '') {
+
+        const searchCountryLower = params['searchCountry'].toLocaleLowerCase();
+
+        this.cs.getAllCountries().pipe(
+          map(countries => countries.filter(country =>
+            country.name.toLocaleLowerCase().includes(searchCountryLower.toLocaleLowerCase())
+          ))
+        ).subscribe(
+          (filteredCountries) => {
+            this.countries = filteredCountries;
+            console.log('Filtered countries:', this.countries);
+          },
+          (error) => {
+            console.error('Error fetching countries:', error);
+          }
+        );
+
+      } else {
+        //call from home page
+        this.cs.getAllCountries().subscribe(allCountries => {
+          this.countries = allCountries;
+        });
       }
-    );
+    });
   }
 }

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

@@ -1,5 +1,3 @@
-@import url(https://db.onlinewebfonts.com/c/22bbdd53424bef8a0c11fde5ed420f5f?family=NordeaSansSmall-Regular); 
-/*Source: https://www.onlinewebfonts.com/download/22bbdd53424bef8a0c11fde5ed420f5f */
 
 header {
     background-color: #00005e;

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

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CountryService } from '../services/country/country.service';
+import { map } from 'rxjs';
+import { Country } from '../types/Country';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
-
-  constructor() { }
-
+  
   ngOnInit(): void {
   }
-
 }

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

@@ -0,0 +1,38 @@
+div {
+    display: flex;
+    justify-content: center;
+    align-items: stretch; 
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+}
+
+
+div input {
+     border-radius: 10rem 0 0 10rem; 
+     border: 3px solid #00005e; 
+     border-right: none;
+     height: 2.5rem;
+     width: 20rem;
+     background-color: white;
+     color: #00005e; 
+     padding: 1.2rem;
+     font-size: 1rem;
+     font-weight: 500;
+     outline: none;
+
+}
+
+div button {
+    color: white;
+    font-size: 1rem;
+    border-radius: 0 10rem 10rem 0;
+    border: none;
+    background-color: #00005e;
+    opacity: .8;
+    outline: none;
+}
+
+div button:hover {
+    opacity: 1;
+    cursor: pointer;
+}

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

@@ -0,0 +1,4 @@
+<div>
+    <input type="text" placeholder="Search Country" [value]="searchCountry" [(ngModel)]="searchCountry">
+    <button (click)="search()"> Search</button>
+</div> 

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

country-service-front/src/app/search/search.component.spec.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Action } from 'rxjs/internal/scheduler/Action';
+
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent implements OnInit {
+  
+  @Input() searchCountry : string = ''; //Input form parent. Route won't send to multiple component.
+  
+  constructor(private route : ActivatedRoute, private router : Router) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      if (params['searchCountry']) {
+        this.searchCountry = params['searchCountry'];
+      }
+    })
+  }
+
+  search() : void {
+    if(this.searchCountry)
+    {
+      this.router.navigateByUrl('/search/' + this.searchCountry);
+    } else
+    {
+      this.router.navigateByUrl('/search/');
+    }
+
+  }
+
+}

country-service-front/src/app/search/search.component.ts

@@ -1,2 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
+* {
+    font-family: "NordeaSansSmall-Regular"; 
+}