add sort navigation bar and products

jilv220 · Jul 11, 2024 · 7316e17 · 7316e17
1 parent 78a543a
commit 7316e17
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 6 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+    "sqltools.connections": [
+        {
+            "previewLimit": 50,
+            "driver": "SQLite",
+            "database": "${workspaceFolder:finalproject}/Data/ApplicationDbContext.cs",
+            "name": "data"
+        }
+    ]
+}
diff --git a/Components/Pages/BlazorIndex.razor b/Components/Pages/BlazorIndex.razor
@@ -17,14 +17,19 @@
 
 @code {
     public IList<Product> Products { get; set; }
-
+    public IList<string> Categories { get; set; }
     private Cart? Cart { get; set; }
-
     private bool isUserSignedIn { get; set; } = false;
-
+    private string selectedCategory { get; set; } = "All";
+    private string searchTerm { get; set; } = string.Empty;
+    private bool isPriceAscending { get; set; } = true;
+    private bool isInStock { get; set; } = false;
+    private double minPrice { get; set; }
+    private double maxPrice { get; set; }
     protected override async Task OnInitializedAsync()
     {
-        Products = await DbContext.Products.ToListAsync();
+        Categories = await DbContext.Products.Select(p => p.Type).Distinct().ToListAsync();
+        await LoadProductsAsync();
         var authstate = await AuthenticationStateProvider.GetAuthenticationStateAsync();
         var user = authstate.User;
 
@@ -34,6 +39,36 @@
         }
     }
 
+    private async Task LoadProductsAsync()
+    {
+        var query = DbContext.Products.AsQueryable();
+
+        if (selectedCategory != "All")
+        {
+            query = query.Where(p => p.Type == selectedCategory);
+        }
+
+        if (!string.IsNullOrEmpty(searchTerm))
+        {
+            query = query.Where(p => p.Name.Contains(searchTerm));
+        }
+        if (minPrice > 0)
+        {
+            query = query.Where(p => (double)p.UnitPrice >= minPrice);
+        }
+
+        if (maxPrice > 0)
+        {
+            query = query.Where(p => (double)p.UnitPrice <= maxPrice);
+        }
+
+        query = isInStock ? query.Where(p => p.QtyInStock > 0) : query.Where(p => p.QtyInStock == 0);
+
+        query = isPriceAscending ? query.OrderBy(p => (double)p.UnitPrice) : query.OrderByDescending(p => (double)p.UnitPrice);
+
+        Products = await query.ToListAsync();
+    }
+
     private async Task AddToCartAsync(int productId)
     {
         var authstate = await AuthenticationStateProvider.GetAuthenticationStateAsync();
@@ -47,6 +82,48 @@
 
         await CartService.AddToCartAsync(user.Identity.Name, productId);
     }
+
+    private async Task OnCategoryChanged(ChangeEventArgs e)
+    {
+        selectedCategory = e.Value.ToString();
+        await LoadProductsAsync();
+    }
+
+    private async Task OnSearchChanged(ChangeEventArgs e)
+    {
+        searchTerm = e.Value.ToString();
+        await LoadProductsAsync();
+    }
+
+    private async Task OnSortOrderChanged()
+    {
+        isPriceAscending = !isPriceAscending;
+        await LoadProductsAsync();
+    }
+
+    private async Task OnStockChanged()
+    {
+        isInStock = !isInStock;
+        await LoadProductsAsync();
+    }
+
+    private async Task OnMinPriceChanged(ChangeEventArgs e)
+    {
+        if (double.TryParse(e.Value.ToString(), out double value))
+        {
+            minPrice = value;
+            await LoadProductsAsync();
+        }
+    }
+
+    private async Task OnMaxPriceChanged(ChangeEventArgs e)
+    {
+        if (double.TryParse(e.Value.ToString(), out double value))
+        {
+            maxPrice = value;
+            await LoadProductsAsync();
+        }
+    }
 }
 
 <header class="bg-dark py-5">
@@ -58,6 +135,50 @@
     </div>
 </header>
 
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container px-4 px-lg-5">
+        <form class="d-flex">
+            <select class="form-select me-2" @onchange="OnCategoryChanged">
+                <option value="All">All Categories</option>
+                @foreach (var category in Categories)
+                {
+                    <option value="@category">@category</option>
+                }
+            </select>
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
+                @oninput="OnSearchChanged">
+            <label class="me-2 sort-text">Sort by Price:</label>
+            <button class="me-2 btn btn-outline-secondary" type="button" @onclick="OnSortOrderChanged">
+                <div class="sort-text">
+                    @if (isPriceAscending)
+                    {
+                        <span>Low to High</span>
+                    }
+                    else
+                    {
+                        <span>High to Low</span>
+                    }
+                </div>
+            </button>
+            <input class="form-control me-2" type="number" placeholder="Min Price" @oninput="OnMinPriceChanged">
+            <input class="form-control me-2" type="number" placeholder="Max Price" @oninput="OnMaxPriceChanged">
+            <button class="btn btn-outline-secondary" type="button" @onclick="OnStockChanged">
+                <div class="sort-text">
+                    @if (isInStock)
+                    {
+                        <span>Available</span>
+                    }
+                    else
+                    {
+                        <span>Out of Stock</span>
+                    }
+                </div>
+            </button>
+
+        </form>
+    </div>
+</nav>
+
 <section class="py-5">
     <div class="container px-4 px-lg-5 mt-5">
         <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
@@ -118,4 +239,9 @@
     .flex-grow-4 {
         flex-grow: 4;
     }
+
+    .sort-text {
+        white-space: nowrap;
+        align-self: center;
+    }
 </style>
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -2,6 +2,7 @@
 
 @using Microsoft.AspNetCore.Identity
 @using Project.Components.Pages
+@using Project.Components
 @using Project.Models
 
 @inject SignInManager<ApplicationUser> SignInManager

diff --git a/Pages/NewArrivals.cshtml b/Pages/NewArrivals.cshtml
@@ -0,0 +1,41 @@
+@page
+@model NewArrivalsModel
+@{
+    ViewData["Title"] = "New Arrivals";
+}
+
+<div class="container">
+    <div class="row mt-5">
+        <div class="col-12 text-center">
+            <h2>NEW ARRIVALS</h2>
+            <p>Check here for our latest selections of Tops, Dresses, Skirts, Denim, Accessories and MORE!</p>
+        </div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-md-3 col-sm-6 mb-4">
+            <div class="card h-100">
+                <img src="~/images/jeans.jpg" class="card-img-top" alt="Jeans">
+                <div class="card-body">
+                    <h5 class="card-title">Jeans</h5>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 mb-4">
+            <div class="card h-100">
+                <img src="~/images/necklace.jpg" class="card-img-top" alt="Necklace">
+                <div class="card-body">
+                    <h5 class="card-title">Necklace</h5>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-sm-6 mb-4">
+            <div class="card h-100">
+                <img src="~/images/dress.jpg" class="card-img-top" alt="Dress">
+                <div class="card-body">
+                    <h5 class="card-title">Dress</h5>
+                </div>
+            </div>
+        </div>
+        <!-- Add more items as needed -->
+    </div>
+</div>
diff --git a/Pages/NewArrivals.cshtml.cs b/Pages/NewArrivals.cshtml.cs
@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Project.Pages
+{
+    public class NewArrivalsModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
@@ -28,12 +28,12 @@
                             <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button"
                                 data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                <li><a class="dropdown-item" href="#!">All Products</a></li>
+                                <li><a class="dropdown-item" asp-page="/Index">All Products</a></li>
                                 <li>
                                     <hr class="dropdown-divider" />
                                 </li>
                                 <li><a class="dropdown-item" href="#!">Popular Items</a></li>
-                                <li><a class="dropdown-item" href="#!">New Arrivals</a></li>
+                                <li><a class="dropdown-item" asp-page="/NewArrivals">New Arrivals</a></li>
                             </ul>
                         </li>
                     </ul>

diff --git a/app.db b/app.db
diff --git a/app.db-shm b/app.db-shm
diff --git a/app.db-wal b/app.db-wal