добавлен роутинг между категориями #18
@ -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<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => {
|
||||
const router = useRouter();
|
||||
const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
|
||||
const lastCategoryIdRef = useRef<string | null>(null);
|
||||
|
||||
@ -63,8 +65,20 @@ const VinCategory: React.FC<VinCategoryProps> = ({ 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<VinCategoryProps> = ({ 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);
|
||||
|
||||
@ -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<VinLeftbarProps> = ({ 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<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
|
||||
|
||||
const lastCategoryIdRef = React.useRef<string | null>(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<VinLeftbarProps> = ({ 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]);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<MetaTags {...metaData} />
|
||||
@ -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}
|
||||
/>
|
||||
) : (
|
||||
<VinCategory
|
||||
catalogCode={vehicleInfo.catalog}
|
||||
vehicleId={vehicleInfo.vehicleid}
|
||||
ssd={vehicleInfo.ssd}
|
||||
onNodeSelect={setSelectedNode}
|
||||
onNodeSelect={openKnot}
|
||||
activeTab={activeTab}
|
||||
onQuickGroupSelect={setSelectedQuickGroup}
|
||||
onQuickGroupSelect={openQuickGroup}
|
||||
openedPath={openedPath}
|
||||
setOpenedPath={setOpenedPath}
|
||||
/>
|
||||
@ -441,10 +508,11 @@ const VehicleDetailsPage = () => {
|
||||
<KnotIn
|
||||
catalogCode={vehicleInfo.catalog}
|
||||
vehicleId={vehicleInfo.vehicleid}
|
||||
ssd={selectedNode.ssd || vehicleInfo.ssd} // ИСПРАВЛЕНИЕ: Используем SSD узла, fallback на родительский SSD
|
||||
ssd={selectedNode.ssd || vehicleInfo.ssd}
|
||||
unitId={selectedNode.unitid}
|
||||
unitName={selectedNode.name}
|
||||
parts={unitDetails}
|
||||
onBack={closeKnot}
|
||||
/>
|
||||
{unitDetailsLoading ? (
|
||||
<div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div>
|
||||
|
||||
Reference in New Issue
Block a user