masoodafar-web
c7e6d01c11
- 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.
103 lines
5.3 KiB
Plaintext
103 lines
5.3 KiB
Plaintext
@attribute [Route(RouteConstants.Store.Orders)]
|
|
|
|
<PageTitle>سفارشات من</PageTitle>
|
|
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
|
<MudStack Spacing="3">
|
|
<PageHeader Title="سفارشات من" BackHref="@RouteConstants.Store.Products" />
|
|
|
|
@if (_loading)
|
|
{
|
|
<LoadingState />
|
|
}
|
|
else if (_orders.Count == 0)
|
|
{
|
|
<MudAlert Severity="Severity.Info">هنوز سفارشی ثبت نشده است.</MudAlert>
|
|
<MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Store"
|
|
Href="@RouteConstants.Store.Products">
|
|
مشاهده فروشگاه
|
|
</MudButton>
|
|
}
|
|
else
|
|
{
|
|
<!-- Desktop Table -->
|
|
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
|
|
<MudPaper Elevation="1" Class="pa-4 rounded-lg">
|
|
<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>
|
|
</MudPaper>
|
|
}
|
|
</MudStack>
|
|
</MudHidden>
|
|
}
|
|
</MudStack>
|
|
</MudContainer>
|