ура епте

2025-06-30 17:28:15 +03:00
parent 69ccc786ea
commit 1f1ea8baaf
4 changed files with 273 additions and 85 deletions
--- a/src/components/vin/VinCategory.tsx
+++ b/src/components/vin/VinCategory.tsx
@ -1,83 +1,138 @@
-import React, { useState, useRef } from "react";
-import { useQuery, useLazyQuery } from "@apollo/client";
-import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS } from "@/lib/graphql/laximo";
+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';

 interface VinCategoryProps {
  catalogCode: string;
  vehicleId: string;
-  ssd?: string;
+  ssd: string;
  onNodeSelect?: (node: any) => void;
+  activeTab: 'uzly' | 'manufacturer';
+  onQuickGroupSelect?: (group: any) => void;
 }

-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 === undefined || vehicleId === null,
-    errorPolicy: "all",
-  });
-  const categories = categoriesData?.laximoCategories || [];
-
+const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab, onQuickGroupSelect }) => {
+  const [selectedCategory, setSelectedCategory] = useState<any>(null);
  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] || [];
-    }
-  }
+  // Сброс выбранной категории при смене вкладки
+  useEffect(() => {
+    setSelectedCategory(null);
+  }, [activeTab]);

-  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 } });
+  // Запрос для "Узлы"
+  const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
+    variables: { catalogCode, vehicleId, ssd },
+    skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'uzly',
+    errorPolicy: 'all'
+  });
+
+  // Запрос для получения units (подкатегорий) в режиме "Узлы"
+  const [getUnits] = useLazyQuery(GET_LAXIMO_UNITS, {
+    onCompleted: (data) => {
+      console.log('Units loaded:', data);
+      if (data && data.laximoUnits && lastCategoryIdRef.current) {
+        console.log('Setting units for category:', lastCategoryIdRef.current, data.laximoUnits);
+        setUnitsByCategory(prev => ({
+          ...prev,
+          [lastCategoryIdRef.current!]: data.laximoUnits || []
+        }));
      }
-      setSelectedCategory(cat);
+    },
+    onError: (error) => {
+      console.error('Error loading units:', error);
    }
-  };
+  });
+
+  // Запрос для "От производителя"
+  const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
+    variables: { catalogCode, vehicleId, ssd },
+    skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'manufacturer',
+    errorPolicy: 'all'
+  });
+
+  const categories = activeTab === 'uzly' ? (categoriesData?.laximoCategories || []) : (quickGroupsData?.laximoQuickGroups || []);
+  const loading = activeTab === 'uzly' ? categoriesLoading : quickGroupsLoading;
+  const error = activeTab === 'uzly' ? categoriesError : quickGroupsError;

  const handleBack = () => {
    setSelectedCategory(null);
  };

-  const handleSubcategoryClick = (subcat: any) => {
-    if (onNodeSelect) {
-      onNodeSelect({
-        ...subcat,
-        unitid: subcat.unitid || subcat.quickgroupid || subcat.id,
-      });
+  const handleCategoryClick = (category: any) => {
+    if (activeTab === 'manufacturer') {
+      if (category.children && category.children.length > 0) {
+        setSelectedCategory(category);
+      } else if (category.link && onQuickGroupSelect) {
+        onQuickGroupSelect(category);
+      } else if (onNodeSelect) {
+        onNodeSelect(category);
+      }
+    } else {
+      // Логика для вкладки "Узлы"
+      if (category.children && category.children.length > 0) {
+        setSelectedCategory(category);
+      } else {
+        // Если нет children, грузим units (подкатегории)
+        const categoryId = category.categoryid || category.quickgroupid || category.id;
+        if (!unitsByCategory[categoryId]) {
+          lastCategoryIdRef.current = categoryId;
+          console.log('Loading units for category:', { categoryId, category });
+          getUnits({ 
+            variables: { 
+              catalogCode, 
+              vehicleId, 
+              ssd, 
+              categoryId 
+            } 
+          });
+        }
+        setSelectedCategory(category);
+      }
    }
  };

-  if (categoriesLoading) return <div>Загрузка категорий...</div>;
-  if (categoriesError) return <div style={{ color: "red" }}>Ошибка: {categoriesError.message}</div>;
+  const handleSubcategoryClick = (subcat: any) => {
+    if (activeTab === 'uzly' && onNodeSelect) {
+      // Для режима "Узлы" при клике на подкатегорию открываем KnotIn
+      onNodeSelect({
+        ...subcat,
+        unitid: subcat.unitid || subcat.categoryid || subcat.quickgroupid || subcat.id
+      });
+    } else {
+      handleCategoryClick(subcat);
+    }
+  };
+
+  if (loading) return <div>Загрузка категорий...</div>;
+  if (error) return <div style={{ color: "red" }}>Ошибка: {error.message}</div>;
+
+  // Определяем, какие подкатегории показывать
+  let subcategories: any[] = [];
+  if (selectedCategory) {
+    if (activeTab === 'manufacturer') {
+      // Для вкладки "От производителя" используем children
+      subcategories = selectedCategory.children || [];
+    } else {
+      // Для вкладки "Узлы" используем либо children, либо units
+      if (selectedCategory.children && selectedCategory.children.length > 0) {
+        subcategories = selectedCategory.children;
+      } else {
+        const categoryId = selectedCategory.categoryid || selectedCategory.quickgroupid || selectedCategory.id;
+        subcategories = unitsByCategory[categoryId] || [];
+      }
+    }
+  }

  return (
-  <div className="w-layout-vflex flex-block-14-copy-copy">
+    <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}
+            key={cat.quickgroupid || cat.categoryid || cat.id || idx}
            onClick={() => handleCategoryClick(cat)}
            style={{ cursor: "pointer" }}
          >
@ -91,7 +146,7 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
          </div>
        ))
      ) : (
-        // Список подкатегорий (children или units)
+        // Список подкатегорий
        <>
          <div className="div-block-131" onClick={handleBack} style={{ cursor: "pointer", fontWeight: 500 }}>
            <div className="text-block-57">← Назад</div>
@ -106,23 +161,23 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
          {subcategories.map((subcat: any, idx: number) => (
            <div
              className="div-block-131"
-              key={subcat.quickgroupid || subcat.unitid || subcat.id || idx}
+              key={subcat.quickgroupid || subcat.categoryid || 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 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>
-);
+    </div>
+  );
 };

 export default VinCategory; 
--- a/src/components/vin/VinLeftbar.tsx
+++ b/src/components/vin/VinLeftbar.tsx
@ -18,6 +18,8 @@ interface VinLeftbarProps {
    isSearching?: boolean;
  }) => void;
  onNodeSelect?: (node: any) => void;
+  onActiveTabChange?: (tab: 'uzly' | 'manufacturer') => void;
+  onQuickGroupSelect?: (group: any) => void;
 }

 interface QuickGroup {
@ -27,7 +29,7 @@ interface QuickGroup {
  children?: QuickGroup[];
 }

-const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect }) => {
+const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect }) => {
  const catalogCode = vehicleInfo.catalog;
  const vehicleId = vehicleInfo.vehicleid;
  const ssd = vehicleInfo.ssd;
@ -252,6 +254,12 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o

  const fulltextResults = fulltextData?.laximoFulltextSearch?.details || [];

+  useEffect(() => {
+    if (onActiveTabChange) {
+      onActiveTabChange(activeTab);
+    }
+  }, [activeTab, onActiveTabChange]);
+
  return (
    <div className="w-layout-vflex vinleftbar">
      {/* === Форма полнотекстового поиска === */}
@ -358,11 +366,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                    data-delay="0"
                    className={`dropdown-4 w-dropdown${isOpen ? " w--open" : ""}`}
                  >
-                                          <div
-                        className={`dropdown-toggle-card w-dropdown-toggle${isOpen ? " w--open" : ""}`}
-                        onClick={() => handleToggle(idx, category.quickgroupid)}
-                        style={{ cursor: "pointer" }}
-                      >
+                    <div
+                      className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open" : ""}`}
+                      onClick={() => handleToggle(idx, category.quickgroupid)}
+                      style={{ cursor: "pointer" }}
+                    >
                      <div className="w-icon-dropdown-toggle"></div>
                      <div className="text-block-56">{category.name}</div>
                    </div>
@ -415,8 +423,8 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                      className="dropdown-link-3 w-dropdown-link"
                      onClick={(e) => {
                        e.preventDefault();
-                        if (group.link) {
-                          handleQuickGroupClick(group);
+                        if (group.link && onQuickGroupSelect) {
+                          onQuickGroupSelect(group);
                        }
                      }}
                    >
@ -453,8 +461,8 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                              className="dropdown-link-3 w-dropdown-link "
                              onClick={(e) => {
                                e.preventDefault();
-                                if (child.link) {
-                                  handleQuickGroupClick(child);
+                                if (child.link && onQuickGroupSelect) {
+                                  onQuickGroupSelect(child);
                                }
                              }}
                            >
@ -486,8 +494,8 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                                  className="dropdown-link-3 w-dropdown-link "
                                  onClick={(e) => {
                                    e.preventDefault();
-                                    if (subChild.link) {
-                                      handleQuickGroupClick(subChild);
+                                    if (subChild.link && onQuickGroupSelect) {
+                                      onQuickGroupSelect(subChild);
                                    }
                                  }}
                                >
--- a/src/components/vin/VinQuick.tsx
+++ b/src/components/vin/VinQuick.tsx
@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';
+import BrandSelectionModal from '../BrandSelectionModal';
+
+interface VinQuickProps {
+  quickGroup: any;
+  catalogCode: string;
+  vehicleId: string;
+  ssd: string;
+  onBack: () => void;
+  onNodeSelect: (unit: any) => void;
+}
+
+const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId, ssd, onBack, onNodeSelect }) => {
+  const { data, loading, error } = useQuery(GET_LAXIMO_QUICK_DETAIL, {
+    variables: {
+      catalogCode,
+      vehicleId,
+      quickGroupId: quickGroup.quickgroupid,
+      ssd
+    },
+    skip: !quickGroup || !quickGroup.quickgroupid
+  });
+  const quickDetail = data?.laximoQuickDetail;
+
+  const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
+  const [selectedDetail, setSelectedDetail] = useState<any>(null);
+
+  const handleUnitClick = (unit: any) => {
+    onNodeSelect({
+      ...unit,
+      unitid: unit.unitid,
+      name: unit.name,
+      catalogCode,
+      vehicleId,
+      ssd
+    });
+  };
+  const handleDetailClick = (detail: any) => {
+    setSelectedDetail(detail);
+    setIsBrandModalOpen(true);
+  };
+  const handleCloseBrandModal = () => {
+    setIsBrandModalOpen(false);
+    setSelectedDetail(null);
+  };
+
+  return (
+    <div className="w-full">
+      {/* <button onClick={onBack} className="mb-4 px-4 py-2 bg-gray-200 rounded self-start">Назад</button> */}
+      {loading ? (
+        <div className="text-center py-4">Загружаем детали...</div>
+      ) : error ? (
+        <div className="text-red-600 py-4">Ошибка загрузки деталей: {error.message}</div>
+      ) : quickDetail && quickDetail.units ? (
+        quickDetail.units.map((unit: any) => (
+          <div key={unit.unitid} className="w-layout-vflex flex-block-14-copy-copy">
+            <div className="knotinfo">
+              {unit.imageurl || unit.largeimageurl ? (
+                <img
+                  src={unit.largeimageurl ? unit.largeimageurl.replace('%size%', '250') : unit.imageurl.replace('%size%', '250')}
+                  alt={unit.name}
+                  className="image-26"
+                  onError={e => { (e.currentTarget as HTMLImageElement).src = '/images/image-44.jpg'; }}
+                />
+              ) : (
+                <img src="/images/image-44.jpg" alt="Нет изображения" className="image-26" />
+              )}
+            </div>
+            <div className="knot-img">
+              <h1 className="heading-19">{unit.name}</h1>
+              
+                {unit.details && unit.details.length > 0 && unit.details.map((detail: any) => (
+                  <div className="w-layout-hflex flex-block-115" key={detail.detailid}>
+                    <div className="oemnuber">{detail.oem}</div>
+                    <div className="partsname">{detail.name}</div>
+                    <a href="#" className="button-3 w-button" onClick={e => { e.preventDefault(); handleDetailClick(detail); }}>Показать цены</a>
+                  </div>
+                ))}
+        
+              <a href="#" className="showallparts w-button" onClick={e => { e.preventDefault(); handleUnitClick(unit); }}>Подробнее</a>
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="text-center text-gray-500 py-4">Нет деталей для этой группы</div>
+      )}
+      {isBrandModalOpen && selectedDetail && (
+        <BrandSelectionModal
+          isOpen={isBrandModalOpen}
+          onClose={handleCloseBrandModal}
+          articleNumber={selectedDetail.oem}
+          detailName={selectedDetail.name}
+        />
+      )}
+    </div>
+  );
+};
+
+export default VinQuick;