BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Обновлены компоненты для обработки необязательных свойств и добавлены заглушки для случаев отсутствия данных о транспортном средстве и деталях. Изменены условия пропуска запросов в компонентах InfoVin, KnotIn, KnotParts, VinCategory и VinLeftbar.

Browse Source
This commit is contained in:
Bivekich
2025-06-30 17:42:36 +03:00
parent 6af1ed325c
commit 8e7c398b95
5 changed files with 83 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/vin/InfoVin.tsx
View File

@ -1,11 +1,14 @@
import React from "react";
interface InfoVinProps {
vehicleName: string;
vehicleInfo: string;
vehicleName?: string;
vehicleInfo?: string;
}
const InfoVin: React.FC<InfoVinProps> = ({ vehicleName, vehicleInfo }) => (
const InfoVin: React.FC<InfoVinProps> = ({
vehicleName = "VIN декодирование",
vehicleInfo = "Поиск запчастей по VIN номеру автомобиля"
}) => (
<section className="section-info">
<div className="w-layout-blockcontainer container info w-container">
<div className="w-layout-vflex flex-block-9">

24
src/components/vin/KnotIn.tsx
View File

@ -5,10 +5,10 @@ import { GET_LAXIMO_UNIT_INFO, GET_LAXIMO_UNIT_IMAGE_MAP } from '@/lib/graphql';
import BrandSelectionModal from '../BrandSelectionModal';
interface KnotInProps {
catalogCode: string;
vehicleId: string;
catalogCode?: string;
vehicleId?: string;
ssd?: string;
unitId: string;
unitId?: string;
unitName?: string;
parts?: Array<{
detailid?: string;
@ -46,8 +46,8 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
const { data: unitInfoData, loading: unitInfoLoading, error: unitInfoError } = useQuery(
GET_LAXIMO_UNIT_INFO,
{
variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
skip: !catalogCode || !vehicleId || !unitId,
errorPolicy: 'all',
}
);
@ -55,12 +55,22 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
const { data: imageMapData, loading: imageMapLoading, error: imageMapError } = useQuery(
GET_LAXIMO_UNIT_IMAGE_MAP,
{
variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
skip: !catalogCode || !vehicleId || !unitId,
errorPolicy: 'all',
}
);
// Если нет необходимых данных, показываем заглушку
if (!catalogCode || !vehicleId || !unitId) {
return (
<div className="text-center py-8 text-gray-500">
<div className="text-lg font-medium mb-2">Схема узла</div>
<div className="text-sm">Выберите узел для отображения схемы</div>
</div>
);
}
const unitInfo = unitInfoData?.laximoUnitInfo;
const coordinates = imageMapData?.laximoUnitImageMap?.coordinates || [];
const imageUrl = unitInfo?.imageurl ? getImageUrl(unitInfo.imageurl, selectedImageSize) : '';

16
src/components/vin/KnotParts.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import BrandSelectionModal from '../BrandSelectionModal';
interface KnotPartsProps {
parts: Array<{
parts?: Array<{
detailid?: string;
codeonimage?: string | number;
oem?: string;
@ -17,7 +17,7 @@ interface KnotPartsProps {
selectedCodeOnImage?: string | number;
}
const KnotParts: React.FC<KnotPartsProps> = ({ parts, selectedCodeOnImage }) => {
const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage }) => {
const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
@ -28,6 +28,18 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts, selectedCodeOnImage }) =>
}
};
// Если нет деталей, показываем заглушку
if (!parts || parts.length === 0) {
return (
<div className="knot-parts">
<div className="text-center py-8 text-gray-500">
<div className="text-lg font-medium mb-2">Список деталей</div>
<div className="text-sm">Выберите узел для отображения деталей</div>
</div>
</div>
);
}
return (
<>
<div className="knot-parts">

41
src/components/vin/VinCategory.tsx
View File

@ -3,15 +3,16 @@ import { useQuery, useLazyQuery } from '@apollo/client';
import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_UNITS } from '@/lib/graphql/laximo';
interface VinCategoryProps {
catalogCode: string;
vehicleId: string;
ssd: string;
catalogCode?: string;
vehicleId?: string;
ssd?: string;
onNodeSelect?: (node: any) => void;
activeTab: 'uzly' | 'manufacturer';
activeTab?: 'uzly' | 'manufacturer';
onQuickGroupSelect?: (group: any) => void;
onCategoryClick?: (e?: React.MouseEvent) => void;
}
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab, onQuickGroupSelect }) => {
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick }) => {
const [selectedCategory, setSelectedCategory] = useState<any>(null);
const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
const lastCategoryIdRef = useRef<string | null>(null);
@ -23,8 +24,8 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
// Запрос для "Узлы"
const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'uzly',
variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', ssd: ssd || '' },
skip: !catalogCode || !vehicleId || activeTab !== 'uzly',
errorPolicy: 'all'
});
@ -47,8 +48,8 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
// Запрос для "От производителя"
const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'manufacturer',
variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', ssd: ssd || '' },
skip: !catalogCode || !vehicleId || activeTab !== 'manufacturer',
errorPolicy: 'all'
});
@ -61,6 +62,12 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
};
const handleCategoryClick = (category: any) => {
// Если передан onCategoryClick, используем его
if (onCategoryClick) {
onCategoryClick();
return;
}
if (activeTab === 'manufacturer') {
if (category.children && category.children.length > 0) {
setSelectedCategory(category);
@ -76,14 +83,14 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
} else {
// Если нет children, грузим units (подкатегории)
const categoryId = category.categoryid || category.quickgroupid || category.id;
if (!unitsByCategory[categoryId]) {
if (!unitsByCategory[categoryId] && catalogCode && vehicleId) {
lastCategoryIdRef.current = categoryId;
console.log('Loading units for category:', { categoryId, category });
getUnits({
variables: {
catalogCode,
vehicleId,
ssd,
ssd: ssd || '',
categoryId
}
});
@ -105,6 +112,18 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
}
};
// Если нет данных о транспортном средстве, показываем заглушку
if (!catalogCode || !vehicleId) {
return (
<div className="w-layout-vflex flex-block-14-copy-copy">
<div className="text-center py-8 text-gray-500">
<div className="text-lg font-medium mb-2">Каталог запчастей</div>
<div className="text-sm">Выберите автомобиль для просмотра каталога</div>
</div>
</div>
);
}
if (loading) return <div>Загрузка категорий...</div>;
if (error) return <div style={{ color: "red" }}>Ошибка: {error.message}</div>;

20
src/components/vin/VinLeftbar.tsx
View File

@ -4,7 +4,7 @@ import { GET_LAXIMO_FULLTEXT_SEARCH, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GE
import VinPartCard from './VinPartCard';
interface VinLeftbarProps {
vehicleInfo: {
vehicleInfo?: {
catalog: string;
vehicleid: string;
ssd: string;
@ -30,9 +30,9 @@ interface QuickGroup {
}
const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect }) => {
const catalogCode = vehicleInfo.catalog;
const vehicleId = vehicleInfo.vehicleid;
const ssd = vehicleInfo.ssd;
const catalogCode = vehicleInfo?.catalog || '';
const vehicleId = vehicleInfo?.vehicleid || '';
const ssd = vehicleInfo?.ssd || '';
const [openIndex, setOpenIndex] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
@ -260,6 +260,18 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
}
}, [activeTab, onActiveTabChange]);
// Если нет данных о транспортном средстве, показываем заглушку
if (!vehicleInfo) {
return (
<div className="w-layout-vflex vinleftbar">
<div className="text-center py-8 text-gray-500">
<div className="text-lg font-medium mb-2">Поиск запчастей</div>
<div className="text-sm">Выберите автомобиль для поиска запчастей</div>
</div>
</div>
);
}
return (
<div className="w-layout-vflex vinleftbar">
{/* === Форма полнотекстового поиска === */}