wisecolt/imgPub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kitap arama lsitesi z-index düzenlendi.

Browse Source
This commit is contained in:
sbilketay
2025-11-17 22:13:18 +03:00
parent 1949aefdf0
commit 27b6ccaff8
1 changed files with 143 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/UploadStep.jsx
View File

@@ -7,6 +7,7 @@ import {
CardActionArea, CardActionArea,
CardContent, CardContent,
CardMedia, CardMedia,
ClickAwayListener,
Divider, Divider,
Grid, Grid,
LinearProgress, LinearProgress,
@@ -43,6 +44,7 @@ const UploadStep = () => {
const [searchError, setSearchError] = useState(null); const [searchError, setSearchError] = useState(null);
const [selectedBookId, setSelectedBookId] = useState(bookMetadata?.id || null); const [selectedBookId, setSelectedBookId] = useState(bookMetadata?.id || null);
const skipSearchRef = useRef(false); const skipSearchRef = useRef(false);
const [showResults, setShowResults] = useState(false);
const onDrop = useCallback( const onDrop = useCallback(
(acceptedFiles) => { (acceptedFiles) => {
@@ -110,6 +112,7 @@ const UploadStep = () => {
setSearchResults([]); setSearchResults([]);
setSearchError(null); setSearchError(null);
setSearching(false); setSearching(false);
setShowResults(false);
return; return;
} }
const controller = new AbortController(); const controller = new AbortController();
@@ -128,6 +131,7 @@ const UploadStep = () => {
const items = Array.isArray(payload.items) ? payload.items : []; const items = Array.isArray(payload.items) ? payload.items : [];
const normalized = items.map((item) => normalizeVolume(item)); const normalized = items.map((item) => normalizeVolume(item));
setSearchResults(normalized); setSearchResults(normalized);
setShowResults(Boolean(normalized.length));
if (!normalized.length) { if (!normalized.length) {
setSearchError('Bu başlıkla eşleşen bir kayıt bulunamadı.'); setSearchError('Bu başlıkla eşleşen bir kayıt bulunamadı.');
} }
@@ -135,6 +139,7 @@ const UploadStep = () => {
if (controller.signal.aborted) return; if (controller.signal.aborted) return;
setSearchResults([]); setSearchResults([]);
setSearchError(error.message || 'Google Books araması başarısız oldu.'); setSearchError(error.message || 'Google Books araması başarısız oldu.');
setShowResults(false);
} finally { } finally {
if (!controller.signal.aborted) { if (!controller.signal.aborted) {
setSearching(false); setSearching(false);
@@ -164,10 +169,12 @@ const UploadStep = () => {
setSelectedBookId(null); setSelectedBookId(null);
setSearchResults([]); setSearchResults([]);
setSearchError(null); setSearchError(null);
setShowResults(false);
} else if (bookMetadata && bookMetadata.title !== value) { } else if (bookMetadata && bookMetadata.title !== value) {
setBookMetadata(null); setBookMetadata(null);
setSelectedBookId(null); setSelectedBookId(null);
} }
setShowResults(Boolean(value?.trim()));
}; };
const handleSelectBook = (book) => { const handleSelectBook = (book) => {
@@ -177,6 +184,7 @@ const UploadStep = () => {
setBookTitle(book.title || ''); setBookTitle(book.title || '');
setSearchResults([]); setSearchResults([]);
setSearchError(null); setSearchError(null);
setShowResults(false);
}; };
const selectedBookSummary = useMemo(() => { const selectedBookSummary = useMemo(() => {
@@ -200,32 +208,42 @@ const UploadStep = () => {
{bookMetadata.authors?.length ? ` • ${bookMetadata.authors.join(', ')}` : ''} {bookMetadata.authors?.length ? ` • ${bookMetadata.authors.join(', ')}` : ''}
</Typography> </Typography>
)} )}
<Box> <Box sx={{ position: 'relative', zIndex: 1 }}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Kitap adı Kitap adı
</Typography> </Typography>
<ClickAwayListener onClickAway={() => setShowResults(false)}>
<Box sx={{ position: 'relative' }}>
<TextField <TextField
fullWidth fullWidth
placeholder="Örn. Yapay Zeka İmparatorluğu" placeholder="Örn. Yapay Zeka İmparatorluğu"
value={bookTitle} value={bookTitle}
onChange={handleTitleChange} onChange={handleTitleChange}
onFocus={() => searchResults.length && setShowResults(true)}
InputProps={{ sx: { borderRadius: 2 } }} InputProps={{ sx: { borderRadius: 2 } }}
/> />
<Typography variant="body2" color="text.secondary" mt={1}> {showResults && searchResults.length > 0 && bookTitle?.trim() && (
Google Books veritabanında arama yapmak için kitap adını yaz. Seçtiğin kaydın tüm meta bilgileri EPUB&apos;a işlenecek. <Paper
</Typography> variant="outlined"
{searching && <LinearProgress sx={{ mt: 2, borderRadius: 999 }} />} sx={{
{searchError && bookTitle.trim() && !searching && ( position: 'absolute',
<Typography variant="body2" color="error.main" mt={1}> top: 'calc(100% + 8px)',
{searchError} left: 0,
</Typography> right: 0,
)} borderRadius: 1.2,
{searchResults.length > 0 && bookTitle?.trim() && ( zIndex: 10,
<Paper variant="outlined" sx={{ mt: 2 }}> maxHeight: 420,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
boxShadow: (theme) => theme.shadows[6],
}}
>
<Typography variant="subtitle2" sx={{ px: 2, pt: 2, pb: 1, color: 'text.secondary' }}> <Typography variant="subtitle2" sx={{ px: 2, pt: 2, pb: 1, color: 'text.secondary' }}>
Google Books sonuçları Google Books sonuçları
</Typography> </Typography>
<Divider /> <Divider />
<Box sx={{ flex: 1, overflowY: 'auto', pr: 1.5 }}>
<Stack divider={<Divider />} spacing={0}> <Stack divider={<Divider />} spacing={0}>
{searchResults.map((book) => { {searchResults.map((book) => {
const detailLine = [ const detailLine = [
@@ -323,9 +341,21 @@ const UploadStep = () => {
); );
})} })}
</Stack> </Stack>
</Box>
</Paper> </Paper>
)} )}
</Box> </Box>
</ClickAwayListener>
<Typography variant="body2" color="text.secondary" mt={1}>
Google Books veritabanında arama yapmak için kitap adını yaz. Seçtiğin kaydın tüm meta bilgileri EPUB&apos;a işlenecek.
</Typography>
{searching && <LinearProgress sx={{ mt: 2, borderRadius: 999 }} />}
{searchError && bookTitle.trim() && !searching && (
<Typography variant="body2" color="error.main" mt={1}>
{searchError}
</Typography>
)}
</Box>
<Box {...getRootProps()} sx={dropzoneStyle}> <Box {...getRootProps()} sx={dropzoneStyle}>
<input {...getInputProps()} /> <input {...getInputProps()} />
<Typography variant="h5" gutterBottom> <Typography variant="h5" gutterBottom>