Merge branch 'refactor'
This commit is contained in:
@kirill.komarov
@@ -0,0 +1,111 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { SelectChangeEvent } from '@mui/material/Select'
|
||||
|
||||
export type UseProductFiltersResult = ReturnType<typeof useProductFilters>
|
||||
|
||||
export function useProductFilters() {
|
||||
const [categorySlug, setCategorySlug] = useState<string>('')
|
||||
const [availability, setAvailability] = useState<'all' | 'in_stock' | 'made_to_order'>('all')
|
||||
const [qInput, setQInput] = useState('')
|
||||
const [q, setQ] = useState('')
|
||||
const [moreOpen, setMoreOpen] = useState(false)
|
||||
const [sort, setSort] = useState<'price_asc' | 'price_desc' | ''>('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(12)
|
||||
const [priceMinRub, setPriceMinRub] = useState('')
|
||||
const [priceMaxRub, setPriceMaxRub] = useState('')
|
||||
const [cardScale, setCardScale] = useState<70 | 90 | 110 | 130>(90)
|
||||
|
||||
useEffect(() => {
|
||||
const t = window.setTimeout(() => {
|
||||
setQ(qInput.trim())
|
||||
setPage(1)
|
||||
}, 250)
|
||||
return () => window.clearTimeout(t)
|
||||
}, [qInput])
|
||||
|
||||
const handleCategoryChange = (e: SelectChangeEvent<string>) => {
|
||||
setCategorySlug(e.target.value)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleSortChange = (e: SelectChangeEvent<string>) => {
|
||||
const v = e.target.value
|
||||
if (v === '' || v === 'price_asc' || v === 'price_desc') {
|
||||
setSort(v)
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageSizeChange = (e: SelectChangeEvent<string>) => {
|
||||
const n = Number(e.target.value)
|
||||
if (Number.isFinite(n) && n > 0) {
|
||||
setPageSize(n)
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAvailabilityChange = (v: string) => {
|
||||
if (v === 'all' || v === 'in_stock' || v === 'made_to_order') {
|
||||
setAvailability(v)
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePriceMinChange = (v: string) => {
|
||||
setPriceMinRub(v)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handlePriceMaxChange = (v: string) => {
|
||||
setPriceMaxRub(v)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleCardScaleChange = (v: number) => {
|
||||
if (v === 70 || v === 90 || v === 110 || v === 130) setCardScale(v as 70 | 90 | 110 | 130)
|
||||
}
|
||||
|
||||
const resetFilters = () => {
|
||||
setCategorySlug('')
|
||||
setAvailability('all')
|
||||
setQInput('')
|
||||
setSort('')
|
||||
setPriceMinRub('')
|
||||
setPriceMaxRub('')
|
||||
setPageSize(12)
|
||||
setCardScale(90)
|
||||
setMoreOpen(false)
|
||||
}
|
||||
|
||||
const toCents = (v: string) => {
|
||||
const n = Number(String(v).trim().replace(',', '.'))
|
||||
return Number.isFinite(n) && n >= 0 ? Math.round(n * 100) : undefined
|
||||
}
|
||||
|
||||
return {
|
||||
categorySlug,
|
||||
availability,
|
||||
qInput,
|
||||
q,
|
||||
moreOpen,
|
||||
sort,
|
||||
page,
|
||||
pageSize,
|
||||
priceMinRub,
|
||||
priceMaxRub,
|
||||
cardScale,
|
||||
setPage,
|
||||
setQInput,
|
||||
setMoreOpen,
|
||||
handleCategoryChange,
|
||||
handleSortChange,
|
||||
handlePageSizeChange,
|
||||
handleAvailabilityChange,
|
||||
handlePriceMinChange,
|
||||
handlePriceMaxChange,
|
||||
handleCardScaleChange,
|
||||
resetFilters,
|
||||
toCents,
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,10 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import Alert from '@mui/material/Alert'
|
||||
import Box from '@mui/material/Box'
|
||||
import Button from '@mui/material/Button'
|
||||
import Collapse from '@mui/material/Collapse'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import FormControl from '@mui/material/FormControl'
|
||||
import Grid from '@mui/material/Grid'
|
||||
import InputLabel from '@mui/material/InputLabel'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import Pagination from '@mui/material/Pagination'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import Select from '@mui/material/Select'
|
||||
import type { SelectChangeEvent } from '@mui/material/Select'
|
||||
import Skeleton from '@mui/material/Skeleton'
|
||||
import Stack from '@mui/material/Stack'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import ToggleButton from '@mui/material/ToggleButton'
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useUnit } from 'effector-react'
|
||||
@@ -26,108 +14,59 @@ import { ToggleCartIcon } from '@/features/cart/toggle-cart-icon'
|
||||
import { $user } from '@/shared/model/auth'
|
||||
import { CatalogSlider } from '@/widgets/catalog-slider'
|
||||
import { ReviewsBlock } from '@/widgets/reviews-block'
|
||||
import { useProductFilters } from '../lib/use-product-filters'
|
||||
import { ProductFilters } from './ProductFilters'
|
||||
|
||||
export function HomePage() {
|
||||
const user = useUnit($user)
|
||||
const isAdmin = Boolean(user?.isAdmin)
|
||||
const [categorySlug, setCategorySlug] = useState<string>('')
|
||||
const [availability, setAvailability] = useState<'all' | 'in_stock' | 'made_to_order'>('all')
|
||||
const [qInput, setQInput] = useState('')
|
||||
const [q, setQ] = useState('')
|
||||
const [moreOpen, setMoreOpen] = useState(false)
|
||||
const [sort, setSort] = useState<'price_asc' | 'price_desc' | ''>('')
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(12)
|
||||
const [priceMinRub, setPriceMinRub] = useState('')
|
||||
const [priceMaxRub, setPriceMaxRub] = useState('')
|
||||
const [cardScale, setCardScale] = useState<70 | 90 | 110 | 130>(90)
|
||||
const filters = useProductFilters()
|
||||
|
||||
const categoriesQuery = useQuery({
|
||||
queryKey: ['categories'],
|
||||
queryFn: () => fetchCategories(),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const t = window.setTimeout(() => {
|
||||
setQ(qInput.trim())
|
||||
setPage(1)
|
||||
}, 250)
|
||||
return () => window.clearTimeout(t)
|
||||
}, [qInput])
|
||||
|
||||
const productsQuery = useQuery({
|
||||
queryKey: [
|
||||
'products',
|
||||
'public',
|
||||
{
|
||||
categorySlug: categorySlug || 'all',
|
||||
availability,
|
||||
q,
|
||||
sort,
|
||||
page,
|
||||
pageSize,
|
||||
priceMinRub,
|
||||
priceMaxRub,
|
||||
categorySlug: filters.categorySlug || 'all',
|
||||
availability: filters.availability,
|
||||
q: filters.q,
|
||||
sort: filters.sort,
|
||||
page: filters.page,
|
||||
pageSize: filters.pageSize,
|
||||
priceMinRub: filters.priceMinRub,
|
||||
priceMaxRub: filters.priceMaxRub,
|
||||
},
|
||||
],
|
||||
queryFn: () => {
|
||||
const toCents = (v: string) => {
|
||||
const n = Number(String(v).trim().replace(',', '.'))
|
||||
return Number.isFinite(n) && n >= 0 ? Math.round(n * 100) : undefined
|
||||
}
|
||||
return fetchPublicProducts({
|
||||
categorySlug: categorySlug || undefined,
|
||||
availability: availability === 'all' ? undefined : availability,
|
||||
q: q || undefined,
|
||||
sort: sort || '',
|
||||
page,
|
||||
pageSize,
|
||||
priceMinCents: toCents(priceMinRub),
|
||||
priceMaxCents: toCents(priceMaxRub),
|
||||
})
|
||||
},
|
||||
queryFn: () =>
|
||||
fetchPublicProducts({
|
||||
categorySlug: filters.categorySlug || undefined,
|
||||
availability: filters.availability === 'all' ? undefined : filters.availability,
|
||||
q: filters.q || undefined,
|
||||
sort: filters.sort || '',
|
||||
page: filters.page,
|
||||
pageSize: filters.pageSize,
|
||||
priceMinCents: filters.toCents(filters.priceMinRub),
|
||||
priceMaxCents: filters.toCents(filters.priceMaxRub),
|
||||
}),
|
||||
})
|
||||
|
||||
const handleCategoryChange = (e: SelectChangeEvent<string>) => {
|
||||
setCategorySlug(e.target.value)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleSortChange = (e: SelectChangeEvent<string>) => {
|
||||
const v = e.target.value
|
||||
if (v === '' || v === 'price_asc' || v === 'price_desc') {
|
||||
setSort(v)
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageSizeChange = (e: SelectChangeEvent<string>) => {
|
||||
const n = Number(e.target.value)
|
||||
if (Number.isFinite(n) && n > 0) {
|
||||
setPageSize(n)
|
||||
setPage(1)
|
||||
}
|
||||
}
|
||||
|
||||
const title = useMemo(
|
||||
() =>
|
||||
categorySlug ? `Категория: ${categoriesQuery.data?.find((c) => c.slug === categorySlug)?.name ?? ''}` : 'Каталог',
|
||||
[categorySlug, categoriesQuery.data],
|
||||
filters.categorySlug
|
||||
? `Категория: ${categoriesQuery.data?.find((c) => c.slug === filters.categorySlug)?.name ?? ''}`
|
||||
: 'Каталог',
|
||||
[filters.categorySlug, categoriesQuery.data],
|
||||
)
|
||||
|
||||
const categoriesForFilter = useMemo(() => {
|
||||
const list = categoriesQuery.data ?? []
|
||||
return [...list].sort((a, b) => {
|
||||
if (a.slug === 'ne-ukazano') return 1
|
||||
if (b.slug === 'ne-ukazano') return -1
|
||||
return a.sort - b.sort || a.name.localeCompare(b.name, 'ru')
|
||||
})
|
||||
}, [categoriesQuery.data])
|
||||
|
||||
const products = productsQuery.data?.items ?? []
|
||||
const total = productsQuery.data?.total ?? 0
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize))
|
||||
const mediaHeight = Math.round(200 * (cardScale / 100))
|
||||
const totalPages = Math.max(1, Math.ceil(total / filters.pageSize))
|
||||
const mediaHeight = Math.round(200 * (filters.cardScale / 100))
|
||||
|
||||
return (
|
||||
<Box>
|
||||
@@ -140,224 +79,14 @@ export function HomePage() {
|
||||
Игрушки, сувениры и другие изделия ручной работы.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2} sx={{ mb: 3 }}>
|
||||
<Stack
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
sx={{ alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
|
||||
>
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="category-filter-label">Категория</InputLabel>
|
||||
<Select<string>
|
||||
labelId="category-filter-label"
|
||||
label="Категория"
|
||||
value={categorySlug}
|
||||
onChange={handleCategoryChange}
|
||||
disabled={categoriesQuery.isLoading}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Все</em>
|
||||
</MenuItem>
|
||||
{categoriesForFilter.map((c) => (
|
||||
<MenuItem key={c.id} value={c.slug}>
|
||||
{c.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
label="Поиск"
|
||||
value={qInput}
|
||||
onChange={(e) => setQInput(e.target.value)}
|
||||
sx={{ flexGrow: 1, minWidth: { xs: '100%', md: 360 } }}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
bgcolor: 'background.paper',
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 1.5,
|
||||
alignItems: { sm: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle2">Наличие</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Быстрый фильтр по наличию
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
size="small"
|
||||
value={availability}
|
||||
onChange={(_, v) => {
|
||||
if (v === 'all' || v === 'in_stock' || v === 'made_to_order') {
|
||||
setAvailability(v)
|
||||
setPage(1)
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
alignSelf: { xs: 'flex-start', sm: 'auto' },
|
||||
'& .MuiToggleButton-root': { px: 2, fontWeight: 700, letterSpacing: 0.2, textTransform: 'none' },
|
||||
'& .MuiToggleButton-root.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'primary.contrastText',
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="all">Все</ToggleButton>
|
||||
<ToggleButton value="in_stock">В наличии</ToggleButton>
|
||||
<ToggleButton value="made_to_order">Под заказ</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Paper>
|
||||
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={1.5}
|
||||
sx={{ alignItems: { sm: 'center' }, justifyContent: 'space-between', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Button variant="text" onClick={() => setMoreOpen((v) => !v)} sx={{ alignSelf: { xs: 'flex-start' } }}>
|
||||
{moreOpen ? 'Скрыть фильтры' : 'Фильтры и сортировка'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setCategorySlug('')
|
||||
setAvailability('all')
|
||||
setQInput('')
|
||||
setSort('')
|
||||
setPriceMinRub('')
|
||||
setPriceMaxRub('')
|
||||
setPageSize(12)
|
||||
setCardScale(90)
|
||||
setMoreOpen(false)
|
||||
}}
|
||||
sx={{ alignSelf: { xs: 'flex-start' } }}
|
||||
>
|
||||
Сбросить
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Collapse in={moreOpen} unmountOnExit>
|
||||
<Stack
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
sx={{ mt: 2, alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
|
||||
>
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="sort-label">Сортировка</InputLabel>
|
||||
<Select<string> labelId="sort-label" label="Сортировка" value={sort} onChange={handleSortChange}>
|
||||
<MenuItem value="">
|
||||
<em>Сначала новые</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="price_asc">Цена: по возрастанию</MenuItem>
|
||||
<MenuItem value="price_desc">Цена: по убыванию</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
label="Цена от, ₽"
|
||||
value={priceMinRub}
|
||||
onChange={(e) => {
|
||||
setPriceMinRub(e.target.value)
|
||||
setPage(1)
|
||||
}}
|
||||
sx={{ width: { xs: '100%', md: 180 } }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Цена до, ₽"
|
||||
value={priceMaxRub}
|
||||
onChange={(e) => {
|
||||
setPriceMaxRub(e.target.value)
|
||||
setPage(1)
|
||||
}}
|
||||
sx={{ width: { xs: '100%', md: 180 } }}
|
||||
/>
|
||||
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="page-size-label">На странице</InputLabel>
|
||||
<Select<string>
|
||||
labelId="page-size-label"
|
||||
label="На странице"
|
||||
value={String(pageSize)}
|
||||
onChange={handlePageSizeChange}
|
||||
>
|
||||
{[6, 12, 18, 24].map((n) => (
|
||||
<MenuItem key={n} value={String(n)}>
|
||||
{n}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
bgcolor: 'background.paper',
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 1.5,
|
||||
alignItems: { sm: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle2">Масштаб карточек</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Выберите размер карточек в каталоге
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
size="small"
|
||||
value={cardScale}
|
||||
onChange={(_, v) => {
|
||||
if (v === 70 || v === 90 || v === 110 || v === 130) setCardScale(v)
|
||||
}}
|
||||
sx={{
|
||||
alignSelf: { xs: 'flex-start', sm: 'auto' },
|
||||
'& .MuiToggleButton-root': {
|
||||
px: 2,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0.2,
|
||||
textTransform: 'none',
|
||||
},
|
||||
'& .MuiToggleButton-root.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'primary.contrastText',
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value={70}>S</ToggleButton>
|
||||
<ToggleButton value={90}>M</ToggleButton>
|
||||
<ToggleButton value={110}>L</ToggleButton>
|
||||
<ToggleButton value={130}>XL</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Paper>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
<ProductFilters
|
||||
{...filters}
|
||||
categories={categoriesQuery.data ?? []}
|
||||
categoriesLoading={categoriesQuery.isLoading}
|
||||
/>
|
||||
|
||||
{productsQuery.isLoading && (
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2} sx={{ mt: 2 }}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={i}>
|
||||
<Skeleton variant="rectangular" height={360} />
|
||||
@@ -367,16 +96,20 @@ export function HomePage() {
|
||||
)}
|
||||
|
||||
{productsQuery.isError && (
|
||||
<Alert severity="error">Не удалось загрузить товары. Проверьте, что API запущен.</Alert>
|
||||
<Alert severity="error" sx={{ mt: 2 }}>
|
||||
Не удалось загрузить товары. Проверьте, что API запущен.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{productsQuery.isSuccess && products.length === 0 && (
|
||||
<Typography color="text.secondary">Пока нет опубликованных товаров.</Typography>
|
||||
<Typography color="text.secondary" sx={{ mt: 2 }}>
|
||||
Пока нет опубликованных товаров.
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{productsQuery.isSuccess && products.length > 0 && (
|
||||
<>
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
||||
{products.map((p) => (
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={p.id}>
|
||||
<ProductCard
|
||||
@@ -393,9 +126,9 @@ export function HomePage() {
|
||||
{totalPages > 1 && (
|
||||
<Stack direction="row" sx={{ mt: 3, justifyContent: 'center' }}>
|
||||
<Pagination
|
||||
page={page}
|
||||
page={filters.page}
|
||||
count={totalPages}
|
||||
onChange={(_, v) => setPage(v)}
|
||||
onChange={(_, v) => filters.setPage(v)}
|
||||
color="primary"
|
||||
shape="rounded"
|
||||
showFirstButton
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
import { useMemo } from 'react'
|
||||
import Box from '@mui/material/Box'
|
||||
import Button from '@mui/material/Button'
|
||||
import Collapse from '@mui/material/Collapse'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import FormControl from '@mui/material/FormControl'
|
||||
import InputLabel from '@mui/material/InputLabel'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import Select from '@mui/material/Select'
|
||||
import Stack from '@mui/material/Stack'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import ToggleButton from '@mui/material/ToggleButton'
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import type { Category } from '@/entities/product/model/types'
|
||||
import type { UseProductFiltersResult } from '../lib/use-product-filters'
|
||||
|
||||
type Props = UseProductFiltersResult & {
|
||||
categories: Category[]
|
||||
categoriesLoading: boolean
|
||||
}
|
||||
|
||||
export function ProductFilters({
|
||||
categorySlug,
|
||||
availability,
|
||||
qInput,
|
||||
moreOpen,
|
||||
sort,
|
||||
pageSize,
|
||||
priceMinRub,
|
||||
priceMaxRub,
|
||||
cardScale,
|
||||
categories,
|
||||
categoriesLoading,
|
||||
setQInput,
|
||||
setMoreOpen,
|
||||
handleCategoryChange,
|
||||
handleSortChange,
|
||||
handlePageSizeChange,
|
||||
handleAvailabilityChange,
|
||||
handlePriceMinChange,
|
||||
handlePriceMaxChange,
|
||||
handleCardScaleChange,
|
||||
resetFilters,
|
||||
}: Props) {
|
||||
const categoriesForFilter = useMemo(() => {
|
||||
const list = categories ?? []
|
||||
return [...list].sort((a, b) => {
|
||||
if (a.slug === 'ne-ukazano') return 1
|
||||
if (b.slug === 'ne-ukazano') return -1
|
||||
return a.sort - b.sort || a.name.localeCompare(b.name, 'ru')
|
||||
})
|
||||
}, [categories])
|
||||
|
||||
return (
|
||||
<Stack spacing={2}>
|
||||
<Stack
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
sx={{ alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
|
||||
>
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="category-filter-label">Категория</InputLabel>
|
||||
<Select<string>
|
||||
labelId="category-filter-label"
|
||||
label="Категория"
|
||||
value={categorySlug}
|
||||
onChange={handleCategoryChange}
|
||||
disabled={categoriesLoading}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Все</em>
|
||||
</MenuItem>
|
||||
{categoriesForFilter.map((c) => (
|
||||
<MenuItem key={c.id} value={c.slug}>
|
||||
{c.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
label="Поиск"
|
||||
value={qInput}
|
||||
onChange={(e) => setQInput(e.target.value)}
|
||||
sx={{ flexGrow: 1, minWidth: { xs: '100%', md: 360 } }}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
bgcolor: 'background.paper',
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 1.5,
|
||||
alignItems: { sm: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle2">Наличие</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Быстрый фильтр по наличию
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
size="small"
|
||||
value={availability}
|
||||
onChange={(_, v) => handleAvailabilityChange(v)}
|
||||
sx={{
|
||||
alignSelf: { xs: 'flex-start', sm: 'auto' },
|
||||
'& .MuiToggleButton-root': { px: 2, fontWeight: 700, letterSpacing: 0.2, textTransform: 'none' },
|
||||
'& .MuiToggleButton-root.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'primary.contrastText',
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value="all">Все</ToggleButton>
|
||||
<ToggleButton value="in_stock">В наличии</ToggleButton>
|
||||
<ToggleButton value="made_to_order">Под заказ</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Paper>
|
||||
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={1.5}
|
||||
sx={{ alignItems: { sm: 'center' }, justifyContent: 'space-between', flexWrap: 'wrap' }}
|
||||
>
|
||||
<Button variant="text" onClick={() => setMoreOpen((v) => !v)} sx={{ alignSelf: { xs: 'flex-start' } }}>
|
||||
{moreOpen ? 'Скрыть фильтры' : 'Фильтры и сортировка'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={resetFilters}
|
||||
sx={{ alignSelf: { xs: 'flex-start' } }}
|
||||
>
|
||||
Сбросить
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Collapse in={moreOpen} unmountOnExit>
|
||||
<Stack
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
sx={{ mt: 2, alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
|
||||
>
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="sort-label">Сортировка</InputLabel>
|
||||
<Select<string> labelId="sort-label" label="Сортировка" value={sort} onChange={handleSortChange}>
|
||||
<MenuItem value="">
|
||||
<em>Сначала новые</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="price_asc">Цена: по возрастанию</MenuItem>
|
||||
<MenuItem value="price_desc">Цена: по убыванию</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
label="Цена от, ₽"
|
||||
value={priceMinRub}
|
||||
onChange={(e) => handlePriceMinChange(e.target.value)}
|
||||
sx={{ width: { xs: '100%', md: 180 } }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Цена до, ₽"
|
||||
value={priceMaxRub}
|
||||
onChange={(e) => handlePriceMaxChange(e.target.value)}
|
||||
sx={{ width: { xs: '100%', md: 180 } }}
|
||||
/>
|
||||
|
||||
<FormControl sx={{ minWidth: 220 }} size="small">
|
||||
<InputLabel id="page-size-label">На странице</InputLabel>
|
||||
<Select<string>
|
||||
labelId="page-size-label"
|
||||
label="На странице"
|
||||
value={String(pageSize)}
|
||||
onChange={handlePageSizeChange}
|
||||
>
|
||||
{[6, 12, 18, 24].map((n) => (
|
||||
<MenuItem key={n} value={String(n)}>
|
||||
{n}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
|
||||
<Divider sx={{ my: 2 }} />
|
||||
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 2,
|
||||
bgcolor: 'background.paper',
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 1.5,
|
||||
alignItems: { sm: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle2">Масштаб карточек</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Выберите размер карточек в каталоге
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ToggleButtonGroup
|
||||
exclusive
|
||||
size="small"
|
||||
value={cardScale}
|
||||
onChange={(_, v) => handleCardScaleChange(v)}
|
||||
sx={{
|
||||
alignSelf: { xs: 'flex-start', sm: 'auto' },
|
||||
'& .MuiToggleButton-root': {
|
||||
px: 2,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0.2,
|
||||
textTransform: 'none',
|
||||
},
|
||||
'& .MuiToggleButton-root.Mui-selected': {
|
||||
bgcolor: 'primary.main',
|
||||
color: 'primary.contrastText',
|
||||
'&:hover': { bgcolor: 'primary.dark' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value={70}>S</ToggleButton>
|
||||
<ToggleButton value={90}>M</ToggleButton>
|
||||
<ToggleButton value={110}>L</ToggleButton>
|
||||
<ToggleButton value={130}>XL</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Paper>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user