Observables map subscribe initial commit

cartui/src/app/app.component.html

@@ -25,6 +25,7 @@
   </nav>
   <div class="py-5 text-center opaque-overlay w-100">
 
+    <app-user-detail></app-user-detail>
     <router-outlet></router-outlet>
   </div>
 </div>

cartui/src/app/app.module.ts

@@ -4,17 +4,27 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing/app-routing.module';
+import { UserDetailComponent } from './user-detail/user-detail.component';
+import { UserDetailService } from './services/user-detail.service';
+import { HttpModule } from '@angular/http';
+import {HttpParams, HttpClient,  HttpClientModule} from '@angular/common/http';
+import { UserAddressComponent } from './user-address/user-address.component';
+
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    UserDetailComponent,
+    UserAddressComponent
   ],
   imports: [
     BrowserModule,
+    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [UserDetailService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

cartui/src/app/interface/address.ts

@@ -0,0 +1,9 @@
+export interface Address {    
+        id: number;
+        apartmentName: string;
+        streetName: string;
+        city: string;
+        state: string;
+        pinCode: number;
+
+}

cartui/src/app/interface/user.ts

@@ -0,0 +1,13 @@
+import { Address } from "./address";
+
+export interface User {
+        id: number;
+        customerName: string;
+        customerAge: number;
+        membershipId: number;
+        customerPhoneNum: number;
+        altPhoneNum: number;
+        address: Address[];
+
+
+}

cartui/src/app/services/user-detail.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { UserDetailService } from './user-detail.service';
+
+describe('UserDetailService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserDetailService]
+    });
+  });
+
+  it('should be created', inject([UserDetailService], (service: UserDetailService) => {
+    expect(service).toBeTruthy();
+  }));
+});

cartui/src/app/services/user-detail.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+import {  Response} from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { map, catchError } from 'rxjs/operators';
+import {HttpParams, HttpClient} from '@angular/common/http';
+import 'rxjs/add/observable/of';
+import { User } from '../interface/user';
+
+
+@Injectable()
+export class UserDetailService {
+
+  private _userServiceURL = environment.customersURL;
+  constructor(private _http: HttpClient) { }
+
+  // explicitly declare what is the JSON type and then Type cast
+  public getCustomerDetails(userId: number): Observable<User> {   
+    const options =  { params: new HttpParams().set('id', userId+"")};
+    return this._http.get(this._userServiceURL, options)
+    .pipe(
+      map(res => {
+        // JSON is assumed by default - typecast
+        return (<User>(res));
+      }),
+      catchError(error =>  {
+      console.log('Error',error);
+        return Observable.of(null);}
+      )
+    );
+  }
+}

cartui/src/app/user-address/user-address.component.css

@@ -0,0 +1,11 @@
+hr { 
+        display: block;
+        height: 1px;
+        border: 1px;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        margin: 1em 0;
+        border-top: 1px solid black;
+        border-width: 1px;
+    }
+

cartui/src/app/user-address/user-address.component.html

@@ -0,0 +1,31 @@
+<div class="card">
+    <div class="card-body">
+   <div *ngFor = "let address of address">
+  <dl class="row">
+
+    <dt class="col-sm-3">Apartment Name :</dt>
+    <dd class="col-sm-9">{{address.apartmentName}}</dd>
+
+    <dt class="col-sm-3">Street Name :</dt>
+    <dd class="col-sm-9">{{address.streetName}}</dd>
+
+    <dt class="col-sm-3">City :</dt>
+    <dd class="col-sm-9">{{address.city}}</dd>
+
+    <dt class="col-sm-3">State :</dt>
+    <dd class="col-sm-9">{{address.state}}</dd>
+
+    <dt class="col-sm-3">Zip Code :</dt>
+    <dd class="col-sm-9">{{address.pinCode}}</dd>
+
+    </dl>
+    <hr/>
+  </div>   
+
+   </div>
+   </div> 
+
+
+
+
+

cartui/src/app/user-address/user-address.component.spec.ts

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

cartui/src/app/user-address/user-address.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Address } from '../interface/address';
+
+@Component({
+  selector: 'app-user-address',
+  templateUrl: './user-address.component.html',
+  styleUrls: ['./user-address.component.css']
+})
+export class UserAddressComponent implements OnInit {
+
+  @Input("address") address: Address[];
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

cartui/src/app/user-detail/user-detail.component.html

@@ -0,0 +1,32 @@
+<!-- <div class = "col col-md-6"> -->
+<h2>Your Account</h2>
+<div *ngIf= "user">
+    <dl class="row">
+
+    <dt class="col-sm-3">Name :</dt>
+    <dd class="col-sm-9">{{user.customerName}}</dd>
+
+    <dt class="col-sm-3">Primary Phone Number :</dt>
+    <dd class="col-sm-9">{{user.customerPhoneNum}}</dd>
+
+    </dl>
+    <div class="container">
+
+        <div class="row justify-content-between">
+          <div class="col-6">
+              <button type="button" class="btn btn-primary btn-lg btn-block"(click)="showHideUser()">
+                  <ng-container *ngIf="!displayAddres">Show</ng-container> <ng-container *ngIf="displayAddres">Hide</ng-container> Address</button>
+          </div>
+          <!-- <div class="col-4">
+            One of two columns
+          </div> -->
+        </div>  
+
+        <div *ngIf= "displayAddres" class="row justify-content-between">
+          <app-user-address [address]="user.address"></app-user-address>
+        </div>
+
+
+      </div>
+  </div>
+

cartui/src/app/user-detail/user-detail.component.spec.ts

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

cartui/src/app/user-detail/user-detail.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { UserDetailService } from '../services/user-detail.service';
+import { map, catchError } from 'rxjs/operators';
+import { Observable } from 'rxjs/Observable';
+import { User } from '../interface/user';
+
+@Component({
+  selector: 'app-user-detail',
+  templateUrl: './user-detail.component.html',
+  styleUrls: ['./user-detail.component.css']
+})
+export class UserDetailComponent implements OnInit {
+user: User;
+displayAddres : boolean = false;
+
+
+  constructor(private _userDetailService : UserDetailService) {  
+    this. _userDetailService.getCustomerDetails(1).subscribe(x => {
+      this.user = x
+      console.log(this.user);
+    }); 
+   }
+
+  ngOnInit() {
+
+  }
+
+  showHideUser(){
+    this.displayAddres = !this.displayAddres;
+  }
+
+}

cartui/src/assets/resources/customers.json

@@ -0,0 +1,34 @@
+{
+    "id": 1,
+    "customerName": "Hitesh Joshi",
+    "customerAge": 31,
+    "membershipId": null,
+    "customerPhoneNum": 951911009,
+    "altPhoneNum": null,
+    "address": [
+        {
+            "id": 1,
+            "apartmentName": "Vijaya Residency",
+            "streetName": "Allahpur",
+            "city": "Bangalore",
+            "state": "Karanataka",
+            "pinCode": 560037
+        },
+        {
+            "id": 4,
+            "apartmentName": "Hubris Residency",
+            "streetName": "HSR layout",
+            "city": "Bangalore",
+            "state": "Karanataka",
+            "pinCode": 560037
+        },
+        {
+            "id": 3,
+            "apartmentName": "Muir Road",
+            "streetName": "Near Bus stand",
+            "city": "Almora",
+            "state": "Uttarakhand",
+            "pinCode": 262501
+        }
+    ]
+}

cartui/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  customersURL: '/customer-service/customer'
 };

cartui/src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  customersURL: 'assets/resources/customers.json'
 };

customer/src/main/java/com/hitesh/microservices/customer/controller/CustomerController.java

@@ -8,6 +8,7 @@
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import com.hitesh.microservices.customer.client.InvoiceServiceClient;
@@ -47,8 +48,8 @@ public Iterable<Customer> getAllCustomers(){
 		return customerRepository.findAll();
 	}
 
-	@RequestMapping(value="/customers/{id}", method= RequestMethod.GET, produces = "application/json")
-	public Customer getCustomerById(@PathVariable("id") String id){        
+	@RequestMapping(value="/customer", method= RequestMethod.GET, produces = "application/json")
+	public Customer getCustomerById(@RequestParam("id") String id){        
 		return customerRepository.findOne(Long.parseLong(id));
 	}
 

zuulEdgeGateway/pom.xml

@@ -16,9 +16,6 @@
     <version>0.0.1-SNAPSHOT</version>
   </parent>
 
-
-
-
 	<dependencies>
 		<dependency>
 			<groupId>com.hitesh.microservices</groupId>