Удален файл интеграции с Parts Index API и обновлены компоненты для работы с корзиной и избранным. Добавлены функции для обработки добавления товаров в корзину с уведомлениями, улучшена логика работы с избранным, а также добавлены фильтры для истории поиска по производителю.
This commit is contained in:
@ -1,22 +1,47 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { PartsSearchHistoryItem } from '@/lib/graphql/search-history';
|
||||
|
||||
interface ProfileHistoryTabsProps {
|
||||
tabs: string[];
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
historyItems: PartsSearchHistoryItem[];
|
||||
selectedManufacturer: string;
|
||||
onManufacturerChange: (manufacturer: string) => void;
|
||||
}
|
||||
|
||||
const manufacturers = ["Все", "VAG", "Toyota", "Ford", "BMW"];
|
||||
|
||||
const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
|
||||
tabs,
|
||||
activeTab,
|
||||
onTabChange,
|
||||
historyItems,
|
||||
selectedManufacturer,
|
||||
onManufacturerChange,
|
||||
}) => {
|
||||
const [selectedManufacturer, setSelectedManufacturer] = useState(manufacturers[0]);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Получаем уникальных производителей из истории поиска
|
||||
const getUniqueManufacturers = () => {
|
||||
const manufacturersSet = new Set<string>();
|
||||
|
||||
historyItems.forEach(item => {
|
||||
// Добавляем бренд из поля brand
|
||||
if (item.brand) {
|
||||
manufacturersSet.add(item.brand);
|
||||
}
|
||||
// Добавляем бренд из информации об автомобиле
|
||||
if (item.vehicleInfo?.brand) {
|
||||
manufacturersSet.add(item.vehicleInfo.brand);
|
||||
}
|
||||
});
|
||||
|
||||
const uniqueManufacturers = Array.from(manufacturersSet).sort();
|
||||
return ["Все", ...uniqueManufacturers];
|
||||
};
|
||||
|
||||
const manufacturers = getUniqueManufacturers();
|
||||
|
||||
// Закрытие дропдауна при клике вне
|
||||
React.useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
@ -34,6 +59,11 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
|
||||
};
|
||||
}, [isDropdownOpen]);
|
||||
|
||||
const handleManufacturerSelect = (manufacturer: string) => {
|
||||
onManufacturerChange(manufacturer);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-5 w-full max-md:max-w-full">
|
||||
{tabs.map((tab) => (
|
||||
@ -69,20 +99,41 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
|
||||
>
|
||||
<span className="truncate">{selectedManufacturer}</span>
|
||||
<span className="ml-2 flex-shrink-0 flex items-center">
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 20 20"><path d="M6 8l4 4 4-4" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
className={`transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
|
||||
>
|
||||
<path d="M6 8l4 4 4-4" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
{isDropdownOpen && (
|
||||
<ul className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full">
|
||||
{manufacturers.map((option) => (
|
||||
<li
|
||||
key={option}
|
||||
className={`px-6 py-4 cursor-pointer hover:bg-blue-100 ${option === selectedManufacturer ? 'bg-blue-50 font-semibold' : ''}`}
|
||||
onMouseDown={() => { setSelectedManufacturer(option); setIsDropdownOpen(false); }}
|
||||
>
|
||||
{option}
|
||||
<ul className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-y-auto">
|
||||
{manufacturers.length === 0 ? (
|
||||
<li className="px-6 py-4 text-gray-400 text-center">
|
||||
Нет данных
|
||||
</li>
|
||||
))}
|
||||
) : (
|
||||
manufacturers.map((manufacturer) => (
|
||||
<li
|
||||
key={manufacturer}
|
||||
className={`px-6 py-4 cursor-pointer hover:bg-blue-100 transition-colors ${manufacturer === selectedManufacturer ? 'bg-blue-50 font-semibold text-blue-600' : ''}`}
|
||||
onMouseDown={() => handleManufacturerSelect(manufacturer)}
|
||||
>
|
||||
{manufacturer}
|
||||
{manufacturer !== "Все" && (
|
||||
<span className="ml-2 text-xs text-gray-400">
|
||||
({historyItems.filter(item =>
|
||||
item.brand === manufacturer || item.vehicleInfo?.brand === manufacturer
|
||||
).length})
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user