pravki 29.06
This commit is contained in:
egortriston
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import Head from 'next/head';
|
||||
@ -6,8 +6,16 @@ import Footer from '@/components/Footer';
|
||||
import Layout from '@/components/Layout';
|
||||
import VehiclePartsSearchSection from '@/components/VehiclePartsSearchSection';
|
||||
import LaximoDiagnostic from '@/components/LaximoDiagnostic';
|
||||
import { GET_LAXIMO_VEHICLE_INFO, GET_LAXIMO_CATALOG_INFO } from '@/lib/graphql';
|
||||
import { GET_LAXIMO_VEHICLE_INFO, GET_LAXIMO_CATALOG_INFO, GET_LAXIMO_UNIT_DETAILS } from '@/lib/graphql';
|
||||
import { LaximoCatalogInfo } from '@/types/laximo';
|
||||
import InfoVin from '@/components/vin/InfoVin';
|
||||
import VinLeftbar from '@/components/vin/VinLeftbar';
|
||||
import VinKnot from '@/components/vin/VinKnot';
|
||||
import VinCategory from '@/components/vin/VinCategory';
|
||||
import PartDetailCard from '@/components/PartDetailCard';
|
||||
import VinPartCard from '@/components/vin/VinPartCard';
|
||||
import KnotIn from '@/components/vin/KnotIn';
|
||||
import KnotParts from '@/components/vin/KnotParts';
|
||||
|
||||
interface LaximoVehicleInfo {
|
||||
vehicleid: string;
|
||||
@ -41,7 +49,27 @@ const VehicleDetailsPage = () => {
|
||||
defaultSearchType = 'fulltext';
|
||||
}
|
||||
|
||||
// ====== ВСЕ ХУКИ В НАЧАЛЕ КОМПОНЕНТА ======
|
||||
const [searchType, setSearchType] = useState<'quickgroups' | 'categories' | 'fulltext'>(defaultSearchType);
|
||||
const [showKnot, setShowKnot] = useState(false);
|
||||
const [foundParts, setFoundParts] = useState<any[]>([]);
|
||||
const [selectedNode, setSelectedNode] = useState<any | null>(null);
|
||||
const handleCategoryClick = (e?: React.MouseEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
setShowKnot(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('link-2')) {
|
||||
e.preventDefault();
|
||||
setShowKnot(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', handler);
|
||||
return () => document.removeEventListener('click', handler);
|
||||
}, []);
|
||||
// ====== КОНЕЦ ХУКОВ ======
|
||||
|
||||
// Получаем информацию о каталоге
|
||||
const { data: catalogData } = useQuery<{ laximoCatalogInfo: LaximoCatalogInfo }>(
|
||||
@ -100,6 +128,28 @@ const VehicleDetailsPage = () => {
|
||||
}
|
||||
);
|
||||
|
||||
// Получаем детали выбранного узла, если он выбран
|
||||
const {
|
||||
data: unitDetailsData,
|
||||
loading: unitDetailsLoading,
|
||||
error: unitDetailsError
|
||||
} = useQuery(
|
||||
GET_LAXIMO_UNIT_DETAILS,
|
||||
{
|
||||
variables: selectedNode
|
||||
? {
|
||||
catalogCode: selectedNode.catalogCode || selectedNode.catalog || brand,
|
||||
vehicleId: selectedNode.vehicleId || vehicleId,
|
||||
unitId: selectedNode.unitid || selectedNode.unitId,
|
||||
ssd: selectedNode.ssd || finalSsd || '',
|
||||
}
|
||||
: { catalogCode: '', vehicleId: '', unitId: '', ssd: '' },
|
||||
skip: !selectedNode,
|
||||
errorPolicy: 'all',
|
||||
}
|
||||
);
|
||||
const unitDetails = unitDetailsData?.laximoUnitDetails || [];
|
||||
|
||||
// Логируем ошибки
|
||||
if (vehicleError) {
|
||||
console.error('Vehicle GraphQL error:', vehicleError);
|
||||
@ -107,7 +157,7 @@ const VehicleDetailsPage = () => {
|
||||
|
||||
if (vehicleLoading) {
|
||||
return (
|
||||
<Layout>
|
||||
<>
|
||||
<Head>
|
||||
<title>Загрузка автомобиля...</title>
|
||||
</Head>
|
||||
@ -117,14 +167,14 @@ const VehicleDetailsPage = () => {
|
||||
<p className="mt-4 text-lg text-gray-600">Загружаем информацию об автомобиле...</p>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Если информация о каталоге недоступна, показываем ошибку
|
||||
if (!catalogData?.laximoCatalogInfo) {
|
||||
return (
|
||||
<Layout>
|
||||
<>
|
||||
<Head>
|
||||
<title>Каталог не найден</title>
|
||||
</Head>
|
||||
@ -140,7 +190,7 @@ const VehicleDetailsPage = () => {
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -159,13 +209,84 @@ const VehicleDetailsPage = () => {
|
||||
const catalogInfo = catalogData.laximoCatalogInfo;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<>
|
||||
<Head>
|
||||
<title>{vehicleInfo.name} - Поиск запчастей</title>
|
||||
<meta name="description" content={`Поиск запчастей для ${vehicleInfo.name} в каталоге ${catalogInfo.name}`} />
|
||||
<title>VIN</title>
|
||||
<meta content="vin" property="og:title" />
|
||||
<meta content="vin" property="twitter:title" />
|
||||
|
||||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
|
||||
<link href="images/webclip.png" rel="apple-touch-icon" />
|
||||
</Head>
|
||||
|
||||
<main className="min-h-screen bg-gray-50">
|
||||
{/* ====== ВРЕМЕННЫЙ МАКЕТ ДЛЯ ВЕРСТКИ (начало) ====== */}
|
||||
<InfoVin
|
||||
vehicleName={
|
||||
vehicleInfo.brand && vehicleInfo.name && vehicleInfo.name.indexOf(vehicleInfo.brand) !== 0
|
||||
? `${vehicleInfo.brand} ${vehicleInfo.name}`
|
||||
: vehicleInfo.name
|
||||
}
|
||||
vehicleInfo={
|
||||
vehicleInfo.attributes && vehicleInfo.attributes.length > 0
|
||||
? vehicleInfo.attributes.map(attr => attr.value).join(' · ')
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="w-layout-blockcontainer container-vin w-container">
|
||||
{!selectedNode ? (
|
||||
<div className="w-layout-hflex flex-block-13">
|
||||
<VinLeftbar
|
||||
catalogCode={vehicleInfo.catalog}
|
||||
vehicleId={vehicleInfo.vehicleid}
|
||||
ssd={vehicleInfo.ssd}
|
||||
onSearchResults={setFoundParts}
|
||||
onNodeSelect={setSelectedNode}
|
||||
/>
|
||||
{/* Категории или Knot или карточки */}
|
||||
{foundParts.length > 0 ? (
|
||||
<div className="knot-parts">
|
||||
{foundParts.map((detail, idx) => (
|
||||
<VinPartCard
|
||||
key={detail.oem + idx}
|
||||
n={idx + 1}
|
||||
name={detail.name}
|
||||
oem={detail.oem}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : showKnot ? (
|
||||
<VinKnot />
|
||||
) : (
|
||||
<VinCategory
|
||||
catalogCode={vehicleInfo.catalog}
|
||||
vehicleId={vehicleInfo.vehicleid}
|
||||
ssd={vehicleInfo.ssd}
|
||||
onNodeSelect={setSelectedNode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-layout-hflex flex-block-13">
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
<button onClick={() => setSelectedNode(null)} style={{ marginBottom: 16 }}>Назад</button>
|
||||
<KnotIn node={selectedNode} />
|
||||
{unitDetailsLoading ? (
|
||||
<div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div>
|
||||
) : unitDetailsError ? (
|
||||
<div style={{ color: 'red', padding: 24 }}>Ошибка загрузки деталей: {unitDetailsError.message}</div>
|
||||
) : unitDetails.length > 0 ? (
|
||||
<KnotParts parts={unitDetails} />
|
||||
) : (
|
||||
<div style={{ padding: 24, textAlign: 'center' }}>Детали не найдены</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ====== ВРЕМЕННЫЙ МАКЕТ ДЛЯ ВЕРСТКИ (конец) ====== */}
|
||||
|
||||
{/* Навигация */}
|
||||
<nav className="bg-white border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@ -303,8 +424,7 @@ const VehicleDetailsPage = () => {
|
||||
onSearchTypeChange={setSearchType}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -38,10 +38,6 @@ export default function Vin() {
|
||||
<meta content="vin" property="og:title" />
|
||||
<meta content="vin" property="twitter:title" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta content="Webflow" name="generator" />
|
||||
<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/protekproject.webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
|
||||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
|
||||
|
||||
Reference in New Issue
Block a user