Skip to content

B
business-java
Commit 6fa2a1fd authored by prumde's avatar prumde
Browse files
Options

Updated 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174464 ce508802-f39f-4f6c-b175-0d175dae99d5
parent bf0dedea
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 247 deletions
ecm/Angular/ProteusECM/trunk/src/app/app.module.ts
View file @ 6fa2a1fd
...@@ -76,7 +76,7 @@ const appRoutes: Routes = [ ...@@ -76,7 +76,7 @@ const appRoutes: Routes = [
{ path: 'search/:value', component: EcmSearchResultComponent}, { path: 'search/:value', component: EcmSearchResultComponent},
{ path: 'cart', component: EcmCartComponent}, { path: 'cart', component: EcmCartComponent},
{ path: 'checkout', component: EcmCheckoutComponent}, { path: 'checkout', component: EcmCheckoutComponent},
{ path: 'wishList', component: EcmWishListComponent} { path: 'wishlist', component: EcmWishListComponent}
]; ];
@NgModule({ @NgModule({
declarations: [ declarations: [
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css
View file @ 6fa2a1fd
...@@ -378,11 +378,16 @@ ecm-search{ ...@@ -378,11 +378,16 @@ ecm-search{
.ecm-menu-icon { .ecm-menu-icon {
width: 32px; width: 32px;
height: 4px; height: 4px;
background-color: black; background-color: white;
margin: 6px 0; margin: 6px 0;
display: block; display: block;
opacity: 0.8;
}
.user-nav-menu {
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 750px){ @media screen and (max-width: 750px){
.logo-adj{ .logo-adj{
width: 128px; width: 128px;
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html
View file @ 6fa2a1fd
<ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu>
<!-- Overlay Start <!-- Overlay Start
<div #bgGlass class="ecm-bgGlass"></div> <div #bgGlass class="ecm-bgGlass"></div>
...@@ -86,7 +85,7 @@ Overlay End --> ...@@ -86,7 +85,7 @@ Overlay End -->
<ng-template #fixedHeaderSmall > <ng-template #fixedHeaderSmall >
<md-toolbar color="primary"> <md-toolbar color="primary">
<div (click)="menuAction();"> <div (click)="menuAction();" class="user-nav-menu">
<span class="ecm-menu-icon"></span> <span class="ecm-menu-icon"></span>
<span class="ecm-menu-icon"></span> <span class="ecm-menu-icon"></span>
<span class="ecm-menu-icon"></span> <span class="ecm-menu-icon"></span>
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts
View file @ 6fa2a1fd
...@@ -263,8 +263,10 @@ export class ECMHeaderComponent implements OnInit, OnDestroy { ...@@ -263,8 +263,10 @@ export class ECMHeaderComponent implements OnInit, OnDestroy {
} }
menuAction() { menuAction() {
if( this.clientWidth < 640 ){
this.ecmPanel.open({ type: 'overlay', option: 'MENU_OPT', top:'', right: '', width:'80%' }); this.ecmPanel.open({ type: 'overlay', option: 'MENU_OPT', top:'', right: '', width:'80%' });
} }
}
updateProfileImages() { updateProfileImages() {
var userInfo = localStorage.getItem( 'userInfo' ); var userInfo = localStorage.getItem( 'userInfo' );
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.css
View file @ 6fa2a1fd
/* Basic styles */
* { .category-list-container {
box-sizing: border-box; padding-top: 40px;
} padding-left: 20px;
html, body { padding-bottom: 25px;
margin: 0; border-bottom: 1px solid #f2f2f2;
} }
body {
font-family: sans-serif; .top-categories-title, .my-menu-title {
background-color: #F6C390; color: #787878;
} font-size: 0.8rem;
a { padding-left: 5px;
text-decoration: none; }
}
.container { .category-list {
position: relative; padding-top: 20px;
margin: 0; }
/*width: 300px;*/
height: 534px; .category-title {
background-color: #533557; line-height: 47px;
background-color: transparent; font-size: 1.2rem;
overflow: hidden; padding-left: 10px;
height: 100%; }
}
/* Toggle functionality */ .top-category {
#toggle { height: 60px;
position: absolute; }
left: -100%;
top: -100%; .view-all-button {
} padding-left: 60px;
#toggle:focus ~ .toggle-container .button-toggle { color: mediumvioletred;
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px font-weight: bold;
rgba(0, 0, 0, 0.1); font-size: 1.1rem;
} }
#toggle:checked ~ .container {
background-color: blue; .my-menu-container {
} padding-top: 10px;
#toggle:checked ~ .toggle-container .button-toggle { padding-left: 20px;
box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px }
rgba(0, 0, 0, 0.1);
} .my-menu-list {
#toggle:checked ~ .toggle-container .button-toggle:hover { padding-top: 20px;
box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px }
rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1); .menu-title {
} font-size: 1.2rem;
#toggle:checked ~ .toggle-container .button-toggle:before { padding-left: 10px;
transform: translateY(-50%) rotate(45deg) scale(1); }
}
#toggle:checked ~ .toggle-container .button-toggle:after { .ecm-user-icon, .ecm-order-icon, .ecm-wishlist-icon {
transform: translateY(-50%) rotate(-45deg) scale(1);
}
#toggle:checked:focus ~ .toggle-container .button-toggle {
box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
}
#toggle:checked ~ .nav {
margin-bottom: 100px;
pointer-events: auto;
transform: translate(50px, 50px);
}
#toggle:checked ~ .nav .nav-item {
color: #EC7263;
color: #fff;
letter-spacing: 0;
height: 40px; height: 40px;
line-height: 40px; width: 40px;
margin-top: 0; }
opacity: 1;
transform: scaleY(1); .nav-my-profile, .nav-orders, .nav-wishlist {
transition: 0.5s, opacity 0.1s; padding-bottom: 10px;
} }
#toggle:checked ~ .nav .nav-item:nth-child(1) {
transition-delay: 0.15s; .help-center-title {
} bottom: 0;
#toggle:checked ~ .nav .nav-item:nth-child(1):before { position: fixed;
transition-delay: 0.15s; padding: 10px;
} padding-left: 20px;
#toggle:checked ~ .nav .nav-item:nth-child(2) { font-size: 1.2rem;
transition-delay: 0.1s; width: 80%;
} border-top: 1px solid #f2f2f2;
#toggle:checked ~ .nav .nav-item:nth-child(2):before {
transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3) {
transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(3):before {
transition-delay: 0.05s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4) {
transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:nth-child(4):before {
transition-delay: 0s;
}
#toggle:checked ~ .nav .nav-item:before {
opacity: 0;
}
/* Toggle button */
.button-toggle {
top: 0;
position: absolute;
/* display: inline-block; */
width: 20px;
height: 20px;
margin: 10px 15px 15px 5px;
/* margin: 10px 15px 15px 25px; */
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 100%;
transition: 0.6s;
-webkit-transition: 0.6s;
}
.button-toggle:hover {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
rgba(0, 0, 0, 0.1);
}
.button-toggle:before, .button-toggle:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: #fff;
border-radius: 5px;
transition: 0.5s;
}
.button-toggle:before {
transform: translateY(-50%) rotate(45deg) scale(0);
}
.button-toggle:after {
transform: translateY(-50%) rotate(-45deg) scale(0);
}
/* Menu */
.nav {
left: 10px;
position: absolute;
display: inline-block;
margin: 10px 15px 15px 10px;
pointer-events: none;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.nav-item {
position: relative;
display: inline-block;
float: left;
clear: both;
color: transparent;
font-size: 14px;
letter-spacing: -6.2px;
height: 7px;
line-height: 7px;
text-transform: uppercase;
white-space: nowrap;
transform: scaleY(0.2);
transition: 0.5s, opacity 1s;
}
.nav-item:nth-child(1) {
transition-delay: 0s;
}
.nav-item:nth-child(1):before {
transition-delay: 0s;
}
.nav-item:nth-child(2) {
transition-delay: 0.05s;
}
.nav-item:nth-child(2):before {
transition-delay: 0.05s;
}
.nav-item:nth-child(3) {
transition-delay: 0.1s;
}
.nav-item:nth-child(3):before {
transition-delay: 0.1s;
}
.nav-item:nth-child(4) {
transition-delay: 0.15s;
}
.nav-item:nth-child(4):before {
transition-delay: 0.15s;
}
.nav-item:nth-child(1) {
letter-spacing: -8px;
}
.nav-item:nth-child(2) {
letter-spacing: -7px;
}
.nav-item:nth-child(n + 4) {
letter-spacing: -8px;
margin-top: -7px;
opacity: 0;
}
.nav-item:before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #EC7263;
background-color: #fff;
transform: translateY(-50%) scaleY(5);
transition: 0.5s;
} }
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.html
View file @ 6fa2a1fd
<div class="container">
<!-- This checkbox will give us the toggle behavior, it will be hidden, but functional --> <div class="category-list-container">
<input id="toggle" type="checkbox"> <div class="top-categories-title">Top Categories</div>
<!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element --> <div class="category-list">
<!-- This label is tied to the checkbox, and it will contain the toggle "buttons" --> <div *ngFor="let _category of categories | async" class="top-category" (click)="viewCategory(_category);">
<label class="toggle-container" for="toggle"> <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon --> <ecm-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'"></ecm-image>
<span class="button button-toggle"></span> <span class="category-title">{{_category.shDescr}}</span>
</label>
<!-- The nav menu -->
<nav class="nav">
<a class="nav-item" href="">Dashboard</a> <a class="nav-item" href="">History</a>
<a class="nav-item" href="">Statistics</a> <a class="nav-item" href="">Settings</a>
</nav>
<!-- Just dummy content like in the animated gif -->
<!-- <section class="dummy-content">
<div class="circle"></div>
<div class="text">
<span></span>
<span></span>
</div> </div>
<div class="square-top"></div> </div>
<div class="square-behind"></div> <div class="view-all-button">
</section> --> <span (click)="viewAllCategories();">View All</span>
</div>
</div>
<div class="my-menu-container" *ngIf="userData">
<div class="my-menu-title">My Menu</div>
<div class="my-menu-list">
<div class="nav-my-profile">
<img class="ecm-user-icon" src="/ecm/assets/images/svg/user.svg" />
<span class="menu-title">My Profile</span>
</div>
<div class="nav-orders">
<img class="ecm-order-icon" src="/ecm/assets/images/svg/order.svg" />
<span class="menu-title">Orders</span>
</div>
<div class="nav-wishlist">
<img class="ecm-wishlist-icon" src="/ecm/assets/images/svg/wishlist.svg" />
<span class="menu-title" (click)="goToWishlist();">Wishlist</span>
</div>
</div>
</div>
<div class="help-center-title">
<span>Help Center</span>
</div> </div>
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.ts
View file @ 6fa2a1fd
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Category } from '../ecm-model/category-model';
import { Store } from '@ngrx/store';
import { AppState } from '../ecm-store/reducers';
import { CategoryActions, SubCategoryActions } from '../ecm-store/actions';
import { Observable } from 'rxjs/Observable';
@Component({ @Component({
selector: 'ecm-nav-menu', selector: 'ecm-nav-menu',
...@@ -6,8 +14,53 @@ import { Component, OnInit } from '@angular/core'; ...@@ -6,8 +14,53 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./ecm-nav-menu.component.css'] styleUrls: ['./ecm-nav-menu.component.css']
}) })
export class ECMNavMenuComponent implements OnInit { export class ECMNavMenuComponent implements OnInit {
constructor() { }
@Output() closePanel = new EventEmitter();
categories: Observable<Category[]>;
userData;
constructor(private store: Store<AppState>, private categoryAction:CategoryActions, private subCategoryAction: SubCategoryActions, private router: Router, private route: ActivatedRoute) { }
ngOnInit() { ngOnInit() {
this.getCategories();
this.createUserData();
}
getCategories() {
this.categories = this.store.select('categories');
}
viewCategory(category){
this.store.dispatch( this.subCategoryAction.resetSubCategoryList() );
this.store.dispatch( this.subCategoryAction.loadSubCategories( category.catCode ) );
this.store.dispatch(this.categoryAction.getCategorySuccess(category));
this.router.navigate([ '/categories', category.catCode]);
}
viewAllCategories(){
let openRoutePath = this.route.snapshot.url[0].path;
if(openRoutePath !== 'home')
{
this.router.navigate(['/home']);
}else {
this.closePanel.emit();
window.scrollTo(0,600);
}
}
goToWishlist(){
this.router.navigate(['/wishlist']);
}
createUserData() {
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
this.userData = JSON.parse( userInfo );
}
else
{
this.userData = null;
}
} }
} }
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-panel/ecm-dialog.html
View file @ 6fa2a1fd
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<ecm-signin *ngSwitchCase="'SIGNIN_OPT'" (closePanel)="dialogRef.close();" ></ecm-signin> <ecm-signin *ngSwitchCase="'SIGNIN_OPT'" (closePanel)="dialogRef.close();" ></ecm-signin>
<ecm-cart *ngSwitchCase="'CART_OPT'" [isMiniCart] = 'true' (closePanel)="dialogRef.close();" ></ecm-cart> <ecm-cart *ngSwitchCase="'CART_OPT'" [isMiniCart] = 'true' (closePanel)="dialogRef.close();" ></ecm-cart>
<ecm-user-option *ngSwitchCase="'USER_OPT'" (closePanel)="dialogRef.close();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option> <ecm-user-option *ngSwitchCase="'USER_OPT'" (closePanel)="dialogRef.close();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
<ecm-nav-menu *ngSwitchCase="'MENU_OPT'" (closePanel)="dialogRef.close();"> </ecm-nav-menu>
<div *ngSwitchCase="'SEARCH_OPT'"> <div *ngSwitchCase="'SEARCH_OPT'">
<span style="float:left;"> <span style="float:left;">
<button md-button class="square-button" (click)="dialogRef.close()" > <button md-button class="square-button" (click)="dialogRef.close()" >
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.html
View file @ 6fa2a1fd
<div *ngIf="(wishListItems | async)?.length == 0">
<ecm-header [isFixedHeader]=true> </ecm-header> <ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs> <ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
<div *ngIf="(wishListItems | async)?.length == 0">
<div class="row"> <div class="row">
<div class="medium-12 large-12 columns" style="text-align: center; margin-top: 120px;"> <div class="medium-12 large-12 columns" style="text-align: center; margin-top: 120px;">
<img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg"> <img class="empty-cart-img" src="/ecm/assets/images/svg/Empty Cart.svg">
...@@ -11,10 +11,13 @@ ...@@ -11,10 +11,13 @@
</div> </div>
<div style="margin-top: 155px;"> <div style="margin-top: 155px;">
</div> </div>
<ecm-footer></ecm-footer>
</div> </div>
<div *ngIf="(wishListItems | async)?.length > 0"> <div *ngIf="(wishListItems | async)?.length > 0">
<ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'WISHLIST'"></ecm-breadcrumbs>
<div class="row details-of-Cart"> <div class="row details-of-Cart">
<md-card class="medium-12 columns cartItemsDetails"> <md-card class="medium-12 columns cartItemsDetails">
<div class="ecmdetailsItems"> <div class="ecmdetailsItems">
...@@ -54,5 +57,5 @@ ...@@ -54,5 +57,5 @@
</div> </div>
</md-card> </md-card>
</div> </div>
</div>
<ecm-footer></ecm-footer> <ecm-footer></ecm-footer>
</div>
ecm/Angular/ProteusECM/trunk/src/app/ecm-view/ecm-wish-list/ecm-wish-list.component.ts
View file @ 6fa2a1fd
...@@ -8,6 +8,8 @@ import { Http} from '@angular/http' ...@@ -8,6 +8,8 @@ import { Http} from '@angular/http'
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '../../ecm-store/reducers'; import { AppState } from '../../ecm-store/reducers';
import { WishListActions } from '../../ecm-store/actions';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
...@@ -19,18 +21,18 @@ import { Observable } from 'rxjs/Observable'; ...@@ -19,18 +21,18 @@ import { Observable } from 'rxjs/Observable';
}) })
export class EcmWishListComponent implements OnInit { export class EcmWishListComponent implements OnInit {
// wishListDetail: Item; // wishListDetail: Item;
wishListItems: Observable<Item[]>; wishListItems: Observable<ItemDetail[]>;
errorMessage: string; errorMessage: string;
cartCount = 0; cartCount = 0;
constructor( public subcategoryService: EcmProductDetailService, private route: ActivatedRoute, private router: Router, public snackBar: MdSnackBar, public wishListService: EcmWishListService, private http: Http, private store: Store<AppState> ) { } constructor( public subcategoryService: EcmProductDetailService, private route: ActivatedRoute, private router: Router, public snackBar: MdSnackBar, public wishListService: EcmWishListService, private http: Http, private store: Store<AppState>, private wishListAction: WishListActions) { }
ngOnInit() { ngOnInit() {
this.getWishlistItems(); this.getWishlistItems();
} }
getWishlistItems() { getWishlistItems() {
this.wishListItems = this.store.select( 'wishlist' ); this.wishListItems = this.store.select( 'wishlistItems' );
this.store.select( 'wishlist' ).forEach( this.store.select( 'wishlist' ).forEach(
value => { value => {
console.log( 'wishlist Items----' ); console.log( 'wishlist Items----' );
...@@ -42,7 +44,7 @@ export class EcmWishListComponent implements OnInit { ...@@ -42,7 +44,7 @@ export class EcmWishListComponent implements OnInit {
userActionUrl = '/ecm/service/feeds/wishlist'; userActionUrl = '/ecm/service/feeds/wishlist';
deletewishlistItem( item ) { deletewishlistItem( item ) {
//this.store.dispatch( { type: REMOVE_WISLIST, payload: item }); this.store.dispatch(this.wishListAction.deleteWishlistItemSuccess(item));
this.http.delete( this.userActionUrl + '/' + item.itemCode, {}) this.http.delete( this.userActionUrl + '/' + item.itemCode, {})
.subscribe( data => { .subscribe( data => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment