Compare commits
2
Commits
69a9370104
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 oliver
|
80a52ed790 | ||
|
oliver
|
b299bf3627 |
@@ -7,7 +7,8 @@ let allData = [];
|
||||
let filteredData = [];
|
||||
let currentSort = { column: null, direction: null };
|
||||
let filters = {};
|
||||
let globalSearch = '';
|
||||
let columnTextFilters = {};
|
||||
let hideOkFilter = false;
|
||||
let apiCredentials = null;
|
||||
|
||||
// API Configuration
|
||||
@@ -140,14 +141,21 @@ async function loadData() {
|
||||
// ===================================
|
||||
|
||||
function applyFilters() {
|
||||
let result = filteredData.filter(item => {
|
||||
if (!globalSearch) return true;
|
||||
const searchLower = globalSearch.toLowerCase();
|
||||
return Object.values(item).some(value =>
|
||||
value !== null && value.toString().toLowerCase().includes(searchLower)
|
||||
);
|
||||
let result = [...filteredData];
|
||||
|
||||
// Apply column text filters
|
||||
Object.entries(columnTextFilters).forEach(([column, searchText]) => {
|
||||
if (searchText && searchText.trim()) {
|
||||
const searchLower = searchText.toLowerCase().trim();
|
||||
result = result.filter(item => {
|
||||
const value = item[column];
|
||||
return value !== null && value !== undefined &&
|
||||
String(value).toLowerCase().includes(searchLower);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Apply checkbox filters
|
||||
Object.entries(filters).forEach(([column, selectedValues]) => {
|
||||
if (selectedValues.length > 0) {
|
||||
result = result.filter(item =>
|
||||
@@ -156,12 +164,25 @@ function applyFilters() {
|
||||
}
|
||||
});
|
||||
|
||||
// Apply "hide OK" filter
|
||||
if (hideOkFilter) {
|
||||
result = result.filter(item => {
|
||||
const remark = item.Remark || '';
|
||||
return !String(remark).trim().toLowerCase().includes('ok');
|
||||
});
|
||||
}
|
||||
|
||||
renderTable(result);
|
||||
updateStats(result.length);
|
||||
|
||||
console.group('%c Table View', 'background: #06b6d4; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
|
||||
console.log('%c Rendering', 'font-weight: bold;', result.length, 'records');
|
||||
console.log('%c View range:', 'color: #64748b;', '1-', result.length);
|
||||
console.log('%c Active text filters:', Object.entries(columnTextFilters)
|
||||
.filter(([_, v]) => v && v.trim())
|
||||
.map(([k, v]) => `${k}: "${v}"`), 'color: #64748b;');
|
||||
if (hideOkFilter) {
|
||||
console.log('%c Filter:', 'color: #10b981;', 'Hide OK remarks is ON');
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
@@ -292,9 +313,9 @@ function getRemarkIcon(remark) {
|
||||
// Recheck Action
|
||||
// ===================================
|
||||
|
||||
async function handleRecheck(orderId, isChecked) {
|
||||
async function handleRecheck(id, isChecked) {
|
||||
console.group('%c Recheck', 'background: #6366f1; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
|
||||
console.log('%c Order ID:', 'font-weight: bold;', orderId);
|
||||
console.log('%c ID:', 'font-weight: bold;', id);
|
||||
console.log('%c Status:', isChecked ? 'color: #10b981' : 'color: #94a3b8', isChecked ? 'Checked' : 'Unchecked');
|
||||
|
||||
try {
|
||||
@@ -307,7 +328,7 @@ async function handleRecheck(orderId, isChecked) {
|
||||
} : {})
|
||||
},
|
||||
body: JSON.stringify({
|
||||
Order_ID: orderId,
|
||||
ID: id,
|
||||
recheck: isChecked
|
||||
})
|
||||
});
|
||||
@@ -461,11 +482,63 @@ function setupClickOutside() {
|
||||
});
|
||||
}
|
||||
|
||||
function handleGlobalSearch(search) {
|
||||
globalSearch = search;
|
||||
function handleColumnFilter(input) {
|
||||
const column = input.dataset.column;
|
||||
const value = input.value;
|
||||
|
||||
if (value) {
|
||||
columnTextFilters[column] = value;
|
||||
input.parentElement.classList.add('filter-active');
|
||||
} else {
|
||||
delete columnTextFilters[column];
|
||||
input.parentElement.classList.remove('filter-active');
|
||||
}
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function clearAllFilters() {
|
||||
// Clear column text filters
|
||||
columnTextFilters = {};
|
||||
|
||||
// Clear checkbox filters
|
||||
filters = {};
|
||||
|
||||
// Reset hide OK filter
|
||||
hideOkFilter = false;
|
||||
updateHideOkButton();
|
||||
|
||||
// Clear all input fields
|
||||
document.querySelectorAll('.column-filter').forEach(input => {
|
||||
input.value = '';
|
||||
input.parentElement.classList.remove('filter-active');
|
||||
});
|
||||
|
||||
// Reset filter indicators
|
||||
document.querySelectorAll('.filter-indicator').forEach(indicator => {
|
||||
indicator.classList.remove('active');
|
||||
});
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function toggleHideOkFilter() {
|
||||
hideOkFilter = !hideOkFilter;
|
||||
updateHideOkButton();
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function updateHideOkButton() {
|
||||
const btn = document.getElementById('hideOkBtn');
|
||||
if (!btn) return;
|
||||
|
||||
if (hideOkFilter) {
|
||||
btn.style.boxShadow = '0 0 0 2px var(--danger)';
|
||||
} else {
|
||||
btn.style.boxShadow = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// ===================================
|
||||
// Statistics
|
||||
// ===================================
|
||||
@@ -519,7 +592,7 @@ function showCredentialPrompt() {
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-secondary" onclick="closeCredentialPrompt()">Cancel</button>
|
||||
<button type="button" class="btn-secondary" id="cancelAuthBtn">Cancel</button>
|
||||
<button type="submit" class="btn-primary">Connect</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -533,12 +606,22 @@ function showCredentialPrompt() {
|
||||
`;
|
||||
document.body.appendChild(prompt);
|
||||
|
||||
document.getElementById('credentialForm').addEventListener('submit', handleCredentials);
|
||||
document.querySelector('.credential-overlay').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeCredentialPrompt();
|
||||
}
|
||||
});
|
||||
const form = document.getElementById('credentialForm');
|
||||
form.addEventListener('submit', handleCredentials);
|
||||
|
||||
const cancelBtn = document.getElementById('cancelAuthBtn');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', closeCredentialPrompt);
|
||||
}
|
||||
|
||||
const overlay = document.querySelector('#credentialPrompt .credential-overlay');
|
||||
if (overlay) {
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) {
|
||||
closeCredentialPrompt();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function closeCredentialPrompt() {
|
||||
|
||||
+108
-53
@@ -39,10 +39,12 @@
|
||||
<button class="refresh-btn" id="authBtn" onclick="toggleAuth()" style="background: var(--secondary);">
|
||||
<i class="fas fa-key"></i> <span id="authBtnText">Enter Credentials</span>
|
||||
</button>
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="globalSearch" placeholder="Search orders, countries, VAT numbers..." oninput="handleGlobalSearch(this.value)">
|
||||
</div>
|
||||
<button class="refresh-btn" id="hideOkBtn" onclick="toggleHideOkFilter()" style="background: var(--success);">
|
||||
<i class="fas fa-check-circle"></i> <span>Hide OK Remarks</span>
|
||||
</button>
|
||||
<button class="refresh-btn" onclick="clearAllFilters()" style="background: var(--warning);">
|
||||
<i class="fas fa-filter"></i> <span>Clear Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -58,73 +60,126 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Month
|
||||
<div class="filter-indicator" onclick="toggleFilter('Month')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Month')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Month</div>
|
||||
<div class="th-controls">
|
||||
<input type="text"
|
||||
class="column-filter"
|
||||
placeholder="Filter Month"
|
||||
data-column="Month"
|
||||
oninput="handleColumnFilter(this)">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('Month')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Month')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
Odoo AR Nr
|
||||
<div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Odoo AR Nr</div>
|
||||
<div class="th-controls">
|
||||
<input type="text"
|
||||
class="column-filter"
|
||||
placeholder="Filter Odoo AR Nr"
|
||||
data-column="Odoo_AR_Nr"
|
||||
oninput="handleColumnFilter(this)">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
Order ID
|
||||
<div class="filter-indicator" onclick="toggleFilter('Order_ID')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Order_ID')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Order ID</div>
|
||||
<div class="th-controls">
|
||||
<input type="text"
|
||||
class="column-filter"
|
||||
placeholder="Filter Order ID"
|
||||
data-column="Order_ID"
|
||||
oninput="handleColumnFilter(this)">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('Order_ID')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Order_ID')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
Country
|
||||
<div class="filter-indicator" onclick="toggleFilter('Country_Name')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Country_Name')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Country</div>
|
||||
<div class="th-controls">
|
||||
<input type="text"
|
||||
class="column-filter"
|
||||
placeholder="Filter Country"
|
||||
data-column="Country_Name"
|
||||
oninput="handleColumnFilter(this)">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('Country_Name')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Country_Name')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
VAT
|
||||
<div class="filter-indicator" onclick="toggleFilter('VAT')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('VAT')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">VAT</div>
|
||||
<div class="th-controls">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('VAT')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('VAT')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
Remark
|
||||
<div class="filter-indicator" onclick="toggleFilter('Remark')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Remark')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Remark</div>
|
||||
<div class="th-controls">
|
||||
<input type="text"
|
||||
class="column-filter"
|
||||
placeholder="Filter Remark"
|
||||
data-column="Remark"
|
||||
oninput="handleColumnFilter(this)">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('Remark')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('Remark')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
Recheck
|
||||
<div class="filter-indicator" onclick="toggleFilter('recheck')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('recheck')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<div class="th-label">Recheck</div>
|
||||
<div class="th-controls">
|
||||
<div class="th-actions">
|
||||
<div class="filter-indicator" onclick="toggleFilter('recheck')">
|
||||
<i class="fas fa-filter"></i>
|
||||
</div>
|
||||
<div class="sort-indicator" onclick="sortTable('recheck')">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@@ -211,8 +211,7 @@ thead {
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark);
|
||||
border-bottom: 2px solid var(--border);
|
||||
@@ -220,10 +219,62 @@ th {
|
||||
top: 0;
|
||||
background: var(--light);
|
||||
z-index: 10;
|
||||
min-width: 130px;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
th:hover {
|
||||
background: var(--hover);
|
||||
th .th-controls {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
th .th-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--dark);
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 0.35rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-filter {
|
||||
width: 90px;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.column-filter:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.column-filter::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
th.filter-active .column-filter {
|
||||
border-color: var(--primary);
|
||||
background-color: rgba(99, 102, 241, 0.05);
|
||||
}
|
||||
|
||||
.th-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
th .sort-indicator {
|
||||
|
||||
Reference in New Issue
Block a user