create discount
This commit is contained in:
hamid zarghami
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useMemo } from 'react'
|
||||
import { Check, ChevronsUpDown, X, Search } from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Button } from './ui/button'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from './ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from './ui/popover'
|
||||
|
||||
export type MultiSelectOption = {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type MultiSelectSearchableProps = {
|
||||
options: MultiSelectOption[]
|
||||
value: string[]
|
||||
onChange: (value: string[]) => void
|
||||
onSearch?: (searchTerm: string) => void
|
||||
onOpenChange?: (open: boolean) => void
|
||||
placeholder?: string
|
||||
label?: string
|
||||
error_text?: string
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
const MultiSelectSearchable: React.FC<MultiSelectSearchableProps> = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
onSearch,
|
||||
onOpenChange,
|
||||
placeholder = "انتخاب کنید...",
|
||||
label,
|
||||
error_text,
|
||||
disabled = false,
|
||||
loading = false,
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleOpenChange = (newOpen: boolean) => {
|
||||
setOpen(newOpen)
|
||||
onOpenChange?.(newOpen)
|
||||
}
|
||||
|
||||
const selectedLabels = useMemo(() => {
|
||||
return value
|
||||
.map(v => options.find(option => option.value === v)?.label)
|
||||
.filter(Boolean)
|
||||
}, [value, options])
|
||||
|
||||
const handleSelect = (currentValue: string) => {
|
||||
const newValue = value.includes(currentValue)
|
||||
? value.filter(v => v !== currentValue)
|
||||
: [...value, currentValue]
|
||||
onChange(newValue)
|
||||
}
|
||||
|
||||
const handleRemove = (itemValue: string) => {
|
||||
onChange(value.filter(v => v !== itemValue))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block mb-1">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<Popover
|
||||
open={open}
|
||||
onOpenChange={handleOpenChange}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className={cn(
|
||||
"w-full justify-between min-h-10 h-auto",
|
||||
!value.length && "text-muted-foreground",
|
||||
error_text && "border-red-500"
|
||||
)}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1 flex-1 text-left min-h-[20px]">
|
||||
{selectedLabels.length > 0 ? (
|
||||
selectedLabels.map((label, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-xs max-w-[200px]"
|
||||
title={label}
|
||||
>
|
||||
<span className="truncate">{label}</span>
|
||||
<X
|
||||
color='red'
|
||||
className="h-3 w-3 cursor-pointer hover:text-destructive shrink-0"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleRemove(value[index])
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-muted-foreground">{placeholder}</span>
|
||||
)}
|
||||
</div>
|
||||
<ChevronsUpDown color='gray' className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[var(--radix-popover-trigger-width)] max-w-[400px] p-0"
|
||||
align="start"
|
||||
onKeyDown={(e) => {
|
||||
// Prevent event bubbling that might cause navigation
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<Command
|
||||
shouldFilter={false}
|
||||
onKeyDown={(e) => {
|
||||
// Prevent any navigation or form submission from command
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<div className="flex h-9 items-center gap-2 border-b px-3">
|
||||
<Search color='gray' className="size-4 shrink-0 opacity-50" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجو..."
|
||||
className="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
|
||||
onChange={(e) => {
|
||||
e.preventDefault()
|
||||
onSearch?.(e.target.value)
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
// Prevent form submission or other default behaviors
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<CommandList>
|
||||
<CommandEmpty>موردی یافت نشد.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{options.map((option) => {
|
||||
const isSelected = value.includes(option.value)
|
||||
return (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
onSelect={() => {
|
||||
handleSelect(option.value)
|
||||
}}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Check
|
||||
color='gray'
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4 shrink-0",
|
||||
isSelected ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="truncate flex-1" title={option.label}>
|
||||
{option.label}
|
||||
</span>
|
||||
</CommandItem>
|
||||
)
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{error_text && (
|
||||
<div className="text-red-500 text-xs mt-1">{error_text}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MultiSelectSearchable
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react'
|
||||
import { useSearchProducts } from '../pages/products/hooks/useProductData'
|
||||
import { type ProductListType } from '../pages/products/types/Types'
|
||||
import MultiSelectSearchable, { type MultiSelectOption } from './MultiSelectSearchable'
|
||||
|
||||
type ProductMultiSelectProps = {
|
||||
value: number[]
|
||||
onChange: (value: number[]) => void
|
||||
placeholder?: string
|
||||
label?: string
|
||||
error_text?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const ProductMultiSelect: React.FC<ProductMultiSelectProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "انتخاب محصولات...",
|
||||
label,
|
||||
error_text,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
|
||||
const [selectedProducts, setSelectedProducts] = useState<ProductListType[]>([])
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false)
|
||||
|
||||
// Debounce search term
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchTerm(searchTerm)
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchTerm])
|
||||
|
||||
// Search products (includes initial load and search)
|
||||
const { data: searchResults, isLoading } = useSearchProducts(debouncedSearchTerm, dropdownOpen)
|
||||
|
||||
// Combine selected products with search results
|
||||
const allProducts = useMemo(() => {
|
||||
const productsMap = new Map<string, ProductListType>()
|
||||
|
||||
// Add selected products
|
||||
selectedProducts.forEach(product => {
|
||||
productsMap.set(product._id.toString(), product)
|
||||
})
|
||||
|
||||
// Add search results
|
||||
if (searchResults?.results?.products) {
|
||||
searchResults.results.products.forEach((product: ProductListType) => {
|
||||
productsMap.set(product._id.toString(), product)
|
||||
})
|
||||
}
|
||||
|
||||
return Array.from(productsMap.values())
|
||||
}, [selectedProducts, searchResults])
|
||||
|
||||
// Convert to options format
|
||||
const options: MultiSelectOption[] = useMemo(() => {
|
||||
return allProducts.map(product => ({
|
||||
value: product._id.toString(),
|
||||
label: product.title_fa || product.title_en
|
||||
}))
|
||||
}, [allProducts])
|
||||
|
||||
const handleChange = (newValue: string[]) => {
|
||||
// Update selected products list
|
||||
const newSelectedProducts = allProducts.filter(product =>
|
||||
newValue.includes(product._id.toString())
|
||||
)
|
||||
setSelectedProducts(newSelectedProducts)
|
||||
|
||||
// Convert back to numbers for the parent component
|
||||
onChange(newValue.map(v => parseInt(v)))
|
||||
}
|
||||
|
||||
// Custom search handler for MultiSelectSearchable
|
||||
const handleSearch = (term: string) => {
|
||||
setSearchTerm(term)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block mb-1">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<MultiSelectSearchable
|
||||
options={options}
|
||||
value={value.map(v => v.toString())}
|
||||
onChange={handleChange}
|
||||
onSearch={handleSearch}
|
||||
onOpenChange={setDropdownOpen}
|
||||
placeholder={placeholder}
|
||||
error_text={error_text}
|
||||
disabled={disabled}
|
||||
loading={isLoading}
|
||||
/>
|
||||
|
||||
{dropdownOpen && !isLoading && allProducts.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{searchTerm ? 'محصولی یافت نشد.' : 'برای جستجو نام محصول را تایپ کنید.'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductMultiSelect
|
||||
@@ -13,6 +13,7 @@ type Props = {
|
||||
error_text?: string,
|
||||
placeholder?: string,
|
||||
label?: string,
|
||||
value?: any,
|
||||
} & SelectHTMLAttributes<HTMLSelectElement>
|
||||
|
||||
const Select: FC<Props> = (props: Props) => {
|
||||
|
||||
Reference in New Issue
Block a user