mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-18 12:10:15 +00:00
Add admin Bulk Import feature
Introduce a Bulk Import feature for admins to scan server folders, match discovered audiobook folders against Audible, review matches, and queue batch imports. What changed: - Added documentation: documentation/features/bulk-import.md and TABLEOFCONTENTS update. - Backend: SSE scan endpoint (POST /api/admin/bulk-import/scan) streams discovery and matching events; execute endpoint (POST /api/admin/bulk-import/execute) validates paths, creates/resolves audiobook & request records, and queues organize_files jobs. Both endpoints enforce admin-only access and validate allowed root directories (download_dir, media_dir, /bookdrop). - Frontend: Modal wizard and steps for folder selection, scan progress, and match review (BulkImportWizard + ScanFolderStep, ScanProgressStep, MatchReviewStep + shared types). - Utilities: bulk-import-scanner for folder discovery and ffprobe metadata extraction; shared types for scanned books/events. - UI: Added Bulk Import quick action to admin dashboard (src/app/admin/page.tsx). Key details: - Audible searches are rate-limited (≈1.5s) and matching results include library/request status checks. - Reuses existing organize_files job queue and manual-import pipeline; no new database tables introduced (state is ephemeral during the wizard). - Includes error handling, path normalization, and security checks for allowed directories. This commit wires frontend, backend, and docs together to provide an admin-only multi-step bulk import workflow.
This commit is contained in:
kikootwo
@@ -0,0 +1,348 @@
|
||||
/**
|
||||
* Component: Bulk Import Wizard
|
||||
* Documentation: documentation/features/bulk-import.md
|
||||
*
|
||||
* Multi-step modal wizard for bulk importing audiobooks from server folders.
|
||||
* Step 1: Select root folder to scan.
|
||||
* Step 2: Scanning/matching progress.
|
||||
* Step 3: Review matches and start import.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { XMarkIcon, FolderArrowDownIcon } from '@heroicons/react/24/outline';
|
||||
import { ScanFolderStep } from './bulk-import/ScanFolderStep';
|
||||
import { ScanProgressStep } from './bulk-import/ScanProgressStep';
|
||||
import { MatchReviewStep } from './bulk-import/MatchReviewStep';
|
||||
import { WizardStep, ScannedBook, ScanProgressEvent, MatchingProgressEvent } from './bulk-import/types';
|
||||
import { fetchWithAuth } from '@/lib/utils/api';
|
||||
|
||||
interface BulkImportWizardProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const STEP_LABELS: Record<WizardStep, string> = {
|
||||
select_folder: 'Select Folder',
|
||||
scanning: 'Scanning',
|
||||
review: 'Review & Import',
|
||||
};
|
||||
|
||||
const STEP_ORDER: WizardStep[] = ['select_folder', 'scanning', 'review'];
|
||||
|
||||
export function BulkImportWizard({ isOpen, onClose }: BulkImportWizardProps) {
|
||||
const [step, setStep] = useState<WizardStep>('select_folder');
|
||||
const [selectedRootPath, setSelectedRootPath] = useState<string | null>(null);
|
||||
|
||||
// Scanning state
|
||||
const [scanProgress, setScanProgress] = useState<ScanProgressEvent | null>(null);
|
||||
const [matchingProgress, setMatchingProgress] = useState<MatchingProgressEvent | null>(null);
|
||||
const [scanPhase, setScanPhase] = useState<'discovering' | 'matching' | 'idle'>('idle');
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
// Results state
|
||||
const [scannedBooks, setScannedBooks] = useState<ScannedBook[]>([]);
|
||||
const [scanError, setScanError] = useState<string | null>(null);
|
||||
|
||||
// Import state
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [importResults, setImportResults] = useState<any>(null);
|
||||
|
||||
const resetWizard = useCallback(() => {
|
||||
setStep('select_folder');
|
||||
setSelectedRootPath(null);
|
||||
setScanProgress(null);
|
||||
setMatchingProgress(null);
|
||||
setScanPhase('idle');
|
||||
setScannedBooks([]);
|
||||
setScanError(null);
|
||||
setIsImporting(false);
|
||||
setImportResults(null);
|
||||
if (abortRef.current) {
|
||||
abortRef.current.abort();
|
||||
abortRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (abortRef.current) {
|
||||
abortRef.current.abort();
|
||||
abortRef.current = null;
|
||||
}
|
||||
resetWizard();
|
||||
onClose();
|
||||
}, [onClose, resetWizard]);
|
||||
|
||||
const handleFolderSelected = useCallback(async (rootPath: string) => {
|
||||
setSelectedRootPath(rootPath);
|
||||
setStep('scanning');
|
||||
setScanPhase('discovering');
|
||||
setScanError(null);
|
||||
setScannedBooks([]);
|
||||
|
||||
const controller = new AbortController();
|
||||
abortRef.current = controller;
|
||||
|
||||
try {
|
||||
const response = await fetchWithAuth('/api/admin/bulk-import/scan', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rootPath }),
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errData = await response.json().catch(() => ({ error: 'Scan failed' }));
|
||||
throw new Error(errData.error || 'Scan failed');
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
if (!reader) throw new Error('No response stream');
|
||||
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let eventType = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
|
||||
// Parse SSE events from buffer
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('event: ')) {
|
||||
eventType = line.slice(7).trim();
|
||||
} else if (line.startsWith('data: ') && eventType) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
handleSSEEvent(eventType, data);
|
||||
} catch {
|
||||
/* ignore parse errors */
|
||||
}
|
||||
eventType = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (controller.signal.aborted) return;
|
||||
setScanError(error instanceof Error ? error.message : 'Scan failed');
|
||||
setScanPhase('idle');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSSEEvent = useCallback((event: string, data: any) => {
|
||||
switch (event) {
|
||||
case 'progress':
|
||||
setScanProgress(data);
|
||||
break;
|
||||
|
||||
case 'discovery_complete':
|
||||
setScanPhase('matching');
|
||||
break;
|
||||
|
||||
case 'matching':
|
||||
setMatchingProgress(data);
|
||||
break;
|
||||
|
||||
case 'book_matched': {
|
||||
const book: ScannedBook = {
|
||||
...data,
|
||||
skipped: data.inLibrary || data.hasActiveRequest || data.match === null,
|
||||
};
|
||||
setScannedBooks((prev) => [...prev, book]);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'complete':
|
||||
setScanPhase('idle');
|
||||
setStep('review');
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
setScanError(data.message || 'Scan failed');
|
||||
setScanPhase('idle');
|
||||
break;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCancelScan = useCallback(() => {
|
||||
if (abortRef.current) {
|
||||
abortRef.current.abort();
|
||||
abortRef.current = null;
|
||||
}
|
||||
setScanPhase('idle');
|
||||
setStep('select_folder');
|
||||
}, []);
|
||||
|
||||
const handleToggleSkip = useCallback((index: number) => {
|
||||
setScannedBooks((prev) =>
|
||||
prev.map((book) =>
|
||||
book.index === index ? { ...book, skipped: !book.skipped } : book
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleStartImport = useCallback(async () => {
|
||||
const booksToImport = scannedBooks.filter(
|
||||
(b) => !b.skipped && b.match !== null
|
||||
);
|
||||
|
||||
if (booksToImport.length === 0) return;
|
||||
|
||||
setIsImporting(true);
|
||||
|
||||
try {
|
||||
const response = await fetchWithAuth('/api/admin/bulk-import/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
imports: booksToImport.map((b) => ({
|
||||
folderPath: b.folderPath,
|
||||
asin: b.match!.asin,
|
||||
})),
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Import failed');
|
||||
}
|
||||
|
||||
setImportResults(data);
|
||||
} catch (error) {
|
||||
setImportResults({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Import failed',
|
||||
});
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
}, [scannedBooks]);
|
||||
|
||||
const handleBackToFolderSelect = useCallback(() => {
|
||||
setStep('select_folder');
|
||||
setScanError(null);
|
||||
setScannedBooks([]);
|
||||
setScanPhase('idle');
|
||||
}, []);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const currentStepIndex = STEP_ORDER.indexOf(step);
|
||||
|
||||
const modalContent = (
|
||||
<div
|
||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||
style={{ height: '100dvh' }}
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div
|
||||
className="relative w-full max-w-4xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden flex flex-col"
|
||||
style={{ height: 'min(720px, 90vh)' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-700/50">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<FolderArrowDownIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Bulk Import
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Step Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 px-5 py-3 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700/50">
|
||||
{STEP_ORDER.map((s, i) => (
|
||||
<React.Fragment key={s}>
|
||||
{i > 0 && (
|
||||
<div
|
||||
className={`w-8 h-px ${
|
||||
i <= currentStepIndex
|
||||
? 'bg-blue-400 dark:bg-blue-500'
|
||||
: 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
|
||||
i < currentStepIndex
|
||||
? 'bg-blue-600 text-white'
|
||||
: i === currentStepIndex
|
||||
? 'bg-blue-600 text-white ring-2 ring-blue-200 dark:ring-blue-800'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{i < currentStepIndex ? (
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
i + 1
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`text-xs font-medium hidden sm:inline ${
|
||||
i <= currentStepIndex
|
||||
? 'text-gray-900 dark:text-gray-100'
|
||||
: 'text-gray-400 dark:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{STEP_LABELS[s]}
|
||||
</span>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
{step === 'select_folder' && (
|
||||
<ScanFolderStep onFolderSelected={handleFolderSelected} />
|
||||
)}
|
||||
|
||||
{step === 'scanning' && (
|
||||
<ScanProgressStep
|
||||
scanProgress={scanProgress}
|
||||
matchingProgress={matchingProgress}
|
||||
scanPhase={scanPhase}
|
||||
error={scanError}
|
||||
booksFound={scannedBooks.length}
|
||||
onCancel={handleCancelScan}
|
||||
onRetry={() => selectedRootPath && handleFolderSelected(selectedRootPath)}
|
||||
onBack={handleBackToFolderSelect}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 'review' && (
|
||||
<MatchReviewStep
|
||||
books={scannedBooks}
|
||||
onToggleSkip={handleToggleSkip}
|
||||
onStartImport={handleStartImport}
|
||||
isImporting={isImporting}
|
||||
importResults={importResults}
|
||||
onClose={handleClose}
|
||||
onBack={handleBackToFolderSelect}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return createPortal(modalContent, document.body);
|
||||
}
|
||||
Reference in New Issue
Block a user