Cardoza_Construction/Job-List
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to v1.0.0-alpha5

Browse Source 
- Add hover tooltip column setting for truncated text
- Update Tax_Exempt_Docs_Uploaded label to 'Tax Exempt Uploads?'
This commit is contained in:
aewing
2026-01-02 04:18:42 +00:00
parent 5a34170454
commit ad4a4fdf4b
2 changed files with 693 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
appsettings.html
+150 -2
View File
@@ -82,6 +82,7 @@
<label class="block text-sm font-medium text-gray-700 mb-2">Row Height (px)</label>
<input type="number" id="rowHeight" min="30" max="100"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
<p class="text-xs text-gray-500 mt-1">Fixed height for all data rows</p>
</div>
<div>
@@ -91,11 +92,71 @@
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Striped Rows</label>
<label class="block text-sm font-medium text-gray-700 mb-2">Row Options</label>
<label class="flex items-center space-x-2 mt-2">
<input type="checkbox" id="stripedRows" class="w-5 h-5 text-primary rounded">
<span class="text-sm text-gray-700">Enable alternating row colors</span>
</label>
<label class="flex items-center space-x-2 mt-2">
<input type="checkbox" id="fixedRowHeight" class="w-5 h-5 text-primary rounded">
<span class="text-sm text-gray-700">Fixed row height (no flex)</span>
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Data Cell Vertical Alignment</label>
<select id="cellVerticalAlign"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="top">Top</option>
<option value="middle">Middle</option>
<option value="bottom">Bottom</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Header Vertical Alignment</label>
<select id="headerVerticalAlign"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="top">Top</option>
<option value="middle">Middle</option>
<option value="bottom">Bottom</option>
</select>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 mb-3">Border Settings</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Border Color</label>
<div class="flex items-center space-x-2">
<input type="color" id="borderColor"
class="w-16 h-10 rounded cursor-pointer border border-gray-300">
<input type="text" id="borderColorText"
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm"
placeholder="#e5e7eb">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Border Width (px)</label>
<input type="number" id="borderWidth" min="0" max="5"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Border Options</label>
<label class="flex items-center space-x-2 mt-2">
<input type="checkbox" id="showRowBorders" class="w-5 h-5 text-primary rounded">
<span class="text-sm text-gray-700">Show row borders</span>
</label>
<label class="flex items-center space-x-2 mt-2">
<input type="checkbox" id="showColumnBorders" class="w-5 h-5 text-primary rounded">
<span class="text-sm text-gray-700">Show column borders</span>
</label>
</div>
</div>
</div>
</div>
@@ -215,6 +276,13 @@
currentSettings.rowHeight = parseInt(document.getElementById('rowHeight').value);
currentSettings.fontSize = parseInt(document.getElementById('fontSize').value);
currentSettings.stripedRows = document.getElementById('stripedRows').checked;
currentSettings.fixedRowHeight = document.getElementById('fixedRowHeight').checked;
currentSettings.cellVerticalAlign = document.getElementById('cellVerticalAlign').value;
currentSettings.headerVerticalAlign = document.getElementById('headerVerticalAlign').value;
currentSettings.borderColor = document.getElementById('borderColor').value;
currentSettings.borderWidth = parseInt(document.getElementById('borderWidth').value);
currentSettings.showRowBorders = document.getElementById('showRowBorders').checked;
currentSettings.showColumnBorders = document.getElementById('showColumnBorders').checked;
}
async function saveSettings(isAuto = false) {
@@ -349,6 +417,14 @@
document.getElementById('rowHeight').value = currentSettings.rowHeight || 40;
document.getElementById('fontSize').value = currentSettings.fontSize || 14;
document.getElementById('stripedRows').checked = currentSettings.stripedRows !== false;
document.getElementById('fixedRowHeight').checked = currentSettings.fixedRowHeight !== false;
document.getElementById('cellVerticalAlign').value = currentSettings.cellVerticalAlign || 'middle';
document.getElementById('headerVerticalAlign').value = currentSettings.headerVerticalAlign || 'middle';
document.getElementById('borderColor').value = currentSettings.borderColor || '#e5e7eb';
document.getElementById('borderColorText').value = currentSettings.borderColor || '#e5e7eb';
document.getElementById('borderWidth').value = currentSettings.borderWidth || 1;
document.getElementById('showRowBorders').checked = currentSettings.showRowBorders !== false;
document.getElementById('showColumnBorders').checked = currentSettings.showColumnBorders !== false;
// Column settings
const columnsList = document.getElementById('columnsList');
@@ -388,10 +464,70 @@
</div>
<div>
<label class="flex items-center space-x-2 mt-6">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Alignment</label>
<select data-col-index="${index}" data-field="alignment"
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-primary text-sm">
<option value="left" ${(col.alignment || 'left') === 'left' ? 'selected' : ''}>Left</option>
<option value="center" ${col.alignment === 'center' ? 'selected' : ''}>Center</option>
<option value="right" ${col.alignment === 'right' ? 'selected' : ''}>Right</option>
</select>
</div>
<div class="flex flex-col justify-center space-y-1">
<label class="flex items-center space-x-2">
<input type="checkbox" ${col.readOnly ? 'checked' : ''} data-col-index="${index}" data-field="readOnly" class="w-4 h-4">
<span class="text-sm text-gray-700">Read-only</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" ${col.headerWrap ? 'checked' : ''} data-col-index="${index}" data-field="headerWrap" class="w-4 h-4">
<span class="text-sm text-gray-700">Wrap header</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" ${col.showFullTextOnHover ? 'checked' : ''} data-col-index="${index}" data-field="showFullTextOnHover" class="w-4 h-4">
<span class="text-sm text-gray-700">Hover tooltip</span>
</label>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium text-gray-700">Boolean Value Formatting (for checkboxes)</label>
</div>
<div class="grid grid-cols-2 gap-4 mb-3">
<div class="border border-gray-200 rounded p-3">
<label class="text-xs font-medium text-gray-600 block mb-2">True Value Style</label>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="text-xs text-gray-600 block mb-1">Background</label>
<input type="color" value="${col.trueBgColor || '#d1fae5'}"
data-col-index="${index}" data-field="trueBgColor"
class="w-full h-8 rounded cursor-pointer">
</div>
<div>
<label class="text-xs text-gray-600 block mb-1">Alt Background</label>
<input type="color" value="${col.trueBgColorAlt || '#a7f3d0'}"
data-col-index="${index}" data-field="trueBgColorAlt"
class="w-full h-8 rounded cursor-pointer">
</div>
</div>
</div>
<div class="border border-gray-200 rounded p-3">
<label class="text-xs font-medium text-gray-600 block mb-2">False Value Style</label>
<div class="grid grid-cols-2 gap-2">
<div>
<label class="text-xs text-gray-600 block mb-1">Background</label>
<input type="color" value="${col.falseBgColor || '#fee2e2'}"
data-col-index="${index}" data-field="falseBgColor"
class="w-full h-8 rounded cursor-pointer">
</div>
<div>
<label class="text-xs text-gray-600 block mb-1">Alt Background</label>
<input type="color" value="${col.falseBgColorAlt || '#fecaca'}"
data-col-index="${index}" data-field="falseBgColorAlt"
class="w-full h-8 rounded cursor-pointer">
</div>
</div>
</div>
</div>
</div>
@@ -604,6 +740,18 @@
document.getElementById('closeBtn').addEventListener('click', () => {
window.location.href = '/estimatortable.html';
});
// Sync border color picker with text input
document.getElementById('borderColor').addEventListener('input', (e) => {
document.getElementById('borderColorText').value = e.target.value;
});
document.getElementById('borderColorText').addEventListener('input', (e) => {
const value = e.target.value;
if (/^#[0-9A-F]{6}$/i.test(value)) {
document.getElementById('borderColor').value = value;
}
});
// Initialize
if (pb.authStore.isValid) {