322 lines
12 KiB
TypeScript
322 lines
12 KiB
TypeScript
import { Component, createSignal, For, Show } from 'solid-js'
|
||
import styles from '../styles/Form.module.css'
|
||
import Button from '../ui/Button'
|
||
import Modal from '../ui/Modal'
|
||
|
||
interface Topic {
|
||
id: number
|
||
title: string
|
||
slug: string
|
||
parent_ids?: number[]
|
||
community: number
|
||
}
|
||
|
||
interface TopicBulkParentModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
selectedTopicIds: number[]
|
||
allTopics: Topic[]
|
||
onSave: (changes: BulkParentChange[]) => void
|
||
onError: (error: string) => void
|
||
}
|
||
|
||
interface BulkParentChange {
|
||
topicId: number
|
||
newParentIds: number[]
|
||
oldParentIds: number[]
|
||
}
|
||
|
||
const TopicBulkParentModal: Component<TopicBulkParentModalProps> = (props) => {
|
||
const [newParentId, setNewParentId] = createSignal<number | null>(null)
|
||
const [searchQuery, setSearchQuery] = createSignal('')
|
||
const [actionType, setActionType] = createSignal<'set' | 'makeRoot'>('set')
|
||
|
||
// Получаем выбранные топики
|
||
const getSelectedTopics = () => {
|
||
return props.allTopics.filter((topic) => props.selectedTopicIds.includes(topic.id))
|
||
}
|
||
|
||
// Фильтрация доступных родителей
|
||
const getAvailableParents = () => {
|
||
const selectedIds = new Set(props.selectedTopicIds)
|
||
|
||
return props.allTopics.filter((topic) => {
|
||
// Исключаем выбранные топики
|
||
if (selectedIds.has(topic.id)) return false
|
||
|
||
// Исключаем топики, которые являются детьми выбранных
|
||
const isChildOfSelected = props.selectedTopicIds.some((selectedId) =>
|
||
isDescendant(selectedId, topic.id)
|
||
)
|
||
if (isChildOfSelected) return false
|
||
|
||
// Фильтр по поисковому запросу
|
||
const query = searchQuery().toLowerCase()
|
||
if (query && !topic.title.toLowerCase().includes(query)) return false
|
||
|
||
return true
|
||
})
|
||
}
|
||
|
||
// Проверка, является ли топик потомком другого
|
||
const isDescendant = (ancestorId: number, descendantId: number): boolean => {
|
||
const descendant = props.allTopics.find((t) => t.id === descendantId)
|
||
if (!descendant || !descendant.parent_ids) return false
|
||
|
||
return descendant.parent_ids.includes(ancestorId)
|
||
}
|
||
|
||
// Получение пути к корню
|
||
const getTopicPath = (topicId: number): string => {
|
||
const topic = props.allTopics.find((t) => t.id === topicId)
|
||
if (!topic) return ''
|
||
|
||
if (!topic.parent_ids || topic.parent_ids.length === 0) {
|
||
return topic.title
|
||
}
|
||
|
||
const parentPath = getTopicPath(topic.parent_ids[topic.parent_ids.length - 1])
|
||
return `${parentPath} → ${topic.title}`
|
||
}
|
||
|
||
// Группировка топиков по сообществам
|
||
const getTopicsByCommunity = () => {
|
||
const selectedTopics = getSelectedTopics()
|
||
const communities = new Map<number, Topic[]>()
|
||
|
||
selectedTopics.forEach((topic) => {
|
||
if (!communities.has(topic.community)) {
|
||
communities.set(topic.community, [])
|
||
}
|
||
communities.get(topic.community)!.push(topic)
|
||
})
|
||
|
||
return communities
|
||
}
|
||
|
||
// Проверка совместимости действия
|
||
const validateAction = (): string | null => {
|
||
const communities = getTopicsByCommunity()
|
||
|
||
if (communities.size > 1) {
|
||
return 'Нельзя изменять иерархию тем из разных сообществ одновременно'
|
||
}
|
||
|
||
if (actionType() === 'set' && !newParentId()) {
|
||
return 'Выберите родительскую тему'
|
||
}
|
||
|
||
const selectedParent = props.allTopics.find((t) => t.id === newParentId())
|
||
if (selectedParent) {
|
||
const selectedCommunity = Array.from(communities.keys())[0]
|
||
if (selectedParent.community !== selectedCommunity) {
|
||
return 'Родительская тема должна быть из того же сообщества'
|
||
}
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
// Сохранение изменений
|
||
const handleSave = () => {
|
||
const validationError = validateAction()
|
||
if (validationError) {
|
||
props.onError(validationError)
|
||
return
|
||
}
|
||
|
||
const changes: BulkParentChange[] = []
|
||
const selectedTopics = getSelectedTopics()
|
||
|
||
selectedTopics.forEach((topic) => {
|
||
let newParentIds: number[] = []
|
||
|
||
if (actionType() === 'set' && newParentId()) {
|
||
const parentTopic = props.allTopics.find((t) => t.id === newParentId())
|
||
if (parentTopic) {
|
||
newParentIds = [...(parentTopic.parent_ids || []), newParentId()!]
|
||
}
|
||
}
|
||
|
||
changes.push({
|
||
topicId: topic.id,
|
||
newParentIds,
|
||
oldParentIds: topic.parent_ids || []
|
||
})
|
||
})
|
||
|
||
props.onSave(changes)
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={props.isOpen}
|
||
onClose={props.onClose}
|
||
title={`Массовое изменение иерархии (${props.selectedTopicIds.length} тем)`}
|
||
size="large"
|
||
>
|
||
<div class={styles.bulkParentContainer}>
|
||
{/* Проверка совместимости */}
|
||
<Show when={getTopicsByCommunity().size > 1}>
|
||
<div class={styles.errorMessage}>
|
||
⚠️ Выбраны темы из разных сообществ. Массовое изменение иерархии возможно только для тем одного
|
||
сообщества.
|
||
</div>
|
||
</Show>
|
||
|
||
{/* Список выбранных тем */}
|
||
<div class={styles.selectedTopicsPreview}>
|
||
<h4>Выбранные темы ({props.selectedTopicIds.length}):</h4>
|
||
<div class={styles.topicsList}>
|
||
<For each={getSelectedTopics()}>
|
||
{(topic) => (
|
||
<div class={styles.topicPreviewItem}>
|
||
<span class={styles.topicTitle}>{topic.title}</span>
|
||
<span class={styles.topicId}>#{topic.id}</span>
|
||
<Show when={topic.parent_ids && topic.parent_ids.length > 0}>
|
||
<div class={styles.currentPath}>Текущий путь: {getTopicPath(topic.id)}</div>
|
||
</Show>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Выбор действия */}
|
||
<div class={styles.actionSelection}>
|
||
<h4>Выберите действие:</h4>
|
||
<div class={styles.actionOptions}>
|
||
<div class={styles.actionOption}>
|
||
<input
|
||
type="radio"
|
||
id="action-set"
|
||
name="action"
|
||
checked={actionType() === 'set'}
|
||
onChange={() => setActionType('set')}
|
||
/>
|
||
<label for="action-set" class={styles.actionLabel}>
|
||
<strong>Установить нового родителя</strong>
|
||
<div class={styles.actionDescription}>
|
||
Переместить все выбранные темы под одного родителя
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class={styles.actionOption}>
|
||
<input
|
||
type="radio"
|
||
id="action-root"
|
||
name="action"
|
||
checked={actionType() === 'makeRoot'}
|
||
onChange={() => setActionType('makeRoot')}
|
||
/>
|
||
<label for="action-root" class={styles.actionLabel}>
|
||
<strong>🏠 Сделать корневыми</strong>
|
||
<div class={styles.actionDescription}>
|
||
Переместить все выбранные темы на верхний уровень
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Выбор родителя */}
|
||
<Show when={actionType() === 'set'}>
|
||
<div class={styles.parentSelection}>
|
||
<h4>Выбор родительской темы:</h4>
|
||
|
||
<div class={styles.searchSection}>
|
||
<input
|
||
type="text"
|
||
value={searchQuery()}
|
||
onInput={(e) => setSearchQuery(e.target.value)}
|
||
placeholder="Поиск родительской темы..."
|
||
class={styles.searchInput}
|
||
/>
|
||
</div>
|
||
|
||
<div class={styles.parentsList}>
|
||
<For each={getAvailableParents()}>
|
||
{(topic) => (
|
||
<div class={styles.parentOption}>
|
||
<input
|
||
type="radio"
|
||
id={`bulk-parent-${topic.id}`}
|
||
name="bulk-parent"
|
||
checked={newParentId() === topic.id}
|
||
onChange={() => setNewParentId(topic.id)}
|
||
/>
|
||
<label for={`bulk-parent-${topic.id}`} class={styles.parentOptionLabel}>
|
||
<strong>{topic.title}</strong>
|
||
<div class={styles.parentDescription}>
|
||
<span class={styles.topicId}>#{topic.id}</span>
|
||
<span class={styles.topicSlug}>{topic.slug}</span>
|
||
</div>
|
||
<Show when={topic.parent_ids && topic.parent_ids.length > 0}>
|
||
<div class={styles.parentPath}>Текущий путь: {getTopicPath(topic.id)}</div>
|
||
</Show>
|
||
</label>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
|
||
<Show when={getAvailableParents().length === 0}>
|
||
<div class={styles.noResults}>
|
||
{searchQuery()
|
||
? `Нет доступных тем для поиска "${searchQuery()}"`
|
||
: 'Нет доступных родительских тем'}
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</Show>
|
||
|
||
{/* Предварительный просмотр изменений */}
|
||
<Show when={actionType() === 'makeRoot' || (actionType() === 'set' && newParentId())}>
|
||
<div class={styles.previewSection}>
|
||
<h4>Предварительный просмотр:</h4>
|
||
<div class={styles.previewChanges}>
|
||
<For each={getSelectedTopics()}>
|
||
{(topic) => (
|
||
<div class={styles.previewItem}>
|
||
<strong>{topic.title}</strong>
|
||
<div class={styles.previewChange}>
|
||
<span class={styles.beforeState}>
|
||
Было: {topic.parent_ids?.length ? getTopicPath(topic.id) : 'Корневая тема'}
|
||
</span>
|
||
<span class={styles.arrow}>→</span>
|
||
<span class={styles.afterState}>
|
||
Станет:{' '}
|
||
{actionType() === 'makeRoot'
|
||
? 'Корневая тема'
|
||
: newParentId()
|
||
? `${getTopicPath(newParentId()!)} → ${topic.title}`
|
||
: ''}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
|
||
<div class={styles.modalActions}>
|
||
<Button variant="secondary" onClick={props.onClose}>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="primary"
|
||
onClick={handleSave}
|
||
disabled={!!validateAction() || getTopicsByCommunity().size > 1}
|
||
>
|
||
Применить к {props.selectedTopicIds.length} темам
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
export default TopicBulkParentModal
|