From 2231aabf72b3878255802632471fcb287140599f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ca=C3=B1izares=20Est=C3=A9vez?= Date: Wed, 28 Dec 2016 09:07:12 +0100 Subject: [PATCH 1/2] SPA: Identity component, Order component --- eShopOnContainers.sln | 51 +++++ .../eShopOnContainers.Droid.csproj | 2 +- .../eShopOnContainers.Droid.csproj.bak | 2 - .../eShopOnContainers.TestRunner.Droid.csproj | 2 +- ...opOnContainers.TestRunner.Droid.csproj.bak | 2 +- .../Client/modules/app.component.ts | 2 +- .../Client/modules/app.routes.ts | 2 + .../basket-status/basket-status.component.ts | 17 +- .../modules/basket/basket.component.html | 5 + .../modules/basket/basket.component.scss | 20 +- .../Client/modules/basket/basket.component.ts | 15 +- .../Client/modules/basket/basket.service.ts | 13 +- .../modules/catalog/catalog.component.scss | 7 +- .../modules/catalog/catalog.component.ts | 8 +- .../orders-new/orders-new.component.html | 175 ++++++++++++++++++ .../orders-new/orders-new.component.scss | 59 ++++++ .../orders/orders-new/orders-new.component.ts | 43 +++++ .../Client/modules/orders/orders.module.ts | 3 +- .../shared/components/identity/identity.html | 6 +- .../shared/components/identity/identity.scss | 51 ++--- .../shared/components/identity/identity.ts | 11 +- .../modules/shared/components/pager/pager.ts | 2 +- .../shared/services/basket.wrapper.service.ts | 10 +- .../shared/services/security.service.ts | 34 ++-- .../Properties/launchSettings.json | 2 +- 25 files changed, 456 insertions(+), 88 deletions(-) create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts diff --git a/eShopOnContainers.sln b/eShopOnContainers.sln index 53013c1cb..47eaaa0b0 100644 --- a/eShopOnContainers.sln +++ b/eShopOnContainers.sln @@ -75,6 +75,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "eShopOnContainers.Core", "s EndProject Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "UnitTest", "test\Services\UnitTest\UnitTest.xproj", "{7796F5D8-31FC-45A4-B673-19DE5BA194CF}" EndProject +Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "Ordering.Application", "src\Services\Ordering\Ordering.Application\Ordering.Application.xproj", "{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Ad-Hoc|Any CPU = Ad-Hoc|Any CPU @@ -956,6 +958,54 @@ Global {7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x64.Build.0 = Release|Any CPU {7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x86.ActiveCfg = Release|Any CPU {7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x86.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|Any CPU.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|Any CPU.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|ARM.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|ARM.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhone.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhone.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhoneSimulator.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x64.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x64.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x86.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x86.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|Any CPU.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|Any CPU.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|ARM.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|ARM.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhone.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhone.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhoneSimulator.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x64.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x64.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x86.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x86.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|Any CPU.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|ARM.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|ARM.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhone.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhone.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x64.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x64.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x86.ActiveCfg = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x86.Build.0 = Debug|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|Any CPU.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|Any CPU.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|ARM.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|ARM.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhone.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhone.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhoneSimulator.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x64.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x64.Build.0 = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x86.ActiveCfg = Release|Any CPU + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -991,5 +1041,6 @@ Global {E3B18084-842C-4B80-8E4A-A7E588EC3137} = {B7B1D395-4E06-4036-BE86-C216756B9367} {67F9D3A8-F71E-4428-913F-C37AE82CDB24} = {778289CA-31F7-4464-8C2A-612EE846F8A7} {7796F5D8-31FC-45A4-B673-19DE5BA194CF} = {EF0337F2-ED00-4643-89FD-EE10863F1870} + {4193CAA3-A1C3-4818-A06F-A2D85FDE77E7} = {0BD0DB92-2D98-44D9-9AC0-C59186D59B0B} EndGlobalSection EndGlobal diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj b/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj index 8a3b32690..5e83a91c3 100644 --- a/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj +++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj @@ -17,7 +17,7 @@ Off Properties\AndroidManifest.xml true - v7.0 + v6.0 armeabi,armeabi-v7a,x86 diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj.bak b/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj.bak index 2be918776..8a3b32690 100644 --- a/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj.bak +++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj.bak @@ -389,10 +389,8 @@ - - \ No newline at end of file diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj b/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj index ffa9c0b55..c9cb8a265 100644 --- a/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj +++ b/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj @@ -16,7 +16,7 @@ Resources\Resource.Designer.cs Off True - v7.0 + v6.0 Properties\AndroidManifest.xml diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak b/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak index c9cb8a265..ffa9c0b55 100644 --- a/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak +++ b/src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak @@ -16,7 +16,7 @@ Resources\Resource.Designer.cs Off True - v6.0 + v7.0 Properties\AndroidManifest.xml diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts index 08d64256a..391e966aa 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts @@ -21,7 +21,7 @@ export class AppComponent implements OnInit { subscription: Subscription; constructor(private titleService: Title, private securityService: SecurityService) { - + this.Authenticated = this.securityService.IsAuthorized; } ngOnInit() { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts index 853b64ac4..2bc69d248 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts @@ -4,6 +4,7 @@ import { BasketComponent } from './basket/basket.component'; import { CatalogComponent } from './catalog/catalog.component'; import { OrdersComponent } from './orders/orders.component'; import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component'; +import { OrdersNewComponent } from './orders/orders-new/orders-new.component'; export const routes: Routes = [ { path: '', redirectTo: 'catalog', pathMatch: 'full' }, @@ -11,6 +12,7 @@ export const routes: Routes = [ { path: 'catalog', component: CatalogComponent }, { path: 'orders', component: OrdersComponent }, { path: 'orders/:id', component: OrdersDetailComponent }, + { path: 'order', component: OrdersNewComponent } //Lazy async modules (angular-loader-router) and enable a router in each module. //{ // path: 'basket', loadChildren: '/basket/basket.module' }); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts index 11c1f86d0..a69f94e3b 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts @@ -3,6 +3,7 @@ import { Subscription } from 'rxjs/Subscription'; import { BasketService } from '../basket.service'; import { BasketWrapperService } from '../../shared/services/basket.wrapper.service'; +import { SecurityService } from '../../shared/services/security.service'; @Component({ selector: 'esh-basket-status', @@ -11,11 +12,13 @@ import { BasketWrapperService } from '../../shared/services/basket.wrapper.servi }) export class BasketStatusComponent implements OnInit { subscription: Subscription; + authSubscription: Subscription; badge: number = 0; - constructor(private service: BasketService, private basketEvents: BasketWrapperService) { } + constructor(private service: BasketService, private basketEvents: BasketWrapperService, private authService: SecurityService) { } ngOnInit() { + // Subscribe to Add Basket Observable: this.subscription = this.basketEvents.addItemToBasket$.subscribe( item => { this.service.setBasket(item).subscribe(res => { @@ -24,6 +27,18 @@ export class BasketStatusComponent implements OnInit { }); }); }); + + // Subscribe to login and logout observable + this.authSubscription = this.authService.authenticationChallenge$.subscribe(res => { + this.service.getBasket().subscribe(basket => { + this.badge = basket.items.length; + }); + }); + + // Init: + this.service.getBasket().subscribe(basket => { + this.badge = basket.items.length; + }); } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html index 8afe01a74..9d1f16751 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html @@ -59,5 +59,10 @@ +
+
+
+ +
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss index aa752bea5..49b1728a3 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss @@ -61,7 +61,25 @@ } &-totals { - border-bottom:none!important; + border-bottom: none !important; + } + + &-checkout { + float: right; + margin-top: 40px; + margin-bottom: 40px; + background-color: #83d01b; + color: #fff; + padding: 10px 20px 10px 20px; + border-radius: 0; + border: none; + width: 255px; + display: inline-block; + text-align: center; + text-transform: uppercase; + height: 45px; + font-size: 16px; + font-weight: normal; } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts index 41818fb2b..c0ec38ec5 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -1,8 +1,10 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { BasketService } from './basket.service'; import { IBasket } from '../shared/models/basket.model'; import { IBasketItem } from '../shared/models/basketItem.model'; +import { BasketWrapperService } from '../shared/services/basket.wrapper.service'; @Component({ selector: 'esh-basket .esh-basket', @@ -12,8 +14,8 @@ import { IBasketItem } from '../shared/models/basketItem.model'; export class BasketComponent implements OnInit { basket: IBasket; totalPrice: number = 0; - - constructor(private service: BasketService) { } + + constructor(private service: BasketService, private router: Router, private basketwrapper: BasketComponent) { } ngOnInit() { this.service.getBasket().subscribe(basket => { @@ -24,6 +26,13 @@ export class BasketComponent implements OnInit { itemQuantityChanged(item: IBasketItem) { this.calculateTotalPrice(); + this.service.setBasket(this.basket); + } + + checkOut() { + console.log('checkout clicked!'); + this.basketwrapper.basket = this.basket; + this.router.navigate(['order']); } private calculateTotalPrice() { @@ -31,5 +40,7 @@ export class BasketComponent implements OnInit { this.totalPrice += (item.unitPrice * item.quantity) }); } + + } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts index c8018554e..2f0873f21 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts @@ -16,16 +16,25 @@ import 'rxjs/add/operator/map'; export class BasketService { private basketUrl: string = 'http://eshopcontainers:5103'; basket: IBasket = { - buyerId: 'fakeIdentity', + buyerId: '', items: [] }; constructor(private service: DataService, private authService: SecurityService) { this.basket.items = []; + + // Init: + if (this.authService.IsAuthorized) { + if (this.authService.UserData) { + this.basket.buyerId = this.authService.UserData.sub; + this.getBasket().subscribe(basket => { + this.basket = basket; + }); + } + } } setBasket(item): Observable { - console.log('set basket'); this.basket.items.push(item); return this.service.post(this.basketUrl + '/', this.basket).map((response: Response) => { return true; diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss index 1602f1a69..54e0d5462 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss @@ -28,7 +28,7 @@ select::-ms-expand { &-container { position: absolute; width: 100%; - background-color: $primary-colour; + background-color: $color-brand; left: 0; height: 65px; } @@ -37,7 +37,7 @@ select::-ms-expand { width: 45px; height: 45px; padding: 6px 20px 10px 8px; - background-color: $primary-accent; + background-color: $color-secondary; color: white; font-size: 16px; margin: 10px 0; @@ -96,7 +96,7 @@ select::-ms-expand { width: 255px; height: 45px; padding: 10px 20px 10px 20px; - background-color: $primary-accent; + background-color: $color-secondary; color: white; font-size: 16px; margin: 10px 0; @@ -109,7 +109,6 @@ select::-ms-expand { text-transform: uppercase; font-weight: 300; font-size: 16px; - /*margin-top: 20px;*/ } &-price { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts index e3e328aea..0eaf5fd5a 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts @@ -57,7 +57,7 @@ export class CatalogComponent implements OnInit { getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) { this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => { this.catalog = catalog; - console.log('catalog items retrieved: ' + catalog.count); + //console.log('catalog items retrieved: ' + catalog.count); this.paginationInfo = { actualPage : catalog.pageIndex, @@ -67,7 +67,7 @@ export class CatalogComponent implements OnInit { items: catalog.pageSize }; - console.log(this.paginationInfo); + //console.log(this.paginationInfo); }); } @@ -76,7 +76,7 @@ export class CatalogComponent implements OnInit { this.types = types; let alltypes = { id: null, type: 'All' }; this.types.unshift(alltypes); - console.log('types retrieved: ' + types.length); + //console.log('types retrieved: ' + types.length); }); } @@ -85,7 +85,7 @@ export class CatalogComponent implements OnInit { this.brands = brands; let allBrands = { id: null, brand: 'All' }; this.brands.unshift(allBrands); - console.log('brands retrieved: ' + brands.length); + //console.log('brands retrieved: ' + brands.length); }); } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html new file mode 100644 index 000000000..a38b587d2 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html @@ -0,0 +1,175 @@ +
+
    +
  • Back to basket
    • +
+
+ + +
+

Form with Validations

+
+
+ + + +
You must include a first name.
+
+
+ + + +
You must include a last name.
+
Your last name must be at least 5 characters long.
+
Your last name cannot exceed 10 characters.
+
+
+ +
You must select a gender.
+
+
+ +
+
+ +
+
+ +
+ + + +
+ +
+
+
+ + + + + +
+

SHIPPING ADDRESS

+
+
+ ADDRESS
+ {{address}} +
+
+ CITY
+ {{city}} +
+
+ STATE
+ {{state}} +
+
+ COUNTRY
+ {{country}} +
+
+

PAYMENT METHOD

+
+
+ CARD NUMBER
+ {{address}} +
+
+ CARDHOLDER NAME
+ {{city}} +
+
+ EXPIRATION DATE
+ {{state}} +
+
+ SECURITY CODE
+ {{country}} +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ PRODUCT + + + + BRAND + + PRICE + + QUANTITY + + COST +
+ + + + + ROSLYN + + + + + + +
+
+
TOTAL
+ $ 29,00 + +
+
+
+
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss new file mode 100644 index 000000000..2376a4780 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss @@ -0,0 +1,59 @@ +@import '../../_variables.scss'; + +.esh-orders-new { + min-height: 80vh; + + &-header { + background-color: #00A69C; + height: 63px; + + li { + list-style: none; + display: inline; + opacity: 0.5; + margin-top: 25px; + margin-left: 10px; + float: right; + cursor: pointer; + color: white; + } + + li a { + color: white; + } + + &-back { + float: left !important; + margin-top: 20px !important; + text-transform: uppercase; + } + + li a:hover { + text-decoration: none; + } + } + + &-container { + min-height: 70vh; + padding-top: 40px; + margin-bottom: 30px; + } + + &-placeOrder { + float: right; + margin-top: 40px; + margin-bottom: 40px; + background-color: #83d01b; + color: #fff; + padding: 10px 20px 10px 20px; + border-radius: 0; + border: none; + width: 255px; + display: inline-block; + text-align: center; + text-transform: uppercase; + height: 45px; + font-size: 16px; + font-weight: normal; + } +} diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts new file mode 100644 index 000000000..e1b225420 --- /dev/null +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { OrdersService } from '../orders.service'; +import { IOrder } from '../../shared/models/order.model'; +import { SecurityService } from '../../shared/services/security.service'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { BasketWrapperService } from '../../shared/services/basket.wrapper.service'; + +@Component({ + selector: 'esh-orders-new .esh-orders-new', + styleUrls: ['./orders-new.component.scss'], + templateUrl: './orders-new.component.html' +}) +export class OrdersNewComponent implements OnInit { + private newOrderForm = {}; // new order form + + constructor(private service: OrdersService, private identityService: SecurityService, fb: FormBuilder, private basketWrapper: BasketWrapperService) { + this.newOrderForm = fb.group({ + 'address': [null, Validators.required], + 'city': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])], + 'state': [null, Validators.required], + 'country': [null, Validators.required], + 'cardnumber': [null, Validators.required], + 'cardholdername': [null, Validators.required], + 'expirationdate': [null, Validators.required], + 'securitycode': [null, Validators.required], + }); + } + + ngOnInit() { + //Obtener el basket. + var basket = this.basketWrapper.basket; + console.log('orders component'); + console.log(basket); + console.log(this.identityService.UserData); + //Obtener información del perfil de usuario. + + } + + submitForm(value: any) { + console.log(value); + } +} + diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts index f3a920f59..6e8f73358 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts @@ -4,12 +4,13 @@ import { BrowserModule } from '@angular/platform-browser'; import { SharedModule } from '../shared/shared.module'; import { OrdersComponent } from './orders.component'; import { OrdersDetailComponent } from './orders-detail/orders-detail.component'; +import { OrdersNewComponent } from './orders-new/orders-new.component'; import { OrdersService } from './orders.service'; import { Pager } from '../shared/components/pager/pager'; @NgModule({ imports: [BrowserModule, SharedModule], - declarations: [OrdersComponent, OrdersDetailComponent], + declarations: [OrdersComponent, OrdersDetailComponent, OrdersNewComponent], providers: [OrdersService] }) export class OrdersModule { } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html index b0dd9f49c..17ab09824 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html @@ -1,8 +1,8 @@ - +
{{userName}}
- MY ORDERS -
LOG OUT
+
MY ORDERS
+
LOG OUT
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss index 7ab3b2394..4e8072812 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss @@ -5,8 +5,8 @@ right: 120px; cursor: pointer; - &:hover .identity-userDropdown{ - display:block; + &:hover .identity-userDropdown { + display: block; } } @@ -19,24 +19,9 @@ right: -15px; z-index: 3; - &:hover{ - display:block; - } - - //TODO: DELETE THIS BLOCK ONCE REFACTOR. - & a { - color: black; - padding: 12px 16px; - text-decoration: none; + &:hover { display: block; - text-align: right; - text-transform: uppercase; - - &:hover{ - color: #83d01b; - } } - // & div { color: black; @@ -46,37 +31,33 @@ text-align: right; text-transform: uppercase; - &:hover{ + &:hover { color: #83d01b; } } } &-downArrow { - background-image: url('../images/arrow-down.png'); height: 7px; width: 10px; display: inline-block; margin-left: 20px; &:hover > identity.userDropdown { - display:block; + display: block; } } - &-ordersIcon { - background-image: url('../images/my_orders.PNG'); - display: inline-block; - height: 20px; - width: 20px; - margin-left: 15px; - } - - &-logOutIcon { - background-image: url('../images/logout.PNG'); - display: inline-block; - height: 19px; - width: 19px; - margin-left: 15px; + &-login { + border: 1px solid #00a69c; + height: 36px !important; + margin-right: 10px; + margin-top: 10px; + background-color: #fff; + color: #00a69c; + text-transform: uppercase; + max-width: 140px; + width: 140px; + padding-top: 8px !important; } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts index ea3b92e9c..bd5102ddf 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts @@ -21,9 +21,6 @@ export class Identity implements OnInit { ngOnInit() { this.subscription = this.service.authenticationChallenge$.subscribe(res => { - //console.log(res); - //console.log(this.service.UserData); - //console.log(this.service); this.authenticated = res; this.userName = this.service.UserData.email; }); @@ -31,6 +28,14 @@ export class Identity implements OnInit { if (window.location.hash) { this.service.AuthorizedCallback(); } + + console.log('identity component, checking authorized' + this.service.IsAuthorized); + this.authenticated = this.service.IsAuthorized; + + if (this.authenticated) { + if (this.service.UserData) + this.userName = this.service.UserData.email; + } } logoutClicked(event: any) { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts index 8b4727401..73764a9a8 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts @@ -21,7 +21,7 @@ export class Pager implements OnInit, OnChanges { } ngOnInit() { - console.log(this.model); + //console.log(this.model); } ngOnChanges() { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts index f23d0cd2c..6ca392694 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts @@ -1,11 +1,13 @@ -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs/Subject'; +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; -import { ICatalogItem } from '../models/catalogItem.model'; -import { IBasketItem } from '../models/basketItem.model'; +import { ICatalogItem } from '../models/catalogItem.model'; +import { IBasketItem } from '../models/basketItem.model'; +import { IBasket } from '../models/basket.model'; @Injectable() export class BasketWrapperService { + public basket: IBasket constructor() { } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts index cdf823b27..b3f73b569 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts @@ -1,10 +1,11 @@ -import { Injectable } from '@angular/core'; -import { Http, Response, Headers } from '@angular/http'; +import { Injectable } from '@angular/core'; +import { Http, Response, Headers } from '@angular/http'; import 'rxjs/add/operator/map'; -import { Observable } from 'rxjs/Observable'; -import { Subject } from 'rxjs/Subject'; +import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; //import { Configuration } from '../app.constants'; -import { Router } from '@angular/router'; +import { Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; @Injectable() export class SecurityService { @@ -15,7 +16,7 @@ export class SecurityService { private authenticationSource = new Subject(); authenticationChallenge$ = this.authenticationSource.asObservable(); - constructor(private _http: Http, private _router: Router) { + constructor(private _http: Http, private _router: Router, private route: ActivatedRoute) { this.headers = new Headers(); this.headers.append('Content-Type', 'application/json'); this.headers.append('Accept', 'application/json'); @@ -23,6 +24,8 @@ export class SecurityService { if (this.retrieve("IsAuthorized") !== "") { this.IsAuthorized = this.retrieve("IsAuthorized"); + this.authenticationSource.next(true); + this.UserData = this.retrieve("userData"); } } @@ -54,8 +57,10 @@ export class SecurityService { this.getUserData() .subscribe(data => { this.UserData = data; + this.store("userData", data); //emit observable this.authenticationSource.next(true); + window.location.href = 'http://localhost:5104'; }, error => this.HandleError(error), () => { @@ -105,6 +110,7 @@ export class SecurityService { var token = ""; var id_token = ""; var authResponseIsValid = false; + if (!result.error) { if (result.state !== this.retrieve("authStateControl")) { @@ -130,25 +136,14 @@ export class SecurityService { } } + if (authResponseIsValid) { this.SetAuthorizationData(token, id_token); - console.log(this.retrieve("authorizationData")); - - // router navigate to DataEventRecordsList - this._router.navigate(['/dataeventrecords/list']); - } - else { - this.ResetAuthorizationData(); - this._router.navigate(['/Unauthorized']); } } public Logoff() { - // /connect/endsession?id_token_hint=...&post_logout_redirect_uri=https://myapp.com - console.log("BEGIN Authorize, no auth data"); - var authorizationUrl = 'http://localhost:5105/connect/endsession'; - console.log(this.retrieve("authorizationDataIdToken")); var id_token_hint = this.retrieve("authorizationDataIdToken"); var post_logout_redirect_uri = 'http://localhost:5104/'; @@ -161,7 +156,6 @@ export class SecurityService { //emit observable this.authenticationSource.next(false); - window.location.href = url; } @@ -171,7 +165,7 @@ export class SecurityService { this._router.navigate(['/Forbidden']) } else if (error.status == 401) { - this.ResetAuthorizationData(); + //this.ResetAuthorizationData(); this._router.navigate(['/Unauthorized']) } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Properties/launchSettings.json b/src/Web/WebSPA/eShopOnContainers.WebSPA/Properties/launchSettings.json index fd33f59ec..c9baa91bd 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Properties/launchSettings.json +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Properties/launchSettings.json @@ -11,7 +11,7 @@ "IIS Express": { "commandName": "IISExpress", "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Production" + "ASPNETCORE_ENVIRONMENT": "Development" } } } From 15a2ea727f10024a00a18b83dee97e36ad7a7c23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ca=C3=B1izares=20Est=C3=A9vez?= Date: Wed, 28 Dec 2016 09:30:31 +0100 Subject: [PATCH 2/2] fix problem in basket component --- .../Client/modules/basket/basket.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts index c0ec38ec5..5c975dcbe 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -15,7 +15,7 @@ export class BasketComponent implements OnInit { basket: IBasket; totalPrice: number = 0; - constructor(private service: BasketService, private router: Router, private basketwrapper: BasketComponent) { } + constructor(private service: BasketService, private router: Router, private basketwrapper: BasketWrapperService) { } ngOnInit() { this.service.getBasket().subscribe(basket => {