Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлены новые поля для выбранных товаров на странице создания поставки, включая идентификатор и имя оптовика. Обновлена логика обновления количества товаров с учетом выбранного оптовика. Реализована группировка товаров в корзине по оптовикам с улучшенным отображением и функциональностью. Добавлены кнопки для управления количеством товаров в корзине и улучшен интерфейс отображения итогов заказа.

Browse Source
This commit is contained in:
Bivekich
2025-07-18 16:06:59 +03:00
parent 5157113563
commit ba9333f959
1 changed files with 329 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/components/supplies/create-supply-page.tsx
View File

@ -64,6 +64,8 @@ interface WholesalerProduct {
interface SelectedProduct extends WholesalerProduct {
selectedQuantity: number
wholesalerId: string
wholesalerName: string
}
// Моковые данные оптовиков
@ -243,27 +245,35 @@ export function CreateSupplyPage() {
const updateProductQuantity = (productId: string, quantity: number) => {
const product = mockProducts.find(p => p.id === productId)
if (!product) return
if (!product || !selectedWholesaler) return
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) {
return prev.filter(p => p.id !== productId)
return prev.filter(p => !(p.id === productId && p.wholesalerId === selectedWholesaler.id))
}
if (existing) {
return prev.map(p =>
p.id === productId ? { ...p, selectedQuantity: quantity } : p
p.id === productId && p.wholesalerId === selectedWholesaler.id
? { ...p, selectedQuantity: quantity }
: p
)
} else {
return [...prev, { ...product, selectedQuantity: quantity }]
return [...prev, {
...product,
selectedQuantity: quantity,
wholesalerId: selectedWholesaler.id,
wholesalerName: selectedWholesaler.name
}]
}
})
}
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
}
@ -335,55 +345,129 @@ export function CreateSupplyPage() {
</div>
{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="p-6">
<div className="flex items-center justify-between mb-6">
<h3 className="text-white font-semibold text-xl flex items-center">
<ShoppingBag className="h-5 w-5 mr-2" />
Резюме заказа
<ShoppingCart className="h-5 w-5 mr-2" />
Корзина ({selectedProducts.length})
</h3>
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
{selectedProducts.length} товаров
<Button
variant="ghost"
size="sm"
onClick={() => setShowSummary(false)}
className="text-white/60 hover:text-white"
>
✕
</Button>
</div>
{/* Текущий оптовик */}
<div className="mb-6">
<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">{selectedWholesaler?.name}</span>
<Badge className="ml-2 bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).length} товар(ов)
</Badge>
</div>
<div className="space-y-4">
{selectedProducts.map((product) => {
<div className="space-y-3">
{selectedProducts.filter(p => p.wholesalerId === selectedWholesaler?.id).map((product) => {
const discountedPrice = product.discount
? product.price * (1 - product.discount / 100)
: product.price
const totalPrice = discountedPrice * product.selectedQuantity
return (
<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">
<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-12 h-12 rounded-lg object-cover"
className="w-16 h-16 rounded-lg object-cover"
/>
<div>
<span className="text-white font-medium">{product.name}</span>
<div className="flex items-center space-x-2 mt-1">
<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>
{product.discount && (
<Badge className="bg-red-500/20 text-red-300 border-red-500/30 text-xs">
-{product.discount}%
</Badge>
)}
</div>
</div>
</div>
<div className="text-right">
<span className="text-white font-bold">
{formatCurrency(discountedPrice * product.selectedQuantity)}
</span>
<div className="text-white font-semibold text-sm">{formatCurrency(totalPrice)}</div>
{product.discount && (
<div className="text-white/40 text-sm line-through">
<div className="text-white/40 text-xs line-through">
{formatCurrency(product.price * product.selectedQuantity)}
</div>
)}
</div>
</div>
</div>
</div>
)
})}
<div className="border-t border-white/20 pt-6 flex justify-between items-center">
</div>
</div>
{/* Другие оптовики в корзине */}
{Object.entries(
selectedProducts.filter(p => p.wholesalerId !== selectedWholesaler?.id).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-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>
@ -392,14 +476,14 @@ export function CreateSupplyPage() {
</span>
</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"
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}
disabled={selectedProducts.length === 0}
>
<ShoppingCart className="h-5 w-5 mr-2" />
<ShoppingCart className="h-4 w-4 mr-2" />
Создать поставку
</Button>
</div>
</div>
</Card>
)}
@ -596,8 +680,172 @@ export function CreateSupplyPage() {
<p className="text-white/60">Выберите оптовика для создания поставки</p>
</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>
{/* Корзина как в маркете */}
{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">
{mockWholesalers.map((wholesaler) => (
<Card
@ -671,6 +919,20 @@ export function CreateSupplyPage() {
</Card>
))}
</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>
</main>
</div>