Stephenadams/codingchallenge

paymentsense-coding-challenge-website/src/app/app-routing.module.ts

@@ -1,10 +1,34 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {CountryListingComponent} from './countries/country-listing.component';
+import {CountryDetailsComponent} from './country/country-details.component';
+import {ResultsNotFoundComponent} from './results-not-found/results-not-found.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'countries',
+    pathMatch: 'full'
+  },
+  {
+    path: 'countries',
+    component: CountryListingComponent
+  }, {
+    path: 'country/:name',
+    component: CountryDetailsComponent,
+  }, {
+    path: 'noresults',
+    component: ResultsNotFoundComponent
+  },
+  {
+    path: '**',
+    component: CountryListingComponent
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

paymentsense-coding-challenge-website/src/app/app.component.html

@@ -1,11 +1,5 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <img width="50%" alt="Paymentsense Logo" src="../assets/paymentsense-logo.svg">
-  <h1>
-    {{ title }}
-  </h1>
-  <h2>... Paymentsense Coding Challenge API is <fa-icon [icon]=paymentsenseCodingChallengeApiActiveIcon
-                                                        [styles]="{ 'stroke': paymentsenseCodingChallengeApiActiveIconColour, 'color': paymentsenseCodingChallengeApiActiveIconColour }"></fa-icon> ...</h2>
+<app-nav-bar [title]="title"></app-nav-bar>
+<div class="container">
+  <router-outlet></router-outlet>
 </div>
-
-<router-outlet></router-outlet>

paymentsense-coding-challenge-website/src/app/app.component.scss

@@ -0,0 +1,5 @@
+.container {
+  margin-left: 10%;
+  margin-right: 10%;
+  text-align:center
+}

paymentsense-coding-challenge-website/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { faThumbsUp, faThumbsDown } from '@fortawesome/free-regular-svg-icons';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   public faThumbsUp = faThumbsUp;
@@ -16,22 +16,31 @@ export class AppComponent {
   public paymentsenseCodingChallengeApiActiveIcon = this.faThumbsDown;
   public paymentsenseCodingChallengeApiActiveIconColour = 'red';
 
-  constructor(private paymentsenseCodingChallengeApiService: PaymentsenseCodingChallengeApiService) {
-    paymentsenseCodingChallengeApiService.getHealth().pipe(take(1))
-    .subscribe(
-      apiHealth => {
-        this.paymentsenseCodingChallengeApiIsActive = apiHealth === 'Healthy';
-        this.paymentsenseCodingChallengeApiActiveIcon = this.paymentsenseCodingChallengeApiIsActive
-          ? this.faThumbsUp
-          : this.faThumbsUp;
-        this.paymentsenseCodingChallengeApiActiveIconColour = this.paymentsenseCodingChallengeApiIsActive
-          ? 'green'
-          : 'red';
-      },
-      _ => {
-        this.paymentsenseCodingChallengeApiIsActive = false;
-        this.paymentsenseCodingChallengeApiActiveIcon = this.faThumbsDown;
-        this.paymentsenseCodingChallengeApiActiveIconColour = 'red';
-      });
+  constructor(
+    private paymentsenseCodingChallengeApiService: PaymentsenseCodingChallengeApiService
+  ) {
+    paymentsenseCodingChallengeApiService
+      .getHealth()
+      .pipe(take(1))
+      .subscribe(
+        (apiHealth) => {
+          console.log(apiHealth);
+
+          this.paymentsenseCodingChallengeApiIsActive = apiHealth === 'Healthy';
+          this.paymentsenseCodingChallengeApiActiveIcon = this
+            .paymentsenseCodingChallengeApiIsActive
+            ? this.faThumbsUp
+            : this.faThumbsUp;
+          this.paymentsenseCodingChallengeApiActiveIconColour = this
+            .paymentsenseCodingChallengeApiIsActive
+            ? 'green'
+            : 'red';
+        },
+        (_) => {
+          this.paymentsenseCodingChallengeApiIsActive = false;
+          this.paymentsenseCodingChallengeApiActiveIcon = this.faThumbsDown;
+          this.paymentsenseCodingChallengeApiActiveIconColour = 'red';
+        }
+      );
   }
 }

paymentsense-coding-challenge-website/src/app/app.module.ts

@@ -7,17 +7,36 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { PaymentsenseCodingChallengeApiService } from './services';
 import { HttpClientModule } from '@angular/common/http';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {CountryListingComponent} from './countries/country-listing.component';
+import {MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatPaginatorModule} from '@angular/material';
+import { CountryDetailsComponent } from './country/country-details.component';
+import { LoaderComponent } from './shared/loader.component';
+import { NavBarComponent } from './shared/nav-bar.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import { ResultsNotFoundComponent } from './results-not-found/results-not-found.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CountryListingComponent,
+    CountryDetailsComponent,
+    LoaderComponent,
+    NavBarComponent,
+    ResultsNotFoundComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    MatListModule,
+    MatPaginatorModule,
+    MatCardModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   providers: [PaymentsenseCodingChallengeApiService],
   bootstrap: [AppComponent]

paymentsense-coding-challenge-website/src/app/countries/country-listing.component.html

@@ -0,0 +1,15 @@
+<div class="mat-card" *ngIf="!loading">
+  <div class="mat-card-title">
+    List of All Countries
+  </div>
+  <mat-list *ngFor="let country of listOfCountries">
+    <mat-list-item><img class="flag" [alt]="country.name" [src]="country.flag"/> &nbsp;
+      <a [routerLink]="['/country',  country.name ]">{{country.name}}</a>
+    </mat-list-item>
+  </mat-list>
+  <mat-paginator [length]="totalListOfCountries.length" [pageSize]="10" [pageSizeOptions]="[5,10,15,20]"
+                 (page)="pageChangeHandler($event)">
+  </mat-paginator>
+</div>
+<app-loader *ngIf="loading"></app-loader>
+

paymentsense-coding-challenge-website/src/app/countries/country-listing.component.scss

@@ -0,0 +1,4 @@
+.flag {
+  width: 1rem;
+  height: 1rem;
+}

paymentsense-coding-challenge-website/src/app/countries/country-listing.component.spec.ts

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

paymentsense-coding-challenge-website/src/app/countries/country-listing.component.ts

@@ -0,0 +1,54 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {CountriesService} from '../services';
+import {Country} from '../services/models/country';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-country-listing',
+  templateUrl: './country-listing.component.html',
+  styleUrls: ['./country-listing.component.scss']
+})
+export class CountryListingComponent implements OnInit, OnDestroy {
+
+  destroy$ = new Subject<boolean>();
+  totalListOfCountries: Country[];
+  listOfCountries: Country[];
+  loading = false;
+
+  constructor(private countriesService: CountriesService) {
+  }
+
+  ngOnInit() {
+    this.fetchAllCountries();
+    this.loading = true;
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  fetchAllCountries(): void {
+    this.countriesService.getAllCountries().pipe(takeUntil(this.destroy$)).subscribe(listOfCountries => {
+      this.totalListOfCountries = listOfCountries;
+      this.listOfCountries = this.pageThroughCountries(0, 10);
+      this.loading = false;
+    });
+  }
+
+  showCountryFullDetails(countryName: string): void {
+    console.log(countryName);
+  }
+
+  pageThroughCountries(from: number, to: number): Country[] {
+    return this.totalListOfCountries.slice(from, to);
+  }
+
+  pageChangeHandler($event): void {
+    const from = $event.pageIndex * $event.pageSize;
+    const to = from + $event.pageSize;
+    this.listOfCountries = this.pageThroughCountries(from, to);
+  }
+
+}

paymentsense-coding-challenge-website/src/app/country/country-details.component.html

@@ -0,0 +1,16 @@
+<mat-card class="countryDetails" *ngIf="this.selectedCountry">
+  <mat-card-title>{{ this.selectedCountry.name}}</mat-card-title>
+  <mat-card-content>
+    <p>Capital City: {{this.selectedCountry.capital}}</p>
+    <p>Population: {{this.selectedCountry.population}}</p>
+    <p>Language: {{this.selectedCountry.languages[0].name}}</p>
+    <p>Currencies: {{this.selectedCountry.currency}}</p>
+    <p>Bordering Countries: {{this.selectedCountry.borders}}</p>
+    <p>Time Zones: {{this.selectedCountry.timezones}}</p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button (click)="goToFullListing()">Back to Full List</button>
+  </mat-card-actions>
+</mat-card>
+
+<app-loader *ngIf="!this.selectedCountry"></app-loader>

paymentsense-coding-challenge-website/src/app/country/country-details.component.scss

@@ -0,0 +1,3 @@
+.countryDetails {
+  text-align: left;
+}

paymentsense-coding-challenge-website/src/app/country/country-details.component.spec.ts

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

paymentsense-coding-challenge-website/src/app/country/country-details.component.ts

@@ -0,0 +1,48 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {CountriesService} from '../services';
+import {ActivatedRoute, Router} from '@angular/router';
+import {switchMap, takeUntil} from 'rxjs/operators';
+import {Observable, Subject} from 'rxjs';
+import {Country} from '../services/models/country';
+
+@Component({
+  selector: 'app-country-details',
+  templateUrl: './country-details.component.html',
+  styleUrls: ['./country-details.component.scss']
+})
+export class CountryDetailsComponent implements OnInit, OnDestroy {
+  country$ = new Observable<Country>();
+  destroy$ = new Subject<boolean>();
+  selectedCountryName: string;
+  selectedCountry: Country;
+
+  constructor(private countriesService: CountriesService, private route: ActivatedRoute, private router: Router) {
+  }
+
+  ngOnInit() {
+    this.country$ = this.route.paramMap.pipe(
+      switchMap(params => {
+        this.selectedCountryName = params.get('name');
+        return this.countriesService.filterCountryByName(this.selectedCountryName);
+      })
+    );
+
+    this.getSelectedCountryDetails();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  getSelectedCountryDetails(): void {
+    this.country$.pipe(takeUntil(this.destroy$)).subscribe(country => {
+      this.selectedCountry = country;
+    });
+  }
+
+  goToFullListing(): void {
+    this.router.navigate(['/countries']);
+  }
+
+}

paymentsense-coding-challenge-website/src/app/results-not-found/results-not-found.component.html

@@ -0,0 +1,4 @@
+<div>
+  <h3>Sorry, no results found.</h3>
+</div>
+<app-country-listing></app-country-listing>

paymentsense-coding-challenge-website/src/app/results-not-found/results-not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-results-not-found',
+  templateUrl: './results-not-found.component.html',
+  styleUrls: ['./results-not-found.component.scss']
+})
+export class ResultsNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

paymentsense-coding-challenge-website/src/app/services/countries.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CountriesService } from './countries.service';
+
+describe('CountriesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: CountriesService = TestBed.get(CountriesService);
+    expect(service).toBeTruthy();
+  });
+});