283 lines
12 KiB
Plaintext
283 lines
12 KiB
Plaintext
@{
|
||
ViewBag.PageTitle = "Előrendelés — termékelérhetőség";
|
||
NopHtml.SetActiveMenuItemSystemName("PreorderAvailability");
|
||
Layout = "~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/_FruitBankAdminLayout.cshtml";
|
||
}
|
||
|
||
@Html.AntiForgeryToken()
|
||
|
||
<div class="content-header clearfix">
|
||
<h1 class="float-left">
|
||
<i class="fas fa-calendar-check" style="color:#2d7a3a;"></i>
|
||
Előrendelés — termékelérhetőség
|
||
</h1>
|
||
</div>
|
||
|
||
<section class="content">
|
||
<div class="container-fluid">
|
||
|
||
<!-- ── Tabs ─────────────────────────────────────────────────────── -->
|
||
<ul class="nav nav-tabs mb-3" id="paTabs" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="tab-all-link" data-toggle="tab" href="#tab-all" role="tab">
|
||
<i class="fas fa-list"></i> Összes termék
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="tab-today-link" data-toggle="tab" href="#tab-today" role="tab">
|
||
<i class="fas fa-calendar-day"></i> Elérhető ma
|
||
<span id="todayBadge" class="badge badge-success ml-1" style="display:none;"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content">
|
||
|
||
<!-- ── TAB 1: All products ──────────────────────────────────── -->
|
||
<div class="tab-pane fade show active" id="tab-all" role="tabpanel">
|
||
<div class="card card-default">
|
||
<div class="card-header">
|
||
<div class="d-flex align-items-center gap-2" style="gap:10px;">
|
||
<span class="text-muted" style="font-size:13px;">
|
||
Kattints a dátum cellákra a szerkesztéshez.
|
||
Törléshez hagyd üresen és nyomj Entert.
|
||
</span>
|
||
<button id="btnSaveAll" class="btn btn-sm btn-success ml-auto" style="display:none;">
|
||
<i class="fas fa-save"></i> Összes módosítás mentése
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<table id="pa-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
|
||
<thead>
|
||
<tr>
|
||
<th>Termék neve</th>
|
||
<th width="100">SKU</th>
|
||
<th width="160" title="Kattints a szerkesztéshez">Elérhetőség kezdete ✏️</th>
|
||
<th width="160" title="Kattints a szerkesztéshez">Elérhetőség vége ✏️</th>
|
||
<th width="110" class="text-center">Ma elérhető?</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── TAB 2: Available today ───────────────────────────────── -->
|
||
<div class="tab-pane fade" id="tab-today" role="tabpanel">
|
||
<div class="card card-default">
|
||
<div class="card-header">
|
||
<span class="text-muted" style="font-size:13px;">
|
||
Termékek, amelyek ma meg tudják rendelni az ügyfelek előrendelésként.
|
||
</span>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<table id="today-grid" class="table table-bordered table-hover table-sm m-0" style="width:100%">
|
||
<thead>
|
||
<tr>
|
||
<th>Termék neve</th>
|
||
<th width="100">SKU</th>
|
||
<th width="160">Elérhetőség kezdete</th>
|
||
<th width="160">Elérhetőség vége</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /.tab-content -->
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
/* ── Editable date cells ──────────────────────────────────────── */
|
||
#pa-grid tbody td.pa-date {
|
||
cursor: pointer;
|
||
min-width: 130px;
|
||
}
|
||
#pa-grid tbody td.pa-date:hover {
|
||
background-color: #fff8e1;
|
||
}
|
||
#pa-grid tbody td.pa-date input[type="date"] {
|
||
width: 135px;
|
||
font-size: 13px;
|
||
padding: 2px 4px;
|
||
border: 1px solid #80bdff;
|
||
border-radius: 3px;
|
||
color: #333;
|
||
}
|
||
.pa-available-yes { color: #2d7a3a; font-weight: 600; }
|
||
.pa-available-no { color: #999; }
|
||
.pa-date-set { color: #1a3c22; }
|
||
.pa-date-empty { color: #bbb; font-style: italic; }
|
||
</style>
|
||
|
||
<script>
|
||
$(function () {
|
||
var _token = $('input[name="__RequestVerificationToken"]').val();
|
||
|
||
function fmtDate(val) {
|
||
if (!val) return '<span class="pa-date-empty">—</span>';
|
||
// "2026-04-21" → "2026. 04. 21."
|
||
var p = val.split('-');
|
||
return '<span class="pa-date-set">' + p[0] + '. ' + p[1] + '. ' + p[2] + '.</span>';
|
||
}
|
||
|
||
function fmtAvailable(row) {
|
||
return row.IsAvailableToday
|
||
? '<span class="pa-available-yes"><i class="fas fa-check-circle"></i> Igen</span>'
|
||
: '<span class="pa-available-no">—</span>';
|
||
}
|
||
|
||
// ── ALL PRODUCTS TABLE ───────────────────────────────────────────────────
|
||
var paTable = $('#pa-grid').DataTable({
|
||
serverSide : true,
|
||
processing : true,
|
||
pageLength : 50,
|
||
lengthMenu : [[25, 50, 100, 250], [25, 50, 100, 250]],
|
||
order : [[0, 'asc']],
|
||
language : {
|
||
processing : 'Betöltés...',
|
||
search : 'Keresés:',
|
||
lengthMenu : '_MENU_ sor/oldal',
|
||
info : '_START_–_END_ / _TOTAL_ termék',
|
||
infoEmpty : '0 termék',
|
||
infoFiltered : '(szűrve _MAX_-ból)',
|
||
paginate : { first: '««', previous: '«', next: '»', last: '»»' },
|
||
emptyTable : 'Nincs termék',
|
||
zeroRecords : 'Nincs találat'
|
||
},
|
||
ajax: {
|
||
url : '/Admin/PreorderAvailability/ProductList',
|
||
type: 'POST',
|
||
data: function (d) { d.__RequestVerificationToken = _token; }
|
||
},
|
||
columns: [
|
||
/* 0 */ { data: 'ProductName', name: 'ProductName' },
|
||
/* 1 */ { data: 'Sku', name: 'Sku', orderable: false,
|
||
render: function (d) { return d ? '<code>' + d + '</code>' : ''; } },
|
||
/* 2 */ { data: 'WindowStart', name: 'WindowStart', className: 'pa-date', orderable: false,
|
||
render: function (d) { return fmtDate(d); } },
|
||
/* 3 */ { data: 'WindowEnd', name: 'WindowEnd', className: 'pa-date', orderable: false,
|
||
render: function (d) { return fmtDate(d); } },
|
||
/* 4 */ { data: 'IsAvailableToday', orderable: false, className: 'text-center',
|
||
render: function (d, t, row) { return fmtAvailable(row); } }
|
||
]
|
||
});
|
||
|
||
// ── INLINE DATE EDITING ──────────────────────────────────────────────────
|
||
$(document).on('click', '#pa-grid tbody td.pa-date', function () {
|
||
var $td = $(this);
|
||
if ($td.find('input').length) return; // already open
|
||
|
||
var $row = $td.closest('tr');
|
||
var rowData = paTable.row($row).data();
|
||
if (!rowData) return;
|
||
|
||
var colIdx = paTable.cell($td).index().column;
|
||
var isStart = colIdx === 2;
|
||
var current = isStart ? (rowData.WindowStart || '') : (rowData.WindowEnd || '');
|
||
var savedHtml = $td.html();
|
||
|
||
var $inp = $('<input type="date">').val(current);
|
||
$td.html('').append($inp);
|
||
$inp.focus();
|
||
|
||
function restore() { $td.html(savedHtml); }
|
||
|
||
function persist() {
|
||
var newVal = $inp.val().trim(); // "yyyy-MM-dd" or ""
|
||
var oldVal = current;
|
||
|
||
if (newVal === oldVal) { restore(); return; }
|
||
|
||
// Optimistically update local row data
|
||
if (isStart) rowData.WindowStart = newVal || null;
|
||
else rowData.WindowEnd = newVal || null;
|
||
|
||
$.ajax({
|
||
url : '/Admin/PreorderAvailability/SaveWindow',
|
||
type : 'POST',
|
||
data : {
|
||
__RequestVerificationToken : _token,
|
||
productId : rowData.ProductId,
|
||
windowStart : rowData.WindowStart || '',
|
||
windowEnd : rowData.WindowEnd || ''
|
||
},
|
||
success: function (res) {
|
||
if (res.success) {
|
||
rowData.IsAvailableToday = res.isAvailableToday;
|
||
paTable.row($row).data(rowData).invalidate().draw(false);
|
||
} else {
|
||
alert('Mentési hiba: ' + (res.error || 'Ismeretlen hiba'));
|
||
restore();
|
||
}
|
||
},
|
||
error: function () { restore(); }
|
||
});
|
||
}
|
||
|
||
$inp.on('blur', function () { persist(); });
|
||
$inp.on('keydown', function (e) {
|
||
if (e.key === 'Enter') { $inp.off('blur'); persist(); }
|
||
if (e.key === 'Escape') { $inp.off('blur'); restore(); }
|
||
});
|
||
});
|
||
|
||
// ── AVAILABLE TODAY TABLE ────────────────────────────────────────────────
|
||
var todayTable = $('#today-grid').DataTable({
|
||
serverSide : true,
|
||
processing : true,
|
||
pageLength : 50,
|
||
order : [[0, 'asc']],
|
||
language : {
|
||
processing : 'Betöltés...',
|
||
search : 'Keresés:',
|
||
lengthMenu : '_MENU_ sor/oldal',
|
||
info : '_START_–_END_ / _TOTAL_ termék',
|
||
infoEmpty : 'Egy termék sincs ma elérhető előrendelésre.',
|
||
infoFiltered : '(szűrve _MAX_-ból)',
|
||
paginate : { first: '««', previous: '«', next: '»', last: '»»' },
|
||
emptyTable : 'Egy termék sincs ma elérhető előrendelésre.',
|
||
zeroRecords : 'Nincs találat'
|
||
},
|
||
ajax: {
|
||
url : '/Admin/PreorderAvailability/AvailableTodayList',
|
||
type: 'POST',
|
||
data: function (d) { d.__RequestVerificationToken = _token; },
|
||
dataSrc: function (json) {
|
||
// Update the badge on the tab
|
||
var count = json.recordsTotal;
|
||
if (count > 0) {
|
||
$('#todayBadge').text(count).show();
|
||
} else {
|
||
$('#todayBadge').hide();
|
||
}
|
||
return json.data;
|
||
}
|
||
},
|
||
columns: [
|
||
/* 0 */ { data: 'ProductName', name: 'ProductName' },
|
||
/* 1 */ { data: 'Sku', orderable: false,
|
||
render: function (d) { return d ? '<code>' + d + '</code>' : ''; } },
|
||
/* 2 */ { data: 'WindowStart', orderable: false,
|
||
render: function (d) { return fmtDate(d); } },
|
||
/* 3 */ { data: 'WindowEnd', orderable: false,
|
||
render: function (d) { return fmtDate(d); } }
|
||
]
|
||
});
|
||
|
||
// Load today table when that tab is first clicked
|
||
var todayLoaded = false;
|
||
$('#tab-today-link').on('shown.bs.tab', function () {
|
||
if (!todayLoaded) { todayTable.ajax.reload(); todayLoaded = true; }
|
||
});
|
||
|
||
// Always reload today table when switching to it (data may have changed)
|
||
$('#tab-today-link').on('show.bs.tab', function () {
|
||
if (todayLoaded) todayTable.ajax.reload();
|
||
});
|
||
});
|
||
</script>
|