293 lines
9.6 KiB
TypeScript
293 lines
9.6 KiB
TypeScript
import { Component, createSignal, For, Show } from 'solid-js'
|
||
import { SET_TOPIC_PARENT_MUTATION } from '../graphql/mutations'
|
||
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 TopicSimpleParentModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
topic: Topic | null
|
||
allTopics: Topic[]
|
||
onSuccess: (message: string) => void
|
||
onError: (error: string) => void
|
||
}
|
||
|
||
const TopicSimpleParentModal: Component<TopicSimpleParentModalProps> = (props) => {
|
||
const [selectedParentId, setSelectedParentId] = createSignal<number | null>(null)
|
||
const [loading, setLoading] = createSignal(false)
|
||
const [searchQuery, setSearchQuery] = createSignal('')
|
||
|
||
/**
|
||
* Получает токен авторизации
|
||
*/
|
||
const getAuthTokenFromCookie = () => {
|
||
return (
|
||
document.cookie
|
||
.split('; ')
|
||
.find((row) => row.startsWith('auth_token='))
|
||
?.split('=')[1] || ''
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Получает текущего родителя темы
|
||
*/
|
||
const getCurrentParentId = (): number | null => {
|
||
if (!props.topic?.parent_ids || props.topic.parent_ids.length === 0) {
|
||
return null
|
||
}
|
||
return props.topic.parent_ids[props.topic.parent_ids.length - 1]
|
||
}
|
||
|
||
/**
|
||
* Получает путь темы до корня
|
||
*/
|
||
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 isDescendant = (parentId: number, childId: number): boolean => {
|
||
if (parentId === childId) return true
|
||
|
||
const checkDescendants = (currentId: number): boolean => {
|
||
const descendants = props.allTopics.filter((t) => t?.parent_ids?.includes(currentId))
|
||
|
||
for (const descendant of descendants) {
|
||
if (descendant.id === childId || checkDescendants(descendant.id)) {
|
||
return true
|
||
}
|
||
}
|
||
return false
|
||
}
|
||
|
||
return checkDescendants(parentId)
|
||
}
|
||
|
||
/**
|
||
* Получает доступных родителей (исключая потомков и темы из других сообществ)
|
||
*/
|
||
const getAvailableParents = () => {
|
||
if (!props.topic) return []
|
||
|
||
const query = searchQuery().toLowerCase()
|
||
|
||
return props.allTopics.filter((topic) => {
|
||
// Исключаем саму тему
|
||
if (topic.id === props.topic!.id) return false
|
||
|
||
// Только темы из того же сообщества
|
||
if (topic.community !== props.topic!.community) return false
|
||
|
||
// Исключаем потомков (предотвращаем циклы)
|
||
if (isDescendant(topic.id, props.topic!.id)) return false
|
||
|
||
// Фильтр по поиску
|
||
if (query && !topic.title.toLowerCase().includes(query)) return false
|
||
|
||
return true
|
||
})
|
||
}
|
||
|
||
/**
|
||
* Выполняет назначение родителя
|
||
*/
|
||
const handleSetParent = async () => {
|
||
if (!props.topic) return
|
||
|
||
setLoading(true)
|
||
|
||
try {
|
||
const authToken = localStorage.getItem('auth_token') || getAuthTokenFromCookie()
|
||
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: authToken ? `Bearer ${authToken}` : ''
|
||
},
|
||
body: JSON.stringify({
|
||
query: SET_TOPIC_PARENT_MUTATION,
|
||
variables: {
|
||
topic_id: props.topic.id,
|
||
parent_id: selectedParentId()
|
||
}
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
const setResult = result.data.set_topic_parent
|
||
|
||
if (setResult.error) {
|
||
throw new Error(setResult.error)
|
||
}
|
||
|
||
props.onSuccess(setResult.message)
|
||
handleClose()
|
||
} catch (error) {
|
||
const errorMessage = (error as Error).message
|
||
props.onError(`Ошибка назначения родителя: ${errorMessage}`)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Закрывает модалку и сбрасывает состояние
|
||
*/
|
||
const handleClose = () => {
|
||
setSelectedParentId(null)
|
||
setSearchQuery('')
|
||
setLoading(false)
|
||
props.onClose()
|
||
}
|
||
|
||
return (
|
||
<Modal isOpen={props.isOpen} onClose={handleClose} title="Назначить родительскую тему" size="medium">
|
||
<div class={styles.parentSelectorContainer}>
|
||
<Show when={props.topic}>
|
||
<div class={styles.currentSelection}>
|
||
<h4>Редактируемая тема:</h4>
|
||
<div class={styles.topicDisplay}>
|
||
<strong>{props.topic?.title}</strong> #{props.topic?.id}
|
||
</div>
|
||
|
||
<div class={styles.currentParent}>
|
||
<strong>Текущее расположение:</strong>
|
||
<div class={styles.parentPath}>
|
||
{getCurrentParentId() ? (
|
||
getTopicPath(props.topic!.id)
|
||
) : (
|
||
<span class={styles.noParent}>🏠 Корневая тема</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class={styles.searchSection}>
|
||
<label class={styles.label}>Поиск новой родительской темы:</label>
|
||
<input
|
||
type="text"
|
||
value={searchQuery()}
|
||
onInput={(e) => setSearchQuery(e.target.value)}
|
||
placeholder="Введите название темы..."
|
||
class={styles.searchInput}
|
||
disabled={loading()}
|
||
/>
|
||
</div>
|
||
|
||
<div class={styles.parentOptions}>
|
||
<h4>Выберите новую родительскую тему:</h4>
|
||
|
||
{/* Опция корневой темы */}
|
||
<div class={styles.parentsList}>
|
||
<label class={styles.parentOption}>
|
||
<input
|
||
type="radio"
|
||
name="parentSelection"
|
||
checked={selectedParentId() === null}
|
||
onChange={() => setSelectedParentId(null)}
|
||
disabled={loading()}
|
||
/>
|
||
<div class={styles.parentOptionLabel}>
|
||
<div class={styles.topicTitle}>🏠 Сделать корневой темой</div>
|
||
<div class={styles.parentDescription}>
|
||
Тема будет перемещена на верхний уровень иерархии
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Список доступных родителей */}
|
||
<div class={styles.parentsList}>
|
||
<Show when={getAvailableParents().length > 0}>
|
||
<For each={getAvailableParents()}>
|
||
{(topic) => (
|
||
<label class={styles.parentOption}>
|
||
<input
|
||
type="radio"
|
||
name="parentSelection"
|
||
checked={selectedParentId() === topic.id}
|
||
onChange={() => setSelectedParentId(topic.id)}
|
||
disabled={loading()}
|
||
/>
|
||
<div class={styles.parentOptionLabel}>
|
||
<div class={styles.topicTitle}>{topic.title}</div>
|
||
<div class={styles.parentDescription}>
|
||
<span class={styles.topicId}>ID: {topic.id}</span>
|
||
<span class={styles.topicSlug}>• {topic.slug}</span>
|
||
<br />
|
||
<strong>Путь:</strong> {getTopicPath(topic.id)}
|
||
</div>
|
||
</div>
|
||
</label>
|
||
)}
|
||
</For>
|
||
</Show>
|
||
|
||
<Show when={getAvailableParents().length === 0}>
|
||
<div class={styles.noResults}>
|
||
{searchQuery()
|
||
? 'Не найдено подходящих тем по запросу'
|
||
: 'Нет доступных родительских тем'}
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
|
||
<Show when={selectedParentId() !== null}>
|
||
<div class={styles.preview}>
|
||
<h4>Предварительный просмотр:</h4>
|
||
<div class={styles.previewPath}>
|
||
<strong>Новое расположение:</strong>
|
||
<br />
|
||
{getTopicPath(selectedParentId()!)} → <strong>{props.topic?.title}</strong>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
|
||
<div class={styles.modalActions}>
|
||
<Button variant="secondary" onClick={handleClose} disabled={loading()}>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="primary"
|
||
onClick={handleSetParent}
|
||
disabled={loading() || selectedParentId() === getCurrentParentId()}
|
||
>
|
||
{loading() ? 'Назначение...' : 'Назначить родителя'}
|
||
</Button>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
export default TopicSimpleParentModal
|