287 lines
10 KiB
Plaintext
287 lines
10 KiB
Plaintext
@using FruitBank.Common.Enums
|
|
@using Nop.Plugin.Misc.FruitBankPlugin.Controllers
|
|
@model List<CustomerPreorderController.CustomerPreorderRow>
|
|
|
|
@{
|
|
Layout = "_ColumnsTwo";
|
|
ViewBag.Title = "Előrendeléseim";
|
|
}
|
|
|
|
<link rel="stylesheet" href="~/Plugins/Misc.FruitBankPlugin/css/quick-order.css" />
|
|
|
|
<div class="page account-page my-preorders-page">
|
|
<div class="page-title">
|
|
<h1>Előrendeléseim</h1>
|
|
</div>
|
|
<div class="page-body">
|
|
|
|
@if (!Model.Any())
|
|
{
|
|
<div class="no-data">
|
|
<p>Még nem adtál le előrendelést.</p>
|
|
<a href="@Url.Action("Index", "Order")" class="button-1">Rendelés indítása</a>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
foreach (var preorder in Model)
|
|
{
|
|
var statusClass = preorder.Status switch
|
|
{
|
|
PreorderStatus.Confirmed => "po-status-confirmed",
|
|
PreorderStatus.PartiallyFulfilled => "po-status-partial",
|
|
PreorderStatus.Cancelled => "po-status-cancelled",
|
|
_ => "po-status-pending"
|
|
};
|
|
var statusLabel = preorder.Status switch
|
|
{
|
|
PreorderStatus.Confirmed => "Megerősítve",
|
|
PreorderStatus.PartiallyFulfilled => "Részben teljesítve",
|
|
PreorderStatus.Cancelled => "Törölve / Lejárt",
|
|
_ => "Függőben"
|
|
};
|
|
|
|
<div class="po-customer-card">
|
|
<div class="po-card-header">
|
|
<div class="po-card-meta">
|
|
<span class="po-card-id">#@preorder.PreorderId előrendelés</span>
|
|
<span class="po-card-date">
|
|
<i class="fa fa-calendar"></i>
|
|
Kért szállítás: <strong>@preorder.DateOfReceipt.ToLocalTime().ToString("yyyy. MM. dd. HH:mm")</strong>
|
|
</span>
|
|
<span class="po-card-created">
|
|
Leadva: @preorder.CreatedOnUtc.ToLocalTime().ToString("yyyy. MM. dd.")
|
|
</span>
|
|
</div>
|
|
<div class="po-card-status-wrap">
|
|
<span class="po-status-badge @statusClass">@statusLabel</span>
|
|
@if (preorder.OrderId.HasValue)
|
|
{
|
|
<a href="@Url.RouteUrl("OrderDetails", new { orderId = preorder.OrderId })"
|
|
class="po-order-link">
|
|
<i class="fa fa-external-link"></i> Rendelés #@preorder.OrderId
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@if (!string.IsNullOrWhiteSpace(preorder.CustomerNote))
|
|
{
|
|
<div class="po-card-note">
|
|
<i class="fa fa-comment-o"></i>
|
|
@preorder.CustomerNote
|
|
</div>
|
|
}
|
|
|
|
<div class="po-card-items">
|
|
<table class="po-items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Termék</th>
|
|
<th class="text-center">Kérve</th>
|
|
<th class="text-center">Teljesítve</th>
|
|
<th class="text-right">Egységár</th>
|
|
<th class="text-center po-status-col">Állapot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var item in preorder.Items)
|
|
{
|
|
var itemStatusLabel = item.Status switch
|
|
{
|
|
PreorderItemStatus.Fulfilled => "✓ Teljesítve",
|
|
PreorderItemStatus.PartiallyFulfilled => "◑ Részben",
|
|
PreorderItemStatus.Dropped => "✕ Ejtve",
|
|
_ => "⏳ Vár"
|
|
};
|
|
var itemStatusClass = item.Status switch
|
|
{
|
|
PreorderItemStatus.Fulfilled => "item-fulfilled",
|
|
PreorderItemStatus.PartiallyFulfilled => "item-partial",
|
|
PreorderItemStatus.Dropped => "item-dropped",
|
|
_ => "item-pending"
|
|
};
|
|
var unitPrice = item.IsMeasurable
|
|
? "Súlymérés"
|
|
: item.UnitPriceInclTax.ToString("N0") + " Ft/db";
|
|
|
|
<tr class="@itemStatusClass">
|
|
<td>
|
|
@item.ProductName
|
|
@if (item.IsMeasurable)
|
|
{
|
|
<span class="measurable-tag" title="Súlymérést igényel">⚖️</span>
|
|
}
|
|
</td>
|
|
<td class="text-center">@item.RequestedQuantity db</td>
|
|
<td class="text-center">@item.FulfilledQuantity db</td>
|
|
<td class="text-right">@unitPrice</td>
|
|
<td class="text-center">
|
|
<span class="item-status-label @itemStatusClass">@itemStatusLabel</span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* ── Page ─────────────────────────────────────────────────────── */
|
|
.my-preorders-page .page-title h1 {
|
|
font-size: 24px;
|
|
color: #1a3c22;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 48px 20px;
|
|
color: #6b7c6e;
|
|
}
|
|
|
|
.no-data p { margin-bottom: 16px; font-size: 15px; }
|
|
|
|
/* ── Preorder card ────────────────────────────────────────────── */
|
|
.po-customer-card {
|
|
background: #fff;
|
|
border: 1px solid #dde8da;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.po-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
background: #f5f7f2;
|
|
border-bottom: 1px solid #dde8da;
|
|
}
|
|
|
|
.po-card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
font-size: 13px;
|
|
color: #6b7c6e;
|
|
}
|
|
|
|
.po-card-id {
|
|
font-weight: 700;
|
|
color: #1a3c22;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.po-card-date strong { color: #1a3c22; }
|
|
|
|
.po-card-status-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Status badges */
|
|
.po-status-badge {
|
|
display: inline-block;
|
|
padding: 3px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.po-status-pending { background: #fff3cd; color: #856404; }
|
|
.po-status-confirmed { background: #d4edda; color: #155724; }
|
|
.po-status-partial { background: #fff8ee; color: #c87500; }
|
|
.po-status-cancelled { background: #f8d7da; color: #721c24; }
|
|
|
|
.po-order-link {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #2d7a3a;
|
|
text-decoration: none;
|
|
border: 1px solid #2d7a3a;
|
|
border-radius: 4px;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
.po-order-link:hover { background: #2d7a3a; color: #fff; }
|
|
|
|
/* Note */
|
|
.po-card-note {
|
|
padding: 10px 20px;
|
|
font-size: 13px;
|
|
color: #6b7c6e;
|
|
background: #fffdf7;
|
|
border-bottom: 1px solid #dde8da;
|
|
}
|
|
|
|
.po-card-note .fa { margin-right: 6px; color: #f4a236; }
|
|
|
|
/* Items table */
|
|
.po-card-items { padding: 0; }
|
|
|
|
.po-items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.po-items-table th {
|
|
padding: 8px 14px;
|
|
background: #f0f4ee;
|
|
color: #1a3c22;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .5px;
|
|
border-bottom: 1px solid #dde8da;
|
|
}
|
|
|
|
.po-items-table td {
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid #f0f4ee;
|
|
color: #2c3e2e;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.po-items-table tr:last-child td { border-bottom: none; }
|
|
|
|
.po-items-table tr.item-fulfilled { background: #f6fbf4; }
|
|
.po-items-table tr.item-partial { background: #fffbf0; }
|
|
.po-items-table tr.item-dropped { background: #fdf6f6; color: #999; }
|
|
|
|
.item-status-label {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.item-status-label.item-fulfilled { background: #d4edda; color: #155724; }
|
|
.item-status-label.item-partial { background: #fff8ee; color: #c87500; }
|
|
.item-status-label.item-dropped { background: #f8d7da; color: #721c24; }
|
|
.item-status-label.item-pending { background: #fff3cd; color: #856404; }
|
|
|
|
.measurable-tag { margin-left: 4px; font-size: 13px; }
|
|
|
|
.text-center { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
@@media (max-width: 600px) {
|
|
.po-status-col { display: none; }
|
|
.po-items-table th:last-child,
|
|
.po-items-table td:last-child { display: none; }
|
|
}
|
|
</style>
|