feat(orders): enhance order display and interaction for improved user experience
- Refactored the Orders page to improve the layout and presentation of order information, including a new responsive design for mobile and desktop views. - Added a button to navigate to the store when no orders are present, enhancing user engagement. - Updated the order details display to include payment and delivery status with color-coded chips for better visual feedback. - Introduced helper methods for formatting prices and dates, improving code readability and maintainability. These changes significantly enhance the usability and clarity of the order management interface, providing users with a more intuitive experience.
This commit is contained in:
masoodafar-web
@@ -1,80 +1,102 @@
|
|||||||
@attribute [Route(RouteConstants.Store.Orders)]
|
@attribute [Route(RouteConstants.Store.Orders)]
|
||||||
@* Injection is handled in code-behind *@
|
|
||||||
|
|
||||||
<PageTitle>سفارشات من</PageTitle>
|
<PageTitle>سفارشات من</PageTitle>
|
||||||
|
|
||||||
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
||||||
<PageHeader Title="سفارشات من" BackHref="@RouteConstants.Store.Products" />
|
<MudStack Spacing="3">
|
||||||
@if (_loading)
|
<PageHeader Title="سفارشات من" BackHref="@RouteConstants.Store.Products" />
|
||||||
{
|
|
||||||
<LoadingState />
|
|
||||||
}
|
|
||||||
else if (_orders.Count == 0)
|
|
||||||
{
|
|
||||||
<MudAlert Severity="Severity.Info">هنوز سفارشی ثبت نکردهاید.</MudAlert>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
|
|
||||||
<MudTable Items="_orders" Dense="true">
|
|
||||||
<HeaderContent>
|
|
||||||
<MudTh>شناسه</MudTh>
|
|
||||||
<MudTh>تاریخ</MudTh>
|
|
||||||
<MudTh>وضعیت</MudTh>
|
|
||||||
<MudTh>مبلغ</MudTh>
|
|
||||||
<MudTh></MudTh>
|
|
||||||
</HeaderContent>
|
|
||||||
<RowTemplate>
|
|
||||||
<MudTd>@context.Id</MudTd>
|
|
||||||
<MudTd>
|
|
||||||
@if (context.PaymentDate != null)
|
|
||||||
{
|
|
||||||
@context.PaymentDate.ToDateTime().MiladiToJalaliWithTime()
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<text>در انتظار پرداخت</text>
|
|
||||||
}
|
|
||||||
</MudTd>
|
|
||||||
<MudTd>@GetStatusText(context.PaymentStatus)</MudTd>
|
|
||||||
<MudTd>@FormatPrice(context.FactorDetails.Sum(s=>(s.UnitPrice ?? 0) * (s.Count ?? 0)))</MudTd>
|
|
||||||
<MudTd>
|
|
||||||
<MudButton Variant="Variant.Text" Href="@($"{RouteConstants.Store.OrderDetail}{context.Id}")" StartIcon="@Icons.Material.Filled.Receipt">جزئیات</MudButton>
|
|
||||||
</MudTd>
|
|
||||||
</RowTemplate>
|
|
||||||
</MudTable>
|
|
||||||
</MudHidden>
|
|
||||||
|
|
||||||
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
@if (_loading)
|
||||||
<MudStack Spacing="2">
|
{
|
||||||
@foreach (var o in _orders)
|
<LoadingState />
|
||||||
{
|
}
|
||||||
<MudPaper Class="pa-3 rounded-lg" Outlined="true">
|
else if (_orders.Count == 0)
|
||||||
<MudStack Spacing="1">
|
{
|
||||||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
<MudAlert Severity="Severity.Info">هنوز سفارشی ثبت نشده است.</MudAlert>
|
||||||
<MudText>سفارش #@o.Id</MudText>
|
<MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Store"
|
||||||
<MudText Class="mud-text-secondary">
|
Href="@RouteConstants.Store.Products">
|
||||||
@if (o.PaymentDate != null)
|
مشاهده فروشگاه
|
||||||
{
|
</MudButton>
|
||||||
@o.PaymentDate.ToDateTime().MiladiToJalaliWithTime()
|
}
|
||||||
}
|
else
|
||||||
else
|
{
|
||||||
{
|
<!-- Desktop Table -->
|
||||||
<text>در انتظار پرداخت</text>
|
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
|
||||||
}
|
<MudPaper Elevation="1" Class="pa-4 rounded-lg">
|
||||||
</MudText>
|
<MudTable Items="_orders">
|
||||||
|
<HeaderContent>
|
||||||
|
<MudTh>شماره سفارش</MudTh>
|
||||||
|
<MudTh>تعداد اقلام</MudTh>
|
||||||
|
<MudTh>مبلغ کل</MudTh>
|
||||||
|
<MudTh>وضعیت پرداخت</MudTh>
|
||||||
|
<MudTh>وضعیت ارسال</MudTh>
|
||||||
|
<MudTh>تاریخ</MudTh>
|
||||||
|
<MudTh></MudTh>
|
||||||
|
</HeaderContent>
|
||||||
|
<RowTemplate>
|
||||||
|
<MudTd>@context.Id</MudTd>
|
||||||
|
<MudTd>@GetItemsCount(context)</MudTd>
|
||||||
|
<MudTd>@FormatPrice(GetTotalAmount(context))</MudTd>
|
||||||
|
<MudTd>
|
||||||
|
<MudChip T="string" Size="Size.Small"
|
||||||
|
Color="@GetPaymentStatusColor(context.PaymentStatus)"
|
||||||
|
Variant="Variant.Filled">
|
||||||
|
@GetPaymentStatusText(context.PaymentStatus)
|
||||||
|
</MudChip>
|
||||||
|
</MudTd>
|
||||||
|
<MudTd>
|
||||||
|
<MudChip T="string" Size="Size.Small"
|
||||||
|
Color="@GetDeliveryStatusColor((int)context.DeliveryStatus)"
|
||||||
|
Variant="Variant.Outlined">
|
||||||
|
@GetDeliveryStatusText((int)context.DeliveryStatus)
|
||||||
|
</MudChip>
|
||||||
|
</MudTd>
|
||||||
|
<MudTd>@FormatDate(context)</MudTd>
|
||||||
|
<MudTd>
|
||||||
|
<MudButton Size="Size.Small" Variant="Variant.Outlined" Color="Color.Primary"
|
||||||
|
OnClick="() => ViewOrder(context.Id)">
|
||||||
|
جزئیات
|
||||||
|
</MudButton>
|
||||||
|
</MudTd>
|
||||||
|
</RowTemplate>
|
||||||
|
</MudTable>
|
||||||
|
</MudPaper>
|
||||||
|
</MudHidden>
|
||||||
|
|
||||||
|
<!-- Mobile Cards -->
|
||||||
|
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
||||||
|
<MudStack Spacing="2">
|
||||||
|
@foreach (var order in _orders)
|
||||||
|
{
|
||||||
|
<MudPaper Class="pa-3 rounded-lg cursor-pointer" Outlined="true"
|
||||||
|
@onclick="() => ViewOrder(order.Id)">
|
||||||
|
<MudStack Spacing="1">
|
||||||
|
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
||||||
|
<MudText Typo="Typo.subtitle2">سفارش #@order.Id</MudText>
|
||||||
|
<MudChip T="string" Size="Size.Small"
|
||||||
|
Color="@GetPaymentStatusColor(order.PaymentStatus)"
|
||||||
|
Variant="Variant.Filled">
|
||||||
|
@GetPaymentStatusText(order.PaymentStatus)
|
||||||
|
</MudChip>
|
||||||
|
</MudStack>
|
||||||
|
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||||||
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">@FormatDate(order)</MudText>
|
||||||
|
<MudChip T="string" Size="Size.Small"
|
||||||
|
Color="@GetDeliveryStatusColor((int)order.DeliveryStatus)"
|
||||||
|
Variant="Variant.Outlined">
|
||||||
|
@GetDeliveryStatusText((int)order.DeliveryStatus)
|
||||||
|
</MudChip>
|
||||||
|
</MudStack>
|
||||||
|
<MudDivider />
|
||||||
|
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||||||
|
<MudText Typo="Typo.body2">@GetItemsCount(order) قلم</MudText>
|
||||||
|
<MudText Typo="Typo.body2" Class="fw-semibold">@FormatPrice(GetTotalAmount(order)) تومان</MudText>
|
||||||
|
</MudStack>
|
||||||
</MudStack>
|
</MudStack>
|
||||||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
</MudPaper>
|
||||||
<MudText>وضعیت: @GetStatusText(o.PaymentStatus)</MudText>
|
}
|
||||||
<MudText Color="Color.Primary">@FormatPrice(o.FactorDetails.Sum(s=>(s.UnitPrice ?? 0) * (s.Count ?? 0)))</MudText>
|
</MudStack>
|
||||||
</MudStack>
|
</MudHidden>
|
||||||
<MudStack Row="true" Justify="Justify.FlexEnd">
|
}
|
||||||
<MudButton Size="Size.Small" Variant="Variant.Outlined" Href="@($"{RouteConstants.Store.OrderDetail}{o.Id}")" StartIcon="@Icons.Material.Filled.Receipt">جزئیات</MudButton>
|
</MudStack>
|
||||||
</MudStack>
|
|
||||||
</MudStack>
|
|
||||||
</MudPaper>
|
|
||||||
}
|
|
||||||
</MudStack>
|
|
||||||
</MudHidden>
|
|
||||||
}
|
|
||||||
</MudContainer>
|
</MudContainer>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
using System;
|
|
||||||
using CMSMicroservice.Protobuf.Protos.UserOrder;
|
using CMSMicroservice.Protobuf.Protos.UserOrder;
|
||||||
|
using DateTimeConverterCL;
|
||||||
using FrontOffice.Main.Utilities;
|
using FrontOffice.Main.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Messages = CMSMicroservice.Protobuf.Protos;
|
using Messages = CMSMicroservice.Protobuf.Protos;
|
||||||
@@ -10,7 +10,6 @@ namespace FrontOffice.Main.Pages.Store;
|
|||||||
public partial class Orders : ComponentBase
|
public partial class Orders : ComponentBase
|
||||||
{
|
{
|
||||||
[Inject] private OrderService OrderService { get; set; } = default!;
|
[Inject] private OrderService OrderService { get; set; } = default!;
|
||||||
[Inject] private VATService VAT { get; set; } = default!;
|
|
||||||
|
|
||||||
private List<GetUserOrderResponse> _orders = new();
|
private List<GetUserOrderResponse> _orders = new();
|
||||||
private bool _loading;
|
private bool _loading;
|
||||||
@@ -33,28 +32,81 @@ public partial class Orders : ComponentBase
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
private void ViewOrder(long orderId)
|
||||||
{
|
{
|
||||||
if (firstRender)
|
Navigation.NavigateTo($"{RouteConstants.Store.OrderDetail}{orderId}");
|
||||||
|
}
|
||||||
|
|
||||||
|
private static string FormatPrice(long price) => $"{price:N0}";
|
||||||
|
|
||||||
|
private static string FormatDate(GetUserOrderResponse order)
|
||||||
|
{
|
||||||
|
try
|
||||||
{
|
{
|
||||||
// بارگذاری نرخ VAT
|
var timestamp = order.PaymentDate;
|
||||||
await VAT.LoadAsync();
|
if (timestamp is null)
|
||||||
|
return "در انتظار پرداخت";
|
||||||
|
|
||||||
|
return timestamp.ToDateTime().ToLocalTime().MiladiToJalaliWithTime();
|
||||||
}
|
}
|
||||||
await base.OnAfterRenderAsync(firstRender);
|
catch
|
||||||
}
|
|
||||||
|
|
||||||
private static string FormatPrice(long price) => string.Format("{0:N0} تومان", price);
|
|
||||||
|
|
||||||
|
|
||||||
private string GetStatusText(Messages.PaymentStatus contextPaymentStatus)
|
|
||||||
{
|
|
||||||
return contextPaymentStatus switch
|
|
||||||
{
|
{
|
||||||
Messages.PaymentStatus.Pending => "در انتظار پرداخت",
|
return "—";
|
||||||
Messages.PaymentStatus.Success => "پرداخت شده",
|
}
|
||||||
Messages.PaymentStatus.Reject => "پرداخت ناموفق",
|
|
||||||
_ => "نامشخص",
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
private static int GetItemsCount(GetUserOrderResponse order) =>
|
||||||
|
order.FactorDetails.Sum(f => f.Count ?? 0);
|
||||||
|
|
||||||
|
private static long GetTotalAmount(GetUserOrderResponse order)
|
||||||
|
{
|
||||||
|
if (order.VatInfo is not null && order.VatInfo.TotalAmount > 0)
|
||||||
|
return order.VatInfo.TotalAmount;
|
||||||
|
|
||||||
|
if (order.Amount > 0)
|
||||||
|
return order.Amount;
|
||||||
|
|
||||||
|
return order.FactorDetails.Sum(f => (f.UnitPrice ?? 0) * (f.Count ?? 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
private static string GetPaymentStatusText(Messages.PaymentStatus status) => status switch
|
||||||
|
{
|
||||||
|
Messages.PaymentStatus.Pending => "در انتظار پرداخت",
|
||||||
|
Messages.PaymentStatus.Success => "پرداخت شده",
|
||||||
|
Messages.PaymentStatus.Reject => "پرداخت ناموفق",
|
||||||
|
_ => "نامشخص"
|
||||||
|
};
|
||||||
|
|
||||||
|
private static Color GetPaymentStatusColor(Messages.PaymentStatus status) => status switch
|
||||||
|
{
|
||||||
|
Messages.PaymentStatus.Pending => Color.Warning,
|
||||||
|
Messages.PaymentStatus.Success => Color.Success,
|
||||||
|
Messages.PaymentStatus.Reject => Color.Error,
|
||||||
|
_ => Color.Default
|
||||||
|
};
|
||||||
|
|
||||||
|
// Domain/public_messages: None=0, Pending=1, InTransit=2, Delivered=3, Returned=4, Cancelled=5, ReadyForOfficePickup=6
|
||||||
|
private static string GetDeliveryStatusText(int status) => status switch
|
||||||
|
{
|
||||||
|
0 => "بدون ارسال",
|
||||||
|
1 => "در انتظار ارسال",
|
||||||
|
2 => "ارسال شده",
|
||||||
|
3 => "تحویل داده شده",
|
||||||
|
4 => "مرجوع شده",
|
||||||
|
5 => "لغو شده",
|
||||||
|
6 => "آماده تحویل در دفتر",
|
||||||
|
_ => "نامشخص"
|
||||||
|
};
|
||||||
|
|
||||||
|
private static Color GetDeliveryStatusColor(int status) => status switch
|
||||||
|
{
|
||||||
|
0 => Color.Default,
|
||||||
|
1 => Color.Warning,
|
||||||
|
2 => Color.Primary,
|
||||||
|
3 => Color.Success,
|
||||||
|
4 => Color.Error,
|
||||||
|
5 => Color.Dark,
|
||||||
|
6 => Color.Primary,
|
||||||
|
_ => Color.Default
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user