381 lines
13 KiB
TypeScript
381 lines
13 KiB
TypeScript
'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" />
|
||
Весь каталог "{selectedCatalog.name}"
|
||
</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>
|
||
)
|
||
}
|