Implement dynamic column reordering with numeric order field and realtime sync
- Add order field to all columns in DEFAULT_SETTINGS (1-47) - Settings page: reorder columns via numeric input or up/down arrows, autosave after 400ms - Estimator table: render columns in order specified by order field, refresh on settings updates - Normalize column orders on load and realtime updates with fallback for missing order - Add logging to trace column order changes through settings and estimator pages - Reset button reinitializes all settings to defaults with proper column ordering - Table reload prevents concurrent requests to avoid PocketBase auto-cancellation
This commit is contained in:
Golwhit
+276
-140
@@ -273,7 +273,7 @@
|
||||
// Initialize PocketBase client
|
||||
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
||||
|
||||
// Column name to position mapping (based on actual table order)
|
||||
// Column name to position mapping fallback (when no settings found)
|
||||
const COLUMN_ORDER = [
|
||||
'Job_Number', 'Job_Full_Name', 'Active', 'Added_To_Calendar', 'Attachment_List',
|
||||
'Company_Client', 'Contact_Person', 'Docs_Uploaded', 'Due_Date', 'Due_Date_Counter',
|
||||
@@ -297,6 +297,47 @@
|
||||
|
||||
const APP_NAME = 'Estimator Job List';
|
||||
let appSettings = null;
|
||||
let appSettingsRecordId = null;
|
||||
let appSettingsUnsubscribe = null;
|
||||
let tableReloadTimer = null;
|
||||
let isLoadingTableData = false;
|
||||
|
||||
function normalizeColumnOrders(columns) {
|
||||
if (!Array.isArray(columns)) return [];
|
||||
const normalized = columns.map((col, idx) => {
|
||||
const orderNum = Number.parseInt(col?.order, 10);
|
||||
const safeOrder = Number.isFinite(orderNum) ? orderNum : idx + 1;
|
||||
return { ...col, order: safeOrder };
|
||||
}).sort((a, b) => a.order - b.order);
|
||||
console.log('Normalized columns (first 5):', normalized.slice(0, 5).map(c => ({ name: c.name, order: c.order, visible: c.visible })));
|
||||
return normalized;
|
||||
}
|
||||
|
||||
// Helpers to get columns in current order/visibility
|
||||
function getVisibleColumns() {
|
||||
if (appSettings && Array.isArray(appSettings.columns) && appSettings.columns.length) {
|
||||
return normalizeColumnOrders(appSettings.columns).filter((c) => c.visible !== false);
|
||||
}
|
||||
// Fallback to default order when no settings yet
|
||||
return COLUMN_ORDER.map((name, idx) => ({ name, visible: true, order: idx + 1 }));
|
||||
}
|
||||
|
||||
function prettyLabel(name) {
|
||||
return name.replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
function scheduleTableReload() {
|
||||
if (tableReloadTimer) {
|
||||
clearTimeout(tableReloadTimer);
|
||||
}
|
||||
tableReloadTimer = setTimeout(() => {
|
||||
if (isLoadingTableData) {
|
||||
console.log('Table data already loading, skipping reload');
|
||||
return;
|
||||
}
|
||||
loadTableData();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Load app settings from PocketBase
|
||||
async function loadAppSettings() {
|
||||
@@ -307,109 +348,140 @@
|
||||
|
||||
if (records.length > 0) {
|
||||
const settingsData = records[0].app_json_prefs;
|
||||
appSettingsRecordId = records[0].id;
|
||||
if (settingsData) {
|
||||
appSettings = typeof settingsData === 'string' ? JSON.parse(settingsData) : settingsData;
|
||||
// Ensure all columns have order field
|
||||
if (appSettings && Array.isArray(appSettings.columns)) {
|
||||
const needsOrderSync = appSettings.columns.some(col => col.order === undefined || col.order === null);
|
||||
if (needsOrderSync) {
|
||||
console.log('Columns missing order field, syncing...');
|
||||
appSettings.columns = appSettings.columns.map((col, idx) => ({
|
||||
...col,
|
||||
order: col.order ?? idx + 1
|
||||
}));
|
||||
}
|
||||
appSettings.columns = normalizeColumnOrders(appSettings.columns);
|
||||
}
|
||||
console.log('Loaded app settings:', appSettings);
|
||||
applyGlobalSettings();
|
||||
renderTableHeader();
|
||||
scheduleTableReload();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading app settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for live updates to app settings
|
||||
async function startSettingsWatch() {
|
||||
// Avoid duplicate subscriptions
|
||||
if (appSettingsUnsubscribe) return;
|
||||
try {
|
||||
appSettingsUnsubscribe = await pb.collection('app_preferences_settings').subscribe('*', (e) => {
|
||||
const record = e?.record;
|
||||
if (!record) return;
|
||||
if (record.app_name !== APP_NAME) return;
|
||||
// If we didn't have the record id yet, capture it
|
||||
if (!appSettingsRecordId) appSettingsRecordId = record.id;
|
||||
// Only respond to the tracked settings record if known
|
||||
if (appSettingsRecordId && record.id !== appSettingsRecordId) return;
|
||||
|
||||
const settingsData = record.app_json_prefs;
|
||||
appSettings = typeof settingsData === 'string' ? JSON.parse(settingsData || '{}') : (settingsData || {});
|
||||
if (appSettings && Array.isArray(appSettings.columns)) {
|
||||
const needsOrderSync = appSettings.columns.some(col => col.order === undefined || col.order === null);
|
||||
if (needsOrderSync) {
|
||||
console.log('Realtime update: columns missing order field, syncing...');
|
||||
appSettings.columns = appSettings.columns.map((col, idx) => ({
|
||||
...col,
|
||||
order: col.order ?? idx + 1
|
||||
}));
|
||||
}
|
||||
console.log('Received settings update via realtime, original orders:', appSettings.columns.map(c => ({ name: c.name, order: c.order })).slice(0, 5));
|
||||
appSettings.columns = normalizeColumnOrders(appSettings.columns);
|
||||
console.log('After normalize/sort:', appSettings.columns.map(c => ({ name: c.name, order: c.order })).slice(0, 5));
|
||||
}
|
||||
console.log('App settings updated via realtime', { action: e.action });
|
||||
applyGlobalSettings();
|
||||
scheduleTableReload();
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to start settings watch', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply global settings to table
|
||||
// Render table header dynamically based on current settings
|
||||
function renderTableHeader() {
|
||||
const headerRow = document.querySelector('.data-table thead tr');
|
||||
const visibleColumns = getVisibleColumns();
|
||||
headerRow.innerHTML = visibleColumns.map(col => `
|
||||
<th class="px-4 py-3 text-left font-semibold whitespace-nowrap">${prettyLabel(col.name)}</th>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Apply global settings to table (styles)
|
||||
function applyGlobalSettings() {
|
||||
if (!appSettings) return;
|
||||
|
||||
// Remove any existing dynamic styles first
|
||||
const existingStyle = document.getElementById('dynamic-column-styles');
|
||||
if (existingStyle) {
|
||||
existingStyle.remove();
|
||||
}
|
||||
if (existingStyle) existingStyle.remove();
|
||||
|
||||
const visibleColumns = getVisibleColumns();
|
||||
let styleContent = '';
|
||||
|
||||
// Apply row height
|
||||
if (appSettings.rowHeight) {
|
||||
if (appSettings && appSettings.rowHeight) {
|
||||
styleContent += `.data-table tbody tr { height: ${appSettings.rowHeight}px; }\n`;
|
||||
}
|
||||
|
||||
// Apply font size
|
||||
if (appSettings.fontSize) {
|
||||
if (appSettings && appSettings.fontSize) {
|
||||
styleContent += `.data-table { font-size: ${appSettings.fontSize}px; }\n`;
|
||||
}
|
||||
|
||||
// Apply striped rows setting
|
||||
if (appSettings.stripedRows === false) {
|
||||
if (appSettings && appSettings.stripedRows === false) {
|
||||
styleContent += `.data-table tbody tr:nth-child(even) td { background: white !important; }\n`;
|
||||
}
|
||||
|
||||
// Apply column widths and visibility dynamically
|
||||
if (appSettings.columns) {
|
||||
const col1Settings = getColumnSettings('Job_Number');
|
||||
const col2Settings = getColumnSettings('Job_Full_Name');
|
||||
const col1Width = col1Settings?.width || 120;
|
||||
const col2Width = col2Settings?.width || 250;
|
||||
|
||||
console.log('Applying settings:', { col1Width, col2Width, columns: appSettings.columns.length });
|
||||
|
||||
// Update sticky positions and widths for first two columns
|
||||
// Column widths and sticky headers based on visible order
|
||||
if (visibleColumns.length) {
|
||||
const col1Width = visibleColumns[0]?.width || 120;
|
||||
const col2Width = visibleColumns[1]?.width || 250;
|
||||
|
||||
styleContent += `
|
||||
.data-table th:nth-child(1), .data-table td:nth-child(1) {
|
||||
width: ${col1Width}px !important;
|
||||
min-width: ${col1Width}px !important;
|
||||
max-width: ${col1Width}px !important;
|
||||
}
|
||||
.data-table th:nth-child(2), .data-table td:nth-child(2) {
|
||||
left: ${col1Width}px !important;
|
||||
width: ${col2Width}px !important;
|
||||
min-width: ${col2Width}px !important;
|
||||
max-width: ${col2Width}px !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// Calculate total width and apply settings to all columns
|
||||
if (visibleColumns.length > 1) {
|
||||
styleContent += `
|
||||
.data-table th:nth-child(2), .data-table td:nth-child(2) {
|
||||
left: ${col1Width}px !important;
|
||||
width: ${col2Width}px !important;
|
||||
min-width: ${col2Width}px !important;
|
||||
max-width: ${col2Width}px !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
let totalWidth = 0;
|
||||
|
||||
appSettings.columns.forEach((col) => {
|
||||
// Find the actual position in the table
|
||||
const colPosition = COLUMN_ORDER.indexOf(col.name) + 1;
|
||||
|
||||
if (colPosition === 0) {
|
||||
console.warn(`Column ${col.name} not found in COLUMN_ORDER`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Apply width for all columns
|
||||
if (col.width) {
|
||||
styleContent += `
|
||||
.data-table th:nth-child(${colPosition}),
|
||||
.data-table td:nth-child(${colPosition}) {
|
||||
width: ${col.width}px !important;
|
||||
min-width: ${col.width}px !important;
|
||||
max-width: ${col.width}px !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
// Hide columns marked as not visible
|
||||
if (col.visible === false) {
|
||||
console.log(`Hiding column ${col.name} at position ${colPosition}`);
|
||||
styleContent += `
|
||||
.data-table th:nth-child(${colPosition}),
|
||||
.data-table td:nth-child(${colPosition}) {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
// Add to total width for visible columns
|
||||
totalWidth += col.width || 150;
|
||||
}
|
||||
visibleColumns.forEach((col, idx) => {
|
||||
const width = col.width || 150;
|
||||
totalWidth += width;
|
||||
styleContent += `
|
||||
.data-table th:nth-child(${idx + 1}),
|
||||
.data-table td:nth-child(${idx + 1}) {
|
||||
width: ${width}px !important;
|
||||
min-width: ${width}px !important;
|
||||
max-width: ${width}px !important;
|
||||
}
|
||||
`;
|
||||
});
|
||||
|
||||
// Ensure table is wide enough to trigger horizontal scroll
|
||||
console.log(`Total table width: ${totalWidth}px`);
|
||||
|
||||
styleContent += `
|
||||
.data-table {
|
||||
width: ${totalWidth}px !important;
|
||||
@@ -422,6 +494,12 @@
|
||||
style.id = 'dynamic-column-styles';
|
||||
style.textContent = styleContent;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Ensure header reflects current order/visibility
|
||||
renderTableHeader();
|
||||
|
||||
// Re-render body to reflect new order/visibility
|
||||
scheduleTableReload();
|
||||
}
|
||||
|
||||
// Get column settings
|
||||
@@ -444,6 +522,7 @@
|
||||
if (pb.authStore.isValid) {
|
||||
// Already logged in
|
||||
await loadAppSettings();
|
||||
await startSettingsWatch();
|
||||
showTable();
|
||||
await loadTableData();
|
||||
} else {
|
||||
@@ -461,6 +540,7 @@
|
||||
const authData = await pb.collection('users').authWithOAuth2({ provider: 'microsoft' });
|
||||
|
||||
await loadAppSettings();
|
||||
await startSettingsWatch();
|
||||
showTable();
|
||||
await loadTableData();
|
||||
} catch (error) {
|
||||
@@ -610,106 +690,150 @@
|
||||
return `<div class="checkbox-cell"><input type="checkbox" ${value ? 'checked' : ''} data-field="${fieldName}" data-record-id="${recordId}"></div>`;
|
||||
}
|
||||
|
||||
// Load table data from PocketBase
|
||||
// Per-column classes to keep layout/styling consistent when order changes
|
||||
const columnClassMap = {
|
||||
Job_Number: 'px-4 py-3 border-r border-gray-200 whitespace-nowrap font-medium',
|
||||
Job_Full_Name: 'px-4 py-3 border-r border-gray-200 whitespace-nowrap',
|
||||
Active: 'px-4 py-3 text-center',
|
||||
Added_To_Calendar: 'px-4 py-3 text-center',
|
||||
Docs_Uploaded: 'px-4 py-3 text-center',
|
||||
Due_Date: 'px-4 py-3 whitespace-nowrap',
|
||||
Estimate_Approved: 'px-4 py-3 text-center',
|
||||
Estimate_Draft: 'px-4 py-3 text-center',
|
||||
Estimate_Reviewed: 'px-4 py-3 text-center',
|
||||
Flag: 'px-4 py-3 text-center',
|
||||
Has_Attachments: 'px-4 py-3 text-center',
|
||||
Notes: 'px-4 py-3 max-w-xs truncate',
|
||||
PSwift_Uploaded: 'px-4 py-3 text-center',
|
||||
QB_Created: 'px-4 py-3 text-center',
|
||||
Start_Date: 'px-4 py-3 whitespace-nowrap',
|
||||
Submission_Date: 'px-4 py-3 whitespace-nowrap',
|
||||
Tax_Exempt: 'px-4 py-3 text-center',
|
||||
Tax_Exempt_Docs_Uploaded: 'px-4 py-3 text-center',
|
||||
Voxer_Created: 'px-4 py-3 text-center',
|
||||
last_note_at: 'px-4 py-3 whitespace-nowrap',
|
||||
latest_note_summary: 'px-4 py-3 max-w-xs truncate',
|
||||
note_count: 'px-4 py-3 text-center',
|
||||
note_thread_text: 'px-4 py-3 max-w-xs truncate'
|
||||
};
|
||||
|
||||
// Render cell content for each supported column
|
||||
function renderCellContent(columnName, record, value) {
|
||||
switch (columnName) {
|
||||
case 'Active':
|
||||
return formatActiveCheckbox(record.Active, record.id);
|
||||
case 'Added_To_Calendar':
|
||||
return formatEditableCheckbox(record.Added_To_Calendar, 'Added_To_Calendar', record.id);
|
||||
case 'Docs_Uploaded':
|
||||
return formatEditableCheckbox(record.Docs_Uploaded, 'Docs_Uploaded', record.id);
|
||||
case 'Due_Date':
|
||||
return formatDate(record.Due_Date, record.Due_Date_Notes);
|
||||
case 'Due_Date_Counter':
|
||||
return calculateDueDateCounter(record);
|
||||
case 'Estimate_Approved':
|
||||
return formatEditableCheckbox(record.Estimate_Approved, 'Estimate_Approved', record.id);
|
||||
case 'Estimate_Draft':
|
||||
return formatEditableCheckbox(record.Estimate_Draft, 'Estimate_Draft', record.id);
|
||||
case 'Estimate_Reviewed':
|
||||
return formatEditableCheckbox(record.Estimate_Reviewed, 'Estimate_Reviewed', record.id);
|
||||
case 'Flag':
|
||||
return formatEditableCheckbox(record.Flag, 'Flag', record.id);
|
||||
case 'Has_Attachments':
|
||||
return formatEditableCheckbox(record.Has_Attachments, 'Has_Attachments', record.id);
|
||||
case 'Notes':
|
||||
return record.Notes || '';
|
||||
case 'PSwift_Uploaded':
|
||||
return formatEditableCheckbox(record.PSwift_Uploaded, 'PSwift_Uploaded', record.id);
|
||||
case 'QB_Created':
|
||||
return formatEditableCheckbox(record.QB_Created, 'QB_Created', record.id);
|
||||
case 'Start_Date':
|
||||
return formatDate(record.Start_Date, record.Start_Date_Notes);
|
||||
case 'Submission_Date':
|
||||
return formatDate(record.Submission_Date);
|
||||
case 'Tax_Exempt':
|
||||
return formatEditableCheckbox(record.Tax_Exempt, 'Tax_Exempt', record.id);
|
||||
case 'Tax_Exempt_Docs_Uploaded':
|
||||
return formatEditableCheckbox(record.Tax_Exempt_Docs_Uploaded, 'Tax_Exempt_Docs_Uploaded', record.id);
|
||||
case 'Voxer_Created':
|
||||
return formatEditableCheckbox(record.Voxer_Created, 'Voxer_Created', record.id);
|
||||
case 'last_note_at':
|
||||
return formatDateTime(record.last_note_at);
|
||||
default:
|
||||
return value || '';
|
||||
}
|
||||
}
|
||||
|
||||
// Title attributes for tooltips on truncated cells
|
||||
function getCellTitle(columnName, record) {
|
||||
switch (columnName) {
|
||||
case 'Notes':
|
||||
return record.Notes || '';
|
||||
case 'latest_note_summary':
|
||||
return record.latest_note_summary || '';
|
||||
case 'note_thread_text':
|
||||
return record.note_thread_text || '';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// Load table data from PocketBase respecting current column order/visibility
|
||||
async function loadTableData() {
|
||||
try {
|
||||
if (isLoadingTableData) {
|
||||
console.log('Table data already loading, skipping');
|
||||
return;
|
||||
}
|
||||
isLoadingTableData = true;
|
||||
loadingIndicator.classList.remove('hidden');
|
||||
|
||||
// Fetch all records from Job_Info_TestEnv collection
|
||||
const records = await pb.collection('Job_Info_TestEnv').getFullList({
|
||||
sort: 'Job_Number',
|
||||
});
|
||||
|
||||
// Clear existing rows
|
||||
tableBody.innerHTML = '';
|
||||
const visibleColumns = getVisibleColumns();
|
||||
|
||||
// Populate table
|
||||
records.forEach(record => {
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'border-b border-gray-200';
|
||||
|
||||
// Helper to get cell style based on column settings and value
|
||||
const getCellStyle = (columnName, value) => {
|
||||
const rowIndex = Array.from(tableBody.children).length;
|
||||
|
||||
const cellsHtml = visibleColumns.map((col, idx) => {
|
||||
const columnName = col.name;
|
||||
const value = record[columnName];
|
||||
const titleValue = getCellTitle(columnName, record);
|
||||
const className = columnClassMap[columnName] || 'px-4 py-3';
|
||||
let style = '';
|
||||
const colSettings = getColumnSettings(columnName);
|
||||
|
||||
if (colSettings) {
|
||||
// Check for choice-based styling
|
||||
if (value && colSettings.choices && colSettings.choices.length > 0) {
|
||||
const choice = colSettings.choices.find(c => c.value === value);
|
||||
if (choice) {
|
||||
// Use alternating colors based on row index
|
||||
const rowIndex = Array.from(tableBody.children).length;
|
||||
const bgColor = rowIndex % 2 === 0 ? choice.bgColor : choice.bgColorAlt;
|
||||
style += `background-color: ${bgColor} !important;`;
|
||||
|
||||
if (choice.fontStyle === 'bold') {
|
||||
style += 'font-weight: bold;';
|
||||
} else if (choice.fontStyle === 'italic') {
|
||||
style += 'font-style: italic;';
|
||||
}
|
||||
if (colSettings && value && colSettings.choices && colSettings.choices.length > 0) {
|
||||
const choice = colSettings.choices.find(c => c.value === value);
|
||||
if (choice) {
|
||||
const bgColor = rowIndex % 2 === 0 ? choice.bgColor : choice.bgColorAlt;
|
||||
style += `background-color: ${bgColor} !important;`;
|
||||
if (choice.fontStyle === 'bold') {
|
||||
style += 'font-weight: bold;';
|
||||
} else if (choice.fontStyle === 'italic') {
|
||||
style += 'font-style: italic;';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return style ? `style="${style}"` : '';
|
||||
};
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="px-4 py-3 border-r border-gray-200 whitespace-nowrap font-medium" ${getCellStyle('Job_Number', record.Job_Number)}>${record.Job_Number || ''}</td>
|
||||
<td class="px-4 py-3 border-r border-gray-200 whitespace-nowrap" ${getCellStyle('Job_Full_Name', record.Job_Full_Name)}>${record.Job_Full_Name || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Active', record.Active)}>${formatActiveCheckbox(record.Active, record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Added_To_Calendar', record.Added_To_Calendar)}>${formatEditableCheckbox(record.Added_To_Calendar, 'Added_To_Calendar', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Attachment_List', record.Attachment_List)}>${record.Attachment_List || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Company_Client', record.Company_Client)}>${record.Company_Client || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Contact_Person', record.Contact_Person)}>${record.Contact_Person || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Docs_Uploaded', record.Docs_Uploaded)}>${formatEditableCheckbox(record.Docs_Uploaded, 'Docs_Uploaded', record.id)}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" ${getCellStyle('Due_Date', record.Due_Date)}>${formatDate(record.Due_Date, record.Due_Date_Notes)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Due_Date_Counter', record.Due_Date_Counter)}>${calculateDueDateCounter(record)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Due_Date_Source', record.Due_Date_Source)}>${record.Due_Date_Source || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Due_Time', record.Due_Time)}>${record.Due_Time || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Email', record.Email)}>${record.Email || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Estimate_Approved', record.Estimate_Approved)}>${formatEditableCheckbox(record.Estimate_Approved, 'Estimate_Approved', record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Estimate_Draft', record.Estimate_Draft)}>${formatEditableCheckbox(record.Estimate_Draft, 'Estimate_Draft', record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Estimate_Reviewed', record.Estimate_Reviewed)}>${formatEditableCheckbox(record.Estimate_Reviewed, 'Estimate_Reviewed', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Estimator', record.Estimator)}>${record.Estimator || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Flag', record.Flag)}>${formatEditableCheckbox(record.Flag, 'Flag', record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Has_Attachments', record.Has_Attachments)}>${formatEditableCheckbox(record.Has_Attachments, 'Has_Attachments', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Address', record.Job_Address)}>${record.Job_Address || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Codes', record.Job_Codes)}>${record.Job_Codes || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Division', record.Job_Division)}>${record.Job_Division || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Folder_Link', record.Job_Folder_Link)}>${record.Job_Folder_Link || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Name', record.Job_Name)}>${record.Job_Name || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Number_Parent', record.Job_Number_Parent)}>${record.Job_Number_Parent || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_QB_Link', record.Job_QB_Link)}>${record.Job_QB_Link || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Status', record.Job_Status)}>${record.Job_Status || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Job_Type', record.Job_Type)}>${record.Job_Type || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Note_Ref', record.Note_Ref)}>${record.Note_Ref || ''}</td>
|
||||
<td class="px-4 py-3 max-w-xs truncate" title="${record.Notes || ''}" ${getCellStyle('Notes', record.Notes)}>${record.Notes || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Office_Rep', record.Office_Rep)}>${record.Office_Rep || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('PSwift_Uploaded', record.PSwift_Uploaded)}>${formatEditableCheckbox(record.PSwift_Uploaded, 'PSwift_Uploaded', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Phone_Number', record.Phone_Number)}>${record.Phone_Number || ''}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Project_Manager', record.Project_Manager)}>${record.Project_Manager || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('QB_Created', record.QB_Created)}>${formatEditableCheckbox(record.QB_Created, 'QB_Created', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Schedule_Confidence', record.Schedule_Confidence)}>${record.Schedule_Confidence || ''}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" ${getCellStyle('Start_Date', record.Start_Date)}>${formatDate(record.Start_Date, record.Start_Date_Notes)}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" ${getCellStyle('Submission_Date', record.Submission_Date)}>${formatDate(record.Submission_Date)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Tax_Exempt', record.Tax_Exempt)}>${formatEditableCheckbox(record.Tax_Exempt, 'Tax_Exempt', record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Tax_Exempt_Docs_Uploaded', record.Tax_Exempt_Docs_Uploaded)}>${formatEditableCheckbox(record.Tax_Exempt_Docs_Uploaded, 'Tax_Exempt_Docs_Uploaded', record.id)}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('Voxer_Created', record.Voxer_Created)}>${formatEditableCheckbox(record.Voxer_Created, 'Voxer_Created', record.id)}</td>
|
||||
<td class="px-4 py-3" ${getCellStyle('Voxer_Link', record.Voxer_Link)}>${record.Voxer_Link || ''}</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" ${getCellStyle('last_note_at', record.last_note_at)}>${formatDateTime(record.last_note_at)}</td>
|
||||
<td class="px-4 py-3 max-w-xs truncate" title="${record.latest_note_summary || ''}" ${getCellStyle('latest_note_summary', record.latest_note_summary)}>${record.latest_note_summary || ''}</td>
|
||||
<td class="px-4 py-3 text-center" ${getCellStyle('note_count', record.note_count)}>${record.note_count || ''}</td>
|
||||
<td class="px-4 py-3 max-w-xs truncate" title="${record.note_thread_text || ''}" ${getCellStyle('note_thread_text', record.note_thread_text)}>${record.note_thread_text || ''}</td>
|
||||
`;
|
||||
const styleAttr = style ? `style="${style}"` : '';
|
||||
const titleAttr = titleValue ? ` title="${titleValue}"` : '';
|
||||
const content = renderCellContent(columnName, record, value);
|
||||
return `<td class="${className}" ${styleAttr}${titleAttr}>${content}</td>`;
|
||||
}).join('');
|
||||
|
||||
row.innerHTML = cellsHtml;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
|
||||
isLoadingTableData = false;
|
||||
loadingIndicator.classList.add('hidden');
|
||||
} catch (error) {
|
||||
console.error('Error loading table data:', error);
|
||||
isLoadingTableData = false;
|
||||
loadingIndicator.classList.add('hidden');
|
||||
alert('Error loading data. Please refresh the page.');
|
||||
}
|
||||
@@ -750,6 +874,18 @@
|
||||
|
||||
// Initialize
|
||||
checkAuth();
|
||||
|
||||
// Clean up subscription on unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
try {
|
||||
if (appSettingsUnsubscribe) {
|
||||
appSettingsUnsubscribe();
|
||||
appSettingsUnsubscribe = null;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Error while unsubscribing settings watch', err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user