first commit

src/components/VehiclePartsSearchSection.tsx

@@ -0,0 +1,271 @@
+import React, { useState } from 'react';
+import { LaximoCatalogInfo } from '@/types/laximo';
+import QuickGroupsSection from './QuickGroupsSection';
+import CategoriesSection from './CategoriesSection';
+import FulltextSearchSection from './FulltextSearchSection';
+
+interface LaximoVehicleInfo {
+  vehicleid: string;
+  name: string;
+  ssd: string;
+  brand: string;
+  catalog: string;
+  attributes: Array<{
+    key: string;
+    name: string;
+    value: string;
+  }>;
+}
+
+interface VehiclePartsSearchSectionProps {
+  catalogInfo: LaximoCatalogInfo;
+  vehicleInfo: LaximoVehicleInfo;
+  searchType: 'quickgroups' | 'categories' | 'fulltext';
+  onSearchTypeChange: (type: 'quickgroups' | 'categories' | 'fulltext') => void;
+}
+
+const VehiclePartsSearchSection: React.FC<VehiclePartsSearchSectionProps> = ({
+  catalogInfo,
+  vehicleInfo,
+  searchType,
+  onSearchTypeChange
+}) => {
+  // Проверяем поддержку функций согласно документации Laximo
+  const supportsQuickGroups = catalogInfo.features.some(f => f.name === 'quickgroups');
+  const supportsFullTextSearch = catalogInfo.features.some(f => f.name === 'fulltextsearch');
+  
+  console.log('🔧 VehiclePartsSearchSection - Поддерживаемые функции:');
+  console.log('📋 Все features:', catalogInfo.features.map(f => f.name));
+  console.log('🚀 quickgroups поддерживается:', supportsQuickGroups);
+  console.log('🔍 fulltextsearch поддерживается:', supportsFullTextSearch);
+
+  const searchOptions = [
+    {
+      id: 'quickgroups' as const,
+      name: 'Группы быстрого поиска',
+      description: 'Поиск запчастей по группам быстрого поиска Laximo (ListQuickGroup)',
+      enabled: supportsQuickGroups,
+      requiresSSD: true,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+      )
+    },
+    {
+      id: 'categories' as const,
+      name: 'Категории узлов каталога',
+      description: 'Поиск через структуру оригинального каталога (ListCategories)',
+      enabled: true, // Always available according to documentation
+      requiresSSD: false,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+      )
+    },
+    {
+      id: 'fulltext' as const,
+      name: 'Поиск деталей по названию',
+      description: 'Введите часть названия детали (SearchVehicleDetails)',
+      enabled: supportsFullTextSearch,
+      requiresSSD: true,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      )
+    }
+  ];
+
+  // Если текущий тип поиска не поддерживается, переключаемся на поддерживаемый
+  React.useEffect(() => {
+    const currentOption = searchOptions.find(option => option.id === searchType);
+    if (!currentOption?.enabled) {
+      // Приоритет: quickgroups -> categories -> fulltext
+      if (supportsQuickGroups && vehicleInfo.ssd) {
+        onSearchTypeChange('quickgroups');
+      } else {
+        onSearchTypeChange('categories'); // categories всегда доступны
+      }
+    }
+  }, [catalogInfo, vehicleInfo, searchType, onSearchTypeChange, supportsQuickGroups]);
+
+  const handleSearchTypeChange = (type: 'quickgroups' | 'categories' | 'fulltext') => {
+    const option = searchOptions.find(opt => opt.id === type);
+    
+    if (!option?.enabled) {
+      console.warn(`Тип поиска ${type} не поддерживается каталогом ${catalogInfo.code}`);
+      return;
+    }
+
+    if (option.requiresSSD && (!vehicleInfo.ssd || vehicleInfo.ssd.trim() === '')) {
+      alert(`Для использования "${option.name}" необходимы данные автомобиля (SSD). Пожалуйста, выберите автомобиль заново.`);
+      return;
+    }
+
+    console.log(`🔄 Переключение на тип поиска: ${type}`);
+    onSearchTypeChange(type);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Заголовок с информацией о каталоге */}
+      <div className="bg-white rounded-lg border p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              Способы поиска запчастей
+            </h2>
+            <p className="text-sm text-gray-600 mt-1">
+              Выберите предпочтительный способ поиска для каталога {catalogInfo.name}
+            </p>
+          </div>
+          
+          {/* Индикатор поддерживаемых функций */}
+          <div className="text-right">
+            <div className="text-xs text-gray-500 mb-1">Поддерживаемые функции:</div>
+            <div className="flex space-x-2">
+              {supportsQuickGroups && (
+                <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
+                  QuickGroups
+                </span>
+              )}
+              {supportsFullTextSearch && (
+                <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
+                  FullText
+                </span>
+              )}
+              <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
+                Categories
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Селектор типов поиска */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {searchOptions.map((option) => (
+            <button
+              key={option.id}
+              onClick={() => handleSearchTypeChange(option.id)}
+              disabled={!option.enabled}
+              className={`
+                relative p-4 border rounded-lg text-left transition-all duration-200
+                ${searchType === option.id && option.enabled
+                  ? 'border-red-500 bg-red-50 ring-2 ring-red-200'
+                  : option.enabled
+                    ? 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-200 bg-gray-50 cursor-not-allowed opacity-60'
+                }
+              `}
+            >
+              <div className="flex items-start space-x-3">
+                <div className={`flex-shrink-0 ${option.enabled ? 'text-gray-600' : 'text-gray-400'}`}>
+                  {option.icon}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className={`text-sm font-medium ${option.enabled ? 'text-gray-900' : 'text-gray-500'}`}>
+                    {option.name}
+                  </h3>
+                  <p className={`text-xs mt-1 ${option.enabled ? 'text-gray-600' : 'text-gray-400'}`}>
+                    {option.description}
+                  </p>
+                  
+                  {/* Индикаторы требований */}
+                  <div className="mt-2 flex items-center space-x-2">
+                    {option.requiresSSD && (
+                      <span className={`text-xs px-2 py-0.5 rounded ${
+                        vehicleInfo.ssd 
+                          ? 'bg-green-100 text-green-700' 
+                          : 'bg-yellow-100 text-yellow-700'
+                      }`}>
+                        {vehicleInfo.ssd ? '✓ SSD доступен' : '⚠ Требует SSD'}
+                      </span>
+                    )}
+                    
+                    {!option.enabled && (
+                      <span className="text-xs px-2 py-0.5 rounded bg-red-100 text-red-700">
+                        Не поддерживается
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Индикатор выбранного состояния */}
+              {searchType === option.id && option.enabled && (
+                <div className="absolute top-2 right-2">
+                  <svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Отображение выбранного компонента поиска */}
+      <div className="min-h-[400px]">
+        {searchType === 'quickgroups' && supportsQuickGroups && (
+          <QuickGroupsSection
+            catalogCode={vehicleInfo.catalog}
+            vehicleId={vehicleInfo.vehicleid}
+            ssd={vehicleInfo.ssd}
+          />
+        )}
+
+        {searchType === 'categories' && (
+          <CategoriesSection
+            catalogCode={vehicleInfo.catalog}
+            vehicleId={vehicleInfo.vehicleid}
+            ssd={vehicleInfo.ssd}
+          />
+        )}
+
+        {searchType === 'fulltext' && supportsFullTextSearch && (
+          <FulltextSearchSection
+            catalogCode={vehicleInfo.catalog}
+            vehicleId={vehicleInfo.vehicleid}
+            ssd={vehicleInfo.ssd}
+          />
+        )}
+      </div>
+
+      {/* Информационная панель */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-blue-800">
+              Информация о способах поиска
+            </h3>
+            <div className="mt-2 text-sm text-blue-700">
+              <ul className="list-disc list-inside space-y-1">
+                <li><strong>Группы быстрого поиска</strong> - используют функцию Laximo ListQuickGroup для быстрого доступа к категориям</li>
+                <li><strong>Категории узлов каталога</strong> - навигация по структуре оригинального каталога производителя</li>
+                <li><strong>Поиск по названию</strong> - полнотекстовый поиск деталей по их наименованию</li>
+              </ul>
+              {vehicleInfo.ssd ? (
+                <p className="mt-2 text-green-700">
+                  ✓ Данные автомобиля (SSD) доступны - все функции активны
+                </p>
+              ) : (
+                <p className="mt-2 text-yellow-700">
+                  ⚠ Некоторые функции требуют данных автомобиля (SSD)
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VehiclePartsSearchSection;