315 lines
12 KiB
JavaScript
315 lines
12 KiB
JavaScript
(function() {
|
|
const apiBase = '/api/flexible';
|
|
let state = {
|
|
fileType: '',
|
|
targetTable: '',
|
|
q: '',
|
|
skip: 0,
|
|
limit: 50,
|
|
total: 0,
|
|
hasKeys: [],
|
|
};
|
|
|
|
function q(id) { return document.getElementById(id); }
|
|
|
|
function formatPreviewHtml(obj, term) {
|
|
// Returns sanitized HTML with clickable keys
|
|
try {
|
|
const payload = obj && obj.unmapped && typeof obj.unmapped === 'object' ? obj.unmapped : obj;
|
|
const keys = Object.keys(payload || {}).slice(0, 5);
|
|
const segments = keys.map((k) => {
|
|
const safeKey = window.htmlSanitizer.escape(String(k));
|
|
const valueStr = String(payload[k]).slice(0, 60);
|
|
const valueHtml = term && term.trim().length > 0 ? highlight(valueStr, term) : window.htmlSanitizer.escape(valueStr);
|
|
return `<span class="kv-pair"><button type="button" class="key-link text-primary-700 dark:text-primary-400 hover:underline" data-key="${safeKey}">${safeKey}</button>: ${valueHtml}</span>`;
|
|
});
|
|
return segments.join(', ');
|
|
} catch (_) { return ''; }
|
|
}
|
|
|
|
function escapeRegExp(str) {
|
|
return String(str).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
}
|
|
|
|
function highlight(text, term) {
|
|
if (!term) return window.htmlSanitizer.escape(text);
|
|
const pattern = new RegExp(escapeRegExp(term), 'ig');
|
|
const escaped = window.htmlSanitizer.escape(text);
|
|
// Replace on the escaped string to avoid breaking HTML
|
|
return escaped.replace(pattern, (m) => `<mark>${window.htmlSanitizer.escape(m)}</mark>`);
|
|
}
|
|
|
|
async function loadOptions() {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`${apiBase}/options`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to load options');
|
|
const data = await res.json();
|
|
const fileSel = q('filterFileType');
|
|
const tableSel = q('filterTargetTable');
|
|
// Clear existing except first
|
|
fileSel.length = 1; tableSel.length = 1;
|
|
(data.file_types || []).forEach(v => {
|
|
const opt = document.createElement('option');
|
|
opt.value = v; opt.textContent = v; fileSel.appendChild(opt);
|
|
});
|
|
(data.target_tables || []).forEach(v => {
|
|
const opt = document.createElement('option');
|
|
opt.value = v; opt.textContent = v; tableSel.appendChild(opt);
|
|
});
|
|
} catch (e) {
|
|
alert(window.http.formatAlert(e, 'Error loading options'));
|
|
}
|
|
}
|
|
|
|
async function loadRows() {
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (state.fileType) params.set('file_type', state.fileType);
|
|
if (state.targetTable) params.set('target_table', state.targetTable);
|
|
if (state.q) params.set('q', state.q);
|
|
if (Array.isArray(state.hasKeys)) {
|
|
state.hasKeys.forEach((k) => {
|
|
if (k && String(k).trim().length > 0) params.append('has_keys', String(k).trim());
|
|
});
|
|
}
|
|
params.set('skip', String(state.skip));
|
|
params.set('limit', String(state.limit));
|
|
const res = await window.http.wrappedFetch(`${apiBase}/imports?${params.toString()}`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to load flexible imports');
|
|
const data = await res.json();
|
|
state.total = data.total || 0;
|
|
renderRows(data.items || []);
|
|
renderMeta();
|
|
renderKeyChips();
|
|
} catch (e) {
|
|
alert(window.http.formatAlert(e, 'Error loading flexible imports'));
|
|
}
|
|
}
|
|
|
|
function renderRows(items) {
|
|
const tbody = q('flexibleRows');
|
|
tbody.innerHTML = '';
|
|
items.forEach(item => {
|
|
const tr = document.createElement('tr');
|
|
tr.className = 'hover:bg-neutral-50 dark:hover:bg-neutral-700/40 cursor-pointer';
|
|
tr.innerHTML = `
|
|
<td class="px-3 py-2 whitespace-nowrap">${item.id}</td>
|
|
<td class="px-3 py-2 whitespace-nowrap">${window.htmlSanitizer.escape(item.file_type || '')}</td>
|
|
<td class="px-3 py-2 whitespace-nowrap">${window.htmlSanitizer.escape(item.target_table || '')}</td>
|
|
<td class="px-3 py-2 whitespace-nowrap text-xs text-neutral-500">${window.htmlSanitizer.escape((item.primary_key_field || '') + (item.primary_key_value ? '=' + item.primary_key_value : ''))}</td>
|
|
<td class="px-3 py-2 text-xs previewCell"></td>
|
|
<td class="px-3 py-2 text-right">
|
|
<button class="inline-flex items-center gap-1 text-primary-600 hover:text-primary-700 px-2 py-1 text-xs rounded-md hover:bg-primary-50 dark:hover:bg-primary-900/30" data-action="export" data-id="${item.id}">
|
|
<i class="fa-solid fa-download"></i>
|
|
<span>CSV</span>
|
|
</button>
|
|
</td>
|
|
`;
|
|
// Set sanitized highlighted preview
|
|
const previewCell = tr.querySelector('.previewCell');
|
|
const previewHtml = formatPreviewHtml(item.extra_data || {}, state.q);
|
|
window.setSafeHTML(previewCell, previewHtml);
|
|
// Bind click on keys to add filters
|
|
previewCell.querySelectorAll('.key-link').forEach((btn) => {
|
|
btn.addEventListener('click', (ev) => {
|
|
ev.stopPropagation();
|
|
const key = btn.getAttribute('data-key') || '';
|
|
addKeyFilter(key);
|
|
});
|
|
});
|
|
// Row click opens modal
|
|
tr.addEventListener('click', (ev) => {
|
|
// Ignore clicks on the export button inside the row
|
|
const target = ev.target.closest('button[data-action="export"]');
|
|
if (target) return;
|
|
openDetailModal(item);
|
|
});
|
|
// Export button handler
|
|
tr.querySelector('button[data-action="export"]').addEventListener('click', (ev) => {
|
|
ev.stopPropagation();
|
|
exportSingleRow(item.id);
|
|
});
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function renderMeta() {
|
|
const start = state.total === 0 ? 0 : state.skip + 1;
|
|
const end = Math.min(state.skip + state.limit, state.total);
|
|
q('rowsMeta').textContent = `Showing ${start}-${end} of ${state.total}`;
|
|
q('prevPageBtn').disabled = state.skip === 0;
|
|
q('nextPageBtn').disabled = state.skip + state.limit >= state.total;
|
|
}
|
|
|
|
function applyFilters() {
|
|
state.fileType = q('filterFileType').value || '';
|
|
state.targetTable = q('filterTargetTable').value || '';
|
|
state.q = (q('quickSearch').value || '').trim();
|
|
state.skip = 0;
|
|
loadRows();
|
|
}
|
|
|
|
function addKeyFilter(key) {
|
|
const k = String(key || '').trim();
|
|
if (!k) return;
|
|
if (!Array.isArray(state.hasKeys)) state.hasKeys = [];
|
|
if (!state.hasKeys.includes(k)) {
|
|
state.hasKeys.push(k);
|
|
state.skip = 0;
|
|
loadRows();
|
|
}
|
|
}
|
|
|
|
function removeKeyFilter(key) {
|
|
const k = String(key || '').trim();
|
|
if (!k) return;
|
|
state.hasKeys = (state.hasKeys || []).filter((x) => x !== k);
|
|
state.skip = 0;
|
|
loadRows();
|
|
}
|
|
|
|
function clearKeyFilters() {
|
|
if ((state.hasKeys || []).length === 0) return;
|
|
state.hasKeys = [];
|
|
state.skip = 0;
|
|
loadRows();
|
|
}
|
|
|
|
function renderKeyChips() {
|
|
const container = q('keyChipsContainer');
|
|
const chipsWrap = q('keyChips');
|
|
const clearBtn = q('clearKeyChips');
|
|
if (!container || !chipsWrap) return;
|
|
chipsWrap.innerHTML = '';
|
|
const keys = state.hasKeys || [];
|
|
if (keys.length === 0) {
|
|
container.classList.add('hidden');
|
|
} else {
|
|
container.classList.remove('hidden');
|
|
keys.forEach((k) => {
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-primary-50 text-primary-700 border border-primary-200 hover:bg-primary-100 dark:bg-primary-900/30 dark:text-primary-200 dark:border-primary-800';
|
|
btn.setAttribute('data-chip-key', k);
|
|
btn.innerHTML = `<span class="font-mono">${window.htmlSanitizer.escape(k)}</span> <i class="fa-solid fa-xmark"></i>`;
|
|
btn.addEventListener('click', (ev) => {
|
|
ev.stopPropagation();
|
|
removeKeyFilter(k);
|
|
});
|
|
chipsWrap.appendChild(btn);
|
|
});
|
|
}
|
|
if (clearBtn) {
|
|
clearBtn.onclick = (ev) => { ev.preventDefault(); clearKeyFilters(); };
|
|
}
|
|
}
|
|
|
|
async function exportCsv() {
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (state.fileType) params.set('file_type', state.fileType);
|
|
if (state.targetTable) params.set('target_table', state.targetTable);
|
|
if (Array.isArray(state.hasKeys)) {
|
|
state.hasKeys.forEach((k) => {
|
|
if (k && String(k).trim().length > 0) params.append('has_keys', String(k).trim());
|
|
});
|
|
}
|
|
const url = `${apiBase}/export?${params.toString()}`;
|
|
const res = await window.http.wrappedFetch(url);
|
|
if (!res.ok) throw await window.http.toError(res, 'Export failed');
|
|
const blob = await res.blob();
|
|
const a = document.createElement('a');
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
a.href = objectUrl;
|
|
a.download = 'flexible_unmapped.csv';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
|
} catch (e) {
|
|
alert(window.http.formatAlert(e, 'Error exporting CSV'));
|
|
}
|
|
}
|
|
|
|
async function exportSingleRow(rowId) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`${apiBase}/export/${rowId}`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Export failed');
|
|
const blob = await res.blob();
|
|
const a = document.createElement('a');
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
a.href = objectUrl;
|
|
a.download = `flexible_row_${rowId}.csv`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
|
} catch (e) {
|
|
alert(window.http.formatAlert(e, 'Error exporting row CSV'));
|
|
}
|
|
}
|
|
|
|
function openDetailModal(item) {
|
|
// Populate fields
|
|
q('detailRowId').textContent = `#${item.id}`;
|
|
q('detailFileType').textContent = item.file_type || '';
|
|
q('detailTargetTable').textContent = item.target_table || '';
|
|
q('detailPkField').textContent = item.primary_key_field || '';
|
|
q('detailPkValue').textContent = item.primary_key_value || '';
|
|
try {
|
|
const pretty = JSON.stringify(item.extra_data || {}, null, 2);
|
|
q('detailJson').textContent = pretty;
|
|
} catch (_) {
|
|
q('detailJson').textContent = '';
|
|
}
|
|
const exportBtn = q('detailExportBtn');
|
|
exportBtn.onclick = () => exportSingleRow(item.id);
|
|
openModal('flexibleDetailModal');
|
|
}
|
|
|
|
function bindEvents() {
|
|
q('applyFiltersBtn').addEventListener('click', applyFilters);
|
|
q('exportCsvBtn').addEventListener('click', exportCsv);
|
|
const clearBtn = q('clearKeyChips');
|
|
if (clearBtn) clearBtn.addEventListener('click', (ev) => { ev.preventDefault(); clearKeyFilters(); });
|
|
// Quick search with debounce
|
|
const searchInput = q('quickSearch');
|
|
let searchTimer = null;
|
|
searchInput.addEventListener('input', () => {
|
|
const value = searchInput.value || '';
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(() => {
|
|
state.q = value.trim();
|
|
state.skip = 0;
|
|
loadRows();
|
|
}, 300);
|
|
});
|
|
searchInput.addEventListener('keydown', (ev) => {
|
|
if (ev.key === 'Enter') {
|
|
ev.preventDefault();
|
|
clearTimeout(searchTimer);
|
|
state.q = (searchInput.value || '').trim();
|
|
state.skip = 0;
|
|
loadRows();
|
|
}
|
|
});
|
|
q('prevPageBtn').addEventListener('click', () => {
|
|
state.skip = Math.max(0, state.skip - state.limit);
|
|
loadRows();
|
|
});
|
|
q('nextPageBtn').addEventListener('click', () => {
|
|
if (state.skip + state.limit < state.total) {
|
|
state.skip += state.limit;
|
|
loadRows();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
bindEvents();
|
|
loadOptions().then(loadRows);
|
|
});
|
|
})();
|
|
|
|
|