simpler-parent-select
This commit is contained in:
458
panel/modals/TopicHierarchyModal.tsx
Normal file
458
panel/modals/TopicHierarchyModal.tsx
Normal file
@@ -0,0 +1,458 @@
|
||||
import { Component, createSignal, For, Show } from 'solid-js'
|
||||
import Button from '../ui/Button'
|
||||
import Modal from '../ui/Modal'
|
||||
import styles from '../styles/Form.module.css'
|
||||
|
||||
// Типы для топиков
|
||||
interface Topic {
|
||||
id: number
|
||||
title: string
|
||||
slug: string
|
||||
parent_ids?: number[]
|
||||
children?: Topic[]
|
||||
level?: number
|
||||
community: number
|
||||
}
|
||||
|
||||
interface TopicHierarchyModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
topics: Topic[]
|
||||
onSave: (hierarchyChanges: HierarchyChange[]) => void
|
||||
onError: (error: string) => void
|
||||
}
|
||||
|
||||
interface HierarchyChange {
|
||||
topicId: number
|
||||
newParentIds: number[]
|
||||
oldParentIds: number[]
|
||||
}
|
||||
|
||||
const TopicHierarchyModal: Component<TopicHierarchyModalProps> = (props) => {
|
||||
const [localTopics, setLocalTopics] = createSignal<Topic[]>([])
|
||||
const [changes, setChanges] = createSignal<HierarchyChange[]>([])
|
||||
const [expandedNodes, setExpandedNodes] = createSignal<Set<number>>(new Set())
|
||||
const [searchQuery, setSearchQuery] = createSignal('')
|
||||
const [selectedForMove, setSelectedForMove] = createSignal<number | null>(null)
|
||||
|
||||
// Инициализация локального состояния
|
||||
const initializeTopics = () => {
|
||||
const hierarchicalTopics = buildHierarchy(props.topics)
|
||||
setLocalTopics(hierarchicalTopics)
|
||||
setChanges([])
|
||||
setSearchQuery('')
|
||||
setSelectedForMove(null)
|
||||
// Раскрываем все узлы по умолчанию
|
||||
const allIds = new Set(props.topics.map(t => t.id))
|
||||
setExpandedNodes(allIds)
|
||||
}
|
||||
|
||||
// Построение иерархической структуры
|
||||
const buildHierarchy = (flatTopics: Topic[]): Topic[] => {
|
||||
const topicMap = new Map<number, Topic>()
|
||||
const rootTopics: Topic[] = []
|
||||
|
||||
// Создаем карту всех топиков
|
||||
flatTopics.forEach((topic) => {
|
||||
topicMap.set(topic.id, { ...topic, children: [], level: 0 })
|
||||
})
|
||||
|
||||
// Строим иерархию
|
||||
flatTopics.forEach((topic) => {
|
||||
const currentTopic = topicMap.get(topic.id)!
|
||||
|
||||
if (!topic.parent_ids || topic.parent_ids.length === 0) {
|
||||
rootTopics.push(currentTopic)
|
||||
} else {
|
||||
const parentId = topic.parent_ids[topic.parent_ids.length - 1]
|
||||
const parent = topicMap.get(parentId)
|
||||
if (parent) {
|
||||
currentTopic.level = (parent.level || 0) + 1
|
||||
parent.children!.push(currentTopic)
|
||||
} else {
|
||||
rootTopics.push(currentTopic)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return rootTopics
|
||||
}
|
||||
|
||||
// Функция удалена - используем кликабельный интерфейс вместо drag & drop
|
||||
|
||||
// Проверка, является ли топик потомком другого
|
||||
const isDescendant = (parentId: number, childId: number): boolean => {
|
||||
const checkChildren = (topics: Topic[]): boolean => {
|
||||
for (const topic of topics) {
|
||||
if (topic.id === childId) return true
|
||||
if (topic.children && checkChildren(topic.children)) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const parentTopic = findTopicById(parentId)
|
||||
return parentTopic ? checkChildren(parentTopic.children || []) : false
|
||||
}
|
||||
|
||||
// Поиск топика по ID
|
||||
const findTopicById = (id: number): Topic | null => {
|
||||
const search = (topics: Topic[]): Topic | null => {
|
||||
for (const topic of topics) {
|
||||
if (topic.id === id) return topic
|
||||
if (topic.children) {
|
||||
const found = search(topic.children)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
return search(localTopics())
|
||||
}
|
||||
|
||||
// Обновление родителя топика
|
||||
const updateTopicParent = (topicId: number, newParentIds: number[]) => {
|
||||
const flatTopics = flattenTopics(localTopics())
|
||||
const updatedTopics = flatTopics.map(topic =>
|
||||
topic.id === topicId
|
||||
? { ...topic, parent_ids: newParentIds }
|
||||
: topic
|
||||
)
|
||||
const newHierarchy = buildHierarchy(updatedTopics)
|
||||
setLocalTopics(newHierarchy)
|
||||
}
|
||||
|
||||
// Преобразование дерева в плоский список
|
||||
const flattenTopics = (topics: Topic[]): Topic[] => {
|
||||
const result: Topic[] = []
|
||||
const flatten = (topicList: Topic[]) => {
|
||||
topicList.forEach(topic => {
|
||||
result.push(topic)
|
||||
if (topic.children) {
|
||||
flatten(topic.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
flatten(topics)
|
||||
return result
|
||||
}
|
||||
|
||||
// Переключение раскрытия узла
|
||||
const toggleExpanded = (topicId: number) => {
|
||||
const expanded = expandedNodes()
|
||||
if (expanded.has(topicId)) {
|
||||
expanded.delete(topicId)
|
||||
} else {
|
||||
expanded.add(topicId)
|
||||
}
|
||||
setExpandedNodes(new Set(expanded))
|
||||
}
|
||||
|
||||
// Поиск темы по названию
|
||||
const findTopicByTitle = (title: string): Topic | null => {
|
||||
const query = title.toLowerCase().trim()
|
||||
if (!query) return null
|
||||
|
||||
const search = (topics: Topic[]): Topic | null => {
|
||||
for (const topic of topics) {
|
||||
if (topic.title.toLowerCase().includes(query)) {
|
||||
return topic
|
||||
}
|
||||
if (topic.children) {
|
||||
const found = search(topic.children)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
return search(localTopics())
|
||||
}
|
||||
|
||||
// Выбор темы для перемещения
|
||||
const selectTopicForMove = (topicId: number) => {
|
||||
setSelectedForMove(topicId)
|
||||
const topic = findTopicById(topicId)
|
||||
if (topic) {
|
||||
props.onError(`Выбрана тема "${topic.title}" для перемещения. Теперь нажмите на новую родительскую тему или используйте "Сделать корневой".`)
|
||||
}
|
||||
}
|
||||
|
||||
// Перемещение выбранной темы к новому родителю
|
||||
const moveSelectedTopic = (newParentId: number | null) => {
|
||||
const selectedId = selectedForMove()
|
||||
if (!selectedId) return
|
||||
|
||||
const selectedTopic = findTopicById(selectedId)
|
||||
if (!selectedTopic) return
|
||||
|
||||
// Проверяем циклы
|
||||
if (newParentId && isDescendant(newParentId, selectedId)) {
|
||||
props.onError('Нельзя переместить тему в своего потомка')
|
||||
return
|
||||
}
|
||||
|
||||
let newParentIds: number[] = []
|
||||
if (newParentId) {
|
||||
const newParent = findTopicById(newParentId)
|
||||
if (newParent) {
|
||||
newParentIds = [...(newParent.parent_ids || []), newParentId]
|
||||
}
|
||||
}
|
||||
|
||||
// Обновляем локальное состояние
|
||||
updateTopicParent(selectedId, newParentIds)
|
||||
|
||||
// Добавляем в список изменений
|
||||
setChanges(prev => [
|
||||
...prev.filter(c => c.topicId !== selectedId),
|
||||
{
|
||||
topicId: selectedId,
|
||||
newParentIds,
|
||||
oldParentIds: selectedTopic.parent_ids || []
|
||||
}
|
||||
])
|
||||
|
||||
setSelectedForMove(null)
|
||||
}
|
||||
|
||||
// Раскрытие пути до определенной темы
|
||||
const expandPathToTopic = (topicId: number) => {
|
||||
const topic = findTopicById(topicId)
|
||||
if (!topic || !topic.parent_ids) return
|
||||
|
||||
const expanded = expandedNodes()
|
||||
// Раскрываем всех родителей
|
||||
topic.parent_ids.forEach(parentId => {
|
||||
expanded.add(parentId)
|
||||
})
|
||||
setExpandedNodes(new Set(expanded))
|
||||
}
|
||||
|
||||
// Рендеринг дерева топиков
|
||||
const renderTree = (topics: Topic[]): any => {
|
||||
return (
|
||||
<For each={topics}>
|
||||
{(topic) => {
|
||||
const isExpanded = expandedNodes().has(topic.id)
|
||||
const isSelected = selectedForMove() === topic.id
|
||||
const isTarget = selectedForMove() && selectedForMove() !== topic.id
|
||||
const hasChildren = topic.children && topic.children.length > 0
|
||||
|
||||
return (
|
||||
<div class={styles.treeNode}>
|
||||
<div
|
||||
class={`${styles.treeItem} ${isSelected ? styles.selectedForMove : ''} ${isTarget ? styles.moveTarget : ''}`}
|
||||
onClick={() => {
|
||||
if (selectedForMove() && selectedForMove() !== topic.id) {
|
||||
// Если уже выбрана тема для перемещения, делаем текущую тему родителем
|
||||
moveSelectedTopic(topic.id)
|
||||
} else {
|
||||
// Иначе выбираем эту тему для перемещения
|
||||
selectTopicForMove(topic.id)
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
'padding-left': `${(topic.level || 0) * 20}px`,
|
||||
'cursor': 'pointer',
|
||||
'border': isSelected ? '2px solid #007bff' : isTarget ? '2px dashed #28a745' : '1px solid transparent',
|
||||
'background-color': isSelected ? '#e3f2fd' : isTarget ? '#d4edda' : 'transparent'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', 'align-items': 'center', gap: '8px' }}>
|
||||
<Show when={hasChildren}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
toggleExpanded(topic.id)
|
||||
}}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
'font-size': '12px'
|
||||
}}
|
||||
>
|
||||
{isExpanded ? '▼' : '▶'}
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={!hasChildren}>
|
||||
<span style={{ width: '12px' }}></span>
|
||||
</Show>
|
||||
|
||||
<Show when={isSelected}>
|
||||
<span class={styles.selectedIcon}>📦</span>
|
||||
</Show>
|
||||
<Show when={isTarget}>
|
||||
<span class={styles.targetIcon}>📂</span>
|
||||
</Show>
|
||||
<Show when={!isSelected && !isTarget}>
|
||||
<span class={styles.clickIcon}>#</span>
|
||||
</Show>
|
||||
|
||||
<span class={styles.topicTitle}>{topic.title}</span>
|
||||
<span class={styles.topicId}>#{topic.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={isExpanded && hasChildren}>
|
||||
<div class={styles.treeChildren}>
|
||||
{renderTree(topic.children!)}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
)
|
||||
}
|
||||
|
||||
// Сброс корневого уровня (перетаскивание в корень)
|
||||
const makeRootTopic = (topicId: number) => {
|
||||
updateTopicParent(topicId, [])
|
||||
|
||||
const draggedTopic = findTopicById(topicId)
|
||||
if (!draggedTopic) return
|
||||
|
||||
setChanges(prev => [
|
||||
...prev.filter(c => c.topicId !== topicId),
|
||||
{
|
||||
topicId,
|
||||
newParentIds: [],
|
||||
oldParentIds: draggedTopic.parent_ids || []
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
// Сохранение изменений
|
||||
const handleSave = () => {
|
||||
if (changes().length === 0) {
|
||||
props.onError('Нет изменений для сохранения')
|
||||
return
|
||||
}
|
||||
props.onSave(changes())
|
||||
}
|
||||
|
||||
// Инициализация при открытии
|
||||
if (props.isOpen && localTopics().length === 0) {
|
||||
initializeTopics()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={props.isOpen}
|
||||
onClose={props.onClose}
|
||||
title="Управление иерархией тем"
|
||||
size="large"
|
||||
>
|
||||
<div class={styles.hierarchyContainer}>
|
||||
<div class={styles.instructions}>
|
||||
<h4>Инструкции:</h4>
|
||||
<ul>
|
||||
<li>🔍 Найдите тему по названию или прокрутите список</li>
|
||||
<li># Нажмите на тему, чтобы выбрать её для перемещения (синяя рамка)</li>
|
||||
<li>📂 Нажмите на другую тему, чтобы сделать её родителем (зеленая рамка)</li>
|
||||
<li>🏠 Используйте кнопку "Сделать корневой" для перемещения на верхний уровень</li>
|
||||
<li>▶/▼ Раскрывайте/сворачивайте ветки дерева</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class={styles.searchSection}>
|
||||
<label class={styles.label}>Поиск темы:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery()}
|
||||
onInput={(e) => {
|
||||
const query = e.target.value
|
||||
setSearchQuery(query)
|
||||
// Автоматически находим и подсвечиваем тему
|
||||
if (query.trim()) {
|
||||
const foundTopic = findTopicByTitle(query)
|
||||
if (foundTopic) {
|
||||
// Раскрываем путь до найденной темы
|
||||
expandPathToTopic(foundTopic.id)
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Введите название темы для поиска..."
|
||||
class={styles.searchInput}
|
||||
/>
|
||||
<Show when={searchQuery() && findTopicByTitle(searchQuery())}>
|
||||
<div class={styles.searchResult}>
|
||||
✅ Найдена тема: <strong>{findTopicByTitle(searchQuery())?.title}</strong>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={searchQuery() && !findTopicByTitle(searchQuery())}>
|
||||
<div class={styles.searchNoResult}>
|
||||
❌ Тема не найдена
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class={styles.hierarchyTree}>
|
||||
{renderTree(localTopics())}
|
||||
</div>
|
||||
|
||||
<Show when={changes().length > 0}>
|
||||
<div class={styles.changesSummary}>
|
||||
<h4>Планируемые изменения ({changes().length}):</h4>
|
||||
<For each={changes()}>
|
||||
{(change) => {
|
||||
const topic = findTopicById(change.topicId)
|
||||
return (
|
||||
<div class={styles.changeItem}>
|
||||
<strong>{topic?.title}</strong>: {
|
||||
change.newParentIds.length === 0
|
||||
? 'станет корневой темой'
|
||||
: `переместится под тему #${change.newParentIds[change.newParentIds.length - 1]}`
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={selectedForMove()}>
|
||||
<div class={styles.actionZone}>
|
||||
<div class={styles.selectedTopicInfo}>
|
||||
<h4>Выбрана для перемещения:</h4>
|
||||
<div class={styles.selectedTopicDisplay}>
|
||||
📦 <strong>{findTopicById(selectedForMove()!)?.title}</strong> #{selectedForMove()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.actionButtons}>
|
||||
<button
|
||||
class={styles.rootButton}
|
||||
onClick={() => moveSelectedTopic(null)}
|
||||
>
|
||||
🏠 Сделать корневой темой
|
||||
</button>
|
||||
<button
|
||||
class={styles.cancelButton}
|
||||
onClick={() => setSelectedForMove(null)}
|
||||
>
|
||||
❌ Отменить выбор
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class={styles.modalActions}>
|
||||
<Button variant="secondary" onClick={props.onClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
disabled={changes().length === 0}
|
||||
>
|
||||
Сохранить изменения ({changes().length})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopicHierarchyModal
|
||||
Reference in New Issue
Block a user