Добавлены новые поля для выбранных товаров на странице создания поставки, включая идентификатор и имя оптовика. Обновлена логика обновления количества товаров с учетом выбранного оптовика. Реализована группировка товаров в корзине по оптовикам с улучшенным отображением и функциональностью. Добавлены кнопки для управления количеством товаров в корзине и улучшен интерфейс отображения итогов заказа.
This commit is contained in:
Bivekich
@ -64,6 +64,8 @@ interface WholesalerProduct {
|
|||||||
|
|
||||||
interface SelectedProduct extends WholesalerProduct {
|
interface SelectedProduct extends WholesalerProduct {
|
||||||
selectedQuantity: number
|
selectedQuantity: number
|
||||||
|
wholesalerId: string
|
||||||
|
wholesalerName: string
|
||||||
}
|
}
|
||||||
|
|
||||||
// Моковые данные оптовиков
|
// Моковые данные оптовиков
|
||||||
@ -243,27 +245,35 @@ export function CreateSupplyPage() {
|
|||||||
|
|
||||||
const updateProductQuantity = (productId: string, quantity: number) => {
|
const updateProductQuantity = (productId: string, quantity: number) => {
|
||||||
const product = mockProducts.find(p => p.id === productId)
|
const product = mockProducts.find(p => p.id === productId)
|
||||||
if (!product) return
|
if (!product || !selectedWholesaler) return
|
||||||
|
|
||||||
setSelectedProducts(prev => {
|
setSelectedProducts(prev => {
|
||||||
const existing = prev.find(p => p.id === productId)
|
const existing = prev.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
|
||||||
|
|
||||||
if (quantity === 0) {
|
if (quantity === 0) {
|
||||||
return prev.filter(p => p.id !== productId)
|
return prev.filter(p => !(p.id === productId && p.wholesalerId === selectedWholesaler.id))
|
||||||
}
|
}
|
||||||
|
|
||||||
if (existing) {
|
if (existing) {
|
||||||
return prev.map(p =>
|
return prev.map(p =>
|
||||||
p.id === productId ? { ...p, selectedQuantity: quantity } : p
|
p.id === productId && p.wholesalerId === selectedWholesaler.id
|
||||||
|
? { ...p, selectedQuantity: quantity }
|
||||||
|
: p
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return [...prev, { ...product, selectedQuantity: quantity }]
|
return [...prev, {
|
||||||
|
...product,
|
||||||
|
selectedQuantity: quantity,
|
||||||
|
wholesalerId: selectedWholesaler.id,
|
||||||
|
wholesalerName: selectedWholesaler.name
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const getSelectedQuantity = (productId: string): number => {
|
const getSelectedQuantity = (productId: string): number => {
|
||||||
const selected = selectedProducts.find(p => p.id === productId)
|
if (!selectedWholesaler) return 0
|
||||||
|
const selected = selectedProducts.find(p => p.id === productId && p.wholesalerId === selectedWholesaler.id)
|
||||||
return selected ? selected.selectedQuantity : 0
|
return selected ? selected.selectedQuantity : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -335,70 +345,144 @@ export function CreateSupplyPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showSummary && selectedProducts.length > 0 && (
|
{showSummary && selectedProducts.length > 0 && (
|
||||||
<Card className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 backdrop-blur border-purple-500/30 p-8 mb-8">
|
<Card className="bg-white/5 backdrop-blur border-white/10 mb-8">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="p-6">
|
||||||
<h3 className="text-white font-semibold text-xl flex items-center">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<ShoppingBag className="h-5 w-5 mr-2" />
|
<h3 className="text-white font-semibold text-xl flex items-center">
|
||||||
Резюме заказа
|
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||||
</h3>
|
Корзина ({selectedProducts.length})
|
||||||
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
|
</h3>
|
||||||
{selectedProducts.length} товаров
|
<Button
|
||||||
</Badge>
|
variant="ghost"
|
||||||
</div>
|
size="sm"
|
||||||
<div className="space-y-4">
|
onClick={() => setShowSummary(false)}
|
||||||
{selectedProducts.map((product) => {
|
className="text-white/60 hover:text-white"
|
||||||
const discountedPrice = product.discount
|
>
|
||||||
? product.price * (1 - product.discount / 100)
|
✕
|
||||||
: product.price
|
</Button>
|
||||||
return (
|
</div>
|
||||||
<div key={product.id} className="flex justify-between items-center bg-white/5 rounded-lg p-4">
|
|
||||||
<div className="flex items-center space-x-4">
|
{/* Текущий оптовик */}
|
||||||
<img
|
<div className="mb-6">
|
||||||
src={product.mainImage || '/api/placeholder/60/60'}
|
<div className="flex items-center mb-3 pb-2 border-b border-white/10">
|
||||||
alt={product.name}
|
<Building2 className="h-4 w-4 text-blue-400 mr-2" />
|
||||||
className="w-12 h-12 rounded-lg object-cover"
|
<span className="text-white font-medium">{selectedWholesaler?.name}</span>
|
||||||
/>
|
<Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||||
<div>
|
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).length} товар(ов)
|
||||||
<span className="text-white font-medium">{product.name}</span>
|
</Badge>
|
||||||
<div className="flex items-center space-x-2 mt-1">
|
</div>
|
||||||
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
|
||||||
{product.discount && (
|
<div className="space-y-3">
|
||||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 text-xs">
|
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).map((product) => {
|
||||||
-{product.discount}%
|
const discountedPrice = product.discount
|
||||||
</Badge>
|
? product.price * (1 - product.discount / 100)
|
||||||
)}
|
: product.price
|
||||||
|
const totalPrice = discountedPrice * product.selectedQuantity
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={product.id} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
|
||||||
|
<img
|
||||||
|
src={product.mainImage || '/api/placeholder/60/60'}
|
||||||
|
alt={product.name}
|
||||||
|
className="w-16 h-16 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
|
||||||
|
<p className="text-white/60 text-xs mb-2">{product.article}</p>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
|
||||||
|
{product.discount && (
|
||||||
|
<div className="text-white/40 text-xs line-through">
|
||||||
|
{formatCurrency(product.price * product.selectedQuantity)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
<div className="text-right">
|
})}
|
||||||
<span className="text-white font-bold">
|
</div>
|
||||||
{formatCurrency(discountedPrice * product.selectedQuantity)}
|
</div>
|
||||||
</span>
|
|
||||||
{product.discount && (
|
{/* Другие оптовики в корзине */}
|
||||||
<div className="text-white/40 text-sm line-through">
|
{Object.entries(
|
||||||
{formatCurrency(product.price * product.selectedQuantity)}
|
selectedProducts.filter(p => p.wholesalerId !== selectedWholesaler?.id).reduce((acc, product) => {
|
||||||
</div>
|
if (!acc[product.wholesalerId]) {
|
||||||
)}
|
acc[product.wholesalerId] = {
|
||||||
</div>
|
wholesaler: product.wholesalerName,
|
||||||
</div>
|
products: []
|
||||||
)
|
}
|
||||||
})}
|
}
|
||||||
<div className="border-t border-white/20 pt-6 flex justify-between items-center">
|
acc[product.wholesalerId].products.push(product)
|
||||||
<span className="text-white font-semibold text-lg">
|
return acc
|
||||||
Итого: {getTotalItems()} товаров
|
}, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
|
||||||
</span>
|
).map(([wholesalerId, group]) => (
|
||||||
<span className="text-white font-bold text-2xl">
|
<div key={wholesalerId} className="mb-6 last:mb-0">
|
||||||
{formatCurrency(getTotalAmount())}
|
<div className="flex items-center mb-3 pb-2 border-b border-white/10">
|
||||||
</span>
|
<Building2 className="h-4 w-4 text-purple-400 mr-2" />
|
||||||
|
<span className="text-white font-medium">{group.wholesaler}</span>
|
||||||
|
<Badge className="ml-2 bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
|
||||||
|
{group.products.length} товар(ов)
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{group.products.map((product) => {
|
||||||
|
const discountedPrice = product.discount
|
||||||
|
? product.price * (1 - product.discount / 100)
|
||||||
|
: product.price
|
||||||
|
const totalPrice = discountedPrice * product.selectedQuantity
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
|
||||||
|
<img
|
||||||
|
src={product.mainImage || '/api/placeholder/60/60'}
|
||||||
|
alt={product.name}
|
||||||
|
className="w-16 h-16 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
|
||||||
|
<p className="text-white/60 text-xs mb-2">{product.article}</p>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-white/60 text-sm">× {product.selectedQuantity}</span>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
|
||||||
|
{product.discount && (
|
||||||
|
<div className="text-white/40 text-xs line-through">
|
||||||
|
{formatCurrency(product.price * product.selectedQuantity)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Итого */}
|
||||||
|
<div className="border-t border-white/20 pt-4 mt-6">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-white font-semibold text-lg">
|
||||||
|
Итого: {getTotalItems()} товаров
|
||||||
|
</span>
|
||||||
|
<span className="text-white font-bold text-2xl">
|
||||||
|
{formatCurrency(getTotalAmount())}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className="w-full mt-4 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||||
|
onClick={handleCreateSupply}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Создать поставку
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-lg py-6"
|
|
||||||
onClick={handleCreateSupply}
|
|
||||||
disabled={selectedProducts.length === 0}
|
|
||||||
>
|
|
||||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
|
||||||
Создать поставку
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
@ -596,8 +680,172 @@ export function CreateSupplyPage() {
|
|||||||
<p className="text-white/60">Выберите оптовика для создания поставки</p>
|
<p className="text-white/60">Выберите оптовика для создания поставки</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{selectedProducts.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setShowSummary(!showSummary)}
|
||||||
|
className="text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Корзина ({selectedProducts.length})
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Корзина как в маркете */}
|
||||||
|
{showSummary && selectedProducts.length > 0 && (
|
||||||
|
<Card className="bg-white/5 backdrop-blur border-white/10 mb-8">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-white font-semibold text-xl flex items-center">
|
||||||
|
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||||
|
Корзина ({selectedProducts.length})
|
||||||
|
</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setShowSummary(false)}
|
||||||
|
className="text-white/60 hover:text-white"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Группировка по оптовикам */}
|
||||||
|
{Object.entries(
|
||||||
|
selectedProducts.reduce((acc, product) => {
|
||||||
|
if (!acc[product.wholesalerId]) {
|
||||||
|
acc[product.wholesalerId] = {
|
||||||
|
wholesaler: product.wholesalerName,
|
||||||
|
products: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
acc[product.wholesalerId].products.push(product)
|
||||||
|
return acc
|
||||||
|
}, {} as Record<string, { wholesaler: string; products: SelectedProduct[] }>)
|
||||||
|
).map(([wholesalerId, group]) => (
|
||||||
|
<div key={wholesalerId} className="mb-6 last:mb-0">
|
||||||
|
<div className="flex items-center mb-3 pb-2 border-b border-white/10">
|
||||||
|
<Building2 className="h-4 w-4 text-blue-400 mr-2" />
|
||||||
|
<span className="text-white font-medium">{group.wholesaler}</span>
|
||||||
|
<Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
|
||||||
|
{group.products.length} товар(ов)
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{group.products.map((product) => {
|
||||||
|
const discountedPrice = product.discount
|
||||||
|
? product.price * (1 - product.discount / 100)
|
||||||
|
: product.price
|
||||||
|
const totalPrice = discountedPrice * product.selectedQuantity
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={`${product.wholesalerId}-${product.id}`} className="flex items-center space-x-4 bg-white/5 rounded-lg p-4">
|
||||||
|
<img
|
||||||
|
src={product.mainImage || '/api/placeholder/60/60'}
|
||||||
|
alt={product.name}
|
||||||
|
className="w-16 h-16 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-white font-medium text-sm mb-1 truncate">{product.name}</h4>
|
||||||
|
<p className="text-white/60 text-xs mb-2">{product.article}</p>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
const newQuantity = Math.max(0, product.selectedQuantity - 1)
|
||||||
|
if (newQuantity === 0) {
|
||||||
|
setSelectedProducts(prev =>
|
||||||
|
prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
setSelectedProducts(prev =>
|
||||||
|
prev.map(p =>
|
||||||
|
p.id === product.id && p.wholesalerId === product.wholesalerId
|
||||||
|
? { ...p, selectedQuantity: newQuantity }
|
||||||
|
: p
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Minus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<span className="text-white text-sm w-8 text-center">{product.selectedQuantity}</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedProducts(prev =>
|
||||||
|
prev.map(p =>
|
||||||
|
p.id === product.id && p.wholesalerId === product.wholesalerId
|
||||||
|
? { ...p, selectedQuantity: Math.min(product.quantity, p.selectedQuantity + 1) }
|
||||||
|
: p
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
disabled={product.selectedQuantity >= product.quantity}
|
||||||
|
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
|
||||||
|
{product.discount && (
|
||||||
|
<div className="text-white/40 text-xs line-through">
|
||||||
|
{formatCurrency(product.price * product.selectedQuantity)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedProducts(prev =>
|
||||||
|
prev.filter(p => !(p.id === product.id && p.wholesalerId === product.wholesalerId))
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Итого */}
|
||||||
|
<div className="border-t border-white/20 pt-4 mt-6">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-white font-semibold text-lg">
|
||||||
|
Итого: {getTotalItems()} товаров
|
||||||
|
</span>
|
||||||
|
<span className="text-white font-bold text-2xl">
|
||||||
|
{formatCurrency(getTotalAmount())}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className="w-full mt-4 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
|
||||||
|
onClick={handleCreateSupply}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||||
|
Создать поставку
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{mockWholesalers.map((wholesaler) => (
|
{mockWholesalers.map((wholesaler) => (
|
||||||
<Card
|
<Card
|
||||||
@ -671,6 +919,20 @@ export function CreateSupplyPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Floating корзина */}
|
||||||
|
{selectedProducts.length > 0 && !showSummary && (
|
||||||
|
<div className="fixed bottom-6 right-6 z-50">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-2xl"
|
||||||
|
onClick={() => setShowSummary(true)}
|
||||||
|
>
|
||||||
|
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||||
|
{selectedProducts.length} • {formatCurrency(getTotalAmount())}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user