Fixed some issues in catalog filters and improve catalog views.

src/Web/WebMVC/Controllers/CartController.cs

@@ -49,10 +49,10 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
             return View(vm);
         }
 
-        public async Task<IActionResult> AddToCart(string productId)
+        public async Task<IActionResult> AddToCart(CatalogItem productDetails)
         {
             var user = await _userManager.GetUserAsync(HttpContext.User);
-            var productDetails = _catalogSvc.GetCatalogItem(productId);
+            //var productDetails = _catalogSvc.GetCatalogItem(productId);
             var product = new BasketItem()
             {
                 Id = Guid.NewGuid().ToString(),
@@ -60,7 +60,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
                 ProductName = productDetails.Name,
                 PictureUrl = productDetails.PictureUri,
                 UnitPrice = productDetails.Price, 
-                ProductId = productId
+                ProductId = productDetails.Id
             };
             _basketSvc.AddItemToBasket(user, product);
             return RedirectToAction("Index", "Catalog");

src/Web/WebMVC/Models/Basket.cs

@@ -18,7 +18,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
 
         public decimal Total()
         {
-            return Items.Sum(x => x.UnitPrice * x.Quantity);
+            return Math.Round(Items.Sum(x => x.UnitPrice * x.Quantity),2);
         }
     }
 }

src/Web/WebMVC/Models/CartViewModels/IndexViewModel.cs

@@ -0,0 +1,15 @@
+using BikeSharing_Private_Web_Site.Services.Pagination;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Models.CartViewModels
+{
+    public class CartComponentViewModel
+    {
+        public int ItemsCount { get; set; }
+        public string Disabled { get { return (ItemsCount == 0) ? "is-disabled" : ""; } }
+    }
+}

src/Web/WebMVC/Models/CatalogViewModels/IndexViewModel.cs

@@ -12,8 +12,8 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels
         public IEnumerable<CatalogItem> CatalogItems { get; set; }
         public IEnumerable<SelectListItem> Brands { get; set; }
         public IEnumerable<SelectListItem> Types { get; set; }
-        public int BrandFilterApplied { get; set; }
-        public int TypesFilterApplied { get; set; }
+        public int? BrandFilterApplied { get; set; }
+        public int? TypesFilterApplied { get; set; }
         public PaginationInfo PaginationInfo { get; set; }
     }
 }

src/Web/WebMVC/Services/CatalogService.cs

@@ -30,7 +30,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
 
         public CatalogService(IOptions<AppSettings> settings) {
             _settings = settings;
-            _remoteServiceBaseUrl = $"{_settings.Value.CatalogUrl}api/v1/catalog/";
+            _remoteServiceBaseUrl = $"{_settings.Value.CatalogUrl}/api/v1/catalog/";
 
             #region fake data
             _items = new List<CatalogItem>()
@@ -79,7 +79,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             var filterQs = "";
 
             if (brand.HasValue || type.HasValue)
-                filterQs = $"/type/{type ?? null}/brand/{brand ?? null}";
+            {
+                var brandQs = (brand.HasValue) ? brand.Value.ToString() : "null";
+                var typeQs = (type.HasValue) ? type.Value.ToString() : "null";
+                filterQs = $"/type/{typeQs}/brand/{brandQs}";
+            }
 
             var catalogUrl = $"{_remoteServiceBaseUrl}items{filterQs}?pageIndex={page}&pageSize={take}";
             var dataString = await _apiClient.GetStringAsync(catalogUrl);
@@ -98,7 +102,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             var dataString = await _apiClient.GetStringAsync(url);
 
             var items = new List<SelectListItem>();
-            items.Add(new SelectListItem() { Value = "0", Text = "All", Selected = true });
+            items.Add(new SelectListItem() { Value = null, Text = "All", Selected = true });
 
             JArray brands = JArray.Parse(dataString);
             foreach (JObject brand in brands.Children<JObject>())
@@ -117,7 +121,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             var dataString = await _apiClient.GetStringAsync(url);
 
             var items = new List<SelectListItem>();
-            items.Add(new SelectListItem() { Value = "0", Text = "All", Selected = true });
+            items.Add(new SelectListItem() { Value = null, Text = "All", Selected = true });
 
             JArray brands = JArray.Parse(dataString);
             foreach (JObject brand in brands.Children<JObject>())

src/Web/WebMVC/ViewComponents/Cart.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.eShopOnContainers.WebMVC.Models.CartViewModels;
 using Microsoft.eShopOnContainers.WebMVC.Services;
 using System;
 using System.Collections.Generic;
@@ -20,7 +21,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
         public async Task<IViewComponentResult> InvokeAsync(ApplicationUser user)
         {
             var itemsInCart = await ItemsInCartAsync(user);
-            return View(itemsInCart);
+            var vm = new CartComponentViewModel()
+            {
+                ItemsCount = itemsInCart
+            };
+            return View(vm);
         }
         private Task<int> ItemsInCartAsync(ApplicationUser user)
         {

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

@@ -24,87 +24,29 @@
         </div>
     </div>
 </div>
-
 <div class="container home-catalog-container">
-    <div class="container es-pager-top">
-        <div class="row">
-            <div class="col-xs-4">
-                <nav>
-                    <ul>
-                        <li class="page-item">
-                            <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
-                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage -1 })"
-                               aria-label="Previous">
-                                <span>Previous</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-            <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
-            <div class="col-xs-4">
-                <nav>
-                    <ul>
-                        <li class="page-item">
-                            <a class="text next @Model.PaginationInfo.Next" id="Next"
-                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
-                               aria-label="Next">
-                                <span>Next</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
+    @if (Model.CatalogItems.Count() > 0)
+    {
+        <div class="container es-pager-top">
+            @Html.Partial("_pagination", Model)
         </div>
-    </div>
-    <div class="row">
-        @foreach (var catalogItem in Model.CatalogItems)
-        {
-            <div class="col-sm-4 home-catalog-item">
-                <form asp-controller="Cart" asp-action="AddToCart" asp-route-productId="@catalogItem.Id">
-                    <div class="home-catalog-item-image">
-                        <img src="@catalogItem.PictureUri" />
-                        <input type="submit" value="[ ADD TO CART ]" class="btn-brand home-catalog-item-image-addCart" />
-                    </div>
-                    <div class="home-catalog-item-title">
-                        <span>@catalogItem.Name</span>
-                    </div>
-                    <div class="home-catalog-item-price">
-                        <span>@catalogItem.Price.ToString("N2")</span>
-                    </div>
-                </form>
-            </div>
-        }
-    </div>
-    <div class="container es-pager-bottom">
         <div class="row">
-            <div class="col-xs-4">
-                <nav>
-                    <ul>
-                        <li class="page-item">
-                            <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
-                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + -1 })"
-                               aria-label="Previous">
-                                <span>Previous</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-            <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
-            <div class="col-xs-4">
-                <nav>
-                    <ul>
-                        <li class="page-item">
-                            <a class="text next @Model.PaginationInfo.Next" id="Next"
-                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
-                               aria-label="Next">
-                                <span>Next</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
+            @foreach (var catalogItem in Model.CatalogItems)
+            {
+                <div class="col-xs-12 col-sm-6 col-lg-4 home-catalog-item">
+                    @Html.Partial("_product", catalogItem)
+                </div>
+            }
+
         </div>
-    </div>
-</div>
+        <div class="container es-pager-bottom">
+            @Html.Partial("_pagination", Model)
+        </div>
+    }
+    else
+    {
+        <div class="home-catalog-noResults">
+            THERE ARE NO RESULTS THAT MATCH YOUR SEARCH
+        </div>
+    }
+</div>

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

@@ -0,0 +1,31 @@
+@model Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels.IndexViewModel
+
+<div class="row">
+    <div class="col-xs-4">
+        <nav>
+            <ul>
+                <li class="page-item">
+                    <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
+                       href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage -1 })"
+                       aria-label="Previous">
+                        <span>Previous</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
+    <div class="col-xs-4">
+        <nav>
+            <ul>
+                <li class="page-item">
+                    <a class="text next @Model.PaginationInfo.Next" id="Next"
+                       href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
+                       aria-label="Next">
+                        <span>Next</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>

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

@@ -0,0 +1,31 @@
+@model Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels.IndexViewModel
+
+<div class="row">
+    <div class="col-xs-4">
+        <nav>
+            <ul>
+                <li class="page-item">
+                    <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
+                       href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage -1 })"
+                       aria-label="Previous">
+                        <span>Previous</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
+    <div class="col-xs-4">
+        <nav>
+            <ul>
+                <li class="page-item">
+                    <a class="text next @Model.PaginationInfo.Next" id="Next"
+                       href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
+                       aria-label="Next">
+                        <span>Next</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>

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

@@ -0,0 +1,23 @@
+@model CatalogItem
+
+<form asp-controller="Cart" asp-action="AddToCart">
+    <div class="home-catalog-item-image">
+        <img src="@Model.PictureUri" />
+        <input type="submit" value="[ ADD TO CART ]" class="btn-brand home-catalog-item-image-addCart" />
+    </div>
+    <div class="home-catalog-item-title">
+        <span>@Model.Name</span>
+    </div>
+    <div class="home-catalog-item-price">
+        <span>@Model.Price.ToString("N2")</span>
+    </div>
+    <input type="hidden" asp-for="@Model.CatalogBrand" name="brand"/>
+    <input type="hidden" asp-for="@Model.CatalogBrandId" name="brandId" />
+    <input type="hidden" asp-for="@Model.CatalogType" name="type" />
+    <input type="hidden" asp-for="@Model.CatalogTypeId" name="typeId" />
+    <input type="hidden" asp-for="@Model.Description" name="description" />
+    <input type="hidden" asp-for="@Model.Id" name="id" />
+    <input type="hidden" asp-for="@Model.Name" name="name" />
+    <input type="hidden" asp-for="@Model.PictureUri" name="pictureUri" />
+    <input type="hidden" asp-for="@Model.Price" name="price" />
+</form>

src/Web/WebMVC/Views/Order/Detail.cshtml

@@ -53,9 +53,9 @@
                             <td class="cart-product-column"><img class="cart-product-image" src="@item.PictureUrl" /></td>
                             <td class="cart-product-column">@item.ProductName</td>
                             <td class="cart-product-column">ROSLYN</td>
-                            <td class="cart-product-column">$ @item.UnitPrice</td>
+                            <td class="cart-product-column">$ @Math.Round(item.UnitPrice, 2)</td>
                             <td class="cart-product-column">@item.Quantity</td>
-                            <td class="cart-product-column cart-total-value">$ @(item.Quantity * item.UnitPrice)</td>
+                            <td class="cart-product-column cart-total-value">$ @Math.Round(item.Quantity * item.UnitPrice,2)</td>
                         </tr>
                     }
                 </tbody>

src/Web/WebMVC/Views/Shared/Components/Cart/Default.cshtml

@@ -1,15 +1,15 @@
-@model System.Int32
+@model Microsoft.eShopOnContainers.WebMVC.Models.CartViewModels.CartComponentViewModel
 
 @{
     ViewData["Title"] = "My Cart";
 }
 
 <div>
-    <a asp-area="" asp-controller="Cart" asp-action="Index"><img src="~/images/cart.PNG" class="fr layout-cart-image hidden-xs" />
+    <a asp-area="" asp-controller="Cart" asp-action="Index"><img src="~/images/cart.png" class="fr layout-cart-image hidden-xs @Model.Disabled" />
        
     </a>
-    <div class="layout-cart-badge">
-        @Model
+    <div class="layout-cart-badge @Model.Disabled">
+        @Model.ItemsCount
     </div>
 </div>
 

src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml

@@ -43,7 +43,7 @@
                             <input type="hidden" name="@("quantities[" + i +"].Key")" value="@item.Id" />
                             <input type="number" name="@("quantities[" + i +"].Value")" value="@item.Quantity" />
                         </td>
-                        <td class="cart-product-column cart-total-value">$ @(item.Quantity * item.UnitPrice)</td>
+                        <td class="cart-product-column cart-total-value">$ @Math.Round(item.Quantity * item.UnitPrice,2)</td>
                     </tr>
                 }
             </tbody>

src/Web/WebMVC/appsettings.json

@@ -1,9 +1,10 @@
 {
   "ConnectionStrings": {
-    //"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Microsoft.eShopOnContainers.WebMVC-946ae052-8305-4a99-965b-ec8636ddbae3;Trusted_Connection=True;MultipleActiveResultSets=true;"
-    "DefaultConnection": "Server=.;Database=aspnet-Microsoft.eShopOnContainers.WebMVC;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False;Trusted_Connection=True;"
+    //"DefaultConnection": "Server=127.0.0.1,5433;Database=aspnet-Microsoft.eShopOnContainers.WebMVC;User Id=sa;Password=Pass@word"
+    "DefaultConnection": "Server=identity.data;Database=aspnet-Microsoft.eShopOnContainers.WebMVC;User Id=sa;Password=Pass@word"
   },
-  "CatalogUrl": "http://localhost:5000/",
+  "CatalogUrl": "http://catalog.api",
+  //"CatalogUrl": "http://localhost:5001",
   "OrderingUrl": "http://localhost:2446/",
   "Logging": {
     "IncludeScopes": false,

src/Web/WebMVC/docker-compose.yml

@@ -10,9 +10,10 @@ services:
       - CatalogUrl=http://catalog.api
       - OrderingUrl=http://ordering.api
     ports:
-      - "800:80"
+      - "5000:80"
     depends_on:
       - catalog.api
+      - identity.data
 
   catalog.api:
     image: eshop/catalog.api
@@ -20,6 +21,8 @@ services:
       - ConnectionString=Server=catalogdata;Port=5432;Database=CatalogDB;username=postgres;password=postgres
     expose:
       - "80"
+    ports:
+      - "5001:80"
     depends_on:
       - catalogdata
 
@@ -45,3 +48,11 @@ services:
     image: eshop/ordering.data.sqlserver.linux
     ports:
       - "5432:1433"
+
+  identity.data:
+    image: eshop/mssql-server-private-preview
+    environment:
+      - SA_PASSWORD=Pass@word
+      - ACCEPT_EULA=Y
+    ports:
+      - "5433:1433"

src/Web/WebMVC/project.json

@@ -19,10 +19,10 @@
     "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
     "Microsoft.AspNetCore.StaticFiles": "1.0.0",
     "Microsoft.EntityFrameworkCore.SqlServer": "1.0.0",
-    //"Microsoft.EntityFrameworkCore.SqlServer.Design": {
-    //  "version": "1.0.0-rc2-final",
-    //  "type": "build"
-    //},
+    "Microsoft.EntityFrameworkCore.SqlServer.Design": {
+      "version": "1.0.0",
+      "type": "build"
+    },
     "Microsoft.EntityFrameworkCore.Tools": {
       "version": "1.0.0-preview2-final",
       "type": "build"

src/Web/WebMVC/wwwroot/css/site.css

@@ -316,7 +316,7 @@ select::-ms-expand {
     width: 100%;
     margin-right: 0px;
     margin-left: 0px;
-    background-image: url(../images/main_banner.PNG);
+    background-image: url(../images/main_banner.png);
     background-size: cover;
     height: 258px;
     background-position: center;
@@ -364,19 +364,21 @@ select::-ms-expand {
 .home-catalog-item-image {
     width: 100%;
     object-fit: cover;
-    max-width: 320px;
+    /* max-width: 320px; */
+    text-align: center;
 }
 
 .home-catalog-item-image-addCart {
     background-color: #83D01B;
     color: white;
-    display: block;
+    display: inline-block;
     height: 43px;
     padding: 10px 20px 10px 20px;
     font-weight: bold;
     text-align: center;
     margin-top: 10px;
-    margin-left: 50px;
+    margin-left: 60px;
+    margin-right: 60px;
     font-size: 16px;
     font-weight: normal;
 }
@@ -409,6 +411,11 @@ select::-ms-expand {
         content: '$';
     }
 
+.home-catalog-noResults {
+    text-align:center;
+    margin-top: 100px;
+}
+
 .container .nav .navbar-nav .col-sm-6 ::before {
     content: 'BRAND';
 }
@@ -668,7 +675,7 @@ form .col-md-4 {
 
 .order-section-total {
     margin-bottom: 5px;
-    margin-left: 20px;
+    margin-left: 40px;
     text-align: left;
 }
 
@@ -805,8 +812,13 @@ form .col-md-4 {
 
 @media screen and (max-width: 415px) {
     .btn-brand-small-filter {
-        width: 65px;
+        width: 40px;
         padding:10px 10px 10px 10px;
         font-size: 10px;
     }
+
+    .btn-brand-small-filter::before {
+        content: '->';
+        color: white;
+    }
 }