Add new pack size modal

This commit is contained in:
2026-04-15 06:39:54 -04:00
parent d4753c0754
commit 2aeba2f563
2 changed files with 151 additions and 0 deletions
+115
View File
@@ -251,6 +251,7 @@ function setupEventListeners() {
const cancelReceiveDeliveryBtn = document.getElementById('cancelReceiveDeliveryBtn');
const addDeliveryLineBtn = document.getElementById('addDeliveryLineBtn');
const addVariantFromDeliveryBtn = document.getElementById('addVariantFromDeliveryBtn');
const addPackSizeFromDeliveryBtn = document.getElementById('addPackSizeFromDeliveryBtn');
const addVariantPackRowBtn = document.getElementById('addVariantPackRowBtn');
const addEditVariantPackRowBtn = document.getElementById('addEditVariantPackRowBtn');
const variantUnitSelect = document.getElementById('variantUnit');
@@ -289,6 +290,23 @@ function setupEventListeners() {
if (cancelReceiveDeliveryBtn) cancelReceiveDeliveryBtn.addEventListener('click', () => closeModal(receiveDeliveryModal));
if (addDeliveryLineBtn) addDeliveryLineBtn.addEventListener('click', () => appendDeliveryLine());
if (addVariantFromDeliveryBtn) addVariantFromDeliveryBtn.addEventListener('click', handleAddVariantFromDelivery);
if (addPackSizeFromDeliveryBtn) addPackSizeFromDeliveryBtn.addEventListener('click', openAddPackSizeFromDeliveryModal);
const addPackSizeForm = document.getElementById('addPackSizeForm');
const cancelAddPackSizeBtn = document.getElementById('cancelAddPackSizeBtn');
const addPackSizeModal = document.getElementById('addPackSizeModal');
if (addPackSizeForm) addPackSizeForm.addEventListener('submit', handleAddPackSize);
if (cancelAddPackSizeBtn) cancelAddPackSizeBtn.addEventListener('click', () => closeModal(addPackSizeModal));
const addPackSizeVariantSelect = document.getElementById('addPackSizeVariantSelect');
if (addPackSizeVariantSelect) {
addPackSizeVariantSelect.addEventListener('change', () => {
const variantId = parseInt(addPackSizeVariantSelect.value || '', 10);
const variant = getVariantById(variantId);
const hint = document.getElementById('addPackSizeHint');
if (hint) hint.textContent = variant ? `Base unit: ${variant.unit}` : '';
});
}
if (addVariantPackRowBtn) addVariantPackRowBtn.addEventListener('click', () => appendVariantPackRow());
if (addEditVariantPackRowBtn) addEditVariantPackRowBtn.addEventListener('click', () => appendEditVariantPackRow());
if (variantUnitSelect) {
@@ -3166,6 +3184,103 @@ function handleAddVariantFromDelivery() {
openAddVariantModal(deliveryDrugId);
}
function openAddPackSizeFromDeliveryModal() {
if (!deliveryDrugId) {
showToast('Select a drug first', 'warning');
return;
}
const drug = getActiveDeliveryDrug();
if (!drug) {
showToast('Drug not found', 'error');
return;
}
const form = document.getElementById('addPackSizeForm');
if (form) form.reset();
const label = document.getElementById('addPackSizeDrugLabel');
if (label) label.textContent = `Drug: ${drug.name}`;
// Try to pre-select variant from first delivery line that has one chosen
const deliveryContainer = document.getElementById('deliveryLinesContainer');
const selectedDeliveryVariantId = deliveryContainer
? (Array.from(deliveryContainer.querySelectorAll('.delivery-variant-select'))
.map(s => s.value)
.find(v => v)) || ''
: '';
const variantSelect = document.getElementById('addPackSizeVariantSelect');
if (variantSelect) {
variantSelect.innerHTML = [
'<option value="">-- Select variant --</option>',
...drug.variants.map(v =>
`<option value="${v.id}">${escapeHtml(v.strength)} (${escapeHtml(v.unit)})</option>`
)
].join('');
if (selectedDeliveryVariantId) {
variantSelect.value = selectedDeliveryVariantId;
} else if (drug.variants.length === 1) {
variantSelect.value = String(drug.variants[0].id);
}
}
// Update the hint for the pre-selected variant
const selectedId = parseInt(variantSelect?.value || '', 10);
const selectedVariant = getVariantById(selectedId);
const hint = document.getElementById('addPackSizeHint');
if (hint) hint.textContent = selectedVariant ? `Base unit: ${selectedVariant.unit}` : '';
// Reset pack type default to box
const packTypeSelect = document.getElementById('addPackSizeType');
if (packTypeSelect) packTypeSelect.value = 'box';
openModal(document.getElementById('addPackSizeModal'));
}
async function handleAddPackSize(e) {
e.preventDefault();
const variantId = parseInt(document.getElementById('addPackSizeVariantSelect')?.value || '', 10);
const packType = (document.getElementById('addPackSizeType')?.value || 'box').trim();
const packSize = parseFloat(document.getElementById('addPackSizeCount')?.value || '');
const packLabel = `${packType.charAt(0).toUpperCase() + packType.slice(1)} of ${packSize}`;
if (!variantId) {
showToast('Please select a variant', 'warning');
return;
}
if (!packSize || packSize <= 0) {
showToast('Please enter a valid pack size greater than zero', 'warning');
return;
}
try {
const response = await apiCall(`/variants/${variantId}/packs`, {
method: 'POST',
body: JSON.stringify({
label: packLabel,
pack_unit_name: packType,
pack_size_in_base_units: packSize,
is_active: true
})
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Failed to add pack size');
}
closeModal(document.getElementById('addPackSizeModal'));
await loadDrugs();
// Refresh delivery line pack selects so the new pack is immediately available
refreshDeliveryVariantSelects();
showToast('Pack size added successfully!', 'success');
} catch (error) {
console.error('Error adding pack size:', error);
showToast('Failed to add pack size: ' + error.message, 'error');
}
}
async function handleReceiveDelivery(e) {
e.preventDefault();
+36
View File
@@ -576,6 +576,41 @@
</div>
</div>
<!-- Add Pack Size Modal -->
<div id="addPackSizeModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Add Pack Size</h2>
<p id="addPackSizeDrugLabel" style="margin: 4px 0 14px; color: #666; font-weight: 600;"></p>
<form id="addPackSizeForm" novalidate>
<div class="form-group">
<label for="addPackSizeVariantSelect">Variant *</label>
<select id="addPackSizeVariantSelect" required>
<option value="">-- Select variant --</option>
</select>
</div>
<div class="form-group">
<label for="addPackSizeType">Pack Type *</label>
<select id="addPackSizeType" required>
<option value="box" selected>Box</option>
<option value="bottle">Bottle</option>
<option value="vial">Vial</option>
<option value="packet">Packet</option>
</select>
</div>
<div class="form-group">
<label for="addPackSizeCount">Pack Size (units) *</label>
<input type="number" id="addPackSizeCount" min="0.0001" step="0.0001" placeholder="e.g., 28" required>
<small id="addPackSizeHint" style="display: block; margin-top: 4px; color: #666;"></small>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Pack Size</button>
<button type="button" class="btn btn-secondary" id="cancelAddPackSizeBtn">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Receive Delivery Modal -->
<div id="receiveDeliveryModal" class="modal">
<div class="modal-content modal-large receive-delivery-modal-content">
@@ -587,6 +622,7 @@
<div class="delivery-toolbar">
<button type="button" id="addDeliveryLineBtn" class="btn btn-secondary">+ Add Delivery Line</button>
<button type="button" id="addVariantFromDeliveryBtn" class="btn btn-info">+ Add Variant</button>
<button type="button" id="addPackSizeFromDeliveryBtn" class="btn btn-info">+ Add Pack Size</button>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Receive Delivery</button>