diff --git a/src/components/vin/VinCategory.tsx b/src/components/vin/VinCategory.tsx index af289ee..eff227c 100644 --- a/src/components/vin/VinCategory.tsx +++ b/src/components/vin/VinCategory.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { useQuery, useLazyQuery } from '@apollo/client'; import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_UNITS } from '@/lib/graphql/laximo'; +import { useRouter } from 'next/router'; interface VinCategoryProps { catalogCode?: string; @@ -15,6 +16,7 @@ interface VinCategoryProps { } const VinCategory: React.FC = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => { + const router = useRouter(); const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({}); const lastCategoryIdRef = useRef(null); @@ -63,8 +65,20 @@ const VinCategory: React.FC = ({ catalogCode, vehicleId, ssd, const loading = activeTab === 'uzly' ? quickGroupsLoading : categoriesLoading; const error = activeTab === 'uzly' ? quickGroupsError : categoriesError; + // Функция для обновления openedPath и catpath в URL + const updatePath = (newPath: string[]) => { + setOpenedPath(newPath); + if (router) { + router.push( + { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } }, + undefined, + { shallow: true } + ); + } + }; + const handleBack = () => { - setOpenedPath(openedPath.slice(0, openedPath.length - 1)); + updatePath(openedPath.slice(0, openedPath.length - 1)); }; const handleCategoryClick = (category: any, level: number) => { @@ -74,9 +88,9 @@ const VinCategory: React.FC = ({ catalogCode, vehicleId, ssd, } if (category.children && category.children.length > 0) { if (openedPath[level] === (category.quickgroupid || category.categoryid || category.id)) { - setOpenedPath(openedPath.slice(0, level)); + updatePath(openedPath.slice(0, level)); } else { - setOpenedPath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]); + updatePath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]); } } else if (category.link && onQuickGroupSelect) { onQuickGroupSelect(category); diff --git a/src/components/vin/VinLeftbar.tsx b/src/components/vin/VinLeftbar.tsx index 80703a4..27013ea 100644 --- a/src/components/vin/VinLeftbar.tsx +++ b/src/components/vin/VinLeftbar.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { useLazyQuery, useQuery } from '@apollo/client'; import { GET_LAXIMO_FULLTEXT_SEARCH, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo'; +import { useRouter } from 'next/router'; interface VinLeftbarProps { vehicleInfo?: { @@ -32,6 +33,7 @@ interface QuickGroup { } const VinLeftbar: React.FC = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect, activeTab: activeTabProp, openedPath = [], setOpenedPath = () => {} }) => { + const router = useRouter(); const catalogCode = vehicleInfo?.catalog || ''; const vehicleId = vehicleInfo?.vehicleid || ''; const ssd = vehicleInfo?.ssd || ''; @@ -59,11 +61,39 @@ const VinLeftbar: React.FC = ({ vehicleInfo, onSearchResults, o const lastCategoryIdRef = React.useRef(null); + // --- Синхронизация openedPath с URL --- + // Обновляем openedPath и URL + const setOpenedPathAndUrl = (newPath: string[]) => { + setOpenedPath(newPath); + const params = new URLSearchParams(router.query as any); + if (newPath.length > 0) { + params.set('catpath', newPath.join(',')); + } else { + params.delete('catpath'); + } + router.push( + { pathname: router.pathname, query: { ...router.query, catpath: newPath.join(',') } }, + undefined, + { shallow: true } + ); + }; + + // Восстанавливаем openedPath из URL + React.useEffect(() => { + if (typeof window === 'undefined') return; + const catpath = (router.query.catpath as string) || ''; + if (catpath) { + setOpenedPath(catpath.split(',').filter(Boolean)); + } else { + setOpenedPath([]); + } + }, [router.query.catpath]); + const handleToggle = (categoryId: string, level: number) => { if (openedPath[level] === categoryId) { - setOpenedPath(openedPath.slice(0, level)); + setOpenedPathAndUrl(openedPath.slice(0, level)); } else { - setOpenedPath([...openedPath.slice(0, level), categoryId]); + setOpenedPathAndUrl([...openedPath.slice(0, level), categoryId]); // Загружаем units для категории, если они еще не загружены if (activeTabProp === 'manufacturer' && !unitsByCategory[categoryId]) { @@ -133,9 +163,9 @@ const VinLeftbar: React.FC = ({ vehicleInfo, onSearchResults, o const handleQuickGroupToggle = (groupId: string, level: number) => { if (openedPath[level] === groupId) { - setOpenedPath(openedPath.slice(0, level)); + setOpenedPathAndUrl(openedPath.slice(0, level)); } else { - setOpenedPath([...openedPath.slice(0, level), groupId]); + setOpenedPathAndUrl([...openedPath.slice(0, level), groupId]); } }; diff --git a/src/pages/vehicle-search/[brand]/[vehicleId].tsx b/src/pages/vehicle-search/[brand]/[vehicleId].tsx index ff01736..d71456c 100644 --- a/src/pages/vehicle-search/[brand]/[vehicleId].tsx +++ b/src/pages/vehicle-search/[brand]/[vehicleId].tsx @@ -309,6 +309,73 @@ const VehicleDetailsPage = () => { ogDescription: `Найдите и купите запчасти для ${vehicleName}. Широкий выбор оригинальных и аналоговых запчастей.` }; + // --- Синхронизация selectedQuickGroup с URL --- + // Функция для открытия VinQuick и добавления quickgroup в URL + const openQuickGroup = (group: any) => { + setSelectedQuickGroup(group); + router.push( + { pathname: router.pathname, query: { ...router.query, quickgroup: group.quickgroupid } }, + undefined, + { shallow: true } + ); + }; + // Функция для закрытия VinQuick и удаления quickgroup из URL + const closeQuickGroup = () => { + setSelectedQuickGroup(null); + const { quickgroup, ...rest } = router.query; + router.push( + { pathname: router.pathname, query: rest }, + undefined, + { shallow: true } + ); + }; + // Следим за изменением quickgroup в URL и обновляем selectedQuickGroup + useEffect(() => { + const quickgroupId = router.query.quickgroup as string; + if (quickgroupId) { + // Найти группу по id (в openedPath или где-то ещё) + // Для простоты: если есть selectedQuickGroup и id совпадает — ничего не делаем + if (selectedQuickGroup && selectedQuickGroup.quickgroupid === quickgroupId) return; + // Иначе ищем в openedPath или в категориях (можно доработать) + // Пока просто создаём объект-заглушку + setSelectedQuickGroup({ quickgroupid: quickgroupId }); + } else { + setSelectedQuickGroup(null); + } + }, [router.query.quickgroup]); + + // --- Синхронизация selectedNode (KnotIn) с URL --- + // Открыть KnotIn и добавить unitid в URL + const openKnot = (node: any) => { + setSelectedNode(node); + router.push( + { pathname: router.pathname, query: { ...router.query, unitid: node.unitid || node.id } }, + undefined, + { shallow: true } + ); + }; + // Закрыть KnotIn и удалить unitid из URL + const closeKnot = () => { + setSelectedNode(null); + const { unitid, ...rest } = router.query; + router.push( + { pathname: router.pathname, query: rest }, + undefined, + { shallow: true } + ); + }; + // Следить за изменением unitid в URL и обновлять selectedNode + useEffect(() => { + const unitid = router.query.unitid as string; + if (unitid) { + if (selectedNode && (selectedNode.unitid === unitid || selectedNode.id === unitid)) return; + // Можно доработать: искать node по unitid в категориях/группах + setSelectedNode({ unitid }); + } else { + setSelectedNode(null); + } + }, [router.query.unitid]); + return ( <> @@ -339,9 +406,9 @@ const VehicleDetailsPage = () => { setFoundParts(results); setSearchState({ loading, error, query, isSearching: isSearching || false }); }} - onNodeSelect={setSelectedNode} + onNodeSelect={openKnot} onActiveTabChange={(tab) => setActiveTab(tab)} - onQuickGroupSelect={setSelectedQuickGroup} + onQuickGroupSelect={openQuickGroup} activeTab={activeTab} openedPath={openedPath} setOpenedPath={setOpenedPath} @@ -404,17 +471,17 @@ const VehicleDetailsPage = () => { catalogCode={vehicleInfo.catalog} vehicleId={vehicleInfo.vehicleid} ssd={vehicleInfo.ssd} - onBack={() => setSelectedQuickGroup(null)} - onNodeSelect={setSelectedNode} + onBack={closeQuickGroup} + onNodeSelect={openKnot} /> ) : ( @@ -441,10 +508,11 @@ const VehicleDetailsPage = () => { {unitDetailsLoading ? (
Загружаем детали узла...