416 lines
14 KiB
TypeScript
416 lines
14 KiB
TypeScript
import { Component, createEffect, createSignal, For, on, onMount, Show, untrack } from 'solid-js'
|
||
import { useTableSort } from '../context/sort'
|
||
import { COMMUNITIES_SORT_CONFIG } from '../context/sortConfig'
|
||
import {
|
||
CREATE_COMMUNITY_MUTATION,
|
||
DELETE_COMMUNITY_MUTATION,
|
||
UPDATE_COMMUNITY_MUTATION
|
||
} from '../graphql/mutations'
|
||
import { GET_COMMUNITIES_QUERY } from '../graphql/queries'
|
||
import CommunityEditModal from '../modals/CommunityEditModal'
|
||
import styles from '../styles/Table.module.css'
|
||
import Button from '../ui/Button'
|
||
import Modal from '../ui/Modal'
|
||
import SortableHeader from '../ui/SortableHeader'
|
||
import TableControls from '../ui/TableControls'
|
||
|
||
/**
|
||
* Интерфейс для сообщества (используем локальный интерфейс для совместимости)
|
||
*/
|
||
interface Community {
|
||
id: number
|
||
slug: string
|
||
name: string
|
||
desc?: string
|
||
pic: string
|
||
created_at: number
|
||
created_by: {
|
||
id: number
|
||
name: string
|
||
email: string
|
||
}
|
||
stat: {
|
||
shouts: number
|
||
followers: number
|
||
authors: number
|
||
}
|
||
}
|
||
|
||
interface CommunitiesRouteProps {
|
||
onError: (error: string) => void
|
||
onSuccess: (message: string) => void
|
||
}
|
||
|
||
/**
|
||
* Компонент для управления сообществами
|
||
*/
|
||
const CommunitiesRoute: Component<CommunitiesRouteProps> = (props) => {
|
||
const [communities, setCommunities] = createSignal<Community[]>([])
|
||
const [loading, setLoading] = createSignal(false)
|
||
const { sortState } = useTableSort()
|
||
const [editModal, setEditModal] = createSignal<{
|
||
show: boolean
|
||
community: Community | null
|
||
}>({
|
||
show: false,
|
||
community: null
|
||
})
|
||
const [deleteModal, setDeleteModal] = createSignal<{
|
||
show: boolean
|
||
community: Community | null
|
||
}>({
|
||
show: false,
|
||
community: null
|
||
})
|
||
const [createModal, setCreateModal] = createSignal<{ show: boolean }>({
|
||
show: false
|
||
})
|
||
|
||
/**
|
||
* Загружает список всех сообществ
|
||
*/
|
||
const loadCommunities = async () => {
|
||
setLoading(true)
|
||
try {
|
||
// Загружаем все сообщества без параметров сортировки
|
||
// Сортировка будет выполнена на клиенте
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: GET_COMMUNITIES_QUERY
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
// Получаем данные и сортируем их на клиенте
|
||
const communitiesData = result.data.get_communities_all || []
|
||
const sortedCommunities = sortCommunities(communitiesData)
|
||
setCommunities(sortedCommunities)
|
||
} catch (error) {
|
||
props.onError(`Ошибка загрузки сообществ: ${(error as Error).message}`)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Форматирует дату
|
||
*/
|
||
const formatDate = (timestamp: number): string => {
|
||
return new Date(timestamp * 1000).toLocaleDateString('ru-RU')
|
||
}
|
||
|
||
/**
|
||
* Сортирует сообщества на клиенте в соответствии с текущим состоянием сортировки
|
||
*/
|
||
const sortCommunities = (communities: Community[]): Community[] => {
|
||
const { field, direction } = sortState()
|
||
|
||
return [...communities].sort((a, b) => {
|
||
let comparison = 0
|
||
|
||
switch (field) {
|
||
case 'id':
|
||
comparison = a.id - b.id
|
||
break
|
||
case 'name':
|
||
comparison = (a.name || '').localeCompare(b.name || '', 'ru')
|
||
break
|
||
case 'slug':
|
||
comparison = (a.slug || '').localeCompare(b.slug || '', 'ru')
|
||
break
|
||
case 'created_at':
|
||
comparison = a.created_at - b.created_at
|
||
break
|
||
case 'created_by': {
|
||
const aName = a.created_by?.name || a.created_by?.email || ''
|
||
const bName = b.created_by?.name || b.created_by?.email || ''
|
||
comparison = aName.localeCompare(bName, 'ru')
|
||
break
|
||
}
|
||
case 'shouts':
|
||
comparison = (a.stat?.shouts || 0) - (b.stat?.shouts || 0)
|
||
break
|
||
case 'followers':
|
||
comparison = (a.stat?.followers || 0) - (b.stat?.followers || 0)
|
||
break
|
||
case 'authors':
|
||
comparison = (a.stat?.authors || 0) - (b.stat?.authors || 0)
|
||
break
|
||
default:
|
||
comparison = a.id - b.id
|
||
}
|
||
|
||
return direction === 'desc' ? -comparison : comparison
|
||
})
|
||
}
|
||
|
||
/**
|
||
* Открывает модалку создания
|
||
*/
|
||
const openCreateModal = () => {
|
||
setCreateModal({ show: true })
|
||
}
|
||
|
||
/**
|
||
* Открывает модалку редактирования
|
||
*/
|
||
const openEditModal = (community: Community) => {
|
||
setEditModal({ show: true, community })
|
||
}
|
||
|
||
/**
|
||
* Обрабатывает сохранение сообщества (создание или обновление)
|
||
*/
|
||
const handleSaveCommunity = async (communityData: Partial<Community>) => {
|
||
try {
|
||
const isCreating = !editModal().community && createModal().show
|
||
const mutation = isCreating ? CREATE_COMMUNITY_MUTATION : UPDATE_COMMUNITY_MUTATION
|
||
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: mutation,
|
||
variables: { community_input: communityData }
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
const resultData = isCreating ? result.data.create_community : result.data.update_community
|
||
if (resultData.error) {
|
||
throw new Error(resultData.error)
|
||
}
|
||
|
||
props.onSuccess(isCreating ? 'Сообщество успешно создано' : 'Сообщество успешно обновлено')
|
||
setCreateModal({ show: false })
|
||
setEditModal({ show: false, community: null })
|
||
await loadCommunities()
|
||
} catch (error) {
|
||
props.onError(
|
||
`Ошибка ${createModal().show ? 'создания' : 'обновления'} сообщества: ${(error as Error).message}`
|
||
)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Удаляет сообщество
|
||
*/
|
||
const deleteCommunity = async (slug: string) => {
|
||
try {
|
||
const response = await fetch('/graphql', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
query: DELETE_COMMUNITY_MUTATION,
|
||
variables: { slug }
|
||
})
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.errors) {
|
||
throw new Error(result.errors[0].message)
|
||
}
|
||
|
||
if (result.data.delete_community.error) {
|
||
throw new Error(result.data.delete_community.error)
|
||
}
|
||
|
||
props.onSuccess('Сообщество успешно удалено')
|
||
setDeleteModal({ show: false, community: null })
|
||
await loadCommunities()
|
||
} catch (error) {
|
||
props.onError(`Ошибка удаления сообщества: ${(error as Error).message}`)
|
||
}
|
||
}
|
||
|
||
// Пересортировка при изменении состояния сортировки
|
||
createEffect(
|
||
on([sortState], () => {
|
||
if (communities().length > 0) {
|
||
// Используем untrack для предотвращения бесконечной рекурсии
|
||
const currentCommunities = untrack(() => communities())
|
||
const sortedCommunities = sortCommunities(currentCommunities)
|
||
|
||
// Сравниваем текущий порядок с отсортированным, чтобы избежать лишних обновлений
|
||
const needsUpdate =
|
||
JSON.stringify(currentCommunities.map((c: Community) => c.id)) !==
|
||
JSON.stringify(sortedCommunities.map((c: Community) => c.id))
|
||
|
||
if (needsUpdate) {
|
||
setCommunities(sortedCommunities)
|
||
}
|
||
}
|
||
})
|
||
)
|
||
|
||
// Загружаем сообщества при монтировании компонента
|
||
onMount(() => {
|
||
void loadCommunities()
|
||
})
|
||
|
||
return (
|
||
<div class={styles.container}>
|
||
<TableControls
|
||
onRefresh={loadCommunities}
|
||
isLoading={loading()}
|
||
actions={
|
||
<Button variant="primary" onClick={openCreateModal}>
|
||
Создать сообщество
|
||
</Button>
|
||
}
|
||
/>
|
||
|
||
<Show
|
||
when={!loading()}
|
||
fallback={
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner" />
|
||
<div>Загрузка сообществ...</div>
|
||
</div>
|
||
}
|
||
>
|
||
<table class={styles.table}>
|
||
<thead>
|
||
<tr>
|
||
<SortableHeader field="id" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
ID
|
||
</SortableHeader>
|
||
<SortableHeader field="name" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Название
|
||
</SortableHeader>
|
||
<SortableHeader field="slug" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Slug
|
||
</SortableHeader>
|
||
<th>Описание</th>
|
||
<SortableHeader field="created_by" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Создатель
|
||
</SortableHeader>
|
||
<SortableHeader field="shouts" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Публикации
|
||
</SortableHeader>
|
||
<SortableHeader field="followers" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Подписчики
|
||
</SortableHeader>
|
||
<th>Авторы</th>
|
||
<SortableHeader field="created_at" allowedFields={COMMUNITIES_SORT_CONFIG.allowedFields}>
|
||
Создано
|
||
</SortableHeader>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<For each={communities()}>
|
||
{(community) => (
|
||
<tr
|
||
onClick={() => openEditModal(community)}
|
||
style={{ cursor: 'pointer' }}
|
||
class={styles['clickable-row']}
|
||
>
|
||
<td>{community.id}</td>
|
||
<td>{community.name}</td>
|
||
<td>{community.slug}</td>
|
||
<td>
|
||
<div
|
||
style={{
|
||
'max-width': '200px',
|
||
overflow: 'hidden',
|
||
'text-overflow': 'ellipsis',
|
||
'white-space': 'nowrap'
|
||
}}
|
||
title={community.desc}
|
||
>
|
||
{community.desc || '—'}
|
||
</div>
|
||
</td>
|
||
<td>{community.created_by.name || community.created_by.email}</td>
|
||
<td>{community.stat.shouts}</td>
|
||
<td>{community.stat.followers}</td>
|
||
<td>{community.stat.authors}</td>
|
||
<td>{formatDate(community.created_at)}</td>
|
||
<td onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setDeleteModal({ show: true, community })
|
||
}}
|
||
class={styles['delete-button']}
|
||
title="Удалить сообщество"
|
||
aria-label="Удалить сообщество"
|
||
>
|
||
×
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</For>
|
||
</tbody>
|
||
</table>
|
||
</Show>
|
||
|
||
{/* Модальное окно создания */}
|
||
<CommunityEditModal
|
||
isOpen={createModal().show}
|
||
community={null}
|
||
onClose={() => setCreateModal({ show: false })}
|
||
onSave={handleSaveCommunity}
|
||
/>
|
||
|
||
{/* Модальное окно редактирования */}
|
||
<CommunityEditModal
|
||
isOpen={editModal().show}
|
||
community={editModal().community}
|
||
onClose={() => setEditModal({ show: false, community: null })}
|
||
onSave={handleSaveCommunity}
|
||
/>
|
||
|
||
{/* Модальное окно подтверждения удаления */}
|
||
<Modal
|
||
isOpen={deleteModal().show}
|
||
onClose={() => setDeleteModal({ show: false, community: null })}
|
||
title="Подтверждение удаления"
|
||
>
|
||
<div>
|
||
<p>
|
||
Вы уверены, что хотите удалить сообщество "<strong>{deleteModal().community?.name}</strong>"?
|
||
</p>
|
||
<p class={styles['warning-text']}>
|
||
Это действие нельзя отменить. Все публикации и темы сообщества могут быть затронуты.
|
||
</p>
|
||
<div class={styles['modal-actions']}>
|
||
<Button variant="secondary" onClick={() => setDeleteModal({ show: false, community: null })}>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
onClick={() => deleteModal().community && deleteCommunity(deleteModal().community!.slug)}
|
||
>
|
||
Удалить
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CommunitiesRoute
|