updated structure in the table view

This commit is contained in:
Quality System Admin
2025-10-26 19:30:12 +02:00
parent 8cbede35d2
commit d142129de6
9 changed files with 760 additions and 185 deletions

View File

@@ -2,6 +2,10 @@
{% block title %}Build Database - Daily Mirror{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='daily_mirror_tune.css') }}">
{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Page Header -->
@@ -205,6 +209,43 @@
</div>
<style>
/* Additional modal fixes specific to this page */
#uploadResultModal {
z-index: 10000 !important;
pointer-events: auto !important;
}
#uploadResultModal .modal-dialog {
pointer-events: auto !important;
z-index: 10001 !important;
}
#uploadResultModal .modal-content {
pointer-events: auto !important;
background-color: white !important;
}
#uploadResultModal .modal-backdrop {
z-index: 9998 !important;
}
#uploadResultModal .btn-close,
#uploadResultModal .modal-footer button {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
/* Ensure modal can be dismissed */
.modal-backdrop.show {
pointer-events: auto !important;
}
/* Dark mode modal fixes */
body.dark-mode #uploadResultModal .modal-content {
background-color: #2d3748 !important;
}
.accordion-button:not(.collapsed) {
background-color: #e7f3ff;
color: #0066cc;

View File

@@ -87,6 +87,11 @@
</h5>
<div class="d-flex align-items-center">
<span id="recordsInfo" class="text-muted me-3"></span>
{% if session.get('role') == 'superadmin' %}
<button class="btn btn-danger btn-sm me-2" onclick="clearAllDelivery()" id="clearAllBtn">
<i class="fas fa-trash-alt"></i> Clear All Delivery
</button>
{% endif %}
<button class="btn btn-success btn-sm" onclick="saveAllChanges()">
<i class="fas fa-save"></i> Save All Changes
</button>
@@ -499,5 +504,46 @@ function saveRecord() {
function saveAllChanges() {
alert('Save All Changes functionality will be implemented for bulk operations.');
}
function clearAllDelivery() {
if (!confirm('⚠️ WARNING: This will permanently delete ALL delivery records from the database!\n\nAre you absolutely sure you want to continue?')) {
return;
}
// Second confirmation for safety
if (!confirm('This action CANNOT be undone! All delivery data will be lost.\n\nClick OK to proceed with deletion.')) {
return;
}
const clearBtn = document.getElementById('clearAllBtn');
const originalText = clearBtn.innerHTML;
clearBtn.disabled = true;
clearBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
fetch('/daily_mirror/clear_delivery', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
// Reload the page to show empty table
loadDeliveryData(1);
} else {
alert('❌ Error: ' + (data.message || 'Failed to clear delivery records'));
}
})
.catch(error => {
console.error('Error:', error);
alert('❌ Error clearing delivery records: ' + error.message);
})
.finally(() => {
clearBtn.disabled = false;
clearBtn.innerHTML = originalText;
});
}
</script>
{% endblock %}

View File

@@ -87,6 +87,11 @@
</h5>
<div class="d-flex align-items-center">
<span id="recordsInfo" class="text-muted me-3"></span>
{% if session.get('role') == 'superadmin' %}
<button class="btn btn-danger btn-sm me-2" onclick="clearAllOrders()" id="clearAllBtn">
<i class="fas fa-trash-alt"></i> Clear All Orders
</button>
{% endif %}
<button class="btn btn-success btn-sm" onclick="saveAllChanges()">
<i class="fas fa-save"></i> Save All Changes
</button>
@@ -518,5 +523,46 @@ function saveRecord() {
function saveAllChanges() {
alert('Save All Changes functionality will be implemented for bulk operations.');
}
function clearAllOrders() {
if (!confirm('⚠️ WARNING: This will permanently delete ALL customer orders from the database!\n\nAre you absolutely sure you want to continue?')) {
return;
}
// Second confirmation for safety
if (!confirm('This action CANNOT be undone! All customer order data will be lost.\n\nClick OK to proceed with deletion.')) {
return;
}
const clearBtn = document.getElementById('clearAllBtn');
const originalText = clearBtn.innerHTML;
clearBtn.disabled = true;
clearBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
fetch('/daily_mirror/clear_orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
// Reload the page to show empty table
loadOrdersData(1);
} else {
alert('❌ Error: ' + (data.message || 'Failed to clear orders'));
}
})
.catch(error => {
console.error('Error:', error);
alert('❌ Error clearing orders: ' + error.message);
})
.finally(() => {
clearBtn.disabled = false;
clearBtn.innerHTML = originalText;
});
}
</script>
{% endblock %}

View File

@@ -4,6 +4,47 @@
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/daily_mirror_tune.css') }}">
<style>
/* Force modal width - using viewport width for maximum responsiveness */
.modal#editModal .modal-dialog {
max-width: 95vw !important;
width: 95vw !important;
margin: 1.75rem auto !important;
}
.modal#editModal .modal-dialog.modal-xl {
max-width: 95vw !important;
width: 95vw !important;
}
/* Override ALL Bootstrap media queries */
@media (min-width: 576px) {
.modal#editModal .modal-dialog {
max-width: 95vw !important;
width: 95vw !important;
}
}
@media (min-width: 992px) {
.modal#editModal .modal-dialog {
max-width: 95vw !important;
width: 95vw !important;
}
}
@media (min-width: 1200px) {
.modal#editModal .modal-dialog,
.modal#editModal .modal-dialog.modal-xl {
max-width: 95vw !important;
width: 95vw !important;
}
}
/* Ensure pointer events work */
.modal#editModal .modal-dialog {
pointer-events: auto !important;
}
</style>
{% endblock %}
{% block content %}
@@ -90,6 +131,11 @@
</h5>
<div class="d-flex align-items-center">
<span id="recordsInfo" class="text-muted me-3"></span>
{% if session.get('role') == 'superadmin' %}
<button class="btn btn-danger btn-sm me-2" onclick="clearAllProductionOrders()" id="clearAllBtn">
<i class="fas fa-trash-alt"></i> Clear All Orders
</button>
{% endif %}
<button class="btn btn-success btn-sm" onclick="saveAllChanges()">
<i class="fas fa-save"></i> Save All Changes
</button>
@@ -101,8 +147,9 @@
<thead class="table-dark">
<tr>
<th>Production Order</th>
<th>Opened for Order</th>
<th>Client Order-Line</th>
<th>Customer</th>
<th>Client Order</th>
<th>Article Code</th>
<th>Description</th>
<th>Quantity</th>
@@ -147,7 +194,7 @@
<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-dialog modal-xl modal-dialog-scrollable" style="max-width: 95vw !important; width: 95vw !important;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Production Order</h5>
@@ -157,71 +204,94 @@
<form id="editForm">
<input type="hidden" id="editRecordId">
<!-- Production Order (Full Width) -->
<div class="row mb-3">
<div class="col-12">
<label for="editProductionOrder" class="form-label fw-bold">Production Order</label>
<input type="text" class="form-control form-control-lg" id="editProductionOrder" readonly>
</div>
</div>
<hr class="my-3">
<!-- Three Column Layout -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="editProductionOrder" class="form-label">Production Order</label>
<input type="text" class="form-control" id="editProductionOrder" readonly>
<!-- Column 1 -->
<div class="col-md-4">
<div class="mb-3">
<label for="editOpenForOrderLine" class="form-label">Opened for Order-Line</label>
<input type="text" class="form-control" id="editOpenForOrderLine" readonly>
</div>
<div class="mb-3">
<label for="editCustomerCode" class="form-label">Customer Code</label>
<input type="text" class="form-control" id="editCustomerCode">
</div>
<div class="mb-3">
<label for="editArticleCode" class="form-label">Article Code</label>
<input type="text" class="form-control" id="editArticleCode" readonly>
</div>
<div class="mb-3">
<label for="editDeliveryDate" class="form-label">Delivery Date</label>
<input type="date" class="form-control" id="editDeliveryDate">
</div>
</div>
<div class="col-md-6 mb-3">
<label for="editCustomerCode" class="form-label">Customer Code</label>
<input type="text" class="form-control" id="editCustomerCode">
<!-- Column 2 -->
<div class="col-md-4">
<div class="mb-3">
<label for="editClientOrderLine" class="form-label">Client Order-Line</label>
<input type="text" class="form-control" id="editClientOrderLine" readonly>
</div>
<div class="mb-3">
<label for="editCustomerName" class="form-label">Customer Name</label>
<input type="text" class="form-control" id="editCustomerName">
</div>
<div class="mb-3">
<label for="editQuantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="editQuantity">
</div>
<div class="mb-3">
<label for="editStatus" class="form-label">Production Status</label>
<select class="form-control" id="editStatus">
<option value="PENDING">Pending</option>
<option value="IN_PROGRESS">In Progress</option>
<option value="FINISHED">Finished</option>
<option value="CANCELLED">Cancelled</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="editCustomerName" class="form-label">Customer Name</label>
<input type="text" class="form-control" id="editCustomerName">
<!-- Column 3 -->
<div class="col-md-4">
<div class="mb-3">
<label for="editMachine" class="form-label">Machine Code</label>
<input type="text" class="form-control" id="editMachine">
</div>
<div class="mb-3">
<label for="editDescription" class="form-label">Article Description</label>
<textarea class="form-control" id="editDescription" rows="6"></textarea>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="editClientOrder" class="form-label">Client Order</label>
<input type="text" class="form-control" id="editClientOrder">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="editArticleCode" class="form-label">Article Code</label>
<input type="text" class="form-control" id="editArticleCode">
</div>
<div class="col-md-6 mb-3">
<label for="editQuantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="editQuantity">
</div>
</div>
<div class="mb-3">
<label for="editDescription" class="form-label">Article Description</label>
<textarea class="form-control" id="editDescription" rows="2"></textarea>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="editDeliveryDate" class="form-label">Delivery Date</label>
<input type="date" class="form-control" id="editDeliveryDate">
</div>
<div class="col-md-6 mb-3">
<label for="editStatus" class="form-label">Production Status</label>
<select class="form-control" id="editStatus">
<option value="PENDING">Pending</option>
<option value="IN_PROGRESS">In Progress</option>
<option value="FINISHED">Finished</option>
<option value="CANCELLED">Cancelled</option>
</select>
</div>
</div>
<div class="mb-3">
<label for="editMachine" class="form-label">Machine Code</label>
<input type="text" class="form-control" id="editMachine">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="saveRecord()">
<i class="fas fa-save"></i> Save Changes
<div class="modal-footer d-flex justify-content-between">
<button type="button" class="btn btn-danger" onclick="deleteRecord()" style="min-width: 150px;">
<i class="fas fa-trash"></i> Delete Record
</button>
<div>
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal" style="min-width: 100px;">Cancel</button>
<button type="button" class="btn btn-primary" onclick="saveRecord()" style="min-width: 150px;">
<i class="fas fa-save"></i> Save Changes
</button>
</div>
</div>
</div>
</div>
@@ -300,8 +370,9 @@ function renderTable(data) {
tbody.innerHTML = data.records.map((record, index) => `
<tr id="row-${record.id}">
<td><strong>${record.production_order}</strong></td>
<td>${record.open_for_order_line || ''}</td>
<td>${record.client_order_line || ''}</td>
<td>${record.customer_code}<br><small class="text-muted">${record.customer_name || ''}</small></td>
<td>${record.client_order || ''}</td>
<td>${record.article_code || ''}</td>
<td><small>${record.article_description || ''}</small></td>
<td>${record.quantity_requested || ''}</td>
@@ -371,9 +442,10 @@ function editRecord(recordId) {
// Populate the edit form
document.getElementById('editRecordId').value = record.id;
document.getElementById('editProductionOrder').value = record.production_order;
document.getElementById('editOpenForOrderLine').value = record.open_for_order_line || '';
document.getElementById('editClientOrderLine').value = record.client_order_line || '';
document.getElementById('editCustomerCode').value = record.customer_code || '';
document.getElementById('editCustomerName').value = record.customer_name || '';
document.getElementById('editClientOrder').value = record.client_order || '';
document.getElementById('editArticleCode').value = record.article_code || '';
document.getElementById('editDescription').value = record.article_description || '';
document.getElementById('editQuantity').value = record.quantity_requested || '';
@@ -382,8 +454,8 @@ function editRecord(recordId) {
document.getElementById('editMachine').value = record.machine_code || '';
// Explicitly enable all editable fields
const editableFields = ['editCustomerCode', 'editCustomerName', 'editClientOrder',
'editArticleCode', 'editDescription', 'editQuantity',
const editableFields = ['editCustomerCode',
'editCustomerName', 'editDescription', 'editQuantity',
'editDeliveryDate', 'editStatus', 'editMachine'];
editableFields.forEach(fieldId => {
const field = document.getElementById(fieldId);
@@ -403,6 +475,7 @@ function editRecord(recordId) {
// Show the modal with proper configuration
const modalElement = document.getElementById('editModal');
const modalDialog = modalElement.querySelector('.modal-dialog');
// Remove any existing modal instances to prevent conflicts
const existingModal = bootstrap.Modal.getInstance(modalElement);
@@ -416,8 +489,27 @@ function editRecord(recordId) {
focus: true
});
// Show the modal first
modal.show();
// Force the modal dialog width AFTER modal is shown - using 95% of viewport width
setTimeout(() => {
if (modalDialog) {
console.log('Applying width after modal shown');
modalDialog.style.setProperty('max-width', '95vw', 'important');
modalDialog.style.setProperty('width', '95vw', 'important');
modalDialog.style.setProperty('margin', '1.75rem auto', 'important');
// Also apply to modal content for good measure
const modalContent = modalDialog.querySelector('.modal-content');
if (modalContent) {
modalContent.style.setProperty('width', '100%', 'important');
}
console.log('Modal dialog computed width:', window.getComputedStyle(modalDialog).width);
}
}, 100);
// Ensure form inputs are focusable and interactive after modal is shown
modalElement.addEventListener('shown.bs.modal', function () {
// Re-enable all fields after modal animation completes
@@ -445,9 +537,10 @@ function saveRecord() {
const recordId = document.getElementById('editRecordId').value;
const formData = {
open_for_order_line: document.getElementById('editOpenForOrderLine').value,
client_order_line: document.getElementById('editClientOrderLine').value,
customer_code: document.getElementById('editCustomerCode').value,
customer_name: document.getElementById('editCustomerName').value,
client_order: document.getElementById('editClientOrder').value,
article_code: document.getElementById('editArticleCode').value,
article_description: document.getElementById('editDescription').value,
quantity_requested: parseInt(document.getElementById('editQuantity').value) || 0,
@@ -482,6 +575,39 @@ function saveRecord() {
});
}
function deleteRecord() {
const recordId = document.getElementById('editRecordId').value;
const productionOrder = document.getElementById('editProductionOrder').value;
if (!confirm(`⚠️ Are you sure you want to delete production order "${productionOrder}"?\n\nThis action cannot be undone.`)) {
return;
}
fetch(`/daily_mirror/api/tune/production_data/${recordId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.error) {
throw new Error(data.error);
}
// Close modal and reload data
const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
modal.hide();
alert('Record deleted successfully!');
loadProductionData(currentPage);
})
.catch(error => {
console.error('Error deleting record:', error);
alert('Error deleting record: ' + error.message);
});
}
function clearFilters() {
document.getElementById('searchInput').value = '';
document.getElementById('statusFilter').value = '';
@@ -493,6 +619,47 @@ function saveAllChanges() {
alert('Bulk save functionality will be implemented in a future update!');
}
function clearAllProductionOrders() {
if (!confirm('⚠️ WARNING: This will permanently delete ALL production orders from the database!\n\nAre you absolutely sure you want to continue?')) {
return;
}
// Second confirmation for safety
if (!confirm('This action CANNOT be undone! All production order data will be lost.\n\nClick OK to proceed with deletion.')) {
return;
}
const clearBtn = document.getElementById('clearAllBtn');
const originalText = clearBtn.innerHTML;
clearBtn.disabled = true;
clearBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
fetch('/daily_mirror/clear_production_orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
// Reload the page to show empty table
loadProductionData(1);
} else {
alert('❌ Error: ' + (data.message || 'Failed to clear production orders'));
}
})
.catch(error => {
console.error('Error:', error);
alert('❌ Error clearing production orders: ' + error.message);
})
.finally(() => {
clearBtn.disabled = false;
clearBtn.innerHTML = originalText;
});
}
// Add event listeners for real-time filtering
document.getElementById('searchInput').addEventListener('input', function() {
clearTimeout(this.searchTimeout);