+
+
Shipment Info
+
{
- input.addEventListener('focus', function() {
- this.closest('.grid-cell').classList.add('expanded');
- });
- input.addEventListener('blur', function() {
- this.closest('.grid-cell').classList.remove('expanded');
- });
+ if (input.tagName === 'SELECT' ||
+ input.classList.contains('date-picker') ||
+ input.type === 'number' ||
+ input.type === 'date') {
+ input.addEventListener('focus', function() {
+ this.closest('.grid-cell').classList.add('expanded');
+ });
+ input.addEventListener('blur', function() {
+ this.closest('.grid-cell').classList.remove('expanded');
+ });
+ return;
+ }
+
+ if (input.type === 'text') {
+ input.addEventListener('focus', function() {
+ const cell = this.closest('.grid-cell');
+
+ cell.classList.add('expanded');
+ cell.dataset.convertingToTextarea = 'true';
+
+ const textarea = document.createElement('textarea');
+
+ textarea.value = this.value;
+ textarea.name = this.name;
+ textarea.className = this.className;
+ textarea.required = this.required;
+ textarea.style.border = '1px solid #ced4da';
+ textarea.setAttribute('data-mapping-id', this.getAttribute('data-mapping-id') || '');
+ textarea.setAttribute('data-field-id', this.getAttribute('data-field-id') || '');
+ textarea.setAttribute('data-selected-value', this.getAttribute('data-selected-value') || '');
+ textarea.setAttribute('data-current-value', this.getAttribute('data-current-value') || '');
+ textarea.setAttribute('data-fixed-key', this.getAttribute('data-fixed-key') || '');
+ textarea.dataset.originalInput = 'true';
+
+ this.parentNode.replaceChild(textarea, this);
+
+ setTimeout(() => {
+ textarea.focus();
+ delete cell.dataset.convertingToTextarea;
+ }, 0);
+ });
+ } else {
+ input.addEventListener('focus', function() {
+ this.closest('.grid-cell').classList.add('expanded');
+ });
+ }
});
+ document.addEventListener('blur', function(e) {
+ const element = e.target;
+ if (element.tagName === 'TEXTAREA' && element.dataset.originalInput === 'true') {
+ const cell = element.closest('.grid-cell');
+
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.value = element.value;
+ input.name = element.name;
+ input.className = element.className;
+ input.required = element.required;
+ input.setAttribute('data-mapping-id', element.getAttribute('data-mapping-id') || '');
+ input.setAttribute('data-field-id', element.getAttribute('data-field-id') || '');
+ input.setAttribute('data-selected-value', element.getAttribute('data-selected-value') || '');
+ input.setAttribute('data-current-value', element.getAttribute('data-current-value') || '');
+ input.setAttribute('data-fixed-key', element.getAttribute('data-fixed-key') || '');
+
+ element.parentNode.replaceChild(input, element);
+
+ cell.classList.remove('expanded');
+
+ input.addEventListener('focus', function() {
+ const cell = this.closest('.grid-cell');
+ cell.classList.add('expanded');
+ cell.dataset.convertingToTextarea = 'true';
+
+ const textarea = document.createElement('textarea');
+ textarea.value = this.value;
+ textarea.name = this.name;
+ textarea.className = this.className;
+ textarea.required = this.required;
+ textarea.style.border = '1px solid #ced4da';
+ textarea.setAttribute('data-mapping-id', this.getAttribute('data-mapping-id') || '');
+ textarea.setAttribute('data-field-id', this.getAttribute('data-field-id') || '');
+ textarea.setAttribute('data-selected-value', this.getAttribute('data-selected-value') || '');
+ textarea.setAttribute('data-current-value', this.getAttribute('data-current-value') || '');
+ textarea.setAttribute('data-fixed-key', this.getAttribute('data-fixed-key') || '');
+ textarea.dataset.originalInput = 'true';
+
+ this.parentNode.replaceChild(textarea, this);
+ setTimeout(() => {
+ textarea.focus();
+ delete cell.dataset.convertingToTextarea;
+ }, 0);
+ });
+
+ const changeEvent = new Event('change', { bubbles: true });
+ input.dispatchEvent(changeEvent);
+ } else if (element.tagName === 'INPUT' && element.type === 'text') {
+ const cell = element.closest('.grid-cell');
+ if (cell && !cell.dataset.convertingToTextarea) {
+ cell.classList.remove('expanded');
+ }
+ }
+ }, true);
+
// Gestione della propagazione
const propagateButtons = document.querySelectorAll('.propagate-btn');
propagateButtons.forEach(button => {
@@ -1453,12 +1672,14 @@ function fixedDefaultValue(array $f): string
function resize(e) {
if (currentResizer) {
- const dx = e.pageX - startX;
- const newWidth = startWidth + dx;
+ const deltaX = e.pageX - startX;
+ const newWidth = Math.max(80, startWidth + deltaX);
const headers = document.querySelectorAll(`.grid-header[data-index="${columnIndex}"]`);
const cells = document.querySelectorAll(`.grid-cell[data-index="${columnIndex}"]`);
+ const topCells = document.querySelectorAll(`.grid-top .grid-cell[data-index="${columnIndex}"]`);
headers.forEach(header => header.style.flex = `0 0 ${newWidth}px`);
cells.forEach(cell => cell.style.flex = `0 0 ${newWidth}px`);
+ topCells.forEach(cell => cell.style.flex = `0 0 ${newWidth}px`);
}
}
@@ -2009,6 +2230,17 @@ function fixedDefaultValue(array $f): string
});
}
});
+
+ // Fix for sticky columns
+ const gridContainer = document.querySelector('.grid-container');
+ if (gridContainer) {
+ const rows = document.querySelectorAll('.grid-row');
+ rows.forEach(row => {
+ if (!row.style.minWidth) {
+ row.style.minWidth = 'max-content';
+ }
+ });
+ }
});