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

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

Browse Source
This commit is contained in:
Bivekich
2025-07-22 15:50:52 +03:00
parent 0c0ee9db37
commit 0ca189126c
4 changed files with 537 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
src/components/market/market-counterparties.tsx
View File

@ -1,15 +1,27 @@
"use client"
import React from 'react'
import React, { useState, useMemo } from 'react'
import { useQuery, useMutation } from '@apollo/client'
import { Button } from '@/components/ui/button'
import { GlassInput } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import {
Users,
ArrowUpCircle,
ArrowDownCircle
ArrowDownCircle,
Search,
Filter,
SortAsc,
SortDesc,
Calendar,
Building,
Phone,
Mail,
MapPin,
X
} from 'lucide-react'
import { OrganizationCard } from './organization-card'
import { OrganizationAvatar } from './organization-avatar'
@ -38,7 +50,15 @@ interface CounterpartyRequest {
receiver: Organization
}
type SortField = 'name' | 'date' | 'inn' | 'type'
type SortOrder = 'asc' | 'desc'
export function MarketCounterparties() {
const [searchQuery, setSearchQuery] = useState('')
const [typeFilter, setTypeFilter] = useState<string>('all')
const [sortField, setSortField] = useState<SortField>('name')
const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
const { data: counterpartiesData, loading: counterpartiesLoading } = useQuery(GET_MY_COUNTERPARTIES)
const { data: incomingData, loading: incomingLoading } = useQuery(GET_INCOMING_REQUESTS)
const { data: outgoingData, loading: outgoingLoading } = useQuery(GET_OUTGOING_REQUESTS)
@ -77,6 +97,56 @@ export function MarketCounterparties() {
awaitRefetchQueries: true
})
// Фильтрация и сортировка контрагентов
const filteredAndSortedCounterparties = useMemo(() => {
const filtered = (counterpartiesData?.myCounterparties || []).filter((org: Organization) => {
const matchesSearch = !searchQuery ||
(org.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
org.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
org.inn.includes(searchQuery) ||
org.address?.toLowerCase().includes(searchQuery.toLowerCase()))
const matchesType = typeFilter === 'all' || org.type === typeFilter
return matchesSearch && matchesType
})
// Сортировка
filtered.sort((a: Organization, b: Organization) => {
let aValue: string | number
let bValue: string | number
switch (sortField) {
case 'name':
aValue = (a.name || a.fullName || '').toLowerCase()
bValue = (b.name || b.fullName || '').toLowerCase()
break
case 'date':
aValue = new Date(a.createdAt).getTime()
bValue = new Date(b.createdAt).getTime()
break
case 'inn':
aValue = a.inn
bValue = b.inn
break
case 'type':
aValue = a.type
bValue = b.type
break
default:
return 0
}
if (sortOrder === 'asc') {
return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
} else {
return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
}
})
return filtered
}, [counterpartiesData?.myCounterparties, searchQuery, typeFilter, sortField, sortOrder])
const handleAcceptRequest = async (requestId: string) => {
try {
await respondToRequest({
@ -146,20 +216,41 @@ export function MarketCounterparties() {
}
}
const clearFilters = () => {
setSearchQuery('')
setTypeFilter('all')
setSortField('name')
setSortOrder('asc')
}
const hasActiveFilters = searchQuery || typeFilter !== 'all' || sortField !== 'name' || sortOrder !== 'asc'
const counterparties = counterpartiesData?.myCounterparties || []
const incomingRequests = incomingData?.incomingRequests || []
const outgoingRequests = outgoingData?.outgoingRequests || []
const getTypeLabel = (type: string) => {
switch (type) {
case 'FULFILLMENT': return 'Фулфилмент'
case 'SELLER': return 'Селлер'
case 'LOGIST': return 'Логистика'
case 'WHOLESALE': return 'Оптовик'
default: return type
}
}
const getTypeBadgeStyles = (type: string) => {
switch (type) {
case 'FULFILLMENT': return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
case 'SELLER': return 'bg-green-500/20 text-green-300 border-green-500/30'
case 'LOGIST': return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
case 'WHOLESALE': return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
default: return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
}
}
return (
<div className="h-full flex flex-col">
<div className="flex items-center space-x-3 mb-6">
<Users className="h-6 w-6 text-blue-400" />
<div>
<h3 className="text-lg font-semibold text-white">Мои контрагенты</h3>
<p className="text-white/60 text-sm">Управление контрагентами и заявками</p>
</div>
</div>
<div className="flex-1 overflow-hidden">
<Tabs defaultValue="counterparties" className="h-full flex flex-col">
<TabsList className="grid w-full grid-cols-3 bg-white/5 border-white/10">
@ -180,33 +271,200 @@ export function MarketCounterparties() {
</TabsTrigger>
</TabsList>
<TabsContent value="counterparties" className="flex-1 overflow-auto mt-4">
{counterpartiesLoading ? (
<div className="flex items-center justify-center p-8">
<div className="text-white/60">Загрузка...</div>
</div>
) : counterparties.length === 0 ? (
<div className="glass-card p-8">
<div className="text-center">
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
<p className="text-white/60">У вас пока нет контрагентов</p>
<p className="text-white/40 text-sm mt-2">
Перейдите на другие вкладки, чтобы найти партнеров
</p>
<TabsContent value="counterparties" className="flex-1 overflow-hidden mt-3 flex flex-col">
{/* Компактная панель фильтров */}
<div className="glass-card p-3 mb-3 space-y-3">
<div className="flex flex-col xl:flex-row gap-3">
{/* Поиск */}
<div className="flex-1 min-w-0">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
<GlassInput
placeholder="Поиск..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-9"
/>
</div>
</div>
{/* Фильтры и сортировка */}
<div className="flex gap-2">
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="glass-input text-white border-white/20 h-9 min-w-[120px]">
<Filter className="h-3 w-3 mr-1" />
<SelectValue placeholder="Тип" />
</SelectTrigger>
<SelectContent className="glass-card border-white/20">
<SelectItem value="all">Все</SelectItem>
<SelectItem value="FULFILLMENT">Фулфилмент</SelectItem>
<SelectItem value="SELLER">Селлер</SelectItem>
<SelectItem value="LOGIST">Логистика</SelectItem>
<SelectItem value="WHOLESALE">Оптовик</SelectItem>
</SelectContent>
</Select>
<Select value={sortField} onValueChange={(value) => setSortField(value as SortField)}>
<SelectTrigger className="glass-input text-white border-white/20 h-9 min-w-[100px]">
<SelectValue />
</SelectTrigger>
<SelectContent className="glass-card border-white/20">
<SelectItem value="name">Название</SelectItem>
<SelectItem value="date">Дата</SelectItem>
<SelectItem value="inn">ИНН</SelectItem>
<SelectItem value="type">Тип</SelectItem>
</SelectContent>
</Select>
<Button
variant="outline"
size="sm"
onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
className="glass-input border-white/20 text-white hover:bg-white/10 h-9 w-9 p-0"
>
{sortOrder === 'asc' ? <SortAsc className="h-3 w-3" /> : <SortDesc className="h-3 w-3" />}
</Button>
{hasActiveFilters && (
<Button
variant="ghost"
size="sm"
onClick={clearFilters}
className="text-white/60 hover:text-white hover:bg-white/10 h-9 w-9 p-0"
>
<X className="h-3 w-3" />
</Button>
)}
</div>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{counterparties.map((organization: Organization) => (
<OrganizationCard
key={organization.id}
organization={organization}
onRemove={handleRemoveCounterparty}
showRemoveButton={true}
/>
))}
{/* Статистика и быстрые фильтры */}
<div className="flex items-center justify-between text-xs">
<div className="text-white/60">
{filteredAndSortedCounterparties.length} из {counterparties.length}
</div>
<div className="flex gap-1">
{['FULFILLMENT', 'SELLER', 'LOGIST', 'WHOLESALE'].map((type) => {
const count = counterparties.filter((org: Organization) => org.type === type).length
if (count === 0) return null
return (
<Button
key={type}
variant="ghost"
size="sm"
onClick={() => setTypeFilter(typeFilter === type ? 'all' : type)}
className={`h-6 px-2 text-xs ${
typeFilter === type
? getTypeBadgeStyles(type) + ' border'
: 'text-white/50 hover:text-white hover:bg-white/10'
}`}
>
{getTypeLabel(type)} ({count})
</Button>
)
})}
</div>
</div>
)}
</div>
{/* Список контрагентов */}
<div className="flex-1 overflow-auto">
{counterpartiesLoading ? (
<div className="flex items-center justify-center p-8">
<div className="text-white/60">Загрузка...</div>
</div>
) : filteredAndSortedCounterparties.length === 0 ? (
<div className="glass-card p-8">
<div className="text-center">
{counterparties.length === 0 ? (
<>
<Users className="h-12 w-12 text-white/20 mx-auto mb-4" />
<p className="text-white/60">У вас пока нет контрагентов</p>
<p className="text-white/40 text-sm mt-2">
Перейдите на другие вкладки, чтобы найти партнеров
</p>
</>
) : (
<>
<Search className="h-12 w-12 text-white/20 mx-auto mb-4" />
<p className="text-white/60">Ничего не найдено</p>
<p className="text-white/40 text-sm mt-2">
Попробуйте изменить параметры поиска или фильтрации
</p>
</>
)}
</div>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filteredAndSortedCounterparties.map((organization: Organization) => (
<div key={organization.id} className="glass-card p-4 w-full hover:bg-white/5 transition-colors">
<div className="flex flex-col space-y-4">
<div className="flex items-start space-x-3">
<OrganizationAvatar organization={organization} size="md" />
<div className="flex-1 min-w-0">
<div className="flex flex-col space-y-2 mb-3">
<h4 className="text-white font-medium text-lg leading-tight">
{organization.name || organization.fullName}
</h4>
<div className="flex items-center space-x-2">
<Badge className={getTypeBadgeStyles(organization.type)}>
{getTypeLabel(organization.type)}
</Badge>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center text-white/60 text-sm">
<Building className="h-3 w-3 mr-2 flex-shrink-0" />
<span>ИНН: {organization.inn}</span>
</div>
{organization.address && (
<div className="flex items-start text-white/60 text-sm">
<MapPin className="h-3 w-3 mr-2 mt-0.5 flex-shrink-0" />
<span className="line-clamp-2">{organization.address}</span>
</div>
)}
{organization.phones && organization.phones.length > 0 && (
<div className="flex items-center text-white/60 text-sm">
<Phone className="h-3 w-3 mr-2 flex-shrink-0" />
<span>{organization.phones[0].value}</span>
</div>
)}
{organization.emails && organization.emails.length > 0 && (
<div className="flex items-center text-white/60 text-sm">
<Mail className="h-3 w-3 mr-2 flex-shrink-0" />
<span className="truncate">{organization.emails[0].value}</span>
</div>
)}
<div className="flex items-center text-white/40 text-xs pt-2">
<Calendar className="h-3 w-3 mr-2 flex-shrink-0" />
<span>Добавлен {formatDate(organization.createdAt)}</span>
</div>
</div>
</div>
</div>
<Button
size="sm"
variant="outline"
onClick={() => handleRemoveCounterparty(organization.id)}
className="bg-red-500/20 hover:bg-red-500/30 text-red-300 border-red-500/30 cursor-pointer w-full"
>
Удалить из контрагентов
</Button>
</div>
</div>
))}
</div>
)}
</div>
</TabsContent>
<TabsContent value="incoming" className="flex-1 overflow-auto mt-4">
@ -234,18 +492,8 @@ export function MarketCounterparties() {
{request.sender.name || request.sender.fullName}
</h4>
<div className="flex items-center space-x-3">
<Badge className={
request.sender.type === 'FULFILLMENT' ? 'bg-blue-500/20 text-blue-300 border-blue-500/30' :
request.sender.type === 'SELLER' ? 'bg-green-500/20 text-green-300 border-green-500/30' :
request.sender.type === 'LOGIST' ? 'bg-orange-500/20 text-orange-300 border-orange-500/30' :
request.sender.type === 'WHOLESALE' ? 'bg-purple-500/20 text-purple-300 border-purple-500/30' :
'bg-gray-500/20 text-gray-300 border-gray-500/30'
}>
{request.sender.type === 'FULFILLMENT' ? 'Фулфилмент' :
request.sender.type === 'SELLER' ? 'Селлер' :
request.sender.type === 'LOGIST' ? 'Логистика' :
request.sender.type === 'WHOLESALE' ? 'Оптовик' :
request.sender.type}
<Badge className={getTypeBadgeStyles(request.sender.type)}>
{getTypeLabel(request.sender.type)}
</Badge>
</div>
</div>
@ -318,18 +566,8 @@ export function MarketCounterparties() {
{request.receiver.name || request.receiver.fullName}
</h4>
<div className="flex items-center space-x-3">
<Badge className={
request.receiver.type === 'FULFILLMENT' ? 'bg-blue-500/20 text-blue-300 border-blue-500/30' :
request.receiver.type === 'SELLER' ? 'bg-green-500/20 text-green-300 border-green-500/30' :
request.receiver.type === 'LOGIST' ? 'bg-orange-500/20 text-orange-300 border-orange-500/30' :
request.receiver.type === 'WHOLESALE' ? 'bg-purple-500/20 text-purple-300 border-purple-500/30' :
'bg-gray-500/20 text-gray-300 border-gray-500/30'
}>
{request.receiver.type === 'FULFILLMENT' ? 'Фулфилмент' :
request.receiver.type === 'SELLER' ? 'Селлер' :
request.receiver.type === 'LOGIST' ? 'Логистика' :
request.receiver.type === 'WHOLESALE' ? 'Оптовик' :
request.receiver.type}
<Badge className={getTypeBadgeStyles(request.receiver.type)}>
{getTypeLabel(request.receiver.type)}
</Badge>
<Badge className={
request.status === 'PENDING' ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30' :

32
src/components/supplies/wb-product-cards.tsx
View File

@ -437,7 +437,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.object.toLowerCase().includes(searchTerm.toLowerCase())
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
)
setWbCards(filteredCards)
@ -450,7 +450,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
card.object.toLowerCase().includes(searchTerm.toLowerCase())
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
)
setWbCards(filteredCards)
console.log('Найдено моковых товаров (fallback):', filteredCards.length)
@ -573,14 +573,20 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
}
const nextImage = () => {
if (selectedCardForDetails && selectedCardForDetails.mediaFiles?.length > 1) {
setCurrentImageIndex((prev) => (prev + 1) % selectedCardForDetails.mediaFiles.length)
if (selectedCardForDetails) {
const images = WildberriesService.getCardImages(selectedCardForDetails)
if (images.length > 1) {
setCurrentImageIndex((prev) => (prev + 1) % images.length)
}
}
}
const prevImage = () => {
if (selectedCardForDetails && selectedCardForDetails.mediaFiles?.length > 1) {
setCurrentImageIndex((prev) => (prev - 1 + selectedCardForDetails.mediaFiles.length) % selectedCardForDetails.mediaFiles.length)
if (selectedCardForDetails) {
const images = WildberriesService.getCardImages(selectedCardForDetails)
if (images.length > 1) {
setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
}
}
}
@ -652,7 +658,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
<Card key={sc.card.nmID} className="bg-white/10 backdrop-blur border-white/20 p-4">
<div className="flex space-x-4">
<img
src={sc.card.mediaFiles?.[0] || '/api/placeholder/120/120'}
src={WildberriesService.getCardImage(sc.card, 'c246x328') || '/api/placeholder/120/120'}
alt={sc.card.title}
className="w-20 h-20 rounded-lg object-cover"
/>
@ -1017,7 +1023,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
<div className="relative">
<div className="aspect-square relative bg-white/5 overflow-hidden rounded-lg">
<img
src={card.mediaFiles?.[0] || '/api/placeholder/300/300'}
src={WildberriesService.getCardImage(card, 'c516x688') || '/api/placeholder/300/300'}
alt={card.title}
className="w-full h-full object-cover cursor-pointer group-hover:scale-110 transition-transform duration-500"
onClick={() => handleCardClick(card)}
@ -1201,13 +1207,13 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
<div className="p-4 lg:p-6 space-y-4 overflow-hidden">
<div className="relative">
<img
src={selectedCardForDetails.mediaFiles?.[currentImageIndex] || '/api/placeholder/400/400'}
src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
alt={selectedCardForDetails.title}
className="w-full aspect-square rounded-lg object-cover"
/>
{/* Навигация по изображениям */}
{selectedCardForDetails.mediaFiles?.length > 1 && (
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
<>
<button
onClick={prevImage}
@ -1223,17 +1229,17 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
</button>
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
{currentImageIndex + 1} из {selectedCardForDetails.mediaFiles?.length || 0}
{currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
</div>
</>
)}
</div>
{/* Миниатюры изображений */}
{selectedCardForDetails.mediaFiles?.length > 1 && (
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
<div className="w-full overflow-hidden">
<div className="flex space-x-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
{selectedCardForDetails.mediaFiles?.map((image, index) => (
{WildberriesService.getCardImages(selectedCardForDetails).map((image, index) => (
<img
key={index}
src={image}