Added wishlist component

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

ecm/Angular/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.css

+/* neew*/
+
+.desc{
+	padding-left: 14px;
+    padding-right: 14px;
+}
+.itemImage
+{
+	position: relative;
+	height: 55px;
+    width: 55px;
+    border-radius: 2px;
+}
+
+.ecm-cancel-buttton
+{
+	cursor: pointer;
+    padding-left: 13px;
+    padding-right: 13px;
+}
+
+.itemdescription
+{
+	font-size: 12px;
+    width: 45%;
+    cursor: pointer;
+    position: relative;
+    
+}
+.item-descr-span{
+	display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    width: 125px;
+}
+.ecm-itemdescription{
+	font-size: 18px;
+    position: relative;
+    top: 22px;
+    
+}
+.itemcostRate{
+    font-size: 18px;
+    position: relative;
+    bottom: 58px;
+    float: right;
+}
+.itemRemove{
+    padding: 10px;
+    font-size: 18px;
+}
+.listItems{
+	border: 2px solid ghostwhite;
+    border-left: none;
+    border-right: none;
+  /*  padding: 20px; */
+}
+
+.ViewAll{
+    font-size: 16px;
+    color: mediumvioletred;
+}
+
+.amountPayable{
+	padding-top: 30px;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.edit-cart-button, .viewAll-button
+{
+/*     width: 320px; */
+	width: 304px;
+    height: 50px;
+    font-size: 16px;
+    line-height: 46px;
+    text-align: center;
+    border-radius: 2px;
+    position: relative;
+    padding: 0;
+    margin: 38px 0 0px 0;
+}
+
+.viewAll-button{
+	background: transparent;
+	color: mediumvioletred;
+	line-height: 44px; 
+}
+
+.edit-cart-button
+{
+	 background: mediumvioletred; 
+	 color: #fff;
+}
+
+.edit-cart-button:hover { 
+       color: #fff;
+}
+
+@media screen and (max-width: 750px){
+
+  .total-description {
+    width: 70%;
+    bottom: 0px !important;
+  }
+  .ecm-productDetails{
+     padding: 0px !important;
+  }
+  .ecm-textBox{
+       height: 42px !important;
+  }
+  .detail-Continue-Shopping-button{
+    height: 46px !important;
+    margin-top: 30px !important;
+    margin-bottom: 15px !important;
+  } 
+   .counter-screen{
+    display: block !important;
+ }
+  .items-cost-rate {
+    text-align: left !important;
+    padding-top: 40px !important;
+   }
+  .wish-remove-dipslay{
+    text-align: right !important;
+    padding-top: 100px !important;
+  }
+  .item-image {
+    width: 16% !important;
+    bottom: 100px !important;
+  }
+  .counter{
+    position: relative;
+    padding-top: 18px;
+ }
+ .listItems[_ngcontent-c8] {
+    margin: 0px;
+    padding: 0px;
+  }
+  .ecm-productDetails{
+     margin-top: 6px !important;
+  }
+  .continue-shopping{
+    width: 89% !important;
+    margin-right: 20px !important;
+    margin-top: -8px !important;
+    bottom: 0px !important;
+  }
+  .wishList-items,.remove-items{
+    font-size: 16px !important;
+  }
+  .counter-button{
+    width: 50px !important;
+    height: 50px !important;
+  }
+}	
+
+.counter
+{
+    position: inherit;
+}
+
+.change-color
+{
+	display: flex;
+}
+
+.totalPriceDetails
+{
+   padding: 20px;
+}
+.ecm-payments{
+	display: flex;
+    position: relative;
+    left: 15px;
+    color: dimgray;
+    padding-top: 36px;
+}
+.ecm-Info{
+	position: relative;
+    left: 8px;
+    font-size: 13px;
+    color: #787878;
+}
+.detail-checkout-button{
+	width: 100%;
+    height: 50px;
+    font-size: 15px;
+    line-height: 15px;
+    border-radius: 2px;
+    background: mediumvioletred; 
+	color:#fff;
+}
+.shipping{
+	position: relative;
+    top: 15px;
+}
+.priceDetails{
+	text-align: center;
+    height: 40px;
+    /* width: 160px; */
+    line-height: 40px;
+    border-bottom: thin solid mediumvioletred;
+    font-size: 16px;
+    padding-bottom: 10px;
+}
+.image{
+	width: 100px;
+    height: 100px;
+}
+.info{
+	display: flex;
+}
+.detail-Continue-Shopping-button {
+	height: 46px;
+    font-size: 15px;
+    line-height: 15px;
+    border-radius: 2px;
+    background: white;
+    color: mediumvioletred;
+    position: relative;
+    float: right;
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+.item-image{
+/*	width: 140px;
+	padding-top: 16px; 
+    position: relative; */
+    width: 10%;
+    display: inline-block;
+    position: relative;
+    bottom: 38px;
+   
+}
+.change-color{
+	padding-top: 16px;
+}
+.size-of-item{
+	color: #787878;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 36px;
+    padding-right: 20px;
+}
+.selected{
+	position: relative;
+    left: 5px;
+    height: 36px;
+    font-size: 15px;
+    background-color: mediumvioletred;
+    border-radius: 100%;
+    min-width: 36px;
+    line-height: 36px;
+    color: white;
+    padding: 0;
+    cursor: default;
+}
+.color-change{
+	position: relative;
+    font-size: 13px;
+    color: mediumvioletred;
+    cursor: pointer;
+    font-weight: 600;
+    padding-left: 8px;
+    line-height: 36px;
+}
+.wishList-items{
+	font-size: 12px;
+    color: mediumvioletred;
+    cursor: pointer;
+    font-weight: 600;
+}
+.remove-items{
+	font-size: 12px;
+    color: dimgray;
+    padding-left: 31px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.wish-remove-dipslay{
+	position: inherit;
+    padding-top: 80px;
+    padding-right: 28px;
+}
+
+.counter{
+	
+    position: relative;
+    padding-top: 18px;
+}
+
+.ecm-textBox{
+	width: 76px;
+    position: relative;
+    margin-left: 8px;
+    margin-right: 8px;
+    text-align: center;
+    height: 36px;
+    font-size: 17px;
+}
+.counter-button{
+	color: mediumvioletred;
+    background-color: white;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    padding: 0;
+    margin: 0;
+    line-height: 32px;
+    border-radius: 100%;
+    
+}
+.counter-button.mat-button-ripple.mat-ripple {
+    border-radius: 100%;
+}
+.items-cost-rate{
+	padding-top: 25px;
+    font-size: 25px;
+    font-weight: bold;
+}
+.no-button{
+	position: relative;
+    left: 50px;
+    border-style: groove;
+    background-color: ghostwhite;
+}
+.delete-cartitems-button{
+	padding-bottom: 20px;
+    padding-top: 36px;
+}
+.continue-shopping{
+    
+    float: right;
+    border: 2px solid ghostwhite;
+    margin-right: 18px;
+    height: 46px;
+    width: 170px;
+    position: inherit;
+    bottom: 7px;
+}
+.items-desc{
+     padding-top: 18px;
+}
+
+.shippingFree{
+    float: right;
+    font-weight: 600;
+    color: mediumaquamarine;
+    font-size: 13px;
+}
+.details-of-Cart{
+    top: 60px;
+    bottom: 50px;
+    position: relative;
+    padding-top: 20px;
+    padding-bottom: 70px;
+    max-width: 72rem;
+}
+.cartItemsDetails{
+	padding: 0;
+}
+.item-shDescr{
+	display: block;
+    font-size: 18px;
+    padding-top: 10px;
+    line-height: 24px;
+    color: #444;
+    font-weight: 600;
+}
+.item-title{
+	font-size: 14px; 
+	color: mediumvioletred;
+	font-weight: 600; 
+	cursor: pointer;
+}
+.item-seller{
+    color: #787878;
+    font-size: 14px;
+    font-weight: 700;
+}
+.item-sellerInfo{
+	font-size: 14px; 
+	color: mediumvioletred;
+	font-weight: 600;
+}
+.price-info{
+	 float: right; 
+	 font-weight: 600; 
+	 font-size: 14px;
+}
+.total-amountPrice {
+	float: right;
+	font-weight: 600;
+	font-size: 20px;
+}
+
+.ecm-headings {
+	font-size: 15px;
+	border-bottom: 1px solid #f3f3f3;
+	padding: 20px;
+}
+
+.counter-button, .selected {
+	box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+    font-size: 15px;
+    width: 36px;
+    height: 36px;
+}
+
+.counter-button, .selected, .detail-checkout-button, .continue-shopping {
+	box-shadow: 0 0px 5px 1px rgba(0,0,0,.1);
+}
+
+.secure-icon {
+	font-size: 20px important;
+}
+
+.delete-icon {
+	display: none;
+	cursor: pointer;
+    font-size: 20px;
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    position: relative;
+}
+
+.cartItemsDetail:HOVER .delete-icon{
+   display: block;
+}
+
+.cartItemsDetail{
+	cursor: pointer;
+    border-bottom: 1px solid #f3f3f3;
+}
+/* Empty Cart*/
+.empty-cart-img {
+	width: 140px;
+    height: 140px;
+}
+ 
+.empty-cart-title {
+	display: block;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+    padding: 0;
+    line-height: 0.8;
+}
+ 
+.empty-cart-msg {
+    font-size: 14px;
+    display: block;
+    text-align: center;
+    padding-top: 10px;
+    line-height: 1.2;
+}
+ 
+.border-line {
+	height: 3px;
+    width: 40px;
+    background-color: mediumvioletred;
+    display: inline-block;
+}
+
+.my-cart-title {
+    padding-bottom: 21px;
+    border-bottom: 2px solid #c71585;
+    font-size: 16px;
+    margin-left: 17px;
+}
+
+/* attribute colors */
+.BLACK, .BLK_WH{
+  background-color: black;
+}
+.BLUE, .BLU_WH{
+  background-color: blue;
+}
+.BROWN{
+  background-color: brown;
+}
+.PEACH{
+  background-color: peachpuff;
+}
+.RED, .RED_WH{
+  background-color: red;
+}
+.WHITE{
+  background-color: white;
+}
+.YELLOW{
+  background-color: yellow;
+}
+.total-description{
+	width: 55%;
+    display: inline-block;
+    position: relative;
+    padding-bottom: 16px;
+    bottom: 4px;
+   
+}
+.counter-screen{
+	display: inline-block;
+    position: inherit;
+    float: right;
+  /*  padding: 20px; */
+	
+}
+.new-checkout-button{
+	width: 100%;
+  /*  height: 45px; */
+    font-size: 15px;
+    line-height: 15px;
+    border-radius: 2px;
+    background: mediumvioletred;
+    color: #fff;
+  /*    margin-top: 4px; */
+    
+    position: fixed !important;
+    bottom: 0 !important;
+    height: 54px !important;
+    
+}
+.scrollMe{
+	overflow: hidden;
+	max-height: 350px;
+}
+.scrollMe:hover {
+    overflow: auto;
+ }
+ 
+ ::-webkit-scrollbar {
+    width: 7px;
+    -webkit-appearance: none;
+    
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(199, 21, 133,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+    display: none;
+    
+}
+
+        
\ No newline at end of file

ecm/Angular/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.html

+<div *ngIf="wishListItems">
+	<ecm-header [isFixedHeader]=false> </ecm-header>
+	<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
+	<div class="row details-of-Cart">
+		<md-card class="medium-12 columns cartItemsDetails">
+		<div class="ecmdetailsItems">
+			<div class="ecm-headings">
+				<span class="my-cart-title">My Wishlist ({{cartCount}})</span>
+			</div>
+			<div class="listItems" *ngFor="let item of wishListItems">
+				<div class="item-image">
+					<ecm-image [refId]='item.itemCode' [refSer]="'M-ITEM'"
+						[object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></ecm-image>
+				</div>
+				<div class="total-description">
+					<div class="items-desc">
+						<span class="item-title" (click)="viewItem(item.itemCode)">Handmade
+							Handicarft</span> <span class="item-shDescr">{{item.shDescr}}</span>
+							<span class="item-shDescr">{{item.descr}}</span>
+						<span class="item-seller">Sold by</span> <span class="item-sellerInfo">Handmade
+							Handicarfts</span>
+					</div>
+					<div class="items-cost-rate">
+						<span>Rs. {{item.costRate}}</span>
+				   </div>
+				</div>
+				
+				<div class="counter-screen">
+					<div class="wish-remove-dipslay">
+						<!--  <span class="remove-items" (click)=" confirmDialog(item)" style="cursor: pointer;">Remove</span>  -->
+						<span class="remove-items" (click)="deleteCartItem(item.itemCode) "><i class="material-icons" style="font-size: 24px;color: mediumvioletred;">delete</i></span>
+					</div>
+				</div>
+
+			</div>
+		</div>
+		<div class="detail-Continue-Shopping-button">
+			<button md-button class="continue-shopping" [routerLink]="['/home']">Continue
+				Shopping</button>
+		</div>
+		</md-card>
+	</div>
+</div>

ecm/Angular/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { EcmWishListService } from './ecm-wish-list.service';
+import { MdSnackBar } from '@angular/material';
+import { Item } from '../../ecm-model/product-model';
+import { ItemDetail } from '../../ecm-model/product-detail-model';
+import { EcmProductDetailService } from '../../ecm-product-details/ecm-product-detail.service';
+import { Http} from '@angular/http'
+import { Router, ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-ecm-wish-list',
+  templateUrl: './ecm-wish-list.component.html',
+  styleUrls: ['./ecm-wish-list.component.css'],
+   providers: [EcmProductDetailService]
+})
+export class EcmWishListComponent implements OnInit {
+     wishListItems: Item[];
+     errorMessage: string;
+     cartCount = 0;
+
+  constructor(public subcategoryService: EcmProductDetailService,private route: ActivatedRoute,private router: Router,public snackBar: MdSnackBar,public wishListService: EcmWishListService, private http: Http) {}
+
+  ngOnInit() {
+    this.getWishlistItems();
+  }
+    
+    /*  getWishlistItems() {
+        this.wishListService.getWishlistItems().subscribe(
+            wishListItems => {
+               this.wishListItems = wishListItems;
+                console.log( 'comp recentItems[' + JSON.stringify( wishListItems ) + '] \n this.trendingItems[' + JSON.stringify( this.wishListItems ) + ']' );
+            },
+            error => {
+                this.errorMessage = <any>error;
+                console.log( 'comp errorMessage[' + this.errorMessage + ']' );
+            });
+    } */
+    
+     getWishlistItems(){
+        this.wishListService.getWishlistItems().subscribe(
+            wishListItems => {
+                this.wishListItems = wishListItems;
+                this.cartCount = this.wishListItems.length ;
+                    console.log( 'comp wishListItems[' + this.wishListItems  + '] \n this.wishListItems[' + this.wishListItems.length + ']' );
+            },
+            error => {
+                let errorMessage = <any>error;
+                console.log( 'comp errorMessage[' + errorMessage + ']' );
+            });
+    }
+    
+    userActionUrl = '/ecm/service/feeds/wishlist';
+    
+    deleteCartItem( itemCode ) {
+        console.log( "deleteCartItem Called" );
+        this.http.delete( this.userActionUrl + '/' + itemCode, {})
+            .subscribe( data => {
+                console.log( "deleted item  in wishlist" );
+            }, error => {
+                console.log( error.json() );
+        });
+        this. getWishlistItems();
+        this.openSnackBar('Item Removed from your wishlist' );
+    }
+    
+     openSnackBar( message: string ) {
+        this.snackBar.open( message, '', {
+            duration: 2000,
+        });
+    }
+    
+     addToWishlist(data:Item) {
+   
+  //  this.store.dispatch({ type: INCREMENT, payload: cartData });
+      this.subcategoryService.addToWishlist(data);
+  }
+    
+    viewItem( itemCode ) {
+        this.router.navigate( ['/detail', itemCode] );
+    }
+
+}

ecm/Angular/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.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 { Item } from '../../ecm-model/product-model';
+
+
+@Injectable()
+export class EcmWishListService {
+        
+     private wishListUrl = '/ecm/service/feeds/wishlist';  // URL to web service
+
+  constructor(private http: Http) { }
+    
+    getWishlistItems(): Observable<Item[]> {
+        
+        let headers = new Headers( { 'Content-Type': 'application/json' });
+        let options = new RequestOptions( { headers: headers });
+
+        return this.http.get( this.wishListUrl, options )
+            .map( this.extractData )
+            .catch( this.handleError );
+    }
+    
+    storeWishlistItem(itemCode) {
+        this.http.post(this.wishListUrl+'/'+itemCode, {})
+        .subscribe(data => {
+           console.log("Inserted in wishList");
+        }, error => {
+            console.log(error.json());
+        }); 
+    }
+  
+        private extractData(res: Response) {
+      let body = res.json();
+      console.log('extractData[' + JSON.stringify(body) + ']');
+      return body || { };
+    }
+
+    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);
+    }
+    
+
+}