MVC: Add To Cart bug.

SPA: Add To Cart 'bug', Update Basket.

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

src/Web/WebMVC/Controllers/CartController.cs

@@ -52,7 +52,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
 
         public async Task<IActionResult> AddToCart(CatalogItem productDetails)
         {
-            if (productDetails != null)
+            if (productDetails.Id != null)
             {
                 var user = _appUserParser.Parse(HttpContext.User);
                 var product = new BasketItem()

src/Web/WebMVC/Views/Catalog/_product.cshtml

@@ -4,7 +4,7 @@
 <form asp-controller="Cart" asp-action="AddToCart">
 
     <img class="esh-catalog-thumbnail" src="@Model.PictureUri" />
-    <input class="esh-catalog-button" type="submit" value="[ ADD TO CART ]" />
+    <input class="esh-catalog-button @((!User.Identity.IsAuthenticated) ? "is-disabled" : "")" type="submit" value="[ ADD TO CART ]" />
 
     <div class="esh-catalog-name">
         <span>@Model.Name</span>

src/Web/WebMVC/wwwroot/css/catalog/catalog.component.css

@@ -86,6 +86,8 @@
     text-align: center;
     margin-bottom: 1.5rem;
     width: 33%;
+    display: inline-block;
+    float: none !important;
 }
 
 @media screen and (max-width: 1024px) {
@@ -116,6 +118,10 @@
     transition: all 0.35s;
     width: 80%;
 }
+    .esh-catalog-button.is-disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
 
     .esh-catalog-button:hover {
         background-color: #4a760f;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts

@@ -24,7 +24,7 @@ export class BasketStatusComponent implements OnInit {
         // Subscribe to Add Basket Observable:
         this.basketItemAddedSubscription = this.basketEvents.addItemToBasket$.subscribe(
             item => {
-                this.service.setBasket(item).subscribe(res => {
+                this.service.addItemToBasket(item).subscribe(res => {
                     this.service.getBasket().subscribe(basket => {
                         if (basket)
                             this.badge = basket.items.length;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html

@@ -41,8 +41,11 @@
         </article>
 
         <article class="esh-basket-items row">
-            <section class="esh-basket-item col-xs-9"></section>
+            <section class="esh-basket-item col-xs-7"></section>
             <section class="esh-basket-item col-xs-2">
+                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
+            </section>
+            <section class="esh-basket-item col-xs-3">
                 <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
             </section>
         </article>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts

@@ -26,7 +26,11 @@ export class BasketComponent implements OnInit {
 
     itemQuantityChanged(item: IBasketItem) {
         this.calculateTotalPrice();
-        this.service.setBasket(this.basket);
+        this.service.setBasket(this.basket).subscribe(x => console.log('basket updated: ' + x));
+    }
+
+    update(event: any) {
+        this.service.setBasket(this.basket).subscribe(x => console.log('basket updated: ' + x));
     }
 
     checkOut(event: any) {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts

@@ -55,9 +55,14 @@ export class BasketService {
         });
     }
     
-    setBasket(item): Observable<boolean> {
+    addItemToBasket(item): Observable<boolean> {
         this.basket.items.push(item);
-        return this.service.post(this.basketUrl + '/', this.basket).map((response: Response) => {
+        return this.setBasket(this.basket);
+    }
+
+    setBasket(basket): Observable<boolean> {
+        this.basket = basket;
+        return this.service.post(this.basketUrl + '/', basket).map((response: Response) => {
             return true;
         });
     }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -29,7 +29,7 @@
                  *ngFor="let item of catalog?.data">
 
                 <img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
-                <button class="esh-catalog-button" (click)="addToCart(item)">
+                <button [ngClass]="{'esh-catalog-button': true, 'is-disabled': !authenticated}" (click)="addToCart(item)">
                     [ ADD TO CART ]
                 </button>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -95,6 +95,8 @@
         margin-bottom: 1.5rem;
         text-align: center;
         width: 33%;
+        display: inline-block;
+        float: none !important;
 
         @media screen and (max-width: $media-screen-m) {
             width: 50%;
@@ -121,6 +123,11 @@
         transition: all $animation-speed-default;
         width: 80%;
 
+        &.is-disabled {
+            opacity: .5;
+            pointer-events: none;
+        }
+
         &:hover {
             background-color: $color-secondary-darker;
             transition: all $animation-speed-default;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit }    from '@angular/core';
+import { Subscription }         from 'rxjs/Subscription';
+
 import { CatalogService }       from './catalog.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
 import { ICatalog }             from '../shared/models/catalog.model';
@@ -7,6 +9,7 @@ import { ICatalogType }         from '../shared/models/catalogType.model';
 import { ICatalogBrand }        from '../shared/models/catalogBrand.model';
 import { IPager }               from '../shared/models/pager.model';
 import { BasketWrapperService}  from '../shared/services/basket.wrapper.service';
+import { SecurityService }      from '../shared/services/security.service';
 
 @Component({
     selector: 'esh-catalog .esh-catalog',
@@ -20,17 +23,27 @@ export class CatalogComponent implements OnInit {
     brandSelected: number;
     typeSelected: number;
     paginationInfo: IPager;
+    authenticated: boolean = false;
+    authSubscription: Subscription;
 
-    constructor(private service: CatalogService, private basketService: BasketWrapperService, private configurationService: ConfigurationService) { }
+    constructor(private service: CatalogService, private basketService: BasketWrapperService, private configurationService: ConfigurationService, private securityService: SecurityService) {
+        this.authenticated = securityService.IsAuthorized;
+    }
 
     ngOnInit() {
-        if (this.configurationService.isReady) {
+
+        // Configuration Settings:
+        if (this.configurationService.isReady) 
             this.loadData();
-        }else{
+        else
             this.configurationService.settingsLoaded$.subscribe(x => {
                 this.loadData();
             });
-        }
+
+        // Subscribe to login and logout observable
+        this.authSubscription = this.securityService.authenticationChallenge$.subscribe(res => {
+            this.authenticated = res;
+        });
     }
 
     loadData() {