883 lines
39 KiB
HTML
883 lines
39 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Data Import - Delphi Database{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
|
|
<i class="fa-solid fa-upload text-lg"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Data Import</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button id="refreshStatusBtn" class="bg-info-600 text-white hover:bg-info-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center gap-2">
|
|
<i class="fa-solid fa-rotate-right"></i>
|
|
<span>Refresh Status</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Status Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-circle-info"></i>
|
|
<span>Current Database Status</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="importStatus">
|
|
<div class="flex items-center justify-center py-4 text-neutral-500 dark:text-neutral-400">
|
|
<i class="fa-solid fa-rotate-right animate-spin text-xl mr-2"></i>
|
|
<p>Loading import status...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSV File Upload Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div class="flex items-center justify-between">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-regular fa-file-arrow-up"></i>
|
|
<span>Upload CSV Files</span>
|
|
</h5>
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Mode:</label>
|
|
<select id="uploadMode" class="px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded text-sm">
|
|
<option value="single">Single File</option>
|
|
<option value="batch">Batch Upload</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- Single File Upload Form -->
|
|
<form id="importForm" enctype="multipart/form-data" class="single-upload">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
|
<div class="md:col-span-4">
|
|
<label for="fileType" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Data Type *</label>
|
|
<select class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="fileType" name="fileType" required>
|
|
<option value="">Select data type...</option>
|
|
</select>
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1" id="fileTypeDescription"></div>
|
|
</div>
|
|
<div class="md:col-span-6">
|
|
<label for="csvFile" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">CSV File *</label>
|
|
<input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="csvFile" name="csvFile" accept=".csv" required>
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select the CSV file to import</div>
|
|
</div>
|
|
<div class="md:col-span-2 flex items-end">
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="replaceExisting" name="replaceExisting">
|
|
<span class="text-sm">Replace existing</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="flex items-center gap-3">
|
|
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center gap-2" id="validateBtn">
|
|
<i class="fa-regular fa-circle-check"></i>
|
|
<span>Validate File</span>
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="importBtn">
|
|
<i class="fa-solid fa-upload"></i>
|
|
<span>Import Data</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Batch Upload Form -->
|
|
<form id="batchImportForm" enctype="multipart/form-data" class="batch-upload hidden">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="batchFiles" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Select Multiple CSV Files *</label>
|
|
<input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="batchFiles" name="batchFiles" accept=".csv" multiple required>
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select multiple CSV files (max 20). Files will be imported in optimal dependency order.</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="inline-flex items-center gap-2">
|
|
<input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="batchReplaceExisting" name="batchReplaceExisting">
|
|
<span class="text-sm">Replace existing data</span>
|
|
</label>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="text-sm text-neutral-600 dark:text-neutral-400" id="selectedFilesCount">0 files selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="selectedFilesList" class="hidden">
|
|
<h6 class="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Selected Files (Import Order):</h6>
|
|
<div class="bg-neutral-50 dark:bg-neutral-900 rounded-lg p-3 max-h-32 overflow-y-auto" id="filesList"></div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button type="submit" class="px-4 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="batchImportBtn">
|
|
<i class="fa-solid fa-layer-group"></i>
|
|
<span>Batch Import</span>
|
|
</button>
|
|
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center gap-2" id="clearBatchBtn">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
<span>Clear Selection</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validation Results Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="validationPanel">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-clipboard-check"></i>
|
|
<span>File Validation Results</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6" id="validationResults">
|
|
<!-- Validation results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Progress Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="progressPanel">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-hourglass-half"></i>
|
|
<span>Import Progress</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="bg-neutral-200 dark:bg-neutral-700 rounded-full h-2 mb-3 overflow-hidden">
|
|
<div class="bg-primary-600 h-full rounded-full transition-all duration-300" style="width: 0%" id="progressBar"></div>
|
|
</div>
|
|
<div id="progressStatus" class="text-sm text-neutral-600 dark:text-neutral-400">Ready to import...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Results Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="resultsPanel">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
<span>Import Results</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6" id="importResults">
|
|
<!-- Import results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batch Results Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="batchResultsPanel">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-layer-group"></i>
|
|
<span>Batch Import Results</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6" id="batchResults">
|
|
<!-- Batch import results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Management Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-database"></i>
|
|
<span>Data Management</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h6 class="text-base font-semibold mb-2">Clear Table Data</h6>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400 mb-3">Remove all records from a specific table (cannot be undone)</p>
|
|
<div class="flex gap-3">
|
|
<select class="flex-grow px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="clearTableType">
|
|
<option value="">Select table to clear...</option>
|
|
</select>
|
|
<button class="px-4 py-3 bg-danger-600 text-white hover:bg-danger-700 rounded-lg transition-colors duration-200 flex items-center gap-2 whitespace-nowrap" id="clearTableBtn">
|
|
<i class="fa-solid fa-trash"></i>
|
|
<span>Clear Table</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-base font-semibold mb-2">Quick Actions</h6>
|
|
<div class="space-y-3">
|
|
<button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="backupBtn">
|
|
<i class="fa-solid fa-download"></i>
|
|
<span>Download Backup</span>
|
|
</button>
|
|
<button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="viewLogsBtn">
|
|
<i class="fa-regular fa-file-lines"></i>
|
|
<span>View Import Logs</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Import functionality
|
|
let availableFiles = {};
|
|
let importInProgress = false;
|
|
|
|
// Helper function for authenticated API calls
|
|
function getAuthHeaders() {
|
|
const token = localStorage.getItem('auth_token');
|
|
return {
|
|
'Authorization': `Bearer ${token}`
|
|
};
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication first
|
|
const token = localStorage.getItem('auth_token');
|
|
if (!token) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
loadAvailableFiles();
|
|
loadImportStatus();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
// Form submission
|
|
document.getElementById('importForm').addEventListener('submit', handleImport);
|
|
document.getElementById('batchImportForm').addEventListener('submit', handleBatchImport);
|
|
|
|
// Upload mode switching
|
|
document.getElementById('uploadMode').addEventListener('change', switchUploadMode);
|
|
|
|
// Validation button
|
|
document.getElementById('validateBtn').addEventListener('click', validateFile);
|
|
|
|
// File type selection
|
|
document.getElementById('fileType').addEventListener('change', updateFileTypeDescription);
|
|
|
|
// Batch file selection
|
|
document.getElementById('batchFiles').addEventListener('change', updateSelectedFiles);
|
|
document.getElementById('clearBatchBtn').addEventListener('click', clearBatchSelection);
|
|
|
|
// Refresh status
|
|
document.getElementById('refreshStatusBtn').addEventListener('click', loadImportStatus);
|
|
|
|
// Clear table
|
|
document.getElementById('clearTableBtn').addEventListener('click', clearTable);
|
|
|
|
// Other buttons
|
|
document.getElementById('backupBtn').addEventListener('click', downloadBackup);
|
|
document.getElementById('viewLogsBtn').addEventListener('click', viewLogs);
|
|
}
|
|
|
|
async function loadAvailableFiles() {
|
|
try {
|
|
const response = await fetch('/api/import/available-files', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
console.error('Authentication error - redirecting to login');
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
availableFiles = data;
|
|
|
|
// Populate file type dropdown
|
|
const fileTypeSelect = document.getElementById('fileType');
|
|
const clearTableSelect = document.getElementById('clearTableType');
|
|
|
|
fileTypeSelect.innerHTML = '<option value="">Select data type...</option>';
|
|
clearTableSelect.innerHTML = '<option value="">Select table to clear...</option>';
|
|
|
|
data.available_files.forEach(fileType => {
|
|
const description = data.descriptions[fileType] || fileType;
|
|
|
|
const option1 = document.createElement('option');
|
|
option1.value = fileType;
|
|
option1.textContent = `${fileType} - ${description}`;
|
|
fileTypeSelect.appendChild(option1);
|
|
|
|
const option2 = document.createElement('option');
|
|
option2.value = fileType;
|
|
option2.textContent = `${fileType} - ${description}`;
|
|
clearTableSelect.appendChild(option2);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Error loading available files:', error);
|
|
showAlert('Error loading available file types: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function loadImportStatus() {
|
|
try {
|
|
const response = await fetch('/api/import/status', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
console.error('Authentication error - redirecting to login');
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const status = await response.json();
|
|
displayImportStatus(status);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading import status:', error);
|
|
document.getElementById('importStatus').innerHTML =
|
|
'<div class="p-4 bg-danger-100 dark:bg-danger-900/30 text-danger-700 dark:text-danger-300 rounded-lg">Error loading import status: ' + error.message + '</div>';
|
|
}
|
|
}
|
|
|
|
function displayImportStatus(status) {
|
|
const container = document.getElementById('importStatus');
|
|
|
|
let html = '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">';
|
|
let totalRecords = 0;
|
|
|
|
Object.entries(status).forEach(([fileType, info]) => {
|
|
totalRecords += info.record_count || 0;
|
|
|
|
const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'neutral');
|
|
const statusBg = info.error ? 'bg-danger-100 dark:bg-danger-900/30 border-danger-200 dark:border-danger-800' :
|
|
(info.record_count > 0 ? 'bg-success-100 dark:bg-success-900/30 border-success-200 dark:border-success-800' :
|
|
'bg-neutral-100 dark:bg-neutral-900/30 border-neutral-200 dark:border-neutral-800');
|
|
const statusIcon = info.error ? 'triangle-exclamation text-danger-600' :
|
|
(info.record_count > 0 ? 'circle-check text-success-600' : 'circle text-neutral-600');
|
|
|
|
html += `
|
|
<div class="bg-white dark:bg-neutral-800 border ${statusBg} rounded-lg p-4">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h6 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100">${fileType}</h6>
|
|
<p class="text-xs text-neutral-600 dark:text-neutral-400">${info.table_name}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<i class="fa-solid fa-${statusIcon} text-lg"></i>
|
|
<p class="font-bold text-sm text-neutral-900 dark:text-neutral-100 mt-1">${info.record_count || 0}</p>
|
|
</div>
|
|
</div>
|
|
${info.error ? `<p class="text-xs text-danger-600 dark:text-danger-400 mt-2">${info.error}</p>` : ''}
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
html += `<div class="mt-4 text-center">
|
|
<span class="font-medium text-neutral-900 dark:text-neutral-100">Total Records: ${totalRecords.toLocaleString()}</span>
|
|
</div>`;
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function updateFileTypeDescription() {
|
|
const fileType = document.getElementById('fileType').value;
|
|
const description = availableFiles.descriptions && availableFiles.descriptions[fileType];
|
|
document.getElementById('fileTypeDescription').textContent = description || '';
|
|
}
|
|
|
|
async function validateFile() {
|
|
const fileType = document.getElementById('fileType').value;
|
|
const fileInput = document.getElementById('csvFile');
|
|
|
|
if (!fileType || !fileInput.files[0]) {
|
|
showAlert('Please select both data type and CSV file', 'warning');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
|
|
try {
|
|
showProgress(true, 'Validating file...');
|
|
|
|
const response = await fetch(`/api/import/validate/${fileType}`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Validation failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
displayValidationResults(result);
|
|
|
|
} catch (error) {
|
|
console.error('Validation error:', error);
|
|
showAlert('Validation failed: ' + error.message, 'danger');
|
|
} finally {
|
|
showProgress(false);
|
|
}
|
|
}
|
|
|
|
function displayValidationResults(result) {
|
|
const panel = document.getElementById('validationPanel');
|
|
const container = document.getElementById('validationResults');
|
|
|
|
let html = '';
|
|
|
|
// Overall status
|
|
const statusClass = result.valid ? 'success' : 'danger';
|
|
const statusIcon = result.valid ? 'circle-check text-success-600' : 'triangle-exclamation text-danger-600';
|
|
|
|
html += `
|
|
<div class="p-4 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg mb-4">
|
|
<i class="fa-solid fa-${statusIcon} mr-2"></i>
|
|
<span class="font-medium">File validation ${result.valid ? 'passed' : 'failed'}</span>
|
|
</div>
|
|
`;
|
|
|
|
// Headers validation
|
|
html += '<h6 class="text-sm font-semibold mb-2">Column Headers</h6>';
|
|
if (result.headers.missing.length > 0) {
|
|
html += `<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg mb-2">
|
|
<strong class="text-warning-700 dark:text-warning-300">Missing columns:</strong> ${result.headers.missing.join(', ')}
|
|
</div>`;
|
|
}
|
|
if (result.headers.extra.length > 0) {
|
|
html += `<div class="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg mb-2">
|
|
<strong class="text-info-700 dark:text-info-300">Extra columns:</strong> ${result.headers.extra.join(', ')}
|
|
</div>`;
|
|
}
|
|
if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
|
|
html += '<div class="p-3 bg-success-100 dark:bg-success-900/30 rounded-lg mb-2">All expected columns found</div>';
|
|
}
|
|
|
|
// Sample data
|
|
if (result.sample_data && result.sample_data.length > 0) {
|
|
html += '<h6 class="text-sm font-semibold mb-2 mt-4">Sample Data (First 10 rows)</h6>';
|
|
html += '<div class="overflow-x-auto"><table class="w-full text-sm text-neutral-900 dark:text-neutral-100">';
|
|
html += '<thead><tr class="bg-neutral-100 dark:bg-neutral-700">';
|
|
Object.keys(result.sample_data[0]).forEach(header => {
|
|
html += `<th class="px-3 py-2 text-left font-medium">${header}</th>`;
|
|
});
|
|
html += '</tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">';
|
|
|
|
result.sample_data.forEach(row => {
|
|
html += '<tr>';
|
|
Object.values(row).forEach(value => {
|
|
html += `<td class="px-3 py-2">${value || ''}</td>`;
|
|
});
|
|
html += '</tr>';
|
|
});
|
|
html += '</tbody></table></div>';
|
|
}
|
|
|
|
// Validation errors
|
|
if (result.validation_errors && result.validation_errors.length > 0) {
|
|
html += '<h6 class="text-sm font-semibold mb-2 mt-4">Data Issues Found</h6>';
|
|
html += '<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg">';
|
|
result.validation_errors.forEach(error => {
|
|
html += `<div class="text-sm"><strong>Row ${error.row}, Field "${error.field}":</strong> ${error.error}</div>`;
|
|
});
|
|
if (result.total_errors > result.validation_errors.length) {
|
|
html += `<div class="mt-2 text-sm font-medium">... and ${result.total_errors - result.validation_errors.length} more errors</div>`;
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
panel.classList.remove('hidden');
|
|
}
|
|
|
|
async function handleImport(event) {
|
|
event.preventDefault();
|
|
|
|
if (importInProgress) {
|
|
showAlert('Import already in progress', 'warning');
|
|
return;
|
|
}
|
|
|
|
const fileType = document.getElementById('fileType').value;
|
|
const fileInput = document.getElementById('csvFile');
|
|
const replaceExisting = document.getElementById('replaceExisting').checked;
|
|
|
|
if (!fileType || !fileInput.files[0]) {
|
|
showAlert('Please select both data type and CSV file', 'warning');
|
|
return;
|
|
}
|
|
|
|
importInProgress = true;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
formData.append('replace_existing', replaceExisting);
|
|
|
|
try {
|
|
showProgress(true, 'Importing data...');
|
|
|
|
const response = await fetch(`/api/import/upload/${fileType}`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Import failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
displayImportResults(result);
|
|
|
|
// Refresh status after successful import
|
|
await loadImportStatus();
|
|
|
|
// Reset form
|
|
document.getElementById('importForm').reset();
|
|
|
|
} catch (error) {
|
|
console.error('Import error:', error);
|
|
showAlert('Import failed: ' + error.message, 'danger');
|
|
} finally {
|
|
importInProgress = false;
|
|
showProgress(false);
|
|
}
|
|
}
|
|
|
|
function displayImportResults(result) {
|
|
const panel = document.getElementById('resultsPanel');
|
|
const container = document.getElementById('importResults');
|
|
|
|
const successClass = result.errors && result.errors.length > 0 ? 'warning' : 'success';
|
|
|
|
let html = `
|
|
<div class="p-4 bg-${successClass}-100 dark:bg-${successClass}-900/30 rounded-lg mb-4">
|
|
<h6 class="font-semibold flex items-center gap-2"><i class="fa-regular fa-circle-check"></i> Import Completed</h6>
|
|
<div class="text-sm mt-2 space-y-1">
|
|
<p><strong>File Type:</strong> ${result.file_type}</p>
|
|
<p><strong>Records Imported:</strong> ${result.imported_count}</p>
|
|
<p><strong>Errors:</strong> ${result.total_errors || 0}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
if (result.errors && result.errors.length > 0) {
|
|
html += '<h6 class="text-sm font-semibold mb-2">Import Errors</h6>';
|
|
html += '<div class="p-3 bg-danger-100 dark:bg-danger-900/30 rounded-lg">';
|
|
result.errors.forEach(error => {
|
|
html += `<div class="text-sm"><strong>Row ${error.row}:</strong> ${error.error}</div>`;
|
|
});
|
|
if (result.total_errors > result.errors.length) {
|
|
html += `<div class="mt-2 text-sm font-medium">... and ${result.total_errors - result.errors.length} more errors</div>`;
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
panel.classList.remove('hidden');
|
|
}
|
|
|
|
function showProgress(show, message = '') {
|
|
const panel = document.getElementById('progressPanel');
|
|
const status = document.getElementById('progressStatus');
|
|
const bar = document.getElementById('progressBar');
|
|
|
|
if (show) {
|
|
status.textContent = message;
|
|
bar.style.width = '100%';
|
|
panel.classList.remove('hidden');
|
|
} else {
|
|
panel.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
async function clearTable() {
|
|
const fileType = document.getElementById('clearTableType').value;
|
|
|
|
if (!fileType) {
|
|
showAlert('Please select a table to clear', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Are you sure you want to clear all data from ${fileType}? This action cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/import/clear/${fileType}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Clear operation failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
showAlert(`Successfully cleared ${result.deleted_count} records from ${result.table_name}`, 'success');
|
|
|
|
// Refresh status
|
|
await loadImportStatus();
|
|
|
|
} catch (error) {
|
|
console.error('Clear table error:', error);
|
|
showAlert('Clear operation failed: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function downloadBackup() {
|
|
showAlert('Backup functionality coming soon', 'info');
|
|
}
|
|
|
|
function viewLogs() {
|
|
showAlert('Import logs functionality coming soon', 'info');
|
|
}
|
|
|
|
function switchUploadMode() {
|
|
const mode = document.getElementById('uploadMode').value;
|
|
const singleForm = document.querySelector('.single-upload');
|
|
const batchForm = document.querySelector('.batch-upload');
|
|
|
|
if (mode === 'batch') {
|
|
singleForm.classList.add('hidden');
|
|
batchForm.classList.remove('hidden');
|
|
} else {
|
|
singleForm.classList.remove('hidden');
|
|
batchForm.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function updateSelectedFiles() {
|
|
const fileInput = document.getElementById('batchFiles');
|
|
const countSpan = document.getElementById('selectedFilesCount');
|
|
const filesList = document.getElementById('selectedFilesList');
|
|
const filesListContent = document.getElementById('filesList');
|
|
|
|
const files = Array.from(fileInput.files);
|
|
countSpan.textContent = `${files.length} files selected`;
|
|
|
|
if (files.length > 0) {
|
|
// Define import order
|
|
const importOrder = [
|
|
"STATES.csv", "GRUPLKUP.csv", "EMPLOYEE.csv", "FILETYPE.csv", "FILESTAT.csv",
|
|
"TRNSTYPE.csv", "TRNSLKUP.csv", "FOOTERS.csv", "SETUP.csv", "PRINTERS.csv",
|
|
"ROLODEX.csv", "PHONE.csv", "FILES.csv", "LEDGER.csv", "TRNSACTN.csv",
|
|
"QDROS.csv", "PENSIONS.csv", "PLANINFO.csv", "PAYMENTS.csv", "DEPOSITS.csv",
|
|
"FILENOTS.csv", "FORM_INX.csv", "FORM_LST.csv", "FVARLKUP.csv", "RVARLKUP.csv"
|
|
];
|
|
|
|
// Sort files by import order
|
|
const orderedFiles = [];
|
|
const fileMap = {};
|
|
files.forEach(file => fileMap[file.name] = file);
|
|
|
|
importOrder.forEach(fileName => {
|
|
if (fileMap[fileName]) {
|
|
orderedFiles.push(fileMap[fileName]);
|
|
delete fileMap[fileName];
|
|
}
|
|
});
|
|
|
|
// Add remaining files
|
|
Object.values(fileMap).forEach(file => orderedFiles.push(file));
|
|
|
|
// Display ordered list
|
|
let html = '<div class="space-y-1">';
|
|
orderedFiles.forEach((file, index) => {
|
|
const isSupported = availableFiles.available_files && availableFiles.available_files.includes(file.name);
|
|
const statusClass = isSupported ? 'text-success-600 dark:text-success-400' : 'text-warning-600 dark:text-warning-400';
|
|
const statusIcon = isSupported ? 'circle-check' : 'triangle-exclamation';
|
|
|
|
html += `
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span class="text-neutral-500 dark:text-neutral-400 font-mono">${(index + 1).toString().padStart(2, '0')}.</span>
|
|
<i class="fa-solid fa-${statusIcon} ${statusClass}"></i>
|
|
<span class="text-neutral-900 dark:text-neutral-100">${file.name}</span>
|
|
<span class="text-xs text-neutral-500 dark:text-neutral-400">(${(file.size / 1024).toFixed(1)}KB)</span>
|
|
</div>
|
|
`;
|
|
});
|
|
html += '</div>';
|
|
|
|
filesListContent.innerHTML = html;
|
|
filesList.classList.remove('hidden');
|
|
} else {
|
|
filesList.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function clearBatchSelection() {
|
|
document.getElementById('batchFiles').value = '';
|
|
updateSelectedFiles();
|
|
}
|
|
|
|
async function handleBatchImport(event) {
|
|
event.preventDefault();
|
|
|
|
if (importInProgress) {
|
|
showAlert('Import already in progress', 'warning');
|
|
return;
|
|
}
|
|
|
|
const fileInput = document.getElementById('batchFiles');
|
|
const replaceExisting = document.getElementById('batchReplaceExisting').checked;
|
|
|
|
if (!fileInput.files || fileInput.files.length === 0) {
|
|
showAlert('Please select at least one CSV file', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (fileInput.files.length > 20) {
|
|
showAlert('Maximum 20 files allowed per batch', 'warning');
|
|
return;
|
|
}
|
|
|
|
importInProgress = true;
|
|
|
|
const formData = new FormData();
|
|
for (let file of fileInput.files) {
|
|
formData.append('files', file);
|
|
}
|
|
formData.append('replace_existing', replaceExisting);
|
|
|
|
try {
|
|
showProgress(true, 'Processing batch import...');
|
|
|
|
const response = await fetch('/api/import/batch-upload', {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Batch import failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
displayBatchResults(result);
|
|
|
|
// Refresh status after successful import
|
|
await loadImportStatus();
|
|
|
|
// Reset form
|
|
document.getElementById('batchImportForm').reset();
|
|
updateSelectedFiles();
|
|
|
|
} catch (error) {
|
|
console.error('Batch import error:', error);
|
|
showAlert('Batch import failed: ' + error.message, 'danger');
|
|
} finally {
|
|
importInProgress = false;
|
|
showProgress(false);
|
|
}
|
|
}
|
|
|
|
function displayBatchResults(result) {
|
|
const panel = document.getElementById('batchResultsPanel');
|
|
const container = document.getElementById('batchResults');
|
|
|
|
const summary = result.summary;
|
|
const successRate = ((summary.total_imported / (summary.total_imported + summary.total_errors)) * 100) || 0;
|
|
|
|
let html = `
|
|
<div class="p-4 bg-info-100 dark:bg-info-900/30 rounded-lg mb-4">
|
|
<h6 class="font-semibold flex items-center gap-2"><i class="fa-solid fa-layer-group"></i> Batch Import Completed</h6>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mt-3">
|
|
<div>
|
|
<strong>Total Files:</strong> ${summary.total_files}
|
|
</div>
|
|
<div>
|
|
<strong>Successful:</strong> <span class="text-success-600 dark:text-success-400">${summary.successful_files}</span>
|
|
</div>
|
|
<div>
|
|
<strong>Failed:</strong> <span class="text-danger-600 dark:text-danger-400">${summary.failed_files}</span>
|
|
</div>
|
|
<div>
|
|
<strong>Total Records:</strong> ${summary.total_imported.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Individual file results
|
|
html += '<h6 class="text-sm font-semibold mb-3">File Import Details</h6>';
|
|
html += '<div class="space-y-2">';
|
|
|
|
result.batch_results.forEach(fileResult => {
|
|
let statusClass, statusIcon;
|
|
|
|
if (fileResult.status === 'success') {
|
|
statusClass = 'success';
|
|
statusIcon = 'circle-check';
|
|
} else if (fileResult.status === 'completed_with_errors') {
|
|
statusClass = 'warning';
|
|
statusIcon = 'triangle-exclamation';
|
|
} else if (fileResult.status === 'skipped') {
|
|
statusClass = 'info';
|
|
statusIcon = 'circle-info';
|
|
} else {
|
|
statusClass = 'danger';
|
|
statusIcon = 'circle-xmark';
|
|
}
|
|
|
|
html += `
|
|
<div class="p-3 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fa-solid fa-${statusIcon} text-${statusClass}-600 dark:text-${statusClass}-400"></i>
|
|
<strong class="text-sm">${fileResult.file_type}</strong>
|
|
</div>
|
|
<div class="text-right text-sm">
|
|
${fileResult.imported_count ? `<span class="text-success-600 dark:text-success-400">${fileResult.imported_count} imported</span>` : ''}
|
|
${fileResult.errors ? `<span class="text-danger-600 dark:text-danger-400 ml-2">${fileResult.errors} errors</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">${fileResult.message}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
panel.classList.remove('hidden');
|
|
}
|
|
|
|
function showAlert(message, type = 'info') {
|
|
if (window.alerts && typeof window.alerts.show === 'function') {
|
|
window.alerts.show(message, type);
|
|
} else if (window.showNotification) {
|
|
window.showNotification(message, type);
|
|
} else {
|
|
alert(String(message));
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |