feat: full FrontOffice updates - discount store, blog, payment gateway, UI improvements
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
- Discount store pages (products, cart, orders, order detail) - Blog pages and services - Payment gateway callback page - AppImage component, EmptyState, LoadingState, PageHeader - DiscountCartService, DiscountOrderService, DiscountProductService - BlogCategoryService, BlogPostService, SitePageService, ImageCacheService - PhoneVerifyForm component - Profile Hub page - UI/UX improvements across all pages - landing.js for homepage - Config and routing updates
This commit is contained in:
masoodafar-web
@@ -0,0 +1,172 @@
|
||||
@attribute [Route(RouteConstants.Blog.Index)]
|
||||
|
||||
<PageTitle>بلاگ | کارا بازار سلامت</PageTitle>
|
||||
|
||||
@* ═══════════════════════════════════════════════
|
||||
BLOG HEADER
|
||||
═══════════════════════════════════════════════ *@
|
||||
<section class="blog-hero">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<div class="text-center">
|
||||
<MudText Typo="Typo.h3" Class="dash-hero-name">بلاگ</MudText>
|
||||
<MudText Typo="Typo.body1" Class="dash-hero-sub mt-2">
|
||||
آخرین مطالب، آموزشها و اخبار کارا بازار سلامت
|
||||
</MudText>
|
||||
</div>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
@* ═══════════════════════════════════════════════
|
||||
SEARCH + FILTERS
|
||||
═══════════════════════════════════════════════ *@
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
||||
|
||||
<MudPaper Elevation="0" Class="pa-4 rounded-xl mb-6" Style="border:1px solid var(--mud-palette-divider);">
|
||||
<MudGrid Spacing="3" AlignItems="AlignItems.Center">
|
||||
<MudItem xs="12" sm="6" md="5">
|
||||
<MudTextField @bind-Value="_searchTerm"
|
||||
Placeholder="جستجو در مقالات..."
|
||||
Variant="Variant.Outlined"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search"
|
||||
Immediate="false"
|
||||
OnKeyUp="OnSearchKeyUp"
|
||||
Class="rounded-lg" />
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6" md="5">
|
||||
<MudSelect T="long?" Value="_selectedCategoryId"
|
||||
Placeholder="همه دستهبندیها"
|
||||
Variant="Variant.Outlined"
|
||||
Class="rounded-lg"
|
||||
Clearable="true"
|
||||
ValueChanged="OnCategoryChanged">
|
||||
@foreach (var cat in _categories)
|
||||
{
|
||||
<MudSelectItem T="long?" Value="@cat.Id">
|
||||
@cat.Title
|
||||
@if (cat.PostCount > 0)
|
||||
{
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary mr-2" Style="display:inline;">(@cat.PostCount)</MudText>
|
||||
}
|
||||
</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="2">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
FullWidth="true"
|
||||
Class="rounded-lg"
|
||||
StartIcon="@Icons.Material.Filled.Search"
|
||||
OnClick="SearchPosts">
|
||||
جستجو
|
||||
</MudButton>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudPaper>
|
||||
|
||||
@* ═══════════════════════════════════════════════
|
||||
BLOG POSTS GRID
|
||||
═══════════════════════════════════════════════ *@
|
||||
@if (_isLoading)
|
||||
{
|
||||
<LoadingState />
|
||||
}
|
||||
else if (!_posts.Any())
|
||||
{
|
||||
<MudPaper Elevation="0" Class="pa-12 text-center rounded-xl" Style="border:1px dashed var(--mud-palette-divider);">
|
||||
<MudIcon Icon="@Icons.Material.Outlined.Article" Size="Size.Large" Class="mud-text-secondary mb-3" Style="font-size:3.5rem;" />
|
||||
<MudText Typo="Typo.h6" Class="mud-text-secondary">مقالهای یافت نشد</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary mt-1">
|
||||
@if (!string.IsNullOrWhiteSpace(_searchTerm) || _selectedCategoryId.HasValue)
|
||||
{
|
||||
<span>فیلترها را تغییر دهید یا عبارت دیگری جستجو کنید.</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>بهزودی مقالات جدید منتشر خواهد شد.</span>
|
||||
}
|
||||
</MudText>
|
||||
</MudPaper>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudGrid Spacing="4">
|
||||
@foreach (var post in _posts)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudPaper Elevation="1" Class="rounded-xl blog-card-v2 cursor-pointer" Style="overflow:hidden;"
|
||||
@onclick="() => NavigateToPost(post.Slug)">
|
||||
@* Thumbnail *@
|
||||
<div class="blog-thumb" style="height:200px; background:#f0f0f0;">
|
||||
@if (!string.IsNullOrWhiteSpace(post.ThumbnailUrl))
|
||||
{
|
||||
<AppImage Path="@post.ThumbnailUrl"
|
||||
Alt="@post.Title"
|
||||
ObjectFit="ObjectFit.Cover"
|
||||
Style="width:100%; height:200px;" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="height:200px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6366f1,#a78bfa);">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Article" Size="Size.Large" Style="color:rgba(255,255,255,.4);" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* Content *@
|
||||
<div class="pa-4">
|
||||
@if (post.Categories.Any())
|
||||
{
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Outlined"
|
||||
Color="Color.Primary" Class="mb-2">
|
||||
@post.Categories.First().Title
|
||||
</MudChip>
|
||||
}
|
||||
|
||||
<MudText Typo="Typo.h6" Class="mb-1 blog-title-clamp">
|
||||
@post.Title
|
||||
</MudText>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(post.Summary))
|
||||
{
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-3 blog-summary-clamp">
|
||||
@post.Summary
|
||||
</MudText>
|
||||
}
|
||||
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Class="mt-auto">
|
||||
@if (post.PublishedAt.HasValue)
|
||||
{
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Class="ml-1" />
|
||||
@post.PublishedAt.Value.ToString("yyyy/MM/dd")
|
||||
</MudText>
|
||||
}
|
||||
<MudSpacer />
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Class="ml-1" />
|
||||
@post.ViewCount.ToString("N0")
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</div>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
|
||||
@* ── Pagination ── *@
|
||||
@if (_totalPages > 1)
|
||||
{
|
||||
<div class="d-flex justify-center mt-8">
|
||||
<MudPagination Count="@_totalPages"
|
||||
Selected="@_currentPage"
|
||||
SelectedChanged="OnPageChanged"
|
||||
Color="Color.Primary"
|
||||
Variant="Variant.Outlined"
|
||||
Class="rounded-lg" />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
</MudContainer>
|
||||
@@ -0,0 +1,91 @@
|
||||
using FrontOffice.Main.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
||||
namespace FrontOffice.Main.Pages.Blog;
|
||||
|
||||
public partial class Index
|
||||
{
|
||||
[Inject] private BlogPostService BlogPostService { get; set; } = default!;
|
||||
[Inject] private BlogCategoryService BlogCategoryService { get; set; } = default!;
|
||||
|
||||
// ── State ──
|
||||
private List<BlogPostCardDto> _posts = new();
|
||||
private List<BlogCategoryDto> _categories = new();
|
||||
private string? _searchTerm;
|
||||
private long? _selectedCategoryId;
|
||||
private int _currentPage = 1;
|
||||
private int _totalPages;
|
||||
private bool _isLoading = true;
|
||||
private const int PageSize = 9;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Load categories and posts in parallel
|
||||
var categoriesTask = BlogCategoryService.GetActiveCategoriesAsync();
|
||||
var postsTask = LoadPostsAsync();
|
||||
|
||||
_categories = await categoriesTask;
|
||||
await postsTask;
|
||||
}
|
||||
|
||||
private async Task LoadPostsAsync()
|
||||
{
|
||||
_isLoading = true;
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
var result = await BlogPostService.GetPublishedPostsAsync(
|
||||
page: _currentPage,
|
||||
pageSize: PageSize,
|
||||
search: _searchTerm,
|
||||
categoryId: _selectedCategoryId);
|
||||
|
||||
_posts = result.Posts;
|
||||
_totalPages = result.TotalPages;
|
||||
}
|
||||
catch
|
||||
{
|
||||
_posts = new();
|
||||
_totalPages = 0;
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isLoading = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SearchPosts()
|
||||
{
|
||||
_currentPage = 1;
|
||||
await LoadPostsAsync();
|
||||
}
|
||||
|
||||
private async Task OnSearchKeyUp(KeyboardEventArgs e)
|
||||
{
|
||||
if (e.Key == "Enter")
|
||||
{
|
||||
await SearchPosts();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnCategoryChanged(long? categoryId)
|
||||
{
|
||||
_selectedCategoryId = categoryId;
|
||||
_currentPage = 1;
|
||||
await LoadPostsAsync();
|
||||
}
|
||||
|
||||
private async Task OnPageChanged(int page)
|
||||
{
|
||||
_currentPage = page;
|
||||
await LoadPostsAsync();
|
||||
}
|
||||
|
||||
private void NavigateToPost(string slug)
|
||||
{
|
||||
Navigation.NavigateTo($"/blog/{slug}");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
@page "/blog/{Slug}"
|
||||
|
||||
<PageTitle>@(_post?.Title ?? "مقاله") | بلاگ</PageTitle>
|
||||
|
||||
@if (_isLoading)
|
||||
{
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="py-12">
|
||||
<LoadingState />
|
||||
</MudContainer>
|
||||
}
|
||||
else if (_post == null)
|
||||
{
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="py-12">
|
||||
<EmptyState Icon="@Icons.Material.Filled.SearchOff"
|
||||
Title="مقاله یافت نشد"
|
||||
Description="این مقاله حذف شده یا آدرس اشتباه است."
|
||||
ActionText="بازگشت به بلاگ"
|
||||
ActionHref="/blog" />
|
||||
</MudContainer>
|
||||
}
|
||||
else
|
||||
{
|
||||
@* ═══ Featured Image Header ═══ *@
|
||||
@if (!string.IsNullOrWhiteSpace(_post.FeaturedImagePath))
|
||||
{
|
||||
<div class="blog-detail-hero">
|
||||
<AppImage Path="@_post.FeaturedImagePath"
|
||||
Alt="@_post.Title"
|
||||
ObjectFit="ObjectFit.Cover"
|
||||
Style="width:100%; height:100%;" />
|
||||
<div class="blog-detail-hero-overlay"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
|
||||
@* ── Breadcrumb ── *@
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Class="mb-4">
|
||||
<MudLink Href="/" Typo="Typo.caption" Class="mud-text-secondary">خانه</MudLink>
|
||||
<MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Class="mud-text-secondary" />
|
||||
<MudLink Href="/blog" Typo="Typo.caption" Class="mud-text-secondary">بلاگ</MudLink>
|
||||
<MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Class="mud-text-secondary" />
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">@_post.Title</MudText>
|
||||
</MudStack>
|
||||
|
||||
@* ── Article Header ── *@
|
||||
<MudPaper Elevation="0" Class="pa-0 mb-6">
|
||||
@if (_post.Categories.Any())
|
||||
{
|
||||
<MudStack Row="true" Spacing="1" Class="mb-3 flex-wrap">
|
||||
@foreach (var cat in _post.Categories)
|
||||
{
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Filled"
|
||||
Color="Color.Primary" Class="rounded-pill"
|
||||
OnClick="() => NavigateToCategoryFilter(cat.Id)">
|
||||
@cat.Title
|
||||
</MudChip>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
<MudText Typo="Typo.h4" Class="mb-3 fw-bold" Style="line-height:1.6;">
|
||||
@_post.Title
|
||||
</MudText>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(_post.Summary))
|
||||
{
|
||||
<MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-4" Style="line-height:1.8;">
|
||||
@_post.Summary
|
||||
</MudText>
|
||||
}
|
||||
|
||||
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center" Class="mb-4 flex-wrap">
|
||||
@if (_post.PublishedAt.HasValue)
|
||||
{
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
||||
@_post.PublishedAt.Value.ToString("yyyy/MM/dd")
|
||||
</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
||||
@_post.ViewCount.ToString("N0") بازدید
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
|
||||
<MudDivider Class="mb-6" />
|
||||
</MudPaper>
|
||||
|
||||
@* ── Article Content ── *@
|
||||
<MudPaper Elevation="0" Class="blog-content mb-8">
|
||||
@((MarkupString)_post.HtmlContent)
|
||||
</MudPaper>
|
||||
|
||||
@* ── Tags ── *@
|
||||
@if (_post.Tags.Any())
|
||||
{
|
||||
<MudDivider Class="mb-4" />
|
||||
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Class="mb-6 flex-wrap">
|
||||
<MudIcon Icon="@Icons.Material.Filled.LocalOffer" Size="Size.Small" Class="mud-text-secondary ml-2" />
|
||||
@foreach (var tag in _post.Tags)
|
||||
{
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Outlined"
|
||||
Class="rounded-pill">
|
||||
@tag.Title
|
||||
</MudChip>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@* ── Back to Blog ── *@
|
||||
<div class="text-center mt-6 mb-4">
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="GoBack"
|
||||
Class="rounded-pill" StartIcon="@Icons.Material.Filled.ArrowForward">
|
||||
بازگشت به بلاگ
|
||||
</MudButton>
|
||||
</div>
|
||||
</MudContainer>
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
using FrontOffice.Main.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace FrontOffice.Main.Pages.Blog;
|
||||
|
||||
public partial class Post
|
||||
{
|
||||
[Inject] private IJSRuntime JS { get; set; } = default!;
|
||||
[Parameter] public string Slug { get; set; } = string.Empty;
|
||||
|
||||
[Inject] private BlogPostService BlogPostService { get; set; } = default!;
|
||||
|
||||
private BlogPostDetailDto? _post;
|
||||
private bool _isLoading = true;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(Slug)) return;
|
||||
|
||||
_isLoading = true;
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
_post = await BlogPostService.GetBySlugAsync(Slug);
|
||||
|
||||
// Fire-and-forget: increment view count
|
||||
if (_post != null)
|
||||
{
|
||||
_ = BlogPostService.IncrementViewCountAsync(_post.Id);
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
_post = null;
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isLoading = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private void NavigateToCategoryFilter(long categoryId)
|
||||
{
|
||||
Navigation.NavigateTo($"/blog?category={categoryId}");
|
||||
}
|
||||
|
||||
private async Task GoBack() => await JS.InvokeVoidAsync("history.back");
|
||||
}
|
||||
Reference in New Issue
Block a user