484 lines
25 KiB
Plaintext
484 lines
25 KiB
Plaintext
@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.PreOrderDetailModel
|
|
@using FruitBank.Common.Enums
|
|
|
|
@{
|
|
ViewBag.PageTitle = $"Előrendelés #{Model.PreOrderId}";
|
|
Layout = "~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/_FruitBankAdminLayout.cshtml";
|
|
|
|
var statusClass = Model.Status switch
|
|
{
|
|
PreOrderStatus.Confirmed => "po-status-confirmed",
|
|
PreOrderStatus.PartiallyFulfilled => "po-status-partial",
|
|
PreOrderStatus.Cancelled => "po-status-cancelled",
|
|
_ => "po-status-pending"
|
|
};
|
|
var statusLabel = Model.Status switch
|
|
{
|
|
PreOrderStatus.Confirmed => "Megerősítve",
|
|
PreOrderStatus.PartiallyFulfilled => "Részben teljesítve",
|
|
PreOrderStatus.Cancelled => "Törölve",
|
|
_ => "Függőben"
|
|
};
|
|
var canEdit = Model.Status != PreOrderStatus.Cancelled;
|
|
}
|
|
|
|
@Html.AntiForgeryToken()
|
|
|
|
<style>
|
|
.po-status-pending { background:#fff3cd; color:#856404; border-radius:6px; padding:4px 12px; font-weight:700; display:inline-block; }
|
|
.po-status-confirmed { background:#d4edda; color:#155724; border-radius:6px; padding:4px 12px; font-weight:700; display:inline-block; }
|
|
.po-status-partial { background:#fff8ee; color:#c87500; border-radius:6px; padding:4px 12px; font-weight:700; display:inline-block; }
|
|
.po-status-cancelled { background:#f8d7da; color:#721c24; border-radius:6px; padding:4px 12px; font-weight:700; display:inline-block; }
|
|
|
|
.po-meta-card { background:#fff; border:1px solid #dde8da; border-radius:8px; padding:16px 20px; margin-bottom:20px; }
|
|
.po-meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
|
|
.po-meta-item .label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b7c6e; margin-bottom:4px; }
|
|
.po-meta-item .value { font-size:15px; color:#1a3c22; font-weight:600; }
|
|
|
|
.item-fulfilled { background:#eaf7ee; }
|
|
.item-partial { background:#fffbf0; }
|
|
.item-dropped { background:#fdf0f0; color:#888; }
|
|
|
|
.qty-bar-wrap { width:100px; display:inline-block; vertical-align:middle; }
|
|
.qty-bar { height:6px; background:#dde8da; border-radius:3px; overflow:hidden; display:inline-block; width:100%; }
|
|
.qty-bar-fill { height:100%; border-radius:3px; }
|
|
|
|
/* Click-to-edit */
|
|
.editable-cell { cursor:pointer; border-radius:4px; padding:2px 6px; transition:background .15s; }
|
|
.editable-cell:hover { background:#f0f8f1; outline:1px dashed #2d7a3a; }
|
|
.edit-input { width:90px; }
|
|
.btn-swap { padding:2px 7px; font-size:11px; }
|
|
|
|
.ui-autocomplete { z-index:1060 !important; max-height:220px; overflow-y:auto; overflow-x:hidden; }
|
|
</style>
|
|
|
|
<a href="/Admin/PreOrders" class="btn btn-default btn-sm mb-3">
|
|
<i class="fas fa-arrow-left"></i> Vissza a listához
|
|
</a>
|
|
|
|
<div class="content-header clearfix">
|
|
<h1 class="float-left">
|
|
<i class="fas fa-calendar-plus" style="color:#2d7a3a;"></i>
|
|
Előrendelés <strong>#@Model.PreOrderId</strong>
|
|
<span class="@statusClass ml-2">@statusLabel</span>
|
|
</h1>
|
|
<div class="float-right d-flex align-items-center" style="gap:8px;">
|
|
@if (Model.OrderId.HasValue)
|
|
{
|
|
<a href="/Admin/Order/Edit/@Model.OrderId" class="btn btn-success btn-sm" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i> Rendelés #@Model.OrderId
|
|
</a>
|
|
}
|
|
@if (canEdit)
|
|
{
|
|
<button id="convertNowBtn" class="btn btn-warning btn-sm">
|
|
<i class="fas fa-bolt"></i> Konvertálás rendeléssé
|
|
</button>
|
|
<button id="editHeaderBtn" class="btn btn-default btn-sm">
|
|
<i class="fas fa-pencil-alt"></i> Szerkesztés
|
|
</button>
|
|
}
|
|
@if (Model.Status == PreOrderStatus.Pending)
|
|
{
|
|
<button id="cancelBtn" class="btn btn-danger btn-sm">
|
|
<i class="fas fa-times"></i> Visszavonás
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
|
|
<!-- ── Meta card ─────────────────────────────────────────────────── -->
|
|
<div class="po-meta-card">
|
|
<!-- Read-only view -->
|
|
<div id="headerView">
|
|
<div class="po-meta-grid">
|
|
<div class="po-meta-item">
|
|
<div class="label">Ügyfél</div>
|
|
<div class="value"><a href="/Admin/Customer/Edit/@Model.CustomerId">@Model.CustomerName</a></div>
|
|
<small class="text-muted">@Model.CustomerEmail</small>
|
|
</div>
|
|
<div class="po-meta-item">
|
|
<div class="label">Kért szállítási időpont</div>
|
|
<div class="value"><i class="fas fa-calendar-day text-muted mr-1"></i>@Model.DateOfReceipt</div>
|
|
</div>
|
|
<div class="po-meta-item">
|
|
<div class="label">Leadva</div>
|
|
<div class="value">@Model.CreatedOnUtc</div>
|
|
</div>
|
|
<div class="po-meta-item">
|
|
<div class="label">Utoljára frissítve</div>
|
|
<div class="value">@Model.UpdatedOnUtc</div>
|
|
</div>
|
|
@if (!string.IsNullOrWhiteSpace(Model.CustomerNote))
|
|
{
|
|
<div class="po-meta-item" style="grid-column:1/-1;">
|
|
<div class="label">Ügyfél megjegyzése</div>
|
|
<div class="value" style="font-weight:400;font-size:14px;color:#444;">@Model.CustomerNote</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit form -->
|
|
<div id="headerEdit" style="display:none;">
|
|
<div class="form-row align-items-end">
|
|
<div class="col-md-3">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Kért szállítási időpont</label>
|
|
<input type="datetime-local" id="editDelivery" class="form-control" value="@Model.DateOfReceiptRaw" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Ügyfél megjegyzése</label>
|
|
<input type="text" id="editNote" class="form-control" value="@Model.CustomerNote"
|
|
maxlength="1000" placeholder="Megjegyzés..." />
|
|
</div>
|
|
<div class="col-md-3 d-flex" style="gap:8px;">
|
|
<button id="saveHeaderBtn" class="btn btn-success btn-sm flex-grow-1">
|
|
<i class="fas fa-save"></i> Mentés
|
|
</button>
|
|
<button id="cancelHeaderBtn" class="btn btn-secondary btn-sm">Mégse</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Items table ────────────────────────────────────────────────── -->
|
|
<div class="card card-default">
|
|
<div class="card-header">
|
|
<strong>Tételek (@Model.Items.Count)</strong>
|
|
@{
|
|
var fulfilled = Model.Items.Count(i => i.Status == PreOrderItemStatus.Fulfilled);
|
|
var partial = Model.Items.Count(i => i.Status == PreOrderItemStatus.PartiallyFulfilled);
|
|
var dropped = Model.Items.Count(i => i.Status == PreOrderItemStatus.Dropped);
|
|
var pending = Model.Items.Count(i => i.Status == PreOrderItemStatus.Pending);
|
|
}
|
|
<span class="ml-2 text-muted" style="font-size:13px;">
|
|
@if (fulfilled > 0) { <span class="badge badge-success">@fulfilled teljesítve</span> }
|
|
@if (partial > 0) { <span class="badge badge-warning ml-1">@partial részben</span> }
|
|
@if (dropped > 0) { <span class="badge badge-danger ml-1">@dropped ejtve</span> }
|
|
@if (pending > 0) { <span class="badge badge-secondary ml-1">@pending függőben</span> }
|
|
</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-bordered table-hover table-sm m-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Termék</th>
|
|
<th width="90" class="text-center">Kérve</th>
|
|
<th width="90" class="text-center">Teljesítve</th>
|
|
<th width="150">Teljesítés</th>
|
|
<th width="130" class="text-right">Egységár</th>
|
|
<th width="130" class="text-right">Becsült ár</th>
|
|
<th width="110" class="text-center">Állapot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var item in Model.Items)
|
|
{
|
|
var rowClass = item.Status switch
|
|
{
|
|
PreOrderItemStatus.Fulfilled => "item-fulfilled",
|
|
PreOrderItemStatus.PartiallyFulfilled => "item-partial",
|
|
PreOrderItemStatus.Dropped => "item-dropped",
|
|
_ => ""
|
|
};
|
|
var pct = item.RequestedQuantity > 0
|
|
? (int)Math.Round((double)item.FulfilledQuantity / item.RequestedQuantity * 100)
|
|
: 0;
|
|
var barColor = pct == 100 ? "#2d7a3a" : pct > 0 ? "#f4a236" : "#dc3545";
|
|
var estimatedPrice = item.IsMeasurable
|
|
? "—"
|
|
: (item.UnitPriceInclTax * item.FulfilledQuantity).ToString("N0") + " Ft";
|
|
var unitPriceStr = item.IsMeasurable ? "súlymérés" : item.UnitPriceInclTax.ToString("N0") + " Ft";
|
|
var isLocked = item.FulfilledQuantity > 0;
|
|
|
|
<tr class="@rowClass" data-item-id="@item.ItemId">
|
|
<!-- Product + optional swap -->
|
|
<td>
|
|
<a href="/Admin/Product/Edit/@item.ProductId" target="_blank">@item.ProductName</a>
|
|
@if (item.IsMeasurable)
|
|
{
|
|
<span class="badge badge-light ml-1" title="Súlymérést igényel">⚖️</span>
|
|
}
|
|
@if (canEdit && !isLocked)
|
|
{
|
|
<button class="btn btn-default btn-swap ml-1 swap-product-btn"
|
|
data-item-id="@item.ItemId"
|
|
data-product-id="@item.ProductId"
|
|
title="Termék cseréje">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
</button>
|
|
}
|
|
@if (isLocked)
|
|
{
|
|
<i class="fas fa-lock text-muted ml-1" title="Már teljesített" style="font-size:11px;"></i>
|
|
}
|
|
</td>
|
|
|
|
<!-- Requested qty — click-to-edit if pending -->
|
|
<td class="text-center">
|
|
@if (canEdit && !isLocked)
|
|
{
|
|
<span class="editable-cell qty-display" data-item-id="@item.ItemId">@item.RequestedQuantity db</span>
|
|
<span class="qty-edit-wrap" style="display:none;">
|
|
<input type="number" class="form-control form-control-sm edit-input qty-input"
|
|
min="1" value="@item.RequestedQuantity" data-item-id="@item.ItemId" />
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
@item.RequestedQuantity<text> db</text>
|
|
}
|
|
</td>
|
|
|
|
<!-- Fulfilled — always read-only -->
|
|
<td class="text-center"><strong>@item.FulfilledQuantity db</strong></td>
|
|
|
|
<!-- Progress bar -->
|
|
<td>
|
|
<div class="qty-bar-wrap">
|
|
<div class="qty-bar">
|
|
<div class="qty-bar-fill" style="width:@pct%;background:@barColor;"></div>
|
|
</div>
|
|
</div>
|
|
<small class="ml-1">@pct%</small>
|
|
</td>
|
|
|
|
<!-- Unit price — click-to-edit if pending and not measurable -->
|
|
<td class="text-right">
|
|
@if (canEdit && !isLocked && !item.IsMeasurable)
|
|
{
|
|
<span class="editable-cell price-display" data-item-id="@item.ItemId">@unitPriceStr</span>
|
|
<span class="price-edit-wrap" style="display:none;">
|
|
<input type="number" class="form-control form-control-sm edit-input price-input"
|
|
min="0" value="@item.UnitPriceInclTax" data-item-id="@item.ItemId" />
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
@unitPriceStr
|
|
}
|
|
</td>
|
|
|
|
<td class="text-right">@estimatedPrice</td>
|
|
|
|
<td class="text-center">
|
|
<span class="po-status-@item.Status.ToString().ToLower()" style="font-size:11px;padding:2px 6px;">
|
|
@item.StatusLabel
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
@{
|
|
var totalEstimated = Model.Items
|
|
.Where(i => !i.IsMeasurable &&
|
|
(i.Status == PreOrderItemStatus.Fulfilled || i.Status == PreOrderItemStatus.PartiallyFulfilled))
|
|
.Sum(i => i.UnitPriceInclTax * i.FulfilledQuantity);
|
|
}
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="5" class="text-right"><strong>Becsült összeg:</strong></td>
|
|
<td class="text-right"><strong>@totalEstimated.ToString("N0") Ft</strong></td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Product swap modal ──────────────────────────────────────────────── -->
|
|
<div id="swapProductModal" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="background:#2d7a3a;color:#fff;">
|
|
<h5 class="modal-title"><i class="fas fa-exchange-alt"></i> Termék cseréje</h5>
|
|
<button type="button" class="close" data-dismiss="modal" style="color:#fff;"><span>×</span></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted" style="font-size:13px;">Csak az előrendelési ablakban elérhető termékek jelennek meg.</p>
|
|
<input type="text" id="swapProductSearch" autocomplete="off" class="form-control"
|
|
placeholder="Termék neve vagy SKU..." />
|
|
<div id="swapSelectedProduct" class="mt-2" style="display:none;">
|
|
<span class="badge badge-success p-2" id="swapSelectedName"></span>
|
|
<span class="ml-2 text-muted" id="swapNewPrice"></span>
|
|
</div>
|
|
<input type="hidden" id="swapNewProductId" />
|
|
<input type="hidden" id="swapItemId" />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Mégse</button>
|
|
<button type="button" id="confirmSwapBtn" class="btn btn-primary" disabled>
|
|
<i class="fas fa-check"></i> Csere megerősítése
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function () {
|
|
var _token = $('input[name="__RequestVerificationToken"]').val();
|
|
var preorderId = @Model.PreOrderId;
|
|
|
|
// ── Header edit toggle ────────────────────────────────────────────────
|
|
$('#editHeaderBtn').click(function () {
|
|
$('#headerView').hide(); $('#headerEdit').show(); $(this).hide();
|
|
});
|
|
$('#cancelHeaderBtn').click(function () {
|
|
$('#headerEdit').hide(); $('#headerView').show(); $('#editHeaderBtn').show();
|
|
});
|
|
$('#saveHeaderBtn').click(function () {
|
|
var $btn = $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
|
|
$.post('/Admin/PreOrders/UpdateHeader/' + preorderId, {
|
|
deliveryDateTime: $('#editDelivery').val(),
|
|
customerNote : $('#editNote').val(),
|
|
__RequestVerificationToken: _token
|
|
}, function (r) {
|
|
if (r.success) { location.reload(); }
|
|
else {
|
|
alert('Hiba: ' + (r.error || 'Ismeretlen hiba'));
|
|
$btn.prop('disabled', false).html('<i class="fas fa-save"></i> Mentés');
|
|
}
|
|
});
|
|
});
|
|
|
|
// ── Click-to-edit: quantity ───────────────────────────────────────────
|
|
$(document).on('click', '.qty-display', function () {
|
|
var id = $(this).data('item-id');
|
|
$(this).hide();
|
|
$('[data-item-id="' + id + '"].qty-input').closest('.qty-edit-wrap').show()
|
|
.find('.qty-input').focus().select();
|
|
});
|
|
$(document).on('keydown blur', '.qty-input', function (e) {
|
|
if (e.type === 'keydown' && e.key === 'Escape') { cancelEdit($(this).data('item-id'), 'qty'); return; }
|
|
if (e.type === 'keydown' && e.key !== 'Enter') return;
|
|
saveItemField($(this).data('item-id'));
|
|
});
|
|
|
|
// ── Click-to-edit: price ──────────────────────────────────────────────
|
|
$(document).on('click', '.price-display', function () {
|
|
var id = $(this).data('item-id');
|
|
$(this).hide();
|
|
$(this).siblings('.price-edit-wrap').show().find('.price-input').focus().select();
|
|
});
|
|
$(document).on('keydown blur', '.price-input', function (e) {
|
|
if (e.type === 'keydown' && e.key === 'Escape') { cancelEdit($(this).data('item-id'), 'price'); return; }
|
|
if (e.type === 'keydown' && e.key !== 'Enter') return;
|
|
saveItemField($(this).data('item-id'));
|
|
});
|
|
|
|
function cancelEdit(id, type) {
|
|
if (type === 'qty') {
|
|
$('[data-item-id="' + id + '"].qty-display').show();
|
|
$('[data-item-id="' + id + '"].qty-input').closest('.qty-edit-wrap').hide();
|
|
} else {
|
|
$('[data-item-id="' + id + '"].price-display').show();
|
|
$('[data-item-id="' + id + '"].price-input').closest('.price-edit-wrap').hide();
|
|
}
|
|
}
|
|
|
|
function saveItemField(id) {
|
|
var qty = parseInt($('[data-item-id="' + id + '"].qty-input').val()) || 1;
|
|
var price = parseFloat($('[data-item-id="' + id + '"].price-input').val()) || 0;
|
|
$.post('/Admin/PreOrders/UpdateItem/' + id, {
|
|
quantity: qty, unitPrice: price, __RequestVerificationToken: _token
|
|
}, function (r) {
|
|
if (r.success) {
|
|
$('[data-item-id="' + id + '"].qty-display').text(qty + ' db').show();
|
|
$('[data-item-id="' + id + '"].qty-input').closest('.qty-edit-wrap').hide();
|
|
$('[data-item-id="' + id + '"].price-display').text(Math.round(price).toLocaleString('hu-HU') + ' Ft').show();
|
|
$('[data-item-id="' + id + '"].price-input').closest('.price-edit-wrap').hide();
|
|
} else {
|
|
alert('Hiba: ' + (r.error || 'Ismeretlen hiba'));
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Product swap ──────────────────────────────────────────────────────
|
|
$(document).on('click', '.swap-product-btn', function () {
|
|
$('#swapItemId').val($(this).data('item-id'));
|
|
$('#swapNewProductId').val('');
|
|
$('#swapProductSearch, #swapSelectedName, #swapNewPrice').val('').text('');
|
|
$('#swapSelectedProduct').hide();
|
|
$('#confirmSwapBtn').prop('disabled', true);
|
|
$('#swapProductModal').modal('show');
|
|
});
|
|
|
|
$('#swapProductSearch').autocomplete({
|
|
delay: 400, minLength: 2,
|
|
source: '/Admin/CustomOrder/PreorderProductSearchAutoComplete',
|
|
select: function (e, ui) {
|
|
$('#swapNewProductId').val(ui.item.value);
|
|
$('#swapSelectedName').text(ui.item.label);
|
|
$('#swapSelectedProduct').show();
|
|
$('#confirmSwapBtn').prop('disabled', false);
|
|
$('#swapProductSearch').val('');
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$('#swapProductModal').on('hidden.bs.modal', function () {
|
|
$('#swapNewProductId').val('');
|
|
$('#swapSelectedProduct').hide();
|
|
$('#confirmSwapBtn').prop('disabled', true);
|
|
});
|
|
|
|
$('#confirmSwapBtn').click(function () {
|
|
var $btn = $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
|
|
$.post('/Admin/PreOrders/ReplaceItemProduct/' + $('#swapItemId').val(), {
|
|
newProductId: $('#swapNewProductId').val(),
|
|
__RequestVerificationToken: _token
|
|
}, function (r) {
|
|
if (r.success) {
|
|
$('#swapProductModal').modal('hide');
|
|
location.reload();
|
|
} else {
|
|
alert('Hiba: ' + (r.error || 'Ismeretlen hiba'));
|
|
$btn.prop('disabled', false).html('<i class="fas fa-check"></i> Csere megerősítése');
|
|
}
|
|
});
|
|
});
|
|
|
|
// ── Manual conversion ─────────────────────────────────────────────────
|
|
$('#convertNowBtn').click(function () {
|
|
if (!confirm('Azonnali konvertálást indítasz — a függőben lévő tételeket megpróbálja rendeléssé alakítani a jelenlegi készlet alapján. Folytatod?')) return;
|
|
var $btn = $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Konvertálás...');
|
|
$.post('/Admin/PreOrders/ConvertNow/' + preorderId, {
|
|
__RequestVerificationToken: _token
|
|
}, function (r) {
|
|
if (r.success) {
|
|
alert(r.orderId
|
|
? 'Sikeresen konvertálva! Rendelés: #' + r.orderId
|
|
: 'A konvertálás lefutott, de nincs elegendő készlet.');
|
|
location.reload();
|
|
} else {
|
|
alert('Hiba: ' + (r.error || 'Ismeretlen hiba'));
|
|
$btn.prop('disabled', false).html('<i class="fas fa-bolt"></i> Konvertálás rendeléssé');
|
|
}
|
|
});
|
|
});
|
|
|
|
// ── Cancel preorder ───────────────────────────────────────────────────
|
|
@if (Model.Status == PreOrderStatus.Pending)
|
|
{
|
|
<text>
|
|
$('#cancelBtn').click(function () {
|
|
if (!confirm('Biztosan visszavonod ezt az előrendelést? Ez a művelet nem visszafordítható.')) return;
|
|
$.post('/Admin/PreOrders/Cancel/@Model.PreOrderId', {
|
|
__RequestVerificationToken: _token
|
|
}, function (r) {
|
|
if (r.success) { location.href = '/Admin/PreOrders'; }
|
|
else { alert('Hiba: ' + (r.error || 'Ismeretlen hiba')); }
|
|
});
|
|
});
|
|
</text>
|
|
}
|
|
});
|
|
</script>
|