Добавлены новые модели и мутации для навигационных категорий, включая создание, обновление и удаление. Обновлены типы GraphQL и резолверы для обработки навигационных категорий, что улучшает структуру данных и функциональность. В боковое меню добавлен новый элемент для навигации по категориям. Реализован кэш для оптимизации запросов к API, что повышает производительность приложения.

2025-07-13 21:42:04 +03:00
parent db29525da5
commit ac122411e0
12 changed files with 1681 additions and 95 deletions
--- a/src/components/navigation/NavigationCategoryForm.tsx
+++ b/src/components/navigation/NavigationCategoryForm.tsx
@ -0,0 +1,381 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useQuery } from '@apollo/client'
+import { GET_PARTSINDEX_CATEGORIES } from '@/lib/graphql/queries'
+import { Loader2, Upload, X, Image as ImageIcon, Folder, FolderOpen } from 'lucide-react'
+
+interface PartsIndexCategory {
+  id: string
+  name: string
+  image?: string
+  groups?: PartsIndexGroup[]
+}
+
+interface PartsIndexGroup {
+  id: string
+  name: string
+  image?: string
+  subgroups?: PartsIndexGroup[]
+}
+
+interface NavigationCategory {
+  id?: string
+  partsIndexCatalogId: string
+  partsIndexGroupId?: string
+  icon?: string
+  isHidden: boolean
+  sortOrder: number
+}
+
+interface NavigationCategoryFormProps {
+  category?: NavigationCategory | null
+  onSubmit: (data: any) => void
+  onCancel: () => void
+  isLoading?: boolean
+}
+
+export default function NavigationCategoryForm({
+  category,
+  onSubmit,
+  onCancel,
+  isLoading = false
+}: NavigationCategoryFormProps) {
+  const [formData, setFormData] = useState({
+    partsIndexCatalogId: '',
+    partsIndexGroupId: '',
+    icon: '',
+    isHidden: false,
+    sortOrder: 0
+  })
+
+  const [selectedCatalog, setSelectedCatalog] = useState<PartsIndexCategory | null>(null)
+  const [selectedGroup, setSelectedGroup] = useState<PartsIndexGroup | null>(null)
+
+  // Загрузка категорий PartsIndex
+  const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(
+    GET_PARTSINDEX_CATEGORIES,
+    {
+      variables: { lang: 'ru' },
+      errorPolicy: 'all'
+    }
+  )
+
+  const categories = categoriesData?.partsIndexCategoriesWithGroups || []
+
+  // Заполнение формы при редактировании
+  useEffect(() => {
+    if (category) {
+      setFormData({
+        partsIndexCatalogId: category.partsIndexCatalogId || '',
+        partsIndexGroupId: category.partsIndexGroupId || '',
+        icon: category.icon || '',
+        isHidden: category.isHidden || false,
+        sortOrder: category.sortOrder || 0
+      })
+
+      // Находим выбранный каталог и группу
+      const catalog = categories.find(c => c.id === category.partsIndexCatalogId)
+      if (catalog) {
+        setSelectedCatalog(catalog)
+        
+        if (category.partsIndexGroupId && catalog.groups) {
+          const group = findGroupById(catalog.groups, category.partsIndexGroupId)
+          setSelectedGroup(group || null)
+        }
+      }
+    }
+  }, [category, categories])
+
+  // Рекурсивный поиск группы по ID
+  const findGroupById = (groups: PartsIndexGroup[], groupId: string): PartsIndexGroup | null => {
+    for (const group of groups) {
+      if (group.id === groupId) {
+        return group
+      }
+      if (group.subgroups && group.subgroups.length > 0) {
+        const found = findGroupById(group.subgroups, groupId)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // Получение всех групп из каталога (включая подгруппы)
+  const getAllGroups = (groups: PartsIndexGroup[], level = 0): Array<PartsIndexGroup & { level: number }> => {
+    const result: Array<PartsIndexGroup & { level: number }> = []
+    
+    groups.forEach(group => {
+      result.push({ ...group, level })
+      if (group.subgroups && group.subgroups.length > 0) {
+        result.push(...getAllGroups(group.subgroups, level + 1))
+      }
+    })
+    
+    return result
+  }
+
+  const handleInputChange = (field: string, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+  }
+
+  const handleCatalogSelect = (catalogId: string) => {
+    const catalog = categories.find(c => c.id === catalogId)
+    setSelectedCatalog(catalog || null)
+    setSelectedGroup(null)
+    
+    handleInputChange('partsIndexCatalogId', catalogId)
+    handleInputChange('partsIndexGroupId', '')
+  }
+
+  const handleGroupSelect = (groupId: string) => {
+    if (groupId === '__CATALOG_ROOT__') {
+      setSelectedGroup(null)
+      handleInputChange('partsIndexGroupId', '')
+    } else if (selectedCatalog?.groups) {
+      const group = findGroupById(selectedCatalog.groups, groupId)
+      setSelectedGroup(group || null)
+      handleInputChange('partsIndexGroupId', groupId)
+    }
+  }
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const result = e.target?.result as string
+        handleInputChange('icon', result)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!formData.partsIndexCatalogId) {
+      alert('Выберите каталог')
+      return
+    }
+
+    onSubmit(formData)
+  }
+
+  const getDisplayName = () => {
+    if (selectedGroup) {
+      return `${selectedCatalog?.name} → ${selectedGroup.name}`
+    }
+    return selectedCatalog?.name || 'Выберите категорию'
+  }
+
+  if (categoriesLoading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
+          <span className="ml-2">Загрузка категорий PartsIndex...</span>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (categoriesError) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <div className="text-center text-red-600">
+            Ошибка загрузки категорий PartsIndex: {categoriesError.message}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          {category ? 'Редактировать иконку категории' : 'Добавить иконку для категории'}
+        </CardTitle>
+        <p className="text-sm text-gray-600">
+          Выберите категорию из PartsIndex и загрузите иконку для отображения в навигации сайта
+        </p>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Выбор каталога */}
+          <div>
+            <Label htmlFor="catalog">Каталог PartsIndex</Label>
+            <Select value={formData.partsIndexCatalogId} onValueChange={handleCatalogSelect}>
+              <SelectTrigger className="mt-1">
+                <SelectValue placeholder="Выберите каталог из PartsIndex" />
+              </SelectTrigger>
+              <SelectContent>
+                {categories.map((catalog) => (
+                  <SelectItem key={catalog.id} value={catalog.id}>
+                    <div className="flex items-center gap-2">
+                      <Folder className="h-4 w-4 text-blue-600" />
+                      {catalog.name}
+                      {catalog.groups && (
+                        <Badge variant="secondary" className="ml-2">
+                          {catalog.groups.length} групп
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Выбор группы (если есть группы в каталоге) */}
+          {selectedCatalog?.groups && selectedCatalog.groups.length > 0 && (
+            <div>
+              <Label htmlFor="group">Группа (необязательно)</Label>
+              <p className="text-xs text-gray-500 mb-2">
+                Оставьте пустым для добавления иконки всему каталогу
+              </p>
+              <Select value={formData.partsIndexGroupId || '__CATALOG_ROOT__'} onValueChange={handleGroupSelect}>
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder="Выберите группу или оставьте пустым" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__CATALOG_ROOT__">
+                    <div className="flex items-center gap-2">
+                      <FolderOpen className="h-4 w-4 text-gray-400" />
+                                             Весь каталог &quot;{selectedCatalog.name}&quot;
+                    </div>
+                  </SelectItem>
+                  {getAllGroups(selectedCatalog.groups).map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      <div className="flex items-center gap-2" style={{ paddingLeft: `${group.level * 16}px` }}>
+                        <Folder className="h-4 w-4 text-orange-600" />
+                        {group.name}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Предварительный просмотр выбранной категории */}
+          {formData.partsIndexCatalogId && (
+            <div className="p-4 bg-gray-50 rounded-lg">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <ImageIcon className="h-4 w-4 text-blue-600" />
+                Выбранная категория:
+              </div>
+              <div className="mt-1 text-sm text-gray-600">
+                {getDisplayName()}
+              </div>
+            </div>
+          )}
+
+          {/* Загрузка иконки */}
+          <div>
+            <Label htmlFor="icon">Иконка категории</Label>
+            <p className="text-xs text-gray-500 mb-2">
+              Небольшая иконка для отображения в навигационном меню (рекомендуется 32x32 пикселя)
+            </p>
+            <div className="space-y-2">
+              {formData.icon && (
+                <div className="relative inline-block">
+                  <img 
+                    src={formData.icon} 
+                    alt="Превью иконки" 
+                    className="w-16 h-16 object-cover rounded-lg border"
+                  />
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    size="sm"
+                    className="absolute -top-2 -right-2 h-6 w-6 p-0"
+                    onClick={() => handleInputChange('icon', '')}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              )}
+              <div className="flex items-center gap-2">
+                <Input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  className="hidden"
+                  id="icon-upload"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => document.getElementById('icon-upload')?.click()}
+                >
+                  <Upload className="h-4 w-4 mr-2" />
+                  Загрузить иконку
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Настройки отображения */}
+          <div className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <Switch
+                id="isHidden"
+                checked={formData.isHidden}
+                onCheckedChange={(checked) => handleInputChange('isHidden', checked)}
+              />
+              <Label htmlFor="isHidden" className="text-sm font-medium">
+                Скрыть категорию в навигации
+              </Label>
+            </div>
+
+            <div>
+              <Label htmlFor="sortOrder">Порядок сортировки</Label>
+              <Input
+                type="number"
+                id="sortOrder"
+                value={formData.sortOrder}
+                onChange={(e) => handleInputChange('sortOrder', parseInt(e.target.value) || 0)}
+                className="mt-1"
+                placeholder="0"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                Меньшее число = выше в списке
+              </p>
+            </div>
+          </div>
+
+          {/* Кнопки */}
+          <div className="flex gap-2 pt-4">
+            <Button
+              type="submit"
+              disabled={isLoading || !formData.partsIndexCatalogId}
+              className="flex-1"
+            >
+              {isLoading && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
+              {category ? 'Сохранить изменения' : 'Добавить иконку'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={isLoading}
+            >
+              Отмена
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}