customer details page added

Author: mehmetozkaya

src/AspnetRun.Api/Controllers/CustomerController.cs

@@ -1,4 +1,5 @@
-using AspnetRun.Application.Interfaces;
+using AspnetRun.Api.Requests;
+using AspnetRun.Application.Interfaces;
 using AspnetRun.Application.Models;
 using MediatR;
 using Microsoft.AspNetCore.Authentication.JwtBearer;
@@ -75,5 +76,28 @@ public async Task<ActionResult<IEnumerable<CustomerModel>>> GetCustomers()
 
             return Ok(customers);
         }
+
+        [Route("[action]")]
+        [HttpPost]
+        [ProducesResponseType(typeof(CustomerModel), (int)HttpStatusCode.OK)]
+        public async Task<ActionResult<CustomerModel>> GetCustomerById(GetCustomerByIdRequest request)
+        {
+            //var product = await _productService.GetProductById(request.Id);
+
+            var customer = new CustomerModel
+            {
+                Id = 1,
+                FirstName = "mehmet",
+                LastName = "ozkaya",
+                Address = "gungoren",
+                City = "istanbul",
+                Description = "asdf",
+                State = "success",
+                Gender = "male",
+                OrderTotal = 22.2
+            };
+
+            return Ok(customer);
+        }
     }
 }

src/AspnetRun.Api/Requests/GetCustomerByIdRequest.cs

@@ -0,0 +1,7 @@
+namespace AspnetRun.Api.Requests
+{
+    public class GetCustomerByIdRequest
+    {
+        public int Id { get; set; }
+    }
+}

src/AspnetRun.Web/src/app/core/services/customer-data.services.ts

@@ -11,4 +11,10 @@ export class CustomerDataService {
     getCustomers(): Observable<ICustomer[]> {
         return this.httpClient.get<ICustomer[]>(environment.apiUrl + '/Customer/GetCustomers');
     }
+
+    getCustomerById(id:number): Observable<ICustomer> {
+        var request = { id: id };
+
+        return this.httpClient.post<ICustomer>(environment.apiUrl + '/Customer/GetCustomerById/', request);        
+    }  
 }

src/AspnetRun.Web/src/app/views/customer/customer-detail/customer-detail.component.css

@@ -0,0 +1,3 @@
+.details-image {
+    height:100px;width:100px;margin-top:10px;
+}

src/AspnetRun.Web/src/app/views/customer/customer-detail/customer-detail.component.html

@@ -1 +1,29 @@
-<p>customer-detail works!</p>
+<div class="container" *ngIf="customer">
+    <div class="row">
+      <div class="col-md-2">
+        <img src="assets/img/{{customer.gender | lowercase}}.png" class="details-image" />
+      </div>
+      <div class="col-md-10">
+        <h4>    
+            {{ customer.firstName | capitalize }} {{ customer.lastName | capitalize }}&nbsp;          
+        </h4>
+        <br />
+        {{ customer.address }}
+        <br />
+        {{ customer.city }}, {{ customer.state.name }}
+      </div>
+    </div>    
+    <br /><br />
+    <!-- <div class="row">
+      <div class="col-md-12" *ngIf="customer && customer.latitude && customer.longitude">
+        <cm-map [latitude]="customer.latitude" 
+             [longitude]="customer.longitude" 
+             [zoom]="10" 
+             [enabled]="mapEnabled"
+             [markerText]="'<h3>' + customer.firstName + ' ' + customer.lastName + '</h3>' + customer.city + ', ' + customer.state.name"></cm-map>
+      </div>
+    </div> -->
+  </div>   
+  <div *ngIf="!customer" class="container">
+     No customer found
+  </div>  

src/AspnetRun.Web/src/app/views/customer/customer-detail/customer-detail.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ICustomer } from 'src/app/shared/interfaces';
+import { ActivatedRoute, Params } from '@angular/router';
+import { CustomerDataService } from 'src/app/core/services/customer-data.services';
 
 @Component({
   selector: 'app-customer-detail',
@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CustomerDetailComponent implements OnInit {
 
-  constructor() { }
+  customer: ICustomer
+
+  constructor(private route: ActivatedRoute, private dataService: CustomerDataService) { }
 
   ngOnInit() {
+
+    this.route.params.subscribe((params: Params) => {
+      const id = +params['id'];
+      if (id) {
+        this.dataService.getCustomerById(id)
+          .subscribe((customer: ICustomer) => {
+            this.customer = customer;
+          });
+      }
+    });
+
   }
 
 }

src/AspnetRun.Web/src/app/views/customer/customer-list/customer-grid/customer-grid.component.html

@@ -19,7 +19,7 @@
                         <tr *ngFor="let customer of customers">
                             <td><img src="assets/img/{{ customer.gender | lowercase }}.png"
                                     class="grid-image" alt="Customer Image" /></td>
-                            <td><a [routerLink]="['/customers',customer.id,'details']">{{ customer.firstName | capitalize }}</a></td>
+                            <td><a [routerLink]="['/customer/customer-detail',customer.id]">{{ customer.firstName | capitalize }}</a></td>
                             <td>{{ customer.lastName | capitalize }}</td>
                             <td>{{ customer.address }}</td>
                             <td>{{ customer.city | trim }}</td>