| 123 | * Generate HTML content for query results PDF |
| 124 | */ |
| 125 | const generateQueryResultsHTML = (queryResult: QueryResult): string => { |
| 126 | const { query, results = [], columns = [], executionTime, totalRows, error } = queryResult; |
| 127 | |
| 128 | let html = ` |
| 129 | <div style="margin-bottom: 20px;"> |
| 130 | <h2 style="color: #000; margin-bottom: 10px;">SQL Query</h2> |
| 131 | <pre style="background-color: #f8f8f8; padding: 15px; border-radius: 4px; border: 1px solid #e0e0e0; font-family: 'Consolas', 'Monaco', monospace; white-space: pre-wrap; word-break: break-word;">${query}</pre> |
| 132 | </div> |
| 133 | `; |
| 134 | |
| 135 | // Add metadata |
| 136 | if (executionTime !== undefined || totalRows !== undefined) { |
| 137 | html += ` |
| 138 | <div style="margin-bottom: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; border: 1px solid #e0e0e0;"> |
| 139 | <h3 style="color: #000; margin: 0 0 5px 0; font-size: 14px;">Execution Details</h3> |
| 140 | `; |
| 141 | |
| 142 | if (executionTime !== undefined) { |
| 143 | html += `<p style="margin: 2px 0; font-size: 12px;">Execution Time: ${executionTime.toFixed(0)}ms</p>`; |
| 144 | } |
| 145 | |
| 146 | if (totalRows !== undefined) { |
| 147 | html += `<p style="margin: 2px 0; font-size: 12px;">Total Rows: ${totalRows.toLocaleString()}</p>`; |
| 148 | } |
| 149 | |
| 150 | html += '</div>'; |
| 151 | } |
| 152 | |
| 153 | // Add error if exists |
| 154 | if (error) { |
| 155 | html += ` |
| 156 | <div style="margin-bottom: 20px; padding: 10px; background-color: #ffebee; border-radius: 4px; border: 1px solid #e57373; color: #c62828;"> |
| 157 | <h3 style="color: #c62828; margin: 0 0 5px 0; font-size: 14px;">Error</h3> |
| 158 | <p style="margin: 0; font-size: 12px; white-space: pre-wrap;">${error}</p> |
| 159 | </div> |
| 160 | `; |
| 161 | return html; |
| 162 | } |
| 163 | |
| 164 | // Add results table |
| 165 | if (results.length > 0 && columns.length > 0) { |
| 166 | html += ` |
| 167 | <div> |
| 168 | <h2 style="color: #000; margin-bottom: 10px;">Results</h2> |
| 169 | <table style="width: 100%; border-collapse: collapse; font-size: 11px;"> |
| 170 | <thead> |
| 171 | <tr style="background-color: #f5f5f5;"> |
| 172 | `; |
| 173 | |
| 174 | // Table headers |
| 175 | columns.forEach(column => { |
| 176 | html += ` |
| 177 | <th style="border: 1px solid #ddd; padding: 8px; text-align: left; font-weight: bold; color: #000;"> |
| 178 | ${column} |
| 179 | </th> |
| 180 | `; |
| 181 | }); |
| 182 | |