Added basic version of popup, angular material UI, added type, refactoring.

Author: developersCradle

README.md

@@ -144,9 +144,9 @@ docker-compose up --build
     <img src="frontForNow.PNG" width=600>
 </p>
 
-- Front end with search function.
+- Front end with search function and clicking will show country with relevant information.
 
-- As being back end developer front end is low priority, but for now it has somewhat working list! Focusing now back end tests.
+- ⚠️make error page.⚠️
 
 ## How to run the front end.
 

country-service-front/angular.json

@@ -23,6 +23,7 @@
               "src/assets"
             ],
             "styles": [
+              "src/custom-theme.scss",
               "src/styles.css"
             ],
             "scripts": []

country-service-front/package-lock.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.0.0",
+    "@angular/cdk": "~13.0.0-next.7+89.sha-a662737",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
     "@angular/forms": "^14.0.0",
+    "@angular/material": "~13.0.0-next.7+89.sha-a662737",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.3.0",
@@ -35,4 +37,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
+}

country-service-front/package.json

@@ -8,6 +8,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { SearchComponent } from './search/search.component';
 import { FormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog'; // Correct import for MatDialogModule
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Required for animations
 
 @NgModule({
   declarations: [
@@ -21,6 +23,8 @@ import { FormsModule } from '@angular/forms';
     HttpClientModule,
     FormsModule,
     AppRoutingModule,
+    MatDialogModule,
+    BrowserAnimationsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -14,7 +14,7 @@ ul {
 }
 
 ul li a {
-    min-height: 4rem;
+    min-height: 4.5rem;
     min-width: 15rem;
     display: flex;
     margin: 0.5rem;

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

@@ -2,7 +2,7 @@
 
 <ul>
     <li *ngFor="let country of countries">
-        <a>
+        <a (click)="openDialog(country)">
             <div><b>{{country.name}}</b></div>
             <div>{{country.country_code}}</div>
         </a>

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

@@ -2,8 +2,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 { MatDialog } from '@angular/material/dialog'; // Import MatDialog service
 import { map } from 'rxjs';
+import { CountryDialogComponent } from '../country-dialog-component/country-dialog.component';
 
 @Component({
   selector: 'app-body',
@@ -16,16 +17,14 @@ export class BodyComponent implements OnInit {
 
   searchCountry : string = ''; //Filtering by search
 
-  constructor(private cs: CountryService, private route: ActivatedRoute) { }
-
-
+  constructor(private cs: CountryService, private route: ActivatedRoute, private dialog: MatDialog  ) { }
 
   ngOnInit(): void {
 
-
     this.route.params.subscribe(params => {
 
       console.log(params);
+
       this.searchCountry = params['searchCountry']; //Filtering by search
 
       if (this.searchCountry && this.searchCountry.trim() !== '') {
@@ -47,11 +46,25 @@ export class BodyComponent implements OnInit {
         );
 
       } else {
-        //call from home page
+        //call to get all countries
         this.cs.getAllCountries().subscribe(allCountries => {
           this.countries = allCountries;
         });
       }
     });
   }
+
+  openDialog(country: Country): void {
+    var countryName = country.name;
+    this.cs.getInformationAboutCountry(countryName).subscribe( //Click happened
+      (data) => {
+        this.dialog.open(CountryDialogComponent, {
+          data: data 
+        });
+      },
+      (error) => {
+        console.error('Error fetching country data', error);
+      }
+    );
+  }
 }

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

@@ -0,0 +1,9 @@
+<div mat-dialog-content>
+    <div>
+      <img [src]="data.flag_file_url" alt="Flag of {{ data.name }}" style="width: 20rem; height: auto;">
+    </div>
+    <p><strong>Country Name:</strong> {{ data.name }}</p>
+    <p><strong>Country Code:</strong> {{ data.country_code }}</p>
+    <p><strong>Capital:</strong> {{ data.capital }}</p>
+    <p><strong>Population:</strong> {{ data.population}}</p>
+  </div>

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

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

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

@@ -0,0 +1,21 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-country-dialog-component',
+  templateUrl: './country-dialog-component.component.html',
+  styleUrls: ['./country-dialog-component.component.css']
+})
+export class CountryDialogComponent implements OnInit {
+
+  constructor( public dialogRef: MatDialogRef<CountryDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any ) {} //Country data comes here
+    
+    ngOnInit(): void {
+    }
+
+    onClose(): void {
+    this.dialogRef.close(); 
+  }
+}

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

@@ -6,12 +6,11 @@ div {
     margin-bottom: 1.5rem;
 }
 
-
 div input {
      border-radius: 10rem 0 0 10rem; 
      border: 3px solid #00005e; 
      border-right: none;
-     height: 2.5rem;
+     height: 1.0rem;
      width: 20rem;
      background-color: white;
      color: #00005e; 

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

@@ -10,7 +10,7 @@ import { Action } from 'rxjs/internal/scheduler/Action';
 })
 export class SearchComponent implements OnInit {
 
-  @Input() searchCountry : string = ''; //Input form parent. Route won't send to multiple component.
+  @Input() searchCountry : string = ''; //Input form parent. Route won't send params to multiple component, so we catch it here.
 
   constructor(private route : ActivatedRoute, private router : Router) { }
 

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

@@ -1,24 +1,32 @@
 import { Injectable } from '@angular/core';
-import { Countries } from 'src/app/types/Countries';
 import { Country } from 'src/app/types/Country';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { CountryInformation } from 'src/app/types/CountryInformation';
 
 
 @Injectable({
   providedIn: 'root'
 })
 export class CountryService {
 
-  private apiUrl = environment.apiUrl;
+  private getAllCountriesUrl = environment.getCountriesBaseUrl;
+  private getInformationAboutCountryUrl = environment.getCountriesBaseUrl;
 
   constructor(private http: HttpClient) {
   }
 
+
+  //TODO(Heikki) Ensure exactly what’s being returned and if it’s in then the expected form
+  getInformationAboutCountry(countryCode: string): Observable<CountryInformation> {
+    const url = this.getInformationAboutCountryUrl + `${countryCode}`;
+    return this.http.get<CountryInformation>(url);
+  }
+
   //TODO(Heikki) Ensure exactly what’s being returned and if it’s in then the expected form
    getAllCountries(): Observable<Country[]> {
-    return this.http.get<{ countries: Country[] }>(this.apiUrl).pipe(
+    return this.http.get<{ countries: Country[] }>(this.getAllCountriesUrl).pipe(
     map(response => response.countries)); //For now, unwrap the result into Country[]
   }
 

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

@@ -0,0 +1,7 @@
+export interface CountryInformation {
+  name: string;
+  country_code: string;
+  capital: string;
+  population: number;
+  flag_file_url: string;
+}

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

@@ -0,0 +1,34 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$country-service-front-primary: mat.define-palette(mat.$indigo-palette);
+$country-service-front-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$country-service-front-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$country-service-front-theme: mat.define-light-theme((
+  color: (
+    primary: $country-service-front-primary,
+    accent: $country-service-front-accent,
+    warn: $country-service-front-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($country-service-front-theme);