litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Merge pull request 'mock-data' (#30) from mock-data into main

Browse Source 
Reviewed-on: #30
This commit was merged in pull request #30.
This commit is contained in:
Khwezi Mngoma
2026-05-30 21:01:05 +02:00
parent b722ea2cd0 01a0264452
commit a614d14da5
8 changed files with 280 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Layout/CartItem.cs
+10
View File
@@ -0,0 +1,10 @@
namespace MidrandBookshop.Components.Layout;
public class CartItem
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public int Price { get; set; }
public int Quantity { get; set; }
}
MidrandBookshop/Components/Layout/MainLayout.razor
+7 -64
View File
@@ -2,8 +2,6 @@
@inject NavigationManager Navigation
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
@* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
@@ -77,9 +75,7 @@
}
</div>
@* --- TOP FIXED LAYOUT AREA --- *@
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
@* Decorative Background SVG Watermark Line Graphic *@
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
@@ -138,15 +134,16 @@
<input type="text"
class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
placeholder="Search by ISBN, Author, Title..."
value="@GlobalSearchQuery"
@oninput="OnSearchInput" />
@bind="SearchInputBuffer"
@bind:event="oninput"
@onkeydown="HandleSearchKeyDown" />
</div>
<button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
style="width: 32px; height: 32px;"
<button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
@onclick="ToggleGlobalSearch"
type="button">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
type="button"
aria-label="Toggle Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
@@ -186,7 +183,6 @@
</nav>
</div>
@* --- MAIN INDEPENDENT SCROLL LAYER --- *@
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
<main class="position-relative" style="z-index: 5;">
<CascadingValue Value="GlobalSearchQuery">
@@ -247,56 +243,3 @@
</div>
</div>
@code {
private string GlobalSearchQuery { get; set; } = string.Empty;
private bool IsSearchActive { get; set; } = false;
private bool IsCartOpen { get; set; } = false;
private List<CartItem> CartItems = new()
{
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
};
private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
private void ToggleCart() => IsCartOpen = !IsCartOpen;
private void OnSearchInput(ChangeEventArgs e)
{
GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
}
private void ChangeQuantity(CartItem item, int delta)
{
item.Quantity += delta;
if (item.Quantity <= 0)
{
CartItems.Remove(item);
}
}
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
private void RedirectToCart()
{
IsCartOpen = false;
Navigation.NavigateTo("/cart");
}
private void RedirectToCheckout()
{
IsCartOpen = false;
Navigation.NavigateTo("/checkout");
}
public class CartItem
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public int Price { get; set; }
public int Quantity { get; set; }
}
}
MidrandBookshop/Components/Layout/MainLayout.razor.cs
+131
View File
@@ -0,0 +1,131 @@
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.WebUtilities;
namespace MidrandBookshop.Components.Layout;
public partial class MainLayout : IDisposable
{
private string SearchInputBuffer { get; set; } = string.Empty;
private string GlobalSearchQuery { get; set; } = string.Empty;
private bool IsSearchActive { get; set; } = false;
private bool IsCartOpen { get; set; } = false;
private List<CartItem> CartItems = new()
{
new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
};
protected override void OnInitialized()
{
Navigation.LocationChanged += OnLocationChanged;
SyncSearchQueryFromUrl();
}
private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
{
SyncSearchQueryFromUrl();
StateHasChanged();
}
private void SyncSearchQueryFromUrl()
{
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
{
GlobalSearchQuery = queryVal.ToString();
SearchInputBuffer = GlobalSearchQuery;
IsSearchActive = true;
}
else
{
GlobalSearchQuery = string.Empty;
SearchInputBuffer = string.Empty;
IsSearchActive = false;
}
}
private void ToggleGlobalSearch()
{
if (!IsSearchActive)
IsSearchActive = true;
else
CommitSearchNavigation();
}
private void HandleSearchKeyDown(KeyboardEventArgs e)
{
if (e.Key == "Enter") CommitSearchNavigation();
}
private void CommitSearchNavigation()
{
var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
var queryParameters = QueryHelpers.ParseQuery(uri.Query);
var newRouteParams = new Dictionary<string, object?>();
foreach (var param in queryParameters)
{
if (param.Key != "q")
{
newRouteParams[param.Key] = param.Value.ToString();
}
}
if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
newRouteParams["q"] = SearchInputBuffer.Trim();
else
newRouteParams["q"] = null;
var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
Navigation.NavigateTo(updatedUri);
}
private void ToggleCart() => IsCartOpen = !IsCartOpen;
private void ChangeQuantity(CartItem item, int delta)
{
item.Quantity += delta;
if (item.Quantity <= 0)
{
CartItems.Remove(item);
}
}
private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
private void RedirectToCart()
{
IsCartOpen = false;
Navigation.NavigateTo("/cart");
}
private void RedirectToCheckout()
{
IsCartOpen = false;
Navigation.NavigateTo("/checkout");
}
public void Dispose()
{
Navigation.LocationChanged -= OnLocationChanged;
}
public class CartItem
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public int Price { get; set; }
public int Quantity { get; set; }
}
}
MidrandBookshop/Components/Layout/MainLayout.razor.css
+16 -16
View File
@@ -20,10 +20,10 @@
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-overlay.is-visible {
.cart-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
}
.cart-drawer {
position: fixed;
@@ -37,10 +37,10 @@
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-drawer.is-open {
.cart-drawer.is-open {
transform: translateX(-420px);
pointer-events: auto;
}
}
.cart-badge {
position: absolute;
@@ -71,16 +71,16 @@
padding: 2px 4px;
}
.quantity-picker button {
.quantity-picker button {
font-size: 0.85rem;
font-weight: 600;
line-height: 1;
}
}
.quantity-picker button:hover {
.quantity-picker button:hover {
background-color: rgba(0,0,0,0.05);
border-radius: 50%;
}
}
.custom-site-footer {
width: 100%;
@@ -120,9 +120,9 @@
transition: color 0.2s ease;
}
.footer-contact-link:hover {
.footer-contact-link:hover {
color: #FFFFFF !important;
}
}
.footer-section-heading {
font-size: 0.65rem;
@@ -138,9 +138,9 @@
transition: color 0.2s ease;
}
.footer-nav-link:hover {
.footer-nav-link:hover {
color: #FFFFFF !important;
}
}
.footer-meta-item {
font-size: 0.8rem;
@@ -179,14 +179,14 @@
transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-back-to-top:hover {
.btn-back-to-top:hover {
background-color: #333333;
transform: translateY(-2px);
}
}
.btn-back-to-top:active {
.btn-back-to-top:active {
transform: translateY(0);
}
}
.scroll-container {
scroll-behavior: smooth;
MidrandBookshop/Components/Pages/Home.razor.cs
+63 -10
View File
@@ -16,7 +16,7 @@ public partial class Home : ComponentBase
[Inject] private CategoryService CategoryService { get; set; } = default!;
[Inject] private NavigationManager Navigation { get; set; } = default!;
[CascadingParameter] public string SharedSearchQuery { get; set; } = string.Empty;
[SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
[SupplyParameterFromQuery] public long? AuthorId { get; set; }
public enum ViewMode { Grid, List }
@@ -40,6 +40,7 @@ public partial class Home : ComponentBase
private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
private IEnumerable<Product> FilteredData
{
@@ -47,19 +48,44 @@ public partial class Home : ComponentBase
{
var data = ProductsCollection.AsEnumerable();
// Category filtering restricts rendering solely when checking the open catalog
if (ActiveCategory != "All" && !AuthorId.HasValue)
{
data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
}
// Text matching is completely restricted from evaluating author metadata properties
if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
{
var q = SharedSearchQuery.Trim();
data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
}
if (ActivePriceFilter != "all")
{
data = data.Where(p =>
{
var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
return ActivePriceFilter switch
{
"under-500" => price < 500m,
"500-1000" => price >= 500m && price <= 1000m,
"over-1000" => price > 1000m,
_ => true
};
});
}
if (OnlyShowNew) data = data.Where(p => p.Enabled);
data = SelectedSortOption switch
{
"price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
"price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
"title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
"default" or _ => data
};
return data;
}
}
@@ -75,9 +101,9 @@ public partial class Home : ComponentBase
ProductsCollection.Clear();
ProductPriceCache.Clear();
ProductPrimaryCategoryCache.Clear();
ProductAuthorCache.Clear();
ActiveAuthorFilterName = null;
// Pipeline A: Extract scoped books directly associated with an ID token parameter
if (AuthorId.HasValue)
{
var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
@@ -102,9 +128,10 @@ public partial class Home : ComponentBase
var product = authorBook.Product;
ProductsCollection.Add(product);
ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
@@ -116,7 +143,6 @@ public partial class Home : ComponentBase
return;
}
// Pipeline B: Safe structural fallback mapping utilizing the exact backend DateRange object setup
var selectionRange = new DateRange
{
From = new DateOnly(2020, 1, 1),
@@ -139,6 +165,10 @@ public partial class Home : ComponentBase
ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
? (categoryResult.Value[0].Name ?? "General")
: "General";
ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
? product.Metadata.Manufacturer
: "Unknown Author";
}
}
@@ -156,15 +186,38 @@ public partial class Home : ComponentBase
}
}
private void ClearAuthorFilter() => Navigation.NavigateTo("/");
private void ClearAuthorFilter()
{
var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
Navigation.NavigateTo(newUri);
}
private void ResetFilters()
{
SelectedSortOption = "default";
ActivePriceFilter = "all";
OnlyShowNew = false;
VisibleCount = ItemsPerPage;
}
private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
private void SelectCategory(string categoryName)
{
ActiveCategory = categoryName;
VisibleCount = ItemsPerPage;
var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
Navigation.NavigateTo(updatedUri);
}
private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
}
MidrandBookshop/Components/Pages/ProductView.razor.css
+35 -16
View File
@@ -1,7 +1,6 @@
/* ==========================================================================
Structural Layout Containers
========================================================================== */
.product-container {
max-width: 1200px;
margin: 0 auto;
@@ -18,7 +17,6 @@
/* ==========================================================================
Breadcrumb Navigation Links
========================================================================== */
.breadcrumb {
font-size: 0.85rem;
margin-bottom: 2.5rem;
@@ -49,7 +47,6 @@
/* ==========================================================================
Left Section: Media Gallery Components
========================================================================== */
.gallery-section {
display: flex;
flex-direction: column;
@@ -76,16 +73,21 @@
mix-blend-mode: multiply;
}
/* Dynamic Overlaid Attribute Badges */
/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
.format-badges {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
white-space: nowrap;
position: absolute !important;
bottom: 1.5rem !important;
left: 50% !important; /* Move anchor point to exactly half-width */
right: auto !important;
transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
justify-content: center !important;
align-items: center !important;
gap: 0.5rem !important;
width: max-content !important; /* Expands safely according to badges text values */
max-width: 90% !important; /* Keeps bounding box clean of parent borders */
}
.badge {
@@ -96,6 +98,8 @@
border-radius: 100px;
font-weight: 600;
border: 1px solid transparent;
display: inline-block !important;
white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
}
.badge-physical {
@@ -148,7 +152,6 @@
/* ==========================================================================
Right Section: Product Details & Typography Controls
========================================================================== */
.details-section {
display: flex;
flex-direction: column;
@@ -209,7 +212,6 @@
/* ==========================================================================
Interactive E-Commerce Selection Bars
========================================================================== */
.purchase-actions {
display: flex;
gap: 1rem;
@@ -274,7 +276,6 @@
/* ==========================================================================
Informational Text Elements & Links
========================================================================== */
.info-block {
margin-bottom: 2rem;
}
@@ -321,7 +322,6 @@
/* ==========================================================================
Responsive Adaptations & Breakpoints
========================================================================== */
@media (max-width: 992px) {
.product-layout {
grid-template-columns: 1fr;
@@ -338,6 +338,25 @@
padding: 1rem 1rem;
}
.main-image-wrapper {
min-height: 320px;
padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
}
.main-image {
max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
}
.format-badges {
bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
gap: 0.4rem !important;
}
.badge {
font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
padding: 0.25rem 0.65rem !important;
}
.product-title {
font-size: 1.85rem;
}
MidrandBookshop/MidrandBookshop.csproj
+2 -2
View File
@@ -18,13 +18,13 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="LiteCharms.Features" Version="1.56.0" />
<PackageReference Include="LiteCharms.Features" Version="1.57.0" />
</ItemGroup>
<!-- UI -->
<ItemGroup>
<PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.56.0" />
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.57.0" />
<!-- Global Usings -->
<Using Include="Blazored.Toast.Services" />