ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed some issues in catalog filters and improve catalog views.

Browse Source
This commit is contained in:
Carlos Cañizares Estévez 2016-11-07 18:37:11 +01:00
parent 49e85dc195
commit 1002356493
18 changed files with 188 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Web/WebMVC/Controllers/CartController.cs
View File

@ -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");

2
src/Web/WebMVC/Models/Basket.cs
View File

@ -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);
}
}
}

15
src/Web/WebMVC/Models/CartViewModels/IndexViewModel.cs Normal file
View File

@ -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" : ""; } }
}
}

4
src/Web/WebMVC/Models/CatalogViewModels/IndexViewModel.cs
View File

@ -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; }
}
}

12
src/Web/WebMVC/Services/CatalogService.cs
View File

@ -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>())

7
src/Web/WebMVC/ViewComponents/Cart.cs
View File

@ -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)
{

102
src/Web/WebMVC/Views/Catalog/Index.cshtml
View File

@ -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>

31
src/Web/WebMVC/Views/Catalog/_noResults.cshtml Normal file
View File

@ -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>

31
src/Web/WebMVC/Views/Catalog/_pagination.cshtml Normal file
View File

@ -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>

23
src/Web/WebMVC/Views/Catalog/_product.cshtml Normal file
View File

@ -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>

4
src/Web/WebMVC/Views/Order/Detail.cshtml
View File

@ -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>

8
src/Web/WebMVC/Views/Shared/Components/Cart/Default.cshtml
View File

@ -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>

2
src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml
View File

@ -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>

7
src/Web/WebMVC/appsettings.json
View File

@ -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,

13
src/Web/WebMVC/docker-compose.yml
View File

@ -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"

8
src/Web/WebMVC/project.json
View File

@ -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"

24
src/Web/WebMVC/wwwroot/css/site.css
View File

@ -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;
}
}

2
src/Web/WebMVC/wwwroot/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long