673 lines
22 KiB
TypeScript
673 lines
22 KiB
TypeScript
/**
|
||
* Компонент управления топиками
|
||
* @module TopicsRoute
|
||
*/
|
||
|
||
import { Component, createEffect, createSignal, For, JSX, on, onMount, Show, untrack } from 'solid-js'
|
||
import { query } from '../graphql'
|
||
import type { Query } from '../graphql/generated/schema'
|
||
import { CREATE_TOPIC_MUTATION, DELETE_TOPIC_MUTATION, UPDATE_TOPIC_MUTATION } from '../graphql/mutations'
|
||
import { GET_TOPICS_QUERY } from '../graphql/queries'
|
||
import TopicEditModal from '../modals/TopicEditModal'
|
||
import TopicMergeModal from '../modals/TopicMergeModal'
|
||
import TopicSimpleParentModal from '../modals/TopicSimpleParentModal'
|
||
import styles from '../styles/Table.module.css'
|
||
import Button from '../ui/Button'
|
||
import Modal from '../ui/Modal'
|
||
|
||
/**
|
||
* Интерфейс топика
|
||
*/
|
||
interface Topic {
|
||
id: number
|
||
slug: string
|
||
title: string
|
||
body?: string
|
||
pic?: string
|
||
community: number
|
||
parent_ids?: number[]
|
||
children?: Topic[]
|
||
level?: number
|
||
}
|
||
|
||
/**
|
||
* Интерфейс свойств компонента
|
||
*/
|
||
interface TopicsRouteProps {
|
||
onError: (error: string) => void
|
||
onSuccess: (message: string) => void
|
||
}
|
||
|
||
/**
|
||
* Компонент управления топиками
|
||
*/
|
||
const TopicsRoute: Component<TopicsRouteProps> = (props) => {
|
||
const [rawTopics, setRawTopics] = createSignal<Topic[]>([])
|
||
const [topics, setTopics] = createSignal<Topic[]>([])
|
||
const [loading, setLoading] = createSignal(false)
|
||
const [sortBy, setSortBy] = createSignal<'id' | 'title'>('id')
|
||
const [sortDirection, setSortDirection] = createSignal<'asc' | 'desc'>('asc')
|
||
const [deleteModal, setDeleteModal] = createSignal<{ show: boolean; topic: Topic | null }>({
|
||
show: false,
|
||
topic: null
|
||
})
|
||
const [editModal, setEditModal] = createSignal<{ show: boolean; topic: Topic | null }>({
|
||
show: false,
|
||
topic: null
|
||
})
|
||
const [createModal, setCreateModal] = createSignal<{ show: boolean }>({
|
||
show: false
|
||
})
|
||
const [selectedTopics, setSelectedTopics] = createSignal<number[]>([])
|
||
const [groupAction, setGroupAction] = createSignal<'delete' | 'merge' | ''>('')
|
||
const [mergeModal, setMergeModal] = createSignal<{ show: boolean }>({
|
||
show: false
|
||
})
|
||
const [simpleParentModal, setSimpleParentModal] = createSignal<{ show: boolean; topic: Topic | null }>({
|
||
show: false,
|
||
topic: null
|
||
})
|
||
|
||
/**
|
||
* Загружает список всех топиков
|
||
*/
|
||
const loadTopics = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const data = await query<{ get_topics_all: Query['get_topics_all'] }>(
|
||
`${location.origin}/graphql`,
|
||
GET_TOPICS_QUERY
|
||
)
|
||
|
||
if (data?.get_topics_all) {
|
||
// Строим иерархическую структуру
|
||
const validTopics = data.get_topics_all.filter((topic): topic is Topic => topic !== null)
|
||
setRawTopics(validTopics)
|
||
}
|
||
} catch (error) {
|
||
props.onError(`Ошибка загрузки топиков: ${(error as Error).message}`)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// Пересортировка при изменении rawTopics или параметров сортировки
|
||
createEffect(
|
||
on([rawTopics, sortBy, sortDirection], () => {
|
||
const rawData = rawTopics()
|
||
const sort = sortBy()
|
||
const direction = sortDirection()
|
||
|
||
if (rawData.length > 0) {
|
||
// Используем untrack для чтения buildHierarchy без дополнительных зависимостей
|
||
const hierarchicalTopics = untrack(() => buildHierarchy(rawData, sort, direction))
|
||
setTopics(hierarchicalTopics)
|
||
} else {
|
||
setTopics([])
|
||
}
|
||
})
|
||
)
|
||
|
||
// Загружаем топики при монтировании компонента
|
||
onMount(() => {
|
||
void loadTopics()
|
||
})
|
||
|
||
/**
|
||
* Строит иерархическую структуру топиков
|
||
*/
|
||
const buildHierarchy = (
|
||
flatTopics: Topic[],
|
||
sortField?: 'id' | 'title',
|
||
sortDir?: 'asc' | 'desc'
|
||
): 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 sortTopics(rootTopics, sortField, sortDir)
|
||
}
|
||
|
||
/**
|
||
* Сортирует топики рекурсивно
|
||
*/
|
||
const sortTopics = (topics: Topic[], sortField?: 'id' | 'title', sortDir?: 'asc' | 'desc'): Topic[] => {
|
||
const field = sortField || sortBy()
|
||
const direction = sortDir || sortDirection()
|
||
|
||
const sortedTopics = topics.sort((a, b) => {
|
||
let comparison = 0
|
||
|
||
if (field === 'title') {
|
||
comparison = (a.title || '').localeCompare(b.title || '', 'ru')
|
||
} else {
|
||
comparison = a.id - b.id
|
||
}
|
||
|
||
return direction === 'desc' ? -comparison : comparison
|
||
})
|
||
|
||
// Рекурсивно сортируем дочерние элементы
|
||
sortedTopics.forEach((topic) => {
|
||
if (topic.children && topic.children.length > 0) {
|
||
topic.children = sortTopics(topic.children, field, direction)
|
||
}
|
||
})
|
||
|
||
return sortedTopics
|
||
}
|
||
|
||
/**
|
||
* Обрезает текст до указанной длины
|
||
*/
|
||
const truncateText = (text: string, maxLength = 100): string => {
|
||
if (!text) return '—'
|
||
return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text
|
||
}
|
||
|
||
/**
|
||
* Рекурсивно отображает топики с отступами для иерархии
|
||
*/
|
||
const renderTopics = (topics: Topic[]): JSX.Element[] => {
|
||
const result: JSX.Element[] = []
|
||
|
||
topics.forEach((topic) => {
|
||
const isSelected = selectedTopics().includes(topic.id)
|
||
|
||
result.push(
|
||
<tr class={styles['clickable-row']}>
|
||
<td>{topic.id}</td>
|
||
<td
|
||
style={{ 'padding-left': `${(topic.level || 0) * 20}px`, cursor: 'pointer' }}
|
||
onClick={() => setEditModal({ show: true, topic })}
|
||
>
|
||
{topic.level! > 0 && '└─ '}
|
||
{topic.title}
|
||
</td>
|
||
<td onClick={() => setEditModal({ show: true, topic })} style={{ cursor: 'pointer' }}>
|
||
{topic.slug}
|
||
</td>
|
||
<td onClick={() => setEditModal({ show: true, topic })} style={{ cursor: 'pointer' }}>
|
||
<div
|
||
style={{
|
||
'max-width': '200px',
|
||
overflow: 'hidden',
|
||
'text-overflow': 'ellipsis',
|
||
'white-space': 'nowrap'
|
||
}}
|
||
title={topic.body}
|
||
>
|
||
{truncateText(topic.body?.replace(/<[^>]*>/g, '') || '', 100)}
|
||
</div>
|
||
</td>
|
||
<td onClick={() => setEditModal({ show: true, topic })} style={{ cursor: 'pointer' }}>
|
||
{topic.community}
|
||
</td>
|
||
<td onClick={() => setEditModal({ show: true, topic })} style={{ cursor: 'pointer' }}>
|
||
{topic.parent_ids?.join(', ') || '—'}
|
||
</td>
|
||
<td onClick={(e) => e.stopPropagation()}>
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={(e) => {
|
||
e.stopPropagation()
|
||
handleTopicSelect(topic.id, e.target.checked)
|
||
}}
|
||
style={{ cursor: 'pointer' }}
|
||
/>
|
||
</td>
|
||
</tr>
|
||
)
|
||
|
||
if (topic.children && topic.children.length > 0) {
|
||
result.push(...renderTopics(topic.children))
|
||
}
|
||
})
|
||
|
||
return result
|
||
}
|
||
|
||
/**
|
||
* Обновляет топик
|
||
*/
|
||
const updateTopic = async (updatedTopic: Topic) => {
|
||
try {
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: UPDATE_TOPIC_MUTATION,
|
||
variables: { topic_input: updatedTopic }
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
if (result.data.update_topic.success) {
|
||
props.onSuccess('Топик успешно обновлен')
|
||
setEditModal({ show: false, topic: null })
|
||
await loadTopics() // Перезагружаем список
|
||
} else {
|
||
throw new Error(result.data.update_topic.message || 'Ошибка обновления топика')
|
||
}
|
||
} catch (error) {
|
||
props.onError(`Ошибка обновления топика: ${(error as Error).message}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Создает новый топик
|
||
*/
|
||
const createTopic = async (newTopic: Topic) => {
|
||
try {
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: CREATE_TOPIC_MUTATION,
|
||
variables: { topic_input: newTopic }
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
if (result.data.create_topic.error) {
|
||
throw new Error(result.data.create_topic.error)
|
||
}
|
||
|
||
props.onSuccess('Топик успешно создан')
|
||
setCreateModal({ show: false })
|
||
await loadTopics() // Перезагружаем список
|
||
} catch (error) {
|
||
props.onError(`Ошибка создания топика: ${(error as Error).message}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обработчик выбора/снятия выбора топика
|
||
*/
|
||
const handleTopicSelect = (topicId: number, checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedTopics(prev => [...prev, topicId])
|
||
} else {
|
||
setSelectedTopics(prev => prev.filter(id => id !== topicId))
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обработчик выбора/снятия выбора всех топиков
|
||
*/
|
||
const handleSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
const allTopicIds = rawTopics().map(topic => topic.id)
|
||
setSelectedTopics(allTopicIds)
|
||
} else {
|
||
setSelectedTopics([])
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Проверяет выбраны ли все топики
|
||
*/
|
||
const isAllSelected = () => {
|
||
const allIds = rawTopics().map(topic => topic.id)
|
||
const selected = selectedTopics()
|
||
return allIds.length > 0 && allIds.every(id => selected.includes(id))
|
||
}
|
||
|
||
/**
|
||
* Проверяет выбран ли хотя бы один топик
|
||
*/
|
||
const hasSelectedTopics = () => selectedTopics().length > 0
|
||
|
||
/**
|
||
* Выполняет групповое действие
|
||
*/
|
||
const executeGroupAction = () => {
|
||
const action = groupAction()
|
||
const selected = selectedTopics()
|
||
|
||
if (!action || selected.length === 0) {
|
||
props.onError('Выберите действие и топики')
|
||
return
|
||
}
|
||
|
||
if (action === 'delete') {
|
||
// Групповое удаление
|
||
const selectedTopicsData = rawTopics().filter(t => selected.includes(t.id))
|
||
setDeleteModal({ show: true, topic: selectedTopicsData[0] }) // Используем первый для отображения
|
||
} else if (action === 'merge') {
|
||
// Слияние топиков
|
||
if (selected.length < 2) {
|
||
props.onError('Для слияния нужно выбрать минимум 2 темы')
|
||
return
|
||
}
|
||
setMergeModal({ show: true })
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Групповое удаление выбранных топиков
|
||
*/
|
||
const deleteSelectedTopics = async () => {
|
||
const selected = selectedTopics()
|
||
if (selected.length === 0) return
|
||
|
||
try {
|
||
// Удаляем по одному (можно оптимизировать пакетным удалением)
|
||
for (const topicId of selected) {
|
||
await deleteTopic(topicId)
|
||
}
|
||
|
||
setSelectedTopics([])
|
||
setGroupAction('')
|
||
props.onSuccess(`Успешно удалено ${selected.length} тем`)
|
||
} catch (error) {
|
||
props.onError(`Ошибка группового удаления: ${(error as Error).message}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Удаляет топик
|
||
*/
|
||
const deleteTopic = async (topicId: number) => {
|
||
try {
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: DELETE_TOPIC_MUTATION,
|
||
variables: { id: topicId }
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
if (result.data.delete_topic_by_id.success) {
|
||
props.onSuccess('Топик успешно удален')
|
||
setDeleteModal({ show: false, topic: null })
|
||
await loadTopics() // Перезагружаем список
|
||
} else {
|
||
throw new Error(result.data.delete_topic_by_id.message || 'Ошибка удаления топика')
|
||
}
|
||
} catch (error) {
|
||
props.onError(`Ошибка удаления топика: ${(error as Error).message}`)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div class={styles.container}>
|
||
<div class={styles.header}>
|
||
<div style={{ display: 'flex', gap: '12px', 'align-items': 'center' }}>
|
||
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
|
||
<label style={{ 'font-size': '14px', color: '#666' }}>Сортировка:</label>
|
||
<select
|
||
value={sortBy()}
|
||
onInput={(e) => setSortBy(e.target.value as 'id' | 'title')}
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid #ddd',
|
||
'border-radius': '4px',
|
||
'font-size': '14px'
|
||
}}
|
||
>
|
||
<option value="id">По ID</option>
|
||
<option value="title">По названию</option>
|
||
</select>
|
||
<select
|
||
value={sortDirection()}
|
||
onInput={(e) => setSortDirection(e.target.value as 'asc' | 'desc')}
|
||
style={{
|
||
padding: '4px 8px',
|
||
border: '1px solid #ddd',
|
||
'border-radius': '4px',
|
||
'font-size': '14px'
|
||
}}
|
||
>
|
||
<option value="asc">↑ По возрастанию</option>
|
||
<option value="desc">↓ По убыванию</option>
|
||
</select>
|
||
</div>
|
||
<Button onClick={loadTopics} disabled={loading()}>
|
||
{loading() ? 'Загрузка...' : 'Обновить'}
|
||
</Button>
|
||
<Button variant="primary" onClick={() => setCreateModal({ show: true })}>
|
||
Создать тему
|
||
</Button>
|
||
<Button
|
||
variant="secondary"
|
||
onClick={() => {
|
||
if (selectedTopics().length === 1) {
|
||
const selectedTopic = rawTopics().find(t => t.id === selectedTopics()[0])
|
||
if (selectedTopic) {
|
||
setSimpleParentModal({ show: true, topic: selectedTopic })
|
||
}
|
||
} else {
|
||
props.onError('Выберите одну тему для назначения родителя')
|
||
}
|
||
}}
|
||
>
|
||
🏠 Назначить родителя
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<Show
|
||
when={!loading()}
|
||
fallback={
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner" />
|
||
<div>Загрузка топиков...</div>
|
||
</div>
|
||
}
|
||
>
|
||
<table class={styles.table}>
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Название</th>
|
||
<th>Slug</th>
|
||
<th>Описание</th>
|
||
<th>Сообщество</th>
|
||
<th>Родители</th>
|
||
<th>
|
||
<div style={{ display: 'flex', 'align-items': 'center', gap: '8px', 'flex-direction': 'column' }}>
|
||
<div style={{ display: 'flex', 'align-items': 'center', gap: '4px' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={isAllSelected()}
|
||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="Выбрать все"
|
||
/>
|
||
<span style={{ 'font-size': '12px' }}>Все</span>
|
||
</div>
|
||
<Show when={hasSelectedTopics()}>
|
||
<div style={{ display: 'flex', gap: '4px', 'align-items': 'center' }}>
|
||
<select
|
||
value={groupAction()}
|
||
onChange={(e) => setGroupAction(e.target.value as 'delete' | 'merge' | '')}
|
||
style={{
|
||
padding: '2px 4px',
|
||
'font-size': '11px',
|
||
border: '1px solid #ddd',
|
||
'border-radius': '3px'
|
||
}}
|
||
>
|
||
<option value="">Действие</option>
|
||
<option value="delete">Удалить</option>
|
||
<option value="merge">Слить</option>
|
||
</select>
|
||
<button
|
||
onClick={executeGroupAction}
|
||
disabled={!groupAction()}
|
||
style={{
|
||
padding: '2px 6px',
|
||
'font-size': '11px',
|
||
background: groupAction() ? '#007bff' : '#ccc',
|
||
color: 'white',
|
||
border: 'none',
|
||
'border-radius': '3px',
|
||
cursor: groupAction() ? 'pointer' : 'not-allowed'
|
||
}}
|
||
>
|
||
✓
|
||
</button>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<For each={renderTopics(topics())}>{(row) => row}</For>
|
||
</tbody>
|
||
</table>
|
||
</Show>
|
||
|
||
{/* Модальное окно создания */}
|
||
<TopicEditModal
|
||
isOpen={createModal().show}
|
||
topic={null}
|
||
onClose={() => setCreateModal({ show: false })}
|
||
onSave={createTopic}
|
||
/>
|
||
|
||
{/* Модальное окно редактирования */}
|
||
<TopicEditModal
|
||
isOpen={editModal().show}
|
||
topic={editModal().topic}
|
||
onClose={() => setEditModal({ show: false, topic: null })}
|
||
onSave={updateTopic}
|
||
/>
|
||
|
||
{/* Модальное окно подтверждения удаления */}
|
||
<Modal
|
||
isOpen={deleteModal().show}
|
||
onClose={() => setDeleteModal({ show: false, topic: null })}
|
||
title="Подтверждение удаления"
|
||
>
|
||
<div>
|
||
<Show when={selectedTopics().length > 1}>
|
||
<p>
|
||
Вы уверены, что хотите удалить <strong>{selectedTopics().length}</strong> выбранных тем?
|
||
</p>
|
||
<p class={styles['warning-text']}>
|
||
Это действие нельзя отменить. Все дочерние топики также будут удалены.
|
||
</p>
|
||
<div class={styles['modal-actions']}>
|
||
<Button variant="secondary" onClick={() => setDeleteModal({ show: false, topic: null })}>
|
||
Отмена
|
||
</Button>
|
||
<Button variant="danger" onClick={deleteSelectedTopics}>
|
||
Удалить {selectedTopics().length} тем
|
||
</Button>
|
||
</div>
|
||
</Show>
|
||
<Show when={selectedTopics().length <= 1}>
|
||
<p>
|
||
Вы уверены, что хотите удалить топик "<strong>{deleteModal().topic?.title}</strong>"?
|
||
</p>
|
||
<p class={styles['warning-text']}>
|
||
Это действие нельзя отменить. Все дочерние топики также будут удалены.
|
||
</p>
|
||
<div class={styles['modal-actions']}>
|
||
<Button variant="secondary" onClick={() => setDeleteModal({ show: false, topic: null })}>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
onClick={() => {
|
||
if (deleteModal().topic) {
|
||
void deleteTopic(deleteModal().topic!.id)
|
||
}
|
||
}}
|
||
>
|
||
Удалить
|
||
</Button>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</Modal>
|
||
|
||
{/* Модальное окно слияния тем */}
|
||
<TopicMergeModal
|
||
isOpen={mergeModal().show}
|
||
onClose={() => {
|
||
setMergeModal({ show: false })
|
||
setSelectedTopics([])
|
||
setGroupAction('')
|
||
}}
|
||
topics={rawTopics().filter(topic => selectedTopics().includes(topic.id))}
|
||
onSuccess={(message) => {
|
||
props.onSuccess(message)
|
||
setSelectedTopics([])
|
||
setGroupAction('')
|
||
void loadTopics()
|
||
}}
|
||
onError={props.onError}
|
||
/>
|
||
|
||
{/* Модальное окно назначения родителя */}
|
||
<TopicSimpleParentModal
|
||
isOpen={simpleParentModal().show}
|
||
onClose={() => setSimpleParentModal({ show: false, topic: null })}
|
||
topic={simpleParentModal().topic}
|
||
allTopics={rawTopics()}
|
||
onSuccess={(message) => {
|
||
props.onSuccess(message)
|
||
setSimpleParentModal({ show: false, topic: null })
|
||
void loadTopics() // Перезагружаем данные
|
||
}}
|
||
onError={props.onError}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default TopicsRoute
|