Skip to content

Commit

Permalink
feat: sort
Browse files Browse the repository at this point in the history
  • Loading branch information
Ngọ Nhâm committed Nov 7, 2024
1 parent 118495d commit 1ed9056
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 45 deletions.
2 changes: 0 additions & 2 deletions src/components/Pagination/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ interface Props {
}
const RANGE = 2
export default function Pagination({ queryConfig, pageSize }: Props) {
console.log('queryConfig', queryConfig)
const page = Number(queryConfig.page)
const renderPagination = () => {
let dotAfter = false
Expand Down Expand Up @@ -73,7 +72,6 @@ export default function Pagination({ queryConfig, pageSize }: Props) {
)
})
}
console.log(page)
return (
<div className='flex flex-wrap mt-6 justify-center'>
<Link
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ProductList/Product/Product.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ export default function Product({ product }: Props) {
style={{ lineHeight: '1' }}
>
<span className='text-xs'>₫</span>
<span className='text-xs'>{product.price}</span>
<span className='text-sm'>{product.price}</span>
</div>

<div className='text-orange truncate ml-1 flex items-center'>
<span className='text-xs'>₫</span>
<span className='text-xs'>{formatCurrency(product.price)}</span>
<span className='text-sm'>{formatCurrency(product.price)}</span>
</div>
</div>
<div className='mt-3 flex items-center justify-start'>
Expand Down
1 change: 1 addition & 0 deletions src/pages/ProductList/ProductList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function ProductList() {
pageSize: queryParams.pageSize || 1,
orderBy: queryParams.orderBy,
exclude: queryParams.exclude,
order: queryParams.order,
name: queryParams.name,
ascending: queryParams.ascending,
price_max: queryParams.price_max,
Expand Down
101 changes: 60 additions & 41 deletions src/pages/ProductList/SortProductList/SortProductList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,48 @@ import classNames from 'classnames'
import { _orderBy } from 'src/constants/product'
import { createSearchParams, Link, useNavigate } from 'react-router-dom'
import path from 'src/constants/path'
import { omit } from 'lodash'

interface Props {
queryConfig: QueryConfig
pageSize: number
}
export default function SortProductList({ queryConfig, pageSize }: Props) {
const { orderBy = _orderBy.createAt, page } = queryConfig
const { order } = queryConfig
const pageNumber = Number(page)
const navigate = useNavigate()
const isActiveOrderBy = (orderByValue: Exclude<ProductListConfig['orderBy'], undefined>) => {
return orderBy === orderByValue
}
const handleSort = (orderByValue: Exclude<ProductListConfig['orderBy'], undefined>) => {
console.log('orderValue')
navigate({
pathname: path.home,
search: createSearchParams({
...queryConfig,
orderBy: orderByValue
}).toString()
search: createSearchParams(
omit(
{
...queryConfig,
orderBy: orderByValue
},
['order', 'page']
)
).toString()
})
}
const handlePriceOrder = (orderValue: Exclude<ProductListConfig['order'], undefined>) => {
navigate({
pathname: path.home,
search: createSearchParams(
omit(
{
...queryConfig,
order: String(orderValue),
orderBy: _orderBy.price
},
['page']
)
).toString()
})
}
return (
Expand Down Expand Up @@ -66,13 +89,14 @@ export default function SortProductList({ queryConfig, pageSize }: Props) {
<select
className='h-8 px-4 bg-white text-left text-sm outline-none capitalize border border-gray-300 rounded-sm shadow-sm focus:border-gray-400'
title='Giá'
defaultValue=''
defaultValue={order}
onChange={(event) => handlePriceOrder(event.target.value === 'true')}
>
<option value='' disabled hidden>
Giá
</option>
<option value='price:asc'>Giá: Thấp đến cao</option>
<option value='price:desc'>Giá: Cao đến Thấp</option>
<option value={'true'}>Giá: Thấp đến cao</option>
<option value={'false'}>Giá: Cao đến Thấp</option>
</select>
</div>
<div className='flex items-center'>
Expand All @@ -81,7 +105,7 @@ export default function SortProductList({ queryConfig, pageSize }: Props) {
<span>/</span>
<span>{pageSize}</span>
</div>
<div className='ml-2'>
<div className='ml-2 flex'>
<Link
to={{
pathname: path.home,
Expand All @@ -90,26 +114,24 @@ export default function SortProductList({ queryConfig, pageSize }: Props) {
page: (pageNumber - 1).toString()
}).toString()
}}
type='button'
className={classNames('flex w-9 justify-center items-center shadow h-8 rounded-tl-sm rounded-bl-sm', {
'cursor-pointer bg-white hover:bg-slate-100': pageNumber > 1,
' pointer-events-none bg-white/60 hover:bg-slate-100': pageNumber === 1
})}
>
<button
type='button'
className={classNames('shadow px-3 h-8 rounded-tl-sm rounded-bl-sm', {
'cursor-pointer bg-white hover:bg-slate-100': pageNumber > 1,
'cursor-not-allowed bg-white/60 hover:bg-slate-100': pageNumber === 1
})}
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-3'
>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-3'
>
<path strokeLinecap='round' strokeLinejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' />
</svg>
</button>
<path strokeLinecap='round' strokeLinejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' />
</svg>
</Link>

<Link
to={{
pathname: path.home,
Expand All @@ -118,24 +140,21 @@ export default function SortProductList({ queryConfig, pageSize }: Props) {
page: (pageNumber + 1).toString()
}).toString()
}}
className={classNames('shadow flex w-9 justify-center items-center h-8 rounded-tl-sm rounded-bl-sm', {
'cursor-pointer bg-white hover:bg-slate-100': pageNumber < pageSize,
'cursor-not-allowed bg-white/60 hover:bg-slate-100 pointer-events-none': pageNumber === pageSize
})}
>
<button
className={classNames('shadow px-3 h-8 rounded-tl-sm rounded-bl-sm', {
'cursor-pointer bg-white hover:bg-slate-100': pageNumber < pageSize,
'cursor-not-allowed bg-white/60 hover:bg-slate-100': pageNumber === pageSize
})}
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-3'
>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-3'
>
<path strokeLinecap='round' strokeLinejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' />
</svg>
</button>
<path strokeLinecap='round' strokeLinejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' />
</svg>
</Link>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/types/product.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface ProductListConfig {
page?: number | string
pageSize?: number
orderBy?: 'createAt' | 'view' | 'sold' | 'price'
order?: boolean
ascending?: boolean
exclude?: string
rating_filter?: number | string
Expand Down

0 comments on commit 1ed9056

Please sign in to comment.