solocla/trf_certest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(import_edit2): expand entire column including header and fix sticky columns

Browse Source
This commit is contained in:
Martin Grigoryan 2026-02-04 17:00:01 +04:00
parent d8eddb3aa5
commit 82d6a2ee18
1 changed files with 54 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
public/userarea/import_edit2.php
View File

@ -278,6 +278,7 @@ function fixedDefaultValue(array $f): string
}
/* Sticky columns - first column (Actions) */
.grid-top .grid-cell.save-all-cell,
.grid-header.button-header,
.grid-cell.button-cell {
position: sticky !important;
@ -300,6 +301,7 @@ function fixedDefaultValue(array $f): string
background-color: #e9ecef;
}
.grid-top .grid-cell:nth-child(2),
.grid-row .grid-header:nth-child(2),
.grid-row .grid-cell:nth-child(2) {
position: sticky !important;
@ -326,7 +328,8 @@ function fixedDefaultValue(array $f): string
position: relative;
}
.grid-cell.expanded {
.grid-cell.expanded,
.grid-header.expanded {
max-width: 500px !important;
white-space: normal !important;
overflow-wrap: break-word !important;
@ -334,6 +337,10 @@ function fixedDefaultValue(array $f): string
flex: 0 0 500px !important;
}
.grid-header.expanded {
background-color: #e0f7fa !important;
}
.resizer {
width: 5px;
height: 100%;
@ -351,7 +358,7 @@ function fixedDefaultValue(array $f): string
.grid-top {
display: flex;
align-items: flex-start;
align-items: stretch;
padding: 10px 0;
min-height: 0;
flex-wrap: nowrap;
@ -1115,16 +1122,32 @@ function fixedDefaultValue(array $f): string
<script src="tracking.js"></script>
<script src="export_to_lims.js"></script>
<script>
// Initialize Flatpickr for all date inputs
function expandColumn(cell, expand) {
const columnIndex = cell.getAttribute('data-index');
if (!columnIndex) return;
const allColumnCells = document.querySelectorAll(`.grid-cell[data-index="${columnIndex}"], .grid-header[data-index="${columnIndex}"], .grid-top-cell[data-index="${columnIndex}"]`);
allColumnCells.forEach(colCell => {
if (expand) {
colCell.classList.add('expanded');
} else {
colCell.classList.remove('expanded');
}
});
}
document.addEventListener("DOMContentLoaded", function() {
flatpickr(".date-picker", {
dateFormat: "Y-m-d",
allowInput: true,
onOpen: function(selectedDates, dateStr, instance) {
instance.input.closest('.grid-cell').classList.add('expanded');
const cell = instance.input.closest('.grid-cell');
expandColumn(cell, true);
},
onClose: function(selectedDates, dateStr, instance) {
instance.input.closest('.grid-cell').classList.remove('expanded');
const cell = instance.input.closest('.grid-cell');
expandColumn(cell, false);
// Trigger change event to handle unsaved changes
const event = new Event('change');
instance.input.dispatchEvent(event);
@ -1493,10 +1516,12 @@ function fixedDefaultValue(array $f): string
input.type === 'number' ||
input.type === 'date') {
input.addEventListener('focus', function() {
this.closest('.grid-cell').classList.add('expanded');
const cell = this.closest('.grid-cell');
expandColumn(cell, true);
});
input.addEventListener('blur', function() {
this.closest('.grid-cell').classList.remove('expanded');
const cell = this.closest('.grid-cell');
expandColumn(cell, false);
});
return;
}
@ -1505,7 +1530,7 @@ function fixedDefaultValue(array $f): string
input.addEventListener('focus', function() {
const cell = this.closest('.grid-cell');
cell.classList.add('expanded');
expandColumn(cell, true);
cell.dataset.convertingToTextarea = 'true';
const textarea = document.createElement('textarea');
@ -1531,7 +1556,8 @@ function fixedDefaultValue(array $f): string
});
} else {
input.addEventListener('focus', function() {
this.closest('.grid-cell').classList.add('expanded');
const cell = this.closest('.grid-cell');
expandColumn(cell, true);
});
}
});
@ -1555,11 +1581,11 @@ function fixedDefaultValue(array $f): string
element.parentNode.replaceChild(input, element);
cell.classList.remove('expanded');
expandColumn(cell, false);
input.addEventListener('focus', function() {
const cell = this.closest('.grid-cell');
cell.classList.add('expanded');
expandColumn(cell, true);
cell.dataset.convertingToTextarea = 'true';
const textarea = document.createElement('textarea');
@ -1587,7 +1613,7 @@ function fixedDefaultValue(array $f): string
} else if (element.tagName === 'INPUT' && element.type === 'text') {
const cell = element.closest('.grid-cell');
if (cell && !cell.dataset.convertingToTextarea) {
cell.classList.remove('expanded');
expandColumn(cell, false);
}
}
}, true);
@ -2240,6 +2266,22 @@ function fixedDefaultValue(array $f): string
row.style.minWidth = 'max-content';
}
});
const gridTop = document.querySelector('.grid-top');
if (gridTop && !gridTop.style.minWidth) {
gridTop.style.minWidth = 'max-content';
}
const stickyTopCells = document.querySelectorAll('.grid-top .grid-cell.save-all-cell, .grid-top .grid-cell:nth-child(2)');
stickyTopCells.forEach(cell => {
if (!cell.style.minWidth && !cell.style.flex) {
const computedStyle = window.getComputedStyle(cell);
if (computedStyle.flex === '0 0 auto' || !computedStyle.flex.includes('0 0')) {
cell.style.minWidth = cell.offsetWidth + 'px';
}
}
});
}
});
</script>