inventory management add/del
This commit is contained in:
@@ -55,17 +55,25 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-auto">
|
||||
{% if media_type == 'book' and item.openlibrary_url %}
|
||||
<a href="{{ item.openlibrary_url }}" target="_blank"
|
||||
class="btn btn-primary btn-sm">
|
||||
📚 View on OpenLibrary
|
||||
</a>
|
||||
{% elif media_type != 'book' and item.discogs_url %}
|
||||
<a href="{{ item.discogs_url }}" target="_blank"
|
||||
class="btn btn-primary btn-sm">
|
||||
🎵 View on Discogs
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
{% if media_type == 'book' and item.openlibrary_url %}
|
||||
<a href="{{ item.openlibrary_url }}" target="_blank"
|
||||
class="btn btn-outline-primary btn-sm">
|
||||
📚 View on OpenLibrary
|
||||
</a>
|
||||
{% elif media_type != 'book' and item.discogs_url %}
|
||||
<a href="{{ item.discogs_url }}" target="_blank"
|
||||
class="btn btn-outline-primary btn-sm">
|
||||
🎵 View on Discogs
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<button class="btn btn-success btn-sm"
|
||||
onclick="addToInventory({{ loop.index0 }})"
|
||||
data-item="{{ item | tojson | e }}">
|
||||
📦 Add to Inventory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,4 +89,203 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add to Inventory Modal -->
|
||||
<div class="modal fade" id="addToInventoryModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">📦 Add to Inventory</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="inventoryItemDetails" class="mb-3">
|
||||
<!-- Item details will be populated here -->
|
||||
</div>
|
||||
|
||||
<form id="addToInventoryForm">
|
||||
<div class="mb-3">
|
||||
<label for="storageLocation" class="form-label">Storage Location *</label>
|
||||
<select class="form-select" id="storageLocation" name="storage_location_id" required>
|
||||
<option value="">Loading locations...</option>
|
||||
</select>
|
||||
<div class="form-text">
|
||||
<a href="/inventory" target="_blank">Manage storage locations</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="quantity" class="form-label">Quantity</label>
|
||||
<input type="number" class="form-control" id="quantity" name="quantity"
|
||||
value="1" min="1" step="1">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="notes" class="form-label">Notes</label>
|
||||
<textarea class="form-control" id="notes" name="notes" rows="2"
|
||||
placeholder="Optional notes about this item"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="inventoryError" class="alert alert-danger d-none"></div>
|
||||
<div id="inventorySuccess" class="alert alert-success d-none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" onclick="submitToInventory()" id="submitInventoryBtn">
|
||||
📦 Add to Inventory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentMediaItem = null;
|
||||
let storageLocations = [];
|
||||
|
||||
// Load storage locations when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadStorageLocations();
|
||||
});
|
||||
|
||||
async function loadStorageLocations() {
|
||||
try {
|
||||
const response = await fetch('/api/storage-locations');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
console.error('Error loading storage locations:', data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
storageLocations = data;
|
||||
updateLocationDropdown();
|
||||
} catch (error) {
|
||||
console.error('Error loading storage locations:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocationDropdown() {
|
||||
const select = document.getElementById('storageLocation');
|
||||
select.innerHTML = '';
|
||||
|
||||
if (storageLocations.length === 0) {
|
||||
select.innerHTML = '<option value="">No storage locations found</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
select.innerHTML = '<option value="">Select a storage location...</option>';
|
||||
storageLocations.forEach(location => {
|
||||
const option = document.createElement('option');
|
||||
option.value = location.pk;
|
||||
option.textContent = location.pathstring || location.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function addToInventory(itemIndex) {
|
||||
// Get the item data from the button's data attribute
|
||||
const buttons = document.querySelectorAll('[data-item]');
|
||||
const button = buttons[itemIndex];
|
||||
const itemData = JSON.parse(button.getAttribute('data-item'));
|
||||
|
||||
currentMediaItem = itemData;
|
||||
|
||||
// Populate item details
|
||||
const detailsDiv = document.getElementById('inventoryItemDetails');
|
||||
detailsDiv.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">${itemData.title}</h6>
|
||||
<p class="card-text small">
|
||||
${itemData.artist ? `<strong>Artist:</strong> ${itemData.artist}<br>` : ''}
|
||||
${itemData.author ? `<strong>Author:</strong> ${itemData.author}<br>` : ''}
|
||||
${itemData.year ? `<strong>Year:</strong> ${itemData.year}<br>` : ''}
|
||||
${itemData.format ? `<strong>Format:</strong> ${itemData.format}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Clear previous messages
|
||||
document.getElementById('inventoryError').classList.add('d-none');
|
||||
document.getElementById('inventorySuccess').classList.add('d-none');
|
||||
|
||||
// Reset form
|
||||
document.getElementById('addToInventoryForm').reset();
|
||||
document.getElementById('quantity').value = '1';
|
||||
|
||||
// Show modal
|
||||
const modal = new bootstrap.Modal(document.getElementById('addToInventoryModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
async function submitToInventory() {
|
||||
const form = document.getElementById('addToInventoryForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const submitData = {
|
||||
media_item: currentMediaItem,
|
||||
storage_location_id: parseInt(formData.get('storage_location_id')),
|
||||
quantity: parseFloat(formData.get('quantity')),
|
||||
notes: formData.get('notes') || null
|
||||
};
|
||||
|
||||
// Validate required fields
|
||||
if (!submitData.storage_location_id) {
|
||||
showError('Please select a storage location');
|
||||
return;
|
||||
}
|
||||
|
||||
// Disable submit button
|
||||
const submitBtn = document.getElementById('submitInventoryBtn');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Adding...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/create-inventory-item', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(submitData)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
showSuccess(result.message);
|
||||
// Close modal after 2 seconds
|
||||
setTimeout(() => {
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('addToInventoryModal'));
|
||||
modal.hide();
|
||||
}, 2000);
|
||||
} else {
|
||||
showError(result.message || result.error || 'Failed to add item to inventory');
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Error adding item to inventory: ' + error.message);
|
||||
} finally {
|
||||
// Re-enable submit button
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const errorDiv = document.getElementById('inventoryError');
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.classList.remove('d-none');
|
||||
document.getElementById('inventorySuccess').classList.add('d-none');
|
||||
}
|
||||
|
||||
function showSuccess(message) {
|
||||
const successDiv = document.getElementById('inventorySuccess');
|
||||
successDiv.textContent = message;
|
||||
successDiv.classList.remove('d-none');
|
||||
document.getElementById('inventoryError').classList.add('d-none');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user