Laravel Report Builder (UI Simulator)

Configuration

Filter Rules

Report Preview

No data to display.

'; return; } const table = document.createElement('table'); table.className = 'data-table'; table.innerHTML = ` ${reportConfig.columns.map(key => `${source.columns[key]}`).join('')} ${data.map(row => ` ${reportConfig.columns.map(key => `${row[key]}`).join('')} `).join('')} `; previewContainer.innerHTML = ''; previewContainer.appendChild(table); } function setupEventListeners() { const container = document.getElementById('report-builder-container'); container.addEventListener('change', e => { if (e.target.id === 'data-source') { reportConfig.dataSource = e.target.value; reportConfig.columns = Object.keys(dataSources[reportConfig.dataSource].columns); reportConfig.filters = []; updateUI(); } if (e.target.classList.contains('column-checkbox')) { reportConfig.columns = Array.from(container.querySelectorAll('.column-checkbox:checked')).map(cb => cb.value); generateReport(); } const index = e.target.dataset.index; if (index) { if (e.target.classList.contains('filter-column')) reportConfig.filters[index].column = e.target.value; if (e.target.classList.contains('filter-operator')) reportConfig.filters[index].operator = e.target.value; if (e.target.classList.contains('filter-value')) reportConfig.filters[index].value = e.target.value; generateReport(); } }); container.addEventListener('click', e => { if(e.target.id === 'add-filter-btn') { reportConfig.filters.push({ column: Object.keys(dataSources[reportConfig.dataSource].columns)[0], operator: '=', value: '' }); updateFilterList(); } if(e.target.classList.contains('remove-filter-btn')) { reportConfig.filters.splice(e.target.dataset.index, 1); updateFilterList(); generateReport(); } if(e.target.id === 'add-row-btn') { const source = dataSources[reportConfig.dataSource]; const newRow = { id: Date.now() }; Object.keys(source.columns).forEach(key => { newRow[key] = `New ${key}`; }); source.data.push(newRow); generateReport(); } if(e.target.matches('.tab-link')) { container.querySelectorAll('.tab-link, .tab-content').forEach(el => el.classList.remove('active')); e.target.classList.add('active'); container.querySelector(`#${e.target.dataset.tab}`).classList.add('active'); } }); // Event delegation for saving cell edits document.getElementById('report-preview').addEventListener('blur', e => { if (e.target.tagName === 'TD' && e.target.hasAttribute('contenteditable')) { const rowId = e.target.closest('tr').dataset.rowId; const columnKey = e.target.dataset.columnKey; const newValue = e.target.textContent; const sourceData = dataSources[reportConfig.dataSource].data; const rowIndex = sourceData.findIndex(row => row.id == rowId); if (rowIndex > -1) { // Check if the value should be a number const originalValue = sourceData[rowIndex][columnKey]; sourceData[rowIndex][columnKey] = typeof originalValue === 'number' ? parseFloat(newValue) || 0 : newValue; } } }, true); document.getElementById('download-pdf-btn').addEventListener('click', () => { /* PDF download logic */ }); } initialize(); });
Scroll to Top