286 lines
12 KiB
JavaScript
286 lines
12 KiB
JavaScript
/**
|
||
* Log Material Usage modal — job details page.
|
||
* Reads config from window.__logMaterial injected inline by the view.
|
||
*/
|
||
(function () {
|
||
let _items = [];
|
||
let _jobPowderIds = new Set();
|
||
let _modal = null;
|
||
|
||
// ── Combobox state ────────────────────────────────────────────────────────
|
||
let _selectedItemId = 0;
|
||
|
||
function lmComboInput() {
|
||
const q = document.getElementById('lmItemSearch')?.value?.toLowerCase() || '';
|
||
lmComboRender(q);
|
||
lmComboShow();
|
||
_selectedItemId = 0;
|
||
document.getElementById('lmItemBalance').classList.add('d-none');
|
||
lmOnQtyInput();
|
||
}
|
||
|
||
function lmComboOpen() {
|
||
const q = document.getElementById('lmItemSearch')?.value?.toLowerCase() || '';
|
||
lmComboRender(q);
|
||
lmComboShow();
|
||
}
|
||
|
||
function lmComboToggle() {
|
||
const dd = document.getElementById('lmItemDropdown');
|
||
if (!dd) return;
|
||
if (dd.style.display === 'none' || !dd.style.display) {
|
||
lmComboOpen();
|
||
document.getElementById('lmItemSearch')?.focus();
|
||
} else {
|
||
lmComboClose();
|
||
}
|
||
}
|
||
|
||
function lmMakeRow(it) {
|
||
const display = (it.manufacturer ? escLm(it.manufacturer) + ' – ' : '') +
|
||
escLm(it.name) +
|
||
(it.unitOfMeasure ? ' <span class="text-muted" style="font-size:.82rem;">(' + escLm(it.unitOfMeasure) + ')</span>' : '');
|
||
const label = (it.manufacturer ? it.manufacturer + ' - ' : '') +
|
||
it.name +
|
||
(it.unitOfMeasure ? ' (' + it.unitOfMeasure + ')' : '');
|
||
return `<div class="lm-item-opt" style="padding:.35rem .75rem;font-size:.875rem;cursor:pointer;"
|
||
data-id="${it.id}"
|
||
data-qty="${it.quantityOnHand}"
|
||
data-uom="${escLm(it.unitOfMeasure || '')}"
|
||
data-label="${escLm(label)}"
|
||
onmousedown="event.preventDefault(); lmComboSelect(this)"
|
||
onmouseenter="this.style.background='#f0f4ff'"
|
||
onmouseleave="this.classList.contains('lm-active') ? null : this.style.background=''">
|
||
${display}
|
||
</div>`;
|
||
}
|
||
|
||
function lmComboRender(query) {
|
||
const dd = document.getElementById('lmItemDropdown');
|
||
if (!dd) return;
|
||
const filtered = query
|
||
? _items.filter(it => it.name.toLowerCase().includes(query) ||
|
||
(it.manufacturer && it.manufacturer.toLowerCase().includes(query)) ||
|
||
(it.unitOfMeasure && it.unitOfMeasure.toLowerCase().includes(query)))
|
||
: _items;
|
||
if (filtered.length === 0) {
|
||
dd.innerHTML = '<div class="px-3 py-2 text-muted small">No items match.</div>';
|
||
return;
|
||
}
|
||
|
||
const jobItems = filtered.filter(it => _jobPowderIds.has(it.id));
|
||
const otherItems = filtered.filter(it => !_jobPowderIds.has(it.id));
|
||
|
||
let html = '';
|
||
if (jobItems.length > 0) {
|
||
html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:#f8f9fa;border-bottom:1px solid #dee2e6;">This Job</div>';
|
||
html += jobItems.map(lmMakeRow).join('');
|
||
if (otherItems.length > 0) {
|
||
html += '<div style="height:1px;background:#dee2e6;margin:.25rem 0;"></div>';
|
||
html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:#f8f9fa;border-bottom:1px solid #dee2e6;">All Inventory</div>';
|
||
}
|
||
}
|
||
html += otherItems.map(lmMakeRow).join('');
|
||
dd.innerHTML = html;
|
||
}
|
||
|
||
function lmComboShow() {
|
||
const dd = document.getElementById('lmItemDropdown');
|
||
const anchor = document.getElementById('lmItemSearch');
|
||
if (!dd || !anchor) return;
|
||
const rect = anchor.closest('.input-group').getBoundingClientRect();
|
||
dd.style.position = 'fixed';
|
||
dd.style.top = (rect.bottom + 2) + 'px';
|
||
dd.style.left = rect.left + 'px';
|
||
dd.style.width = rect.width + 'px';
|
||
dd.style.display = 'block';
|
||
}
|
||
|
||
function lmComboClose() {
|
||
const dd = document.getElementById('lmItemDropdown');
|
||
if (dd) dd.style.display = 'none';
|
||
}
|
||
|
||
window.lmComboSelect = function (el) {
|
||
_selectedItemId = parseInt(el.dataset.id) || 0;
|
||
document.getElementById('lmItemSearch').value = el.dataset.label;
|
||
lmComboClose();
|
||
|
||
const qty = parseFloat(el.dataset.qty) || 0;
|
||
const uom = el.dataset.uom;
|
||
const balDiv = document.getElementById('lmItemBalance');
|
||
balDiv.textContent = 'Current stock: ' + qty.toFixed(2) + (uom ? ' ' + uom : '');
|
||
balDiv.classList.remove('d-none');
|
||
lmOnQtyInput();
|
||
};
|
||
|
||
window.lmComboInput = lmComboInput;
|
||
window.lmComboOpen = lmComboOpen;
|
||
window.lmComboToggle = lmComboToggle;
|
||
|
||
window.lmComboKey = function (event) {
|
||
const dd = document.getElementById('lmItemDropdown');
|
||
if (!dd || dd.style.display === 'none') {
|
||
if (event.key === 'ArrowDown' || event.key === 'Enter') {
|
||
event.preventDefault();
|
||
lmComboOpen();
|
||
}
|
||
return;
|
||
}
|
||
const opts = Array.from(dd.querySelectorAll('.lm-item-opt'));
|
||
let idx = opts.findIndex(o => o.classList.contains('lm-active'));
|
||
if (event.key === 'ArrowDown') {
|
||
event.preventDefault();
|
||
idx = Math.min(idx + 1, opts.length - 1);
|
||
opts.forEach(o => { o.classList.remove('lm-active'); o.style.background = ''; });
|
||
if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = '#e8eeff'; opts[idx].scrollIntoView({ block: 'nearest' }); }
|
||
} else if (event.key === 'ArrowUp') {
|
||
event.preventDefault();
|
||
idx = Math.max(idx - 1, 0);
|
||
opts.forEach(o => { o.classList.remove('lm-active'); o.style.background = ''; });
|
||
if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = '#e8eeff'; opts[idx].scrollIntoView({ block: 'nearest' }); }
|
||
} else if (event.key === 'Enter') {
|
||
event.preventDefault();
|
||
const active = dd.querySelector('.lm-active') || opts[0];
|
||
if (active) active.dispatchEvent(new MouseEvent('mousedown'));
|
||
} else if (event.key === 'Escape') {
|
||
lmComboClose();
|
||
}
|
||
};
|
||
|
||
function escLm(s) {
|
||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||
}
|
||
|
||
// ── Quantity / label logic ────────────────────────────────────────────────
|
||
|
||
function lmOnQtyInput() {
|
||
const method = document.querySelector('input[name="lmEntryMethod"]:checked')?.value;
|
||
if (method !== 'remaining') {
|
||
document.getElementById('lmComputedUsed').classList.add('d-none');
|
||
return;
|
||
}
|
||
if (!_selectedItemId) {
|
||
document.getElementById('lmComputedUsed').classList.add('d-none');
|
||
return;
|
||
}
|
||
const item = _items.find(it => it.id === _selectedItemId);
|
||
const onHand = item ? (parseFloat(item.quantityOnHand) || 0) : 0;
|
||
const remaining = parseFloat(document.getElementById('lmQuantity').value) || 0;
|
||
const used = onHand - remaining;
|
||
const computedDiv = document.getElementById('lmComputedUsed');
|
||
computedDiv.textContent = 'Usage = ' + onHand.toFixed(2) + ' − ' + remaining.toFixed(2) + ' = ' + used.toFixed(2) + (item?.unitOfMeasure ? ' ' + item.unitOfMeasure : '');
|
||
computedDiv.classList.remove('d-none');
|
||
}
|
||
|
||
window.lmUpdateQuantityLabel = function () {
|
||
const method = document.querySelector('input[name="lmEntryMethod"]:checked')?.value;
|
||
document.getElementById('lmQtyLabel').innerHTML =
|
||
(method === 'remaining' ? 'Quantity Remaining' : 'Quantity Used') +
|
||
' <span class="text-danger">*</span>';
|
||
lmOnQtyInput();
|
||
};
|
||
|
||
// ── Modal open / save ─────────────────────────────────────────────────────
|
||
|
||
window.openLogMaterialModal = function () {
|
||
_selectedItemId = 0;
|
||
document.getElementById('lmItemSearch').value = '';
|
||
document.getElementById('lmItemBalance').classList.add('d-none');
|
||
document.getElementById('lmQuantity').value = '';
|
||
document.getElementById('lmComputedUsed').classList.add('d-none');
|
||
document.getElementById('lmTransactionType').value = 'JobUsage';
|
||
document.getElementById('lmNotes').value = '';
|
||
document.getElementById('lmAlert').classList.add('d-none');
|
||
document.getElementById('lmSaveBtn').disabled = false;
|
||
document.getElementById('lmMethodUsed').checked = true;
|
||
window.lmUpdateQuantityLabel();
|
||
lmComboClose();
|
||
if (_modal) _modal.show();
|
||
};
|
||
|
||
window.lmSave = async function () {
|
||
const cfg = window.__logMaterial;
|
||
const alertEl = document.getElementById('lmAlert');
|
||
|
||
function showError(msg) {
|
||
alertEl.className = 'alert alert-danger alert-permanent';
|
||
alertEl.textContent = msg;
|
||
alertEl.classList.remove('d-none');
|
||
}
|
||
|
||
if (!_selectedItemId) { showError('Please select an inventory item.'); return; }
|
||
|
||
const qtyInput = parseFloat(document.getElementById('lmQuantity').value) || 0;
|
||
if (qtyInput <= 0) { showError('Please enter a quantity greater than zero.'); return; }
|
||
|
||
const method = document.querySelector('input[name="lmEntryMethod"]:checked')?.value;
|
||
let quantityUsed = qtyInput;
|
||
if (method === 'remaining') {
|
||
const item = _items.find(it => it.id === _selectedItemId);
|
||
const onHand = item ? (parseFloat(item.quantityOnHand) || 0) : 0;
|
||
quantityUsed = onHand - qtyInput;
|
||
if (quantityUsed <= 0) {
|
||
showError('Remaining quantity cannot be equal to or greater than the current stock (' + onHand.toFixed(2) + ').');
|
||
return;
|
||
}
|
||
}
|
||
|
||
const btn = document.getElementById('lmSaveBtn');
|
||
btn.disabled = true;
|
||
alertEl.classList.add('d-none');
|
||
|
||
try {
|
||
const resp = await fetch(cfg.logUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'RequestVerificationToken': cfg.token
|
||
},
|
||
body: JSON.stringify({
|
||
jobId: cfg.jobId,
|
||
inventoryItemId: _selectedItemId,
|
||
quantityUsed: quantityUsed,
|
||
transactionType: document.getElementById('lmTransactionType').value,
|
||
notes: document.getElementById('lmNotes').value.trim() || null
|
||
})
|
||
});
|
||
const data = await resp.json();
|
||
if (data.success) {
|
||
if (_modal) _modal.hide();
|
||
window.location.reload();
|
||
} else {
|
||
showError(data.message || 'An error occurred.');
|
||
btn.disabled = false;
|
||
}
|
||
} catch {
|
||
showError('Network error. Please try again.');
|
||
btn.disabled = false;
|
||
}
|
||
};
|
||
|
||
// ── Init ──────────────────────────────────────────────────────────────────
|
||
|
||
function init() {
|
||
const cfg = window.__logMaterial;
|
||
if (!cfg) return;
|
||
|
||
_items = cfg.inventoryItems || [];
|
||
_jobPowderIds = new Set(cfg.jobPowderIds || []);
|
||
_modal = new bootstrap.Modal(document.getElementById('logMaterialModal'));
|
||
|
||
document.getElementById('lmQuantity').addEventListener('input', lmOnQtyInput);
|
||
|
||
// Close dropdown when clicking outside
|
||
document.addEventListener('click', function (e) {
|
||
if (!e.target.closest('#lmItemSearch') &&
|
||
!e.target.closest('#lmItemDropdown') &&
|
||
!e.target.closest('#lmItemDropdownToggle')) {
|
||
lmComboClose();
|
||
}
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
})();
|