Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174271 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/trunk/src/app/app.module.ts

@@ -66,10 +66,11 @@ import { EcmProductService } from './ecm-view/ecm-product/ecm-product.service';
 import { EcmProductDetailService } from './ecm-product-details/ecm-product-detail.service';
 import { EcmLocationService } from './ecm-search/ecm-location.service';
 import { Breadcrumbs } from './ecm-breadcrumbs/ecm-breadcrumbs.component';
+import { EcmOrderService } from './ecm-order/ecm-order.service';
 import { HostUrlService } from './host-url.service';
 import reducer from './ecm-store/reducers';
-import {CartActions, CategoryActions, SubCategoryActions, ItemActions, LocationActions, WishListActions, MenuActions,ProfileActions, AdressAction, ReviewAction, SavedCardAction} from './ecm-store/actions';
-import {CartEffects, CategoryEffects, SubCategoryEffects, ItemEffects, WishlistEffects, MenuEffects,ProfileEffects, AddressEffects, ReviewsEffects, SavedCardEffects} from './ecm-store/effects';
+import {CartActions, CategoryActions, SubCategoryActions, ItemActions, LocationActions, WishListActions, MenuActions,ProfileActions, AdressAction, ReviewAction, SavedCardAction, OrderActions } from './ecm-store/actions';
+import {CartEffects, CategoryEffects, SubCategoryEffects, ItemEffects, WishlistEffects, MenuEffects,ProfileEffects, AddressEffects, ReviewsEffects, SavedCardEffects, OrderEffects} from './ecm-store/effects';
 import { EcmPanelComponent } from './ecm-view/ecm-panel/ecm-panel.component';
 
 import { UserProfileComponent, ProfileEditor, ProfileScreenComponent } from './user-profile';
@@ -82,6 +83,7 @@ import { ChangePasswordComponent } from './change-password/change-password.compo
 import { MaterialModule } from './module';
 import { EcmOrderComponent } from './ecm-order/ecm-order.component';
 import { EcmVariantsComponent } from './ecm-view/ecm-variants/ecm-variants.component';
+import { EcmOrderDetailComponent } from './ecm-order-detail/ecm-order-detail.component';
 
 //Changes by Prajyot
 const appRoutes: Routes = [
@@ -97,6 +99,7 @@ const appRoutes: Routes = [
   { path: 'checkout', component: EcmCheckoutComponent},
   { path: 'wishlist', component: EcmWishListComponent},
   { path: 'myOrder', component: EcmOrderComponent},
+  { path: 'orderDetail', component: EcmOrderDetailComponent},
   { path: 'myprofile', component: MyProfileComponent, children: [
   { path: 'userprofile', component: UserProfileComponent, outlet: 'profile' },
   { path: 'useraddress', component: UserAddressComponent, outlet: 'profile' },
@@ -182,6 +185,7 @@ const appRoutes: Routes = [
     EffectsModule.run(AddressEffects), 
     EffectsModule.run(ReviewsEffects), 
     EffectsModule.run(SavedCardEffects),
+    EffectsModule.run(OrderEffects),
     FormsModule,
     BrowserAnimationsModule,
     BBKeyInputModule
@@ -198,6 +202,7 @@ const appRoutes: Routes = [
 	CategoryActions,
 	EcmSubCategoryService,
 	SubCategoryActions,
+	OrderActions,
 	ProfileInfoService,
 	UserAddressService,
 	UserReviewService,
@@ -212,7 +217,8 @@ const appRoutes: Routes = [
 	MenuActions,
 	ProfileActions,
 	AdressAction, ReviewAction, SavedCardAction,
-	Breadcrumbs
+	Breadcrumbs,
+	EcmOrderService
   ],
   entryComponents: [
     EcmOutingComponent,

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.css

@@ -401,3 +401,96 @@ p {
     padding: 0;
 }
 
+/* CSSS FOR ORDER */
+
+.orderDescription1, .orderDescription2, .orderDescription3, .offers{
+	font-size: 13px;
+}
+.orderDescription1{
+	color:rgb(72, 72, 72)
+}
+.orderDescription2{
+	display: block;
+    font-weight: bold;
+/*     color: rgb(70, 67, 67); */
+/*     height: 40px; */
+}
+.deliveryDate{
+	font-size: 12px;
+    color: rgb(113, 113, 113);
+    position: relative;
+    top: 16px;
+}
+.trackButton{
+    padding-top: 28px;
+    padding-bottom: 12px;
+}
+.cancel-order-button{
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 3px;
+    background: #fff;
+    color: mediumvioletred !important;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    min-width: 80px;
+    margin-right: 5px;
+    width: calc(50% - 10px)
+}
+.track-order-button{
+	display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    background: mediumvioletred;
+    color: #fff !important;
+    text-align: center;
+    margin-left: 5px;
+    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    border-radius: 3px;
+    min-width: 80px;
+    width: calc(50% - 10px);
+}
+.orderQuantity{
+	display: block;
+    font-size: 10px;
+    font-weight: bold;
+    color: dimgray;
+    height: 24px;
+}
+.orderPrice{
+	font-size: 14px;
+    font-weight: bold;
+}
+@media screen and (max-width: 640px){
+	   .trackButton, .offers {
+	      display: none !important;
+	  }
+	  .reviewScreen {
+    	border-left: 0;
+	}
+	.reviewScreen{
+	    border-top: 1px solid rgba(158, 158, 158, 0.28) !important;
+	    margin-top: 40px !important;
+	    min-height: 78px;
+	}
+
+}
+.reviewScreen{
+	border-left: 1px solid lightgray;
+	min-height: 158px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.html

@@ -112,3 +112,23 @@
           <span class="likes-count"> {{reviewsData.productNotUsfulCnt}} </span>
      </div>
  </div>
+ 
+ <div *ngIf="orderDetails">
+       <div class="small-4 medium-2 large-2 columns">
+ 		    <ecm-image [refId]='orderDetails.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
+ 	   </div>
+ 	   <div class="small-8 medium-3 large-3 columns orderDescriptiom">
+			<span class="orderDescription1">{{itemDetail?.itemHeader.itemShDescr}}</span>
+			<span class="orderDescription2">{{itemDetail?.itemHeader.itemDescr}}</span> 
+			<span class="deliveryDate">Delivery expected between 4 to 5 days</span>
+			<div class="trackButton">
+				<button md-button class="cancel-order-button" (click)="cancelOrder()">Cancel</button>
+				<button md-button class="track-order-button" (click)="trackOrder()">Track</button>
+			</div>
+		</div>
+		<div class="small-3 medium-3 large-3 columns offers"
+			style="text-align: center;">
+			<span class="orderQuantity">Quantity  {{orderDetails?.quantity}}</span> 
+			<span class="orderPrice">Rs {{itemDetail?.itemHeader.itemDiscountedRate}}</span>
+		</div>	    
+ </div>

ecm/Angular/trunk/src/app/ecm-card/ecm-card.component.ts

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-
+import { MdSnackBar } from '@angular/material';
 import { Store } from '@ngrx/store';
 import {AppState} from '../ecm-store/reducers';
 
@@ -11,9 +11,10 @@ import { ItemDetail } from '../ecm-model/product-detail-model';
 import { Reviews } from '../ecm-model/product-review.model';
 
 import { EcmProductReviewService } from '../ecm-product-details/ecm-product-review.service';
+import {EcmProductDetailService} from '../ecm-product-details/ecm-product-detail.service'
 import { Observable } from 'rxjs/Observable';
 import { Item } from '../ecm-model/product-model';
-
+import { Order } from '../ecm-model/order-model';
 import { ItemActions } from '../ecm-store/actions';
 
 @Component({
@@ -30,16 +31,19 @@ export class ECMCardComponent implements OnInit {
   @Input() extraParam: any;
   @Input() reviewsData: Reviews;
   @Input('trendImg') trendImg: boolean;
+  @Input() orderDetails: Order;
   inWishlist: boolean;
   
   @Output() storeData = new EventEmitter();
   @Output() addToWishlist = new EventEmitter();
   @Output() removeFromWishlist = new EventEmitter();
   
+  itemCode: any;
+  itemDetail: ItemDetail;
   wishlistItems: Observable<Item[]>;
   categoryList: any;
   IS_WISHLIST: boolean;
-  constructor(private route: ActivatedRoute,private router: Router, private productReviewService: EcmProductReviewService, private store: Store<AppState>, private itemAction: ItemActions) { 
+  constructor(private route: ActivatedRoute,private router: Router, private productDetailService: EcmProductDetailService, private productReviewService: EcmProductReviewService, private store: Store<AppState>, private itemAction: ItemActions, public snackBar: MdSnackBar,) { 
   
   }
 
@@ -62,6 +66,15 @@ export class ECMCardComponent implements OnInit {
           this.categoryList = menuList.summary;
           console.log('menuList.summary',menuList,  menuList.summary);
       });
+    
+      if(this.orderDetails){
+          this.productDetailService.getItemDetail(this.orderDetails.itemCode).subscribe(
+                  itemDetail => {
+                      this.itemDetail = itemDetail;
+                  }
+          );
+          
+      }
   }
 
    viewItem(){      
@@ -140,5 +153,20 @@ export class ECMCardComponent implements OnInit {
        }
        return isAuthUser;
    }
+ 
+   ////////////////////////////////////  FOR ORDERS        ////////////////////////////////////////////
+   
+   cancelOrder(){
+       this.openSnackBar( 'The Order has been canceled' );
+   }
+   openSnackBar( message: string ) {
+       this.snackBar.open( message, '', {
+           duration: 2000,
+       });
+   }
+   
+   
+   
+   
    
 }

ecm/Angular/trunk/src/app/ecm-model/order-model.ts

+export class Order {  
+    constructor(
+            public orderNo:string = '',
+            public userId:string = '',
+            public ecmSite:string = '',
+            public currCode:string = '',
+            public exchRate:string = '',
+            public orderDate :string = '',
+            public remark:string = '',
+            public divAddress:string = '',
+            public billAddress:string = '',
+            public amount:string = '',
+            public taxAmt:string = '',
+            public discAmt:string = '',
+            public promoAmt:string = '',
+            public netAmt:string = '',
+            public wfStat:string = '',
+            public wfStatDate:string = '',
+            public itemCode:string = '',
+            public orderStat :string = '',
+            public statDate :any = '',
+            public orderId:string = '',
+            public orderTotal:string = '',
+            public itemQuantity:string = '', 
+            public itemCost:string = '',  
+            public itemAttributtes:string = '',
+            public itemDeliveryExpectation:string = '',
+            public ecmOrderDets: OrderDetail[] = []
+    ) { }
+}
+
+export class OrderDetail {
+    constructor(
+            public discPerc: string = '',
+            public eOrderNo: string = '',
+            public itemCode: string = '',
+            public lineNo: string = '',
+            public quantity: string = '',
+            public rate: string = '',
+            public statdate: string = '',
+            public taxAmt : string = ''
+    ) { }
+}
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-order/ecm-order.component.css

 .ecm-order-image{
-	width: 146px;
-    height: 99px;
+	width: 141px;
+    height: 110px;
 }
 .orderDisplay{
 	position: relative;
     top: 82px;
 }
 .trackButton{
-	padding-top: 14px;
-}
-.cancel-order-button{
-	display: inline-block;
-    height: 46px;
-    line-height: 40px;
-    text-align: center;
-    border-radius: 3px;
-    background: #fff;
-    color: mediumvioletred !important;
-    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
-    min-width: 121px;
-}
-.track-order-button{
-	display: inline-block;
-    height: 46px;
-    line-height: 40px;
-    background: mediumvioletred;
-    color: #fff !important;
-    text-align: center;
-    margin-left: 10px;
-    box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
-    border-radius: 3px;
-    min-width: 123px;
+	padding-top: 6px;
 }
 .reviewScreen{
 	border-left: 1px solid lightgray;
-}
-.orderDescription1, .orderDescription2, .orderDescription3, .orderQuantity, .offers, .deliveryDate{
-	font-size: 14px;
+	min-height: 124px;
 }
 .orderDescription1{
 	display: inline-block;
-}
-.orderDescription2{
-	display: block
+    font-weight: 600;
+    color: rgb(70, 67, 67);
 }
 .orderDescription3{
 	display: block;
@@ -54,15 +28,15 @@
     border-left: 0px;
     border-right: 0px;
     margin: 0px;
-    position: relative;
-    bottom: 24px;
 }
 .orderList{
 	margin: 0px;
-    padding-bottom: 14px;
+    border-bottom: 1px solid rgba(105, 105, 105, 0.27);
+    padding: 8px;
 }
 md-card.dispaly.mat-card {
     padding: 0px;
+    margin-bottom: 10px;
 }
 .orderDate, .orderID, .orderTotal{
 	display: block;
@@ -82,18 +56,49 @@ md-card.dispaly.mat-card {
     right: 16px;
     color: mediumvioletred;
     vertical-align: sub;
+    cursor: pointer;
 }
 .orderDetail{
 	color: mediumvioletred;
 	vertical-align: sub;
+	cursor: pointer;
 }
 .orders{
      font-size: 18px;
+	 position: relative;
+	 bottom: 10px;
 }
-@media screen and (max-width: 1024px){
-	  .headContents, .trackButton, .offers, .deliveryDate{
+.ecm-Orderitem-img {
+	position: relative;
+    max-height: 250px;
+    max-width: 250px;
+}
+.reviewScreen{
+	border-left: 1px solid lightgray;
+	min-height: 158px;
+}
+
+@media screen and (max-width: 640px){
+	  .headContents,  .offers {
 	      display: none !important;
 	  }
+	  .ecm-Orderitem-img {
+    	left: calc(50% - 125px) !important;
+	}
+	.reviewScreen {
+    	border-left: 0;
+	}
+	.reviewScreen{
+	    border-top: 1px solid rgba(158, 158, 158, 0.28) !important;
+	    margin-top: 40px !important;
+	    min-height: 78px;
+	}
+	.ecm-order-image{
+	    width: 90px !important;
+    	height: 96px !important;
+    	position: relative;
+    	top: 6px;
+	}
 }
 
 

ecm/Angular/trunk/src/app/ecm-order/ecm-order.component.html

-
 <ecm-header #header [isFixedHeader]=true> </ecm-header>
 <ecm-breadcrumbs [pageName]="'USERORDER'"></ecm-breadcrumbs>
 
 <div class="row orderDisplay">
-<h1 class="orders">Orders(1)</h1>
-	<md-card class="dispaly">.
+	<span class="orders">Orders ( {{(ordersItems | async)?.length}} )</span>
+	<div *ngFor="let order of ordersList" >
+	<md-card class="dispaly">
 	<div class="row headContents">
-	     <div class="large-2 columns">
-	          <span class="orderDate">Order Date</span>
-	          <span class="date">27th Oct 2017</span>
-	     </div>
-	     <div class="large-3 columns">
-	     	  <span class="orderID">Order ID</span>
-	     	  <span class="id">21564646865</span>
-	     </div>
-	     <div class="large-4 columns">
-	     	  <span class="orderTotal">Order Total</span>
-	     	  <span class="total">Rs. 47,000</span>
-	     </div>
-	     <div class="large-3 columns invoiceDetail">
-	     	  <span class="orderInvoice">Invoice</span>
-	     	  <span class="orderDetail">Order Details</span>
-	     </div>
-	</div>
-	
-	<div class="row orderList">
-		<div class="small-6 medium-6 large-2 columns">
-			<img class="ecm-order-image" src="{{hostUrl}}/ecm/assets/images/items/L2D0100058.png" />
+		<div class="small-6 medium-2 large-2 columns">
+<!-- 			<span class="orderDate">Order Date</span> <span class="date">{{order?.orderDate}}</span> -->
+			 <span class="orderDate">Order Date</span> <span class="date">{{ toDate(order?.orderDate) |date : dispDateFormat}}</span>
 		</div>
-		<div class="small-6 medium-6 large-3 columns orderDescriptiom">
-			<span class="orderDescription1"> stone elepahant stone elephant stone elephant </span> 
-			<span class="orderDescription2">Elephant stone (white)</span> 
-		    <span class="orderDescription3">Sold by stone crafts</span> 
-			<span class="orderQuantity">Quantity1</span>
-			<div class="trackButton">
-				<button md-button class="cancel-order-button">Cancel</button>
-				<button md-button class="track-order-button">Track</button>
-			</div>
+		<div class="small-6 medium-3 large-3 columns">
+			<span class="orderID">Order ID</span> <span class="id">{{order?.orderNo}}</span>
 		</div>
-		<div class="small-3 medium-3 large-1 columns offers">
-			<span>Rs 50000 </span>
-			<span style="color: mediumvioletred">Offers</span>
+		<div class="small-6 medium-3 large-3 columns" style="text-align: center;">
+			<span class="orderTotal">Order Total</span> <span class="total">Rs {{order?.amount}}</span>
 		</div>
-		<div class="small-3 medium-3 large-3 columns deliveryDate">	 
-			<span>Delivery expected between sat,oct 27 17, and mon,oct 29 17</span>
+		<div class="small-6 medium-4 large-4 columns invoiceDetail">
+			<span class="orderInvoice" (click)="invoiceDetail()">Invoice</span> 
+			<span class="orderDetail" (click)="orderDetail()">Order Details</span>
 		</div>
-		<div class="small-12 medium-12 large-3 columns reviewScreen">
-			<user-review></user-review>
+	</div>
+	<div *ngFor="let orderDets of order.ecmOrderDets" class="row orderList">
+	     <ecm-card  [orderDetails]="orderDets"></ecm-card>
+	     <div class="small-12 medium-4 large-4 columns reviewScreen">
+<!-- 			<user-review [itemCode]="orderDets.itemCode"></user-review> -->
+				<user-review [itemCode]="orderDets.itemCode" ></user-review>
 		</div>
 	</div>
-	</md-card>
+</md-card>
+</div>
 </div>
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-order/ecm-order.service.ts

+import { Injectable } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+import { ItemDetail } from '../ecm-model/product-detail-model';
+import { Store } from '@ngrx/store';
+
+import {AppState} from '../ecm-store/reducers';
+import {OrderActions} from '../ecm-store/actions';
+import { Order } from '../ecm-model/order-model';
+
+@Injectable()
+export class EcmOrderService {
+    private orderActionUrl = '/ibase/ecm/service';
+    
+    orderItems: Order[];
+    
+    constructor( private http: Http, private store: Store<AppState> ) { }
+
+    fetchOrder(): Observable<Order[]> {
+        console.log( "fetch Orders Called" );
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+  
+        return this.http.get( this.orderActionUrl + "/orders", options )
+                   .map( (res) => this.extractData(res) )
+                   .catch(this.handleError);
+    }
+
+    addToOrder(order) {
+        console.log( "add orders StoreInOrders Called" );
+        console.log(JSON.stringify(order));
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+        
+       return this.http.post( '/ibase/ecm/service/orders', JSON.stringify(order) , options)
+            .map( (res) => this.extractData(res) );
+    }
+    
+    updateOrder( order ) {
+        console.log( "add orders StoreInOrders Called" );
+        console.log(JSON.stringify(order));
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+
+        return this.http.post( '/ibase/ecm/service/orders', JSON.stringify(order) , options)
+            .map( (res) => this.extractData(res) );
+    }
+    
+//    
+//    cancelOrder(itemCode) {
+//        let headers = new Headers( { 'Content-Type': 'application/json' });
+//        let options = new RequestOptions( { headers: headers });
+//        
+//        return this.http.delete( '/ibase/ecm/service/order'+itemCode, options)
+//                    .map( (res) => this.extractData(res) );
+//    }
+    
+    
+    cancelOrder( order: Order ) {
+        console.log( "deleteUserOrder Called", order);
+
+        return this.http.delete( this.orderActionUrl + 'card/' + order.itemCode, {})
+            .map( res => res.json() );
+
+    }
+
+    private extractData( res: Response ) {
+        let respJson = res.json();
+        console.log( 'extracData', respJson );
+        if ( respJson != null ) {
+            for ( let key of Object.keys( respJson ) ) {
+                console.log( "getOrder Order ==> key: " + key )
+                let data = respJson[key];
+
+                try {
+                    respJson[key] = JSON.parse( data );
+                    console.log( "getOrder Orde try : " + respJson[key] );
+                }
+                catch ( e ) {
+                    console.log( "getOrder Orde ==> key: ", data, typeof data === 'object' )
+                    if ( typeof data === 'object' )
+                        respJson[key] = this.formatObject( data );
+                    else
+                        respJson[key] = data;
+                    console.log( "getOrder Orde catch : " + respJson[key] );
+                }
+            }
+            console.log( 'extractData[' + JSON.stringify( respJson ) + ']' );
+        }
+        return respJson || {};
+    }
+
+    formatObject( respJson: any ) {
+
+        console.log( 'formatObject', respJson );
+        if ( respJson != null ) {
+            for ( let key of Object.keys( respJson ) ) {
+                console.log( "formatObject Order ==> key: " + key )
+                let data = respJson[key];
+                try {
+                    respJson[key] = JSON.parse( data );
+                    console.log( "formatObject Order try : " + respJson[key] );
+                }
+                catch ( e ) {
+                    respJson[key] = data;
+                    console.log( "formatObject itemDetail catch : " + respJson[key] );
+                }
+            }
+            console.log( 'formatObject[' + JSON.stringify( respJson ) + ']' );
+        }
+        return respJson || {};
+    }
+
+    private handleError( error: Response | any ) {
+        // In a real world app, we might use a remote logging infrastructure
+        let errMsg: string;
+        if ( error instanceof Response ) {
+            const body = error.json() || '';
+            const err = body.error || JSON.stringify( body );
+            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+        } else {
+            errMsg = error.message ? error.message : error.toString();
+        }
+        console.error( 'Service handleError:' + errMsg );
+        return Observable.throw( errMsg );
+    }
+}

ecm/Angular/trunk/src/app/ecm-product-details/ecm-product-review.component.html

@@ -27,7 +27,7 @@
 			
 <!-- 			<ecm-edit-review *ngIf="editMode" [itemDetail]="itemDetail" [userId]="userId" (closePanel)="editMode = false"> </ecm-edit-review> -->
 		
-		<user-review *ngIf="editMode" [editMode]="'E'" [isDetailPage]="true" (onCancel)="editMode = false"></user-review>
+		<user-review *ngIf="editMode" [editMode]="'E'" [itemCode]="itemDetail.itemCode" [isDetailPage]="true" (onCancel)="editMode = false"></user-review>
 		</div>
 		
 		</div>