Introduce Import and Advanced Export Features
- Added `ImportBookForm` component for importing DOCX files with chapter selection and metadata customization. - Implemented advanced export options (PDF, DOCX, EPUB) with `ExportSetting` component. - Developed utility methods for transforming books into exportable formats in `Export.ts`. - Expanded database models and repositories to support import/export functionality. - Enhanced localization for import/export flows and updated UI components for improved user experience.
This commit is contained in:
natreex
230
components/book/settings/ExportSetting.tsx
Normal file
230
components/book/settings/ExportSetting.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
'use client'
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {AlertContext} from '@/context/AlertContext';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
|
||||
import {
|
||||
ChapterExportInfo,
|
||||
ChapterExportSelection,
|
||||
chapterVersions,
|
||||
ExportFormat
|
||||
} from '@/lib/models/Chapter';
|
||||
|
||||
const exportFormats: {value: ExportFormat; label: string}[] = [
|
||||
{value: 'epub', label: 'EPUB'},
|
||||
{value: 'pdf', label: 'PDF'},
|
||||
{value: 'docx', label: 'DOCX'},
|
||||
];
|
||||
|
||||
export default function ExportSetting(): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const {book} = useContext(BookContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
|
||||
const [format, setFormat] = useState<ExportFormat>('epub');
|
||||
const [chapters, setChapters] = useState<ChapterExportInfo[]>([]);
|
||||
const [selections, setSelections] = useState<ChapterExportSelection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isExporting, setIsExporting] = useState<boolean>(false);
|
||||
|
||||
const loadChapters = useCallback(async (): Promise<void> => {
|
||||
if (!book) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const chaptersInfo: ChapterExportInfo[] = await window.electron.invoke<ChapterExportInfo[]>(
|
||||
'db:book:export:info',
|
||||
{bookId: book.bookId}
|
||||
);
|
||||
setChapters(chaptersInfo);
|
||||
const initialSelections: ChapterExportSelection[] = chaptersInfo.map(
|
||||
(ch: ChapterExportInfo): ChapterExportSelection => ({
|
||||
chapterId: ch.chapterId,
|
||||
version: ch.availableVersions[ch.availableVersions.length - 1],
|
||||
selected: true
|
||||
})
|
||||
);
|
||||
setSelections(initialSelections);
|
||||
} catch {
|
||||
errorMessage(t('exportOption.error'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [book]);
|
||||
|
||||
useEffect((): void => {
|
||||
loadChapters();
|
||||
}, [loadChapters]);
|
||||
|
||||
function toggleChapter(chapterId: string): void {
|
||||
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||
prev.map((s: ChapterExportSelection): ChapterExportSelection =>
|
||||
s.chapterId === chapterId ? {...s, selected: !s.selected} : s
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function toggleAll(selectAll: boolean): void {
|
||||
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||
prev.map((s: ChapterExportSelection): ChapterExportSelection => ({...s, selected: selectAll}))
|
||||
);
|
||||
}
|
||||
|
||||
function updateVersion(chapterId: string, version: number): void {
|
||||
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||
prev.map((s: ChapterExportSelection): ChapterExportSelection =>
|
||||
s.chapterId === chapterId ? {...s, version} : s
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function getVersionLabel(version: number): string {
|
||||
const found = chapterVersions.find((v) => v.value === String(version));
|
||||
return found ? t(found.label) : `v${version}`;
|
||||
}
|
||||
|
||||
async function handleExport(): Promise<void> {
|
||||
if (!book) return;
|
||||
setIsExporting(true);
|
||||
try {
|
||||
const selectedChapters = selections
|
||||
.filter((s: ChapterExportSelection): boolean => s.selected)
|
||||
.map((s: ChapterExportSelection) => ({chapterId: s.chapterId, version: s.version}));
|
||||
|
||||
const result: boolean = await window.electron.invoke<boolean>('db:book:export', {
|
||||
bookId: book.bookId,
|
||||
format,
|
||||
selections: selectedChapters.length === chapters.length ? null : selectedChapters
|
||||
});
|
||||
|
||||
if (result) {
|
||||
successMessage(t('exportOption.success'));
|
||||
}
|
||||
} catch {
|
||||
errorMessage(t('exportOption.error'));
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const allSelected: boolean = selections.every((s: ChapterExportSelection): boolean => s.selected);
|
||||
const hasSelection: boolean = selections.some((s: ChapterExportSelection): boolean => s.selected);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-4">
|
||||
<div>
|
||||
<h3 className="text-text-primary font-semibold mb-2">{t('exportOption.format')}</h3>
|
||||
<div className="flex gap-3">
|
||||
{exportFormats.map(({value, label}) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={(): void => setFormat(value)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
|
||||
format === value
|
||||
? 'bg-primary text-white shadow-md'
|
||||
: 'bg-secondary/30 text-text-secondary hover:bg-secondary/50'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-text-primary font-semibold">{t('exportOption.chapters')}</h3>
|
||||
{chapters.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(): void => toggleAll(!allSelected)}
|
||||
className="text-sm text-primary hover:text-primary/80 transition-colors"
|
||||
>
|
||||
{allSelected ? t('exportOption.deselectAll') : t('exportOption.selectAll')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin mr-2"/>
|
||||
<span className="text-text-secondary">{t('exportOption.loadingChapters')}</span>
|
||||
</div>
|
||||
) : chapters.length === 0 ? (
|
||||
<p className="text-text-secondary text-center py-8">{t('exportOption.noChapters')}</p>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto pr-1">
|
||||
{chapters.map((chapter: ChapterExportInfo) => {
|
||||
const selection: ChapterExportSelection | undefined = selections.find(
|
||||
(s: ChapterExportSelection): boolean => s.chapterId === chapter.chapterId
|
||||
);
|
||||
if (!selection) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={chapter.chapterId}
|
||||
className={`flex items-center justify-between p-3 rounded-lg transition-all duration-200 ${
|
||||
selection.selected
|
||||
? 'bg-primary/10 border border-primary/30'
|
||||
: 'bg-secondary/20 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
<label className="flex items-center gap-3 cursor-pointer flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selection.selected}
|
||||
onChange={(): void => toggleChapter(chapter.chapterId)}
|
||||
className="w-4 h-4 rounded accent-primary cursor-pointer"
|
||||
/>
|
||||
<span className={`text-sm ${
|
||||
selection.selected ? 'text-text-primary' : 'text-text-secondary'
|
||||
}`}>
|
||||
{chapter.title}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{chapter.availableVersions.length > 1 && selection.selected && (
|
||||
<select
|
||||
value={selection.version}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>): void =>
|
||||
updateVersion(chapter.chapterId, parseInt(e.target.value, 10))
|
||||
}
|
||||
className="text-xs bg-secondary/50 text-text-primary rounded-md px-2 py-1 border border-secondary/30 focus:outline-none focus:border-primary"
|
||||
>
|
||||
{chapter.availableVersions.map((v: number) => (
|
||||
<option key={v} value={v}>
|
||||
{getVersionLabel(v)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExport}
|
||||
disabled={isExporting || !hasSelection || isLoading}
|
||||
className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg disabled:cursor-not-allowed"
|
||||
>
|
||||
{isExporting ? (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
|
||||
{t('exportOption.exporting')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
|
||||
{t('exportOption.export')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user