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

pravki 29.06

Browse Source
This commit is contained in:
egortriston
2025-06-29 00:39:17 +03:00
parent 1b0bbb2992
commit f6cc95e714
10 changed files with 693 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +1,128 @@
import React from "react";
const categories = [
"Детали для ТО",
"Двигатель",
"Топливная система",
"Система охлаждения",
"Система выпуска",
"Трансмиссия",
"Ходовая часть",
"Рулевое управление",
"Тормозная система",
"Электрооборудование",
"Отопление / кондиционирование",
"Детали салона",
"Детали кузова",
"Дополнительное оборудование"
];
import React, { useState, useRef } from "react";
import { useQuery, useLazyQuery } from "@apollo/client";
import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS } from "@/lib/graphql/laximo";
interface VinCategoryProps {
onCategoryClick?: (e: React.MouseEvent) => void;
catalogCode: string;
vehicleId: string;
ssd?: string;
onNodeSelect?: (node: any) => void;
}
const VinCategory: React.FC<VinCategoryProps> = ({ onCategoryClick }) => (
<div className="w-layout-vflex flex-block-14-copy-copy">
{categories.map((cat, idx) => (
<div className="div-block-131" key={idx} onClick={onCategoryClick} style={{ cursor: onCategoryClick ? 'pointer' : undefined }}>
<div className="text-block-57">{cat}</div>
<div className="w-embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
</svg>
</div>
</div>
))}
</div>
);
const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect }) => {
const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
variables: { catalogCode, vehicleId, ssd },
skip: !catalogCode || !vehicleId,
errorPolicy: "all",
});
const categories = categoriesData?.laximoCategories || [];
const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
const [getUnits] = useLazyQuery(GET_LAXIMO_UNITS, {
onCompleted: (data) => {
if (data && data.laximoUnits && lastCategoryIdRef.current) {
setUnitsByCategory((prev) => ({
...prev,
[lastCategoryIdRef.current!]: data.laximoUnits || [],
}));
}
},
});
const [selectedCategory, setSelectedCategory] = useState<any | null>(null);
const lastCategoryIdRef = useRef<string | null>(null);
// Если выбрана категория — показываем подкатегории (children или units)
let subcategories: any[] = [];
if (selectedCategory) {
if (selectedCategory.children && selectedCategory.children.length > 0) {
subcategories = selectedCategory.children;
} else {
subcategories = unitsByCategory[selectedCategory.quickgroupid] || [];
}
}
const handleCategoryClick = (cat: any) => {
if (cat.children && cat.children.length > 0) {
setSelectedCategory(cat);
} else {
// Если нет children, грузим units (подкатегории)
if (!unitsByCategory[cat.quickgroupid]) {
lastCategoryIdRef.current = cat.quickgroupid;
getUnits({ variables: { catalogCode, vehicleId, ssd, categoryId: cat.quickgroupid } });
}
setSelectedCategory(cat);
}
};
const handleBack = () => {
setSelectedCategory(null);
};
const handleSubcategoryClick = (subcat: any) => {
if (onNodeSelect) {
onNodeSelect({
...subcat,
unitid: subcat.unitid || subcat.quickgroupid || subcat.id,
});
}
};
if (categoriesLoading) return <div>Загрузка категорий...</div>;
if (categoriesError) return <div style={{ color: "red" }}>Ошибка: {categoriesError.message}</div>;
return (
<div className="w-layout-vflex flex-block-14-copy-copy">
{!selectedCategory ? (
// Список категорий
categories.map((cat: any, idx: number) => (
<div
className="div-block-131"
key={cat.quickgroupid || cat.id || idx}
onClick={() => handleCategoryClick(cat)}
style={{ cursor: "pointer" }}
>
<div className="text-block-57">{cat.name}</div>
<div className="w-embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
</svg>
</div>
</div>
))
) : (
// Список подкатегорий (children или units)
<>
<div className="div-block-131" onClick={handleBack} style={{ cursor: "pointer", fontWeight: 500 }}>
<div className="text-block-57">← Назад</div>
<div className="w-embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
</svg>
</div>
</div>
{subcategories.length === 0 && <div style={{ color: "#888", padding: 8 }}>Нет подкатегорий</div>}
{subcategories.map((subcat: any, idx: number) => (
<div
className="div-block-131"
key={subcat.quickgroupid || subcat.unitid || subcat.id || idx}
onClick={() => handleSubcategoryClick(subcat)}
style={{ cursor: "pointer" }}
>
<div className="text-block-57">{subcat.name}</div>
<div className="w-embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
</svg>
</div>
</div>
))}
</>
)}
</div>
);
};
export default VinCategory;