Oliver/tmp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oliver
2026-09-03 14:42:37 -03:00
parent b299bf3627
commit 80a52ed790
3 changed files with 151 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+17 -7
View File
@@ -592,7 +592,7 @@ function showCredentialPrompt() {
</div> </div>
</div> </div>
<div class="form-actions"> <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> <button type="submit" class="btn-primary">Connect</button>
</div> </div>
</form> </form>
@@ -606,12 +606,22 @@ function showCredentialPrompt() {
`; `;
document.body.appendChild(prompt); document.body.appendChild(prompt);
document.getElementById('credentialForm').addEventListener('submit', handleCredentials); const form = document.getElementById('credentialForm');
document.querySelector('.credential-overlay').addEventListener('click', function(e) { form.addEventListener('submit', handleCredentials);
if (e.target === this) {
closeCredentialPrompt(); 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() { function closeCredentialPrompt() {
index.html
+102 -74
View File
@@ -60,98 +60,126 @@
<thead> <thead>
<tr> <tr>
<th> <th>
Month <div class="th-label">Month</div>
<input type="text" <div class="th-controls">
class="column-filter" <input type="text"
placeholder="Filter Month" class="column-filter"
data-column="Month" placeholder="Filter Month"
oninput="handleColumnFilter(this)"> data-column="Month"
<div class="filter-indicator" onclick="toggleFilter('Month')"> oninput="handleColumnFilter(this)">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('Month')">
<div class="sort-indicator" onclick="sortTable('Month')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <div class="sort-indicator" onclick="sortTable('Month')">
<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div> </div>
</th> </th>
<th> <th>
Odoo AR Nr <div class="th-label">Odoo AR Nr</div>
<input type="text" <div class="th-controls">
class="column-filter" <input type="text"
placeholder="Filter Odoo AR Nr" class="column-filter"
data-column="Odoo_AR_Nr" placeholder="Filter Odoo AR Nr"
oninput="handleColumnFilter(this)"> data-column="Odoo_AR_Nr"
<div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')"> oninput="handleColumnFilter(this)">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
<div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <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> </div>
</th> </th>
<th> <th>
Order ID <div class="th-label">Order ID</div>
<input type="text" <div class="th-controls">
class="column-filter" <input type="text"
placeholder="Filter Order ID" class="column-filter"
data-column="Order_ID" placeholder="Filter Order ID"
oninput="handleColumnFilter(this)"> data-column="Order_ID"
<div class="filter-indicator" onclick="toggleFilter('Order_ID')"> oninput="handleColumnFilter(this)">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('Order_ID')">
<div class="sort-indicator" onclick="sortTable('Order_ID')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <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> </div>
</th> </th>
<th> <th>
Country <div class="th-label">Country</div>
<input type="text" <div class="th-controls">
class="column-filter" <input type="text"
placeholder="Filter Country" class="column-filter"
data-column="Country_Name" placeholder="Filter Country"
oninput="handleColumnFilter(this)"> data-column="Country_Name"
<div class="filter-indicator" onclick="toggleFilter('Country_Name')"> oninput="handleColumnFilter(this)">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('Country_Name')">
<div class="sort-indicator" onclick="sortTable('Country_Name')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <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> </div>
</th> </th>
<th> <th>
VAT <div class="th-label">VAT</div>
<div class="filter-indicator" onclick="toggleFilter('VAT')"> <div class="th-controls">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('VAT')">
<div class="sort-indicator" onclick="sortTable('VAT')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <div class="sort-indicator" onclick="sortTable('VAT')">
<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div> </div>
</th> </th>
<th> <th>
Remark <div class="th-label">Remark</div>
<input type="text" <div class="th-controls">
class="column-filter" <input type="text"
placeholder="Filter Remark" class="column-filter"
data-column="Remark" placeholder="Filter Remark"
oninput="handleColumnFilter(this)"> data-column="Remark"
<div class="filter-indicator" onclick="toggleFilter('Remark')"> oninput="handleColumnFilter(this)">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('Remark')">
<div class="sort-indicator" onclick="sortTable('Remark')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <div class="sort-indicator" onclick="sortTable('Remark')">
<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div> </div>
</th> </th>
<th> <th>
Recheck <div class="th-label">Recheck</div>
<div class="filter-indicator" onclick="toggleFilter('recheck')"> <div class="th-controls">
<i class="fas fa-filter"></i> <div class="th-actions">
</div> <div class="filter-indicator" onclick="toggleFilter('recheck')">
<div class="sort-indicator" onclick="sortTable('recheck')"> <i class="fas fa-filter"></i>
<i class="fas fa-arrow-up"></i> </div>
<i class="fas fa-arrow-down"></i> <div class="sort-indicator" onclick="sortTable('recheck')">
<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div> </div>
</th> </th>
</tr> </tr>
style.css
+32 -9
View File
@@ -211,8 +211,7 @@ thead {
} }
th { th {
padding: 0.75rem 1rem; padding: 0.5rem;
text-align: left;
font-weight: 600; font-weight: 600;
color: var(--dark); color: var(--dark);
border-bottom: 2px solid var(--border); border-bottom: 2px solid var(--border);
@@ -220,18 +219,35 @@ th {
top: 0; top: 0;
background: var(--light); background: var(--light);
z-index: 10; z-index: 10;
display: flex; min-width: 130px;
flex-direction: column; vertical-align: top;
gap: 0.5rem; white-space: nowrap;
display: table-cell;
} }
th:hover { th .th-controls {
background: var(--hover); 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 { .column-filter {
width: 100%; width: 90px;
padding: 0.4rem 0.6rem; padding: 0.35rem 0.5rem;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -254,6 +270,13 @@ th.filter-active .column-filter {
background-color: rgba(99, 102, 241, 0.05); background-color: rgba(99, 102, 241, 0.05);
} }
.th-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
th .sort-indicator { th .sort-indicator {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;