Kitap arama lsitesi z-index düzenlendi.
This commit is contained in:
@@ -7,6 +7,7 @@ import {
|
||||
CardActionArea,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
ClickAwayListener,
|
||||
Divider,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
@@ -43,6 +44,7 @@ const UploadStep = () => {
|
||||
const [searchError, setSearchError] = useState(null);
|
||||
const [selectedBookId, setSelectedBookId] = useState(bookMetadata?.id || null);
|
||||
const skipSearchRef = useRef(false);
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
|
||||
const onDrop = useCallback(
|
||||
(acceptedFiles) => {
|
||||
@@ -110,6 +112,7 @@ const UploadStep = () => {
|
||||
setSearchResults([]);
|
||||
setSearchError(null);
|
||||
setSearching(false);
|
||||
setShowResults(false);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
@@ -128,6 +131,7 @@ const UploadStep = () => {
|
||||
const items = Array.isArray(payload.items) ? payload.items : [];
|
||||
const normalized = items.map((item) => normalizeVolume(item));
|
||||
setSearchResults(normalized);
|
||||
setShowResults(Boolean(normalized.length));
|
||||
if (!normalized.length) {
|
||||
setSearchError('Bu başlıkla eşleşen bir kayıt bulunamadı.');
|
||||
}
|
||||
@@ -135,6 +139,7 @@ const UploadStep = () => {
|
||||
if (controller.signal.aborted) return;
|
||||
setSearchResults([]);
|
||||
setSearchError(error.message || 'Google Books araması başarısız oldu.');
|
||||
setShowResults(false);
|
||||
} finally {
|
||||
if (!controller.signal.aborted) {
|
||||
setSearching(false);
|
||||
@@ -164,10 +169,12 @@ const UploadStep = () => {
|
||||
setSelectedBookId(null);
|
||||
setSearchResults([]);
|
||||
setSearchError(null);
|
||||
setShowResults(false);
|
||||
} else if (bookMetadata && bookMetadata.title !== value) {
|
||||
setBookMetadata(null);
|
||||
setSelectedBookId(null);
|
||||
}
|
||||
setShowResults(Boolean(value?.trim()));
|
||||
};
|
||||
|
||||
const handleSelectBook = (book) => {
|
||||
@@ -177,6 +184,7 @@ const UploadStep = () => {
|
||||
setBookTitle(book.title || '');
|
||||
setSearchResults([]);
|
||||
setSearchError(null);
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const selectedBookSummary = useMemo(() => {
|
||||
@@ -200,17 +208,144 @@ const UploadStep = () => {
|
||||
{bookMetadata.authors?.length ? ` • ${bookMetadata.authors.join(', ')}` : ''}
|
||||
</Typography>
|
||||
)}
|
||||
<Box>
|
||||
<Box sx={{ position: 'relative', zIndex: 1 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Kitap adı
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Örn. Yapay Zeka İmparatorluğu"
|
||||
value={bookTitle}
|
||||
onChange={handleTitleChange}
|
||||
InputProps={{ sx: { borderRadius: 2 } }}
|
||||
/>
|
||||
<ClickAwayListener onClickAway={() => setShowResults(false)}>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Örn. Yapay Zeka İmparatorluğu"
|
||||
value={bookTitle}
|
||||
onChange={handleTitleChange}
|
||||
onFocus={() => searchResults.length && setShowResults(true)}
|
||||
InputProps={{ sx: { borderRadius: 2 } }}
|
||||
/>
|
||||
{showResults && searchResults.length > 0 && bookTitle?.trim() && (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 'calc(100% + 8px)',
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderRadius: 1.2,
|
||||
zIndex: 10,
|
||||
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' }}>
|
||||
Google Books sonuçları
|
||||
</Typography>
|
||||
<Divider />
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', pr: 1.5 }}>
|
||||
<Stack divider={<Divider />} spacing={0}>
|
||||
{searchResults.map((book) => {
|
||||
const detailLine = [
|
||||
book.publisher,
|
||||
book.publishedDate,
|
||||
book.pageCount ? `${book.pageCount} sayfa` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' • ');
|
||||
const ratingLine = [
|
||||
book.averageRating ? `Puan ${book.averageRating}/5` : null,
|
||||
book.ratingsCount ? `${book.ratingsCount} oy` : null,
|
||||
book.language ? book.language.toUpperCase() : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' • ');
|
||||
const isSelected = selectedBookId === book.id;
|
||||
return (
|
||||
<Box
|
||||
key={book.id}
|
||||
role="button"
|
||||
onClick={() => handleSelectBook(book)}
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
alignItems: 'flex-start',
|
||||
cursor: 'pointer',
|
||||
bgcolor: isSelected ? 'rgba(231,193,121,0.15)' : 'transparent',
|
||||
transition: 'background-color 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 96,
|
||||
borderRadius: 0.3,
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#f0ece4',
|
||||
flexShrink: 0,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
{book.thumbnail ? (
|
||||
<Box
|
||||
component="img"
|
||||
src={book.thumbnail}
|
||||
alt={`${book.title} kapak görseli`}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Stack alignItems="center" justifyContent="center" sx={{ height: '100%' }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Kapak yok
|
||||
</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
||||
{book.title}
|
||||
</Typography>
|
||||
{book.subtitle && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{book.subtitle}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontStyle: 'italic', mt: 0.5 }}
|
||||
>
|
||||
{book.authors?.length ? book.authors.join(', ') : 'Yazar bilgisi bulunamadı'}
|
||||
</Typography>
|
||||
{detailLine && (
|
||||
<Typography variant="caption" color="text.secondary" display="block" mt={0.5}>
|
||||
{detailLine}
|
||||
</Typography>
|
||||
)}
|
||||
{ratingLine && (
|
||||
<Typography variant="caption" color="text.secondary" display="block">
|
||||
{ratingLine}
|
||||
</Typography>
|
||||
)}
|
||||
{book.categories?.length > 0 && (
|
||||
<Typography variant="caption" color="text.secondary" display="block" mt={0.5}>
|
||||
{book.categories.join(', ')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
)}
|
||||
</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'a işlenecek.
|
||||
</Typography>
|
||||
@@ -220,111 +355,6 @@ const UploadStep = () => {
|
||||
{searchError}
|
||||
</Typography>
|
||||
)}
|
||||
{searchResults.length > 0 && bookTitle?.trim() && (
|
||||
<Paper variant="outlined" sx={{ mt: 2 }}>
|
||||
<Typography variant="subtitle2" sx={{ px: 2, pt: 2, pb: 1, color: 'text.secondary' }}>
|
||||
Google Books sonuçları
|
||||
</Typography>
|
||||
<Divider />
|
||||
<Stack divider={<Divider />} spacing={0}>
|
||||
{searchResults.map((book) => {
|
||||
const detailLine = [
|
||||
book.publisher,
|
||||
book.publishedDate,
|
||||
book.pageCount ? `${book.pageCount} sayfa` : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' • ');
|
||||
const ratingLine = [
|
||||
book.averageRating ? `Puan ${book.averageRating}/5` : null,
|
||||
book.ratingsCount ? `${book.ratingsCount} oy` : null,
|
||||
book.language ? book.language.toUpperCase() : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' • ');
|
||||
const isSelected = selectedBookId === book.id;
|
||||
return (
|
||||
<Box
|
||||
key={book.id}
|
||||
role="button"
|
||||
onClick={() => handleSelectBook(book)}
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
alignItems: 'flex-start',
|
||||
cursor: 'pointer',
|
||||
bgcolor: isSelected ? 'rgba(231,193,121,0.15)' : 'transparent',
|
||||
transition: 'background-color 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 96,
|
||||
borderRadius: 0.3,
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#f0ece4',
|
||||
flexShrink: 0,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
{book.thumbnail ? (
|
||||
<Box
|
||||
component="img"
|
||||
src={book.thumbnail}
|
||||
alt={`${book.title} kapak görseli`}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Stack alignItems="center" justifyContent="center" sx={{ height: '100%' }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Kapak yok
|
||||
</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
||||
{book.title}
|
||||
</Typography>
|
||||
{book.subtitle && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{book.subtitle}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ fontStyle: 'italic', mt: 0.5 }}
|
||||
>
|
||||
{book.authors?.length ? book.authors.join(', ') : 'Yazar bilgisi bulunamadı'}
|
||||
</Typography>
|
||||
{detailLine && (
|
||||
<Typography variant="caption" color="text.secondary" display="block" mt={0.5}>
|
||||
{detailLine}
|
||||
</Typography>
|
||||
)}
|
||||
{ratingLine && (
|
||||
<Typography variant="caption" color="text.secondary" display="block">
|
||||
{ratingLine}
|
||||
</Typography>
|
||||
)}
|
||||
{book.categories?.length > 0 && (
|
||||
<Typography variant="caption" color="text.secondary" display="block" mt={0.5}>
|
||||
{book.categories.join(', ')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
<Box {...getRootProps()} sx={dropzoneStyle}>
|
||||
<input {...getInputProps()} />
|
||||
|
||||
Reference in New Issue
Block a user