1878 lines
56 KiB
TypeScript
1878 lines
56 KiB
TypeScript
/**
|
||
* Компонент страницы администратора
|
||
* @module AdminPage
|
||
*/
|
||
|
||
import { Component, For, Show, createSignal, onMount, createEffect } from 'solid-js'
|
||
import { logout } from './auth'
|
||
import { query } from './graphql'
|
||
import Prism from 'prismjs'
|
||
import 'prismjs/components/prism-json'
|
||
import 'prismjs/components/prism-markup'
|
||
import 'prismjs/themes/prism-tomorrow.css'
|
||
|
||
// Определяем GraphQL запрос
|
||
const ADMIN_GET_SHOUTS_QUERY = `
|
||
query AdminGetShouts($limit: Int, $offset: Int, $status: String) {
|
||
adminGetShouts(limit: $limit, offset: $offset, status: $status) {
|
||
shouts {
|
||
id
|
||
title
|
||
slug
|
||
body
|
||
lead
|
||
subtitle
|
||
layout
|
||
lang
|
||
cover
|
||
cover_caption
|
||
media {
|
||
url
|
||
title
|
||
body
|
||
source
|
||
pic
|
||
date
|
||
genre
|
||
artist
|
||
lyrics
|
||
}
|
||
seo
|
||
created_at
|
||
updated_at
|
||
published_at
|
||
featured_at
|
||
deleted_at
|
||
created_by {
|
||
id
|
||
email
|
||
name
|
||
}
|
||
authors {
|
||
id
|
||
email
|
||
name
|
||
slug
|
||
}
|
||
topics {
|
||
id
|
||
title
|
||
slug
|
||
}
|
||
version_of
|
||
draft
|
||
}
|
||
total
|
||
page
|
||
perPage
|
||
totalPages
|
||
}
|
||
}
|
||
`
|
||
|
||
/**
|
||
* Интерфейс для данных пользователя
|
||
*/
|
||
interface User {
|
||
id: number
|
||
email: string
|
||
name?: string
|
||
slug?: string
|
||
roles: string[]
|
||
created_at?: number
|
||
last_seen?: number
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для роли пользователя
|
||
*/
|
||
interface Role {
|
||
id: string // ID роли - строка, не число
|
||
name: string
|
||
description?: string
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для ответа API с пользователями
|
||
*/
|
||
interface AdminGetUsersResponse {
|
||
adminGetUsers: {
|
||
users: User[]
|
||
total: number
|
||
page: number
|
||
perPage: number
|
||
totalPages: number
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для ответа API с ролями
|
||
*/
|
||
interface AdminGetRolesResponse {
|
||
adminGetRoles: Role[]
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для ответа обновления пользователя
|
||
*/
|
||
interface AdminUpdateUserResponse {
|
||
success: boolean
|
||
error?: string
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для входных данных обновления пользователя
|
||
*/
|
||
interface AdminUserUpdateInput {
|
||
id: number
|
||
roles: string[]
|
||
community?: number
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для переменной окружения
|
||
*/
|
||
interface EnvVariable {
|
||
key: string
|
||
value: string
|
||
description?: string
|
||
type: string
|
||
isSecret: boolean
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для секции переменных окружения
|
||
*/
|
||
interface EnvSection {
|
||
name: string
|
||
description?: string
|
||
variables: EnvVariable[]
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для публикации
|
||
*/
|
||
interface Shout {
|
||
id: number
|
||
title: string
|
||
slug: string
|
||
body: string
|
||
lead?: string
|
||
subtitle?: string
|
||
layout: string
|
||
lang: string
|
||
cover?: string
|
||
cover_caption?: string
|
||
media?: any[]
|
||
seo?: string
|
||
created_at: number
|
||
updated_at?: number
|
||
published_at?: number
|
||
featured_at?: number
|
||
deleted_at?: number
|
||
created_by: {
|
||
id: number
|
||
email?: string
|
||
name?: string
|
||
}
|
||
updated_by?: {
|
||
id: number
|
||
email?: string
|
||
name?: string
|
||
}
|
||
deleted_by?: {
|
||
id: number
|
||
email?: string
|
||
name?: string
|
||
}
|
||
community: {
|
||
id: number
|
||
name?: string
|
||
}
|
||
authors?: Array<{
|
||
id: number
|
||
email?: string
|
||
name?: string
|
||
slug?: string
|
||
}>
|
||
topics?: Array<{
|
||
id: number
|
||
title?: string
|
||
slug?: string
|
||
}>
|
||
version_of?: number
|
||
draft?: number
|
||
stat?: any
|
||
}
|
||
|
||
/**
|
||
* Интерфейс для ответа API с публикациями
|
||
*/
|
||
interface AdminGetShoutsData {
|
||
adminGetShouts: {
|
||
shouts: any[]
|
||
total: number
|
||
page: number
|
||
perPage: number
|
||
totalPages: number
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Интерфейс свойств компонента AdminPage
|
||
*/
|
||
interface AdminPageProps {
|
||
apiUrl: string
|
||
onLogout?: () => void
|
||
}
|
||
|
||
/**
|
||
* Компонент страницы администратора
|
||
*/
|
||
const AdminPage: Component<AdminPageProps> = (props) => {
|
||
const [activeTab, setActiveTab] = createSignal('users')
|
||
const [users, setUsers] = createSignal<User[]>([])
|
||
const [roles, setRoles] = createSignal<Role[]>([])
|
||
const [loading, setLoading] = createSignal(true)
|
||
const [error, setError] = createSignal<string | null>(null)
|
||
const [selectedUser, setSelectedUser] = createSignal<User | null>(null)
|
||
const [showRolesModal, setShowRolesModal] = createSignal(false)
|
||
const [successMessage, setSuccessMessage] = createSignal<string | null>(null)
|
||
const [showBodyModal, setShowBodyModal] = createSignal(false)
|
||
const [selectedShoutBody, setSelectedShoutBody] = createSignal<string>('')
|
||
|
||
// Переменные среды
|
||
const [envSections, setEnvSections] = createSignal<EnvSection[]>([])
|
||
const [envLoading, setEnvLoading] = createSignal(false)
|
||
const [editingVariable, setEditingVariable] = createSignal<EnvVariable | null>(null)
|
||
const [showVariableModal, setShowVariableModal] = createSignal(false)
|
||
|
||
// Параметры пагинации
|
||
const [pagination, setPagination] = createSignal<{
|
||
page: number
|
||
limit: number
|
||
total: number
|
||
totalPages: number
|
||
}>({
|
||
page: 1,
|
||
limit: 10,
|
||
total: 0,
|
||
totalPages: 1
|
||
})
|
||
|
||
// Поиск
|
||
const [searchQuery, setSearchQuery] = createSignal('')
|
||
|
||
// Публикации
|
||
const [shouts, setShouts] = createSignal<Shout[]>([])
|
||
const [shoutsLoading, setShoutsLoading] = createSignal(false)
|
||
const [shoutsStatus, setShoutsStatus] = createSignal('all') // all, published, draft, deleted
|
||
const [shoutsPagination, setShoutsPagination] = createSignal<{
|
||
page: number
|
||
limit: number
|
||
total: number
|
||
totalPages: number
|
||
}>({
|
||
page: 1,
|
||
limit: 20,
|
||
total: 0,
|
||
totalPages: 0
|
||
})
|
||
const [shoutsSearchQuery, setShoutsSearchQuery] = createSignal('')
|
||
|
||
// Периодическая проверка авторизации
|
||
onMount(() => {
|
||
// Получаем параметры из URL при загрузке
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const page = parseInt(urlParams.get('page') || '1');
|
||
const limit = parseInt(urlParams.get('limit') || '10');
|
||
const search = urlParams.get('search') || '';
|
||
|
||
setPagination({ ...pagination(), page, limit });
|
||
setSearchQuery(search);
|
||
|
||
// Загружаем данные при монтировании
|
||
loadUsers()
|
||
loadRoles()
|
||
})
|
||
|
||
// Обновление URL при изменении параметров пагинации
|
||
createEffect(() => {
|
||
const pagData = pagination();
|
||
const search = searchQuery();
|
||
|
||
const urlParams = new URLSearchParams();
|
||
urlParams.set('page', pagData.page.toString());
|
||
urlParams.set('limit', pagData.limit.toString());
|
||
|
||
if (search) {
|
||
urlParams.set('search', search);
|
||
}
|
||
|
||
const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
|
||
window.history.replaceState({}, '', newUrl);
|
||
});
|
||
|
||
/**
|
||
* Загрузка списка пользователей с учетом пагинации и поиска
|
||
*/
|
||
async function loadUsers() {
|
||
setLoading(true)
|
||
setError(null)
|
||
|
||
try {
|
||
// Используем актуальные данные из состояния
|
||
const { page, limit } = pagination()
|
||
const offset = (page - 1) * limit
|
||
const search = searchQuery().trim()
|
||
|
||
const data = await query<AdminGetUsersResponse>(
|
||
`${location.origin}/graphql`,
|
||
`
|
||
query AdminGetUsers($limit: Int, $offset: Int, $search: String) {
|
||
adminGetUsers(limit: $limit, offset: $offset, search: $search) {
|
||
users {
|
||
id
|
||
email
|
||
name
|
||
slug
|
||
roles
|
||
created_at
|
||
last_seen
|
||
}
|
||
total
|
||
page
|
||
perPage
|
||
totalPages
|
||
}
|
||
}
|
||
`,
|
||
{ limit, offset, search: search || null }
|
||
)
|
||
|
||
if (data?.adminGetUsers) {
|
||
setUsers(data.adminGetUsers.users)
|
||
setPagination({
|
||
page: data.adminGetUsers.page,
|
||
limit: data.adminGetUsers.perPage,
|
||
total: data.adminGetUsers.total,
|
||
totalPages: data.adminGetUsers.totalPages
|
||
})
|
||
}
|
||
} catch (err) {
|
||
console.error('Ошибка загрузки пользователей:', err)
|
||
setError(err instanceof Error ? err.message : 'Неизвестная ошибка')
|
||
|
||
// Если ошибка авторизации - перенаправляем на логин
|
||
if (
|
||
err instanceof Error &&
|
||
(err.message.includes('401') ||
|
||
err.message.includes('авторизации') ||
|
||
err.message.includes('unauthorized') ||
|
||
err.message.includes('Unauthorized'))
|
||
) {
|
||
handleLogout()
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Загрузка списка ролей
|
||
*/
|
||
async function loadRoles() {
|
||
try {
|
||
const data = await query<AdminGetRolesResponse>(
|
||
`${location.origin}/graphql`,
|
||
`
|
||
query AdminGetRoles {
|
||
adminGetRoles {
|
||
id
|
||
name
|
||
description
|
||
}
|
||
}
|
||
`
|
||
)
|
||
|
||
if (data?.adminGetRoles) {
|
||
setRoles(data.adminGetRoles)
|
||
}
|
||
} catch (err) {
|
||
console.error('Ошибка при загрузке ролей:', err)
|
||
setError('Не удалось загрузить роли')
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Загрузка списка публикаций с учетом пагинации и поиска
|
||
*/
|
||
async function loadShouts() {
|
||
setShowRolesModal(false)
|
||
setShoutsLoading(true)
|
||
const pagination = shoutsPagination()
|
||
|
||
try {
|
||
const result = await query<AdminGetShoutsData>(
|
||
`${location.origin}/graphql`,
|
||
ADMIN_GET_SHOUTS_QUERY,
|
||
{
|
||
offset: (pagination.page - 1) * pagination.limit,
|
||
limit: pagination.limit,
|
||
status: shoutsStatus()
|
||
}
|
||
)
|
||
|
||
if (result?.adminGetShouts) {
|
||
setShouts(result.adminGetShouts.shouts)
|
||
// Обновляем пагинацию с учетом общего количества
|
||
setShoutsPagination({
|
||
...pagination,
|
||
total: result.adminGetShouts.total,
|
||
totalPages: result.adminGetShouts.totalPages
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading shouts:', error)
|
||
} finally {
|
||
setShoutsLoading(false)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения страницы
|
||
* @param page - Номер страницы
|
||
*/
|
||
function handlePageChange(page: number) {
|
||
setPagination({ ...pagination(), page })
|
||
loadUsers()
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения количества элементов на странице
|
||
* @param limit - Количество элементов
|
||
*/
|
||
function handlePerPageChange(limit: number) {
|
||
setPagination({ ...pagination(), page: 1, limit })
|
||
loadUsers()
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения поискового запроса
|
||
*/
|
||
function handleSearchChange(e: Event) {
|
||
const input = e.target as HTMLInputElement
|
||
setSearchQuery(input.value)
|
||
}
|
||
|
||
/**
|
||
* Выполняет поиск
|
||
*/
|
||
function handleSearch() {
|
||
setPagination({ ...pagination(), page: 1 })
|
||
loadUsers()
|
||
}
|
||
|
||
/**
|
||
* Обработчик нажатия клавиш в поле поиска
|
||
* @param e - Событие клавиатуры
|
||
*/
|
||
function handleSearchKeyDown(e: KeyboardEvent) {
|
||
// Если нажат Enter, выполняем поиск
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault()
|
||
handleSearch()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Закрывает модальное окно ролей
|
||
*/
|
||
function closeRolesModal() {
|
||
setShowRolesModal(false)
|
||
setSelectedUser(null)
|
||
}
|
||
|
||
/**
|
||
* Обновляет роли пользователя
|
||
* @param userId - ID пользователя
|
||
* @param roles - Новый список ролей
|
||
*/
|
||
async function updateUserRoles(userId: number, newRoles: string[]) {
|
||
try {
|
||
await query<AdminUpdateUserResponse>(
|
||
`${location.origin}/graphql`,
|
||
`
|
||
mutation AdminUpdateUser($user: AdminUserUpdateInput!) {
|
||
adminUpdateUser(user: $user) {
|
||
success
|
||
error
|
||
}
|
||
}
|
||
`,
|
||
{
|
||
user: {
|
||
id: userId,
|
||
roles: newRoles,
|
||
community: 1 // Добавляем обязательный параметр community
|
||
}
|
||
}
|
||
)
|
||
|
||
// Обновляем роли пользователя в списке
|
||
setUsers((prev) =>
|
||
prev.map((user) => {
|
||
if (user.id === userId) {
|
||
return { ...user, roles: newRoles }
|
||
}
|
||
return user
|
||
})
|
||
)
|
||
|
||
// Закрываем модальное окно
|
||
closeRolesModal()
|
||
|
||
// Показываем сообщение об успехе и обновляем список пользователей
|
||
setSuccessMessage('Роли пользователя успешно обновлены')
|
||
|
||
// Перезагружаем список пользователей
|
||
loadUsers()
|
||
|
||
// Скрываем сообщение через 3 секунды
|
||
setTimeout(() => setSuccessMessage(null), 3000)
|
||
} catch (err) {
|
||
console.error('Ошибка обновления ролей:', err)
|
||
let errorMessage = err instanceof Error ? err.message : 'Ошибка обновления ролей';
|
||
|
||
// Если ошибка связана с недостающим полем community
|
||
if (errorMessage.includes('author_role.community')) {
|
||
errorMessage = 'Ошибка: для роли author требуется указать community. Обратитесь к администратору.';
|
||
}
|
||
|
||
setError(errorMessage)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обрабатывает выход из системы
|
||
*/
|
||
const handleLogout = async () => {
|
||
try {
|
||
await logout()
|
||
if (props.onLogout) {
|
||
props.onLogout()
|
||
}
|
||
} catch (error) {
|
||
setError('Ошибка при выходе: ' + (error as Error).message)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Форматирование даты в формате "X дней назад"
|
||
* @param timestamp - Временная метка
|
||
* @returns Форматированная строка с относительной датой
|
||
*/
|
||
function formatDateRelative(timestamp?: number): string {
|
||
if (!timestamp) return 'Н/Д'
|
||
|
||
const now = Math.floor(Date.now() / 1000)
|
||
const diff = now - timestamp
|
||
|
||
// Меньше минуты
|
||
if (diff < 60) {
|
||
return 'только что'
|
||
}
|
||
|
||
// Меньше часа
|
||
if (diff < 3600) {
|
||
const minutes = Math.floor(diff / 60)
|
||
return `${minutes} ${getMinutesForm(minutes)} назад`
|
||
}
|
||
|
||
// Меньше суток
|
||
if (diff < 86400) {
|
||
const hours = Math.floor(diff / 3600)
|
||
return `${hours} ${getHoursForm(hours)} назад`
|
||
}
|
||
|
||
// Меньше 30 дней
|
||
if (diff < 2592000) {
|
||
const days = Math.floor(diff / 86400)
|
||
return `${days} ${getDaysForm(days)} назад`
|
||
}
|
||
|
||
// Меньше года
|
||
if (diff < 31536000) {
|
||
const months = Math.floor(diff / 2592000)
|
||
return `${months} ${getMonthsForm(months)} назад`
|
||
}
|
||
|
||
// Больше года
|
||
const years = Math.floor(diff / 31536000)
|
||
return `${years} ${getYearsForm(years)} назад`
|
||
}
|
||
|
||
/**
|
||
* Получение правильной формы слова "минута" в зависимости от числа
|
||
* @param minutes - Количество минут
|
||
*/
|
||
function getMinutesForm(minutes: number): string {
|
||
if (minutes % 10 === 1 && minutes % 100 !== 11) {
|
||
return 'минуту'
|
||
} else if ([2, 3, 4].includes(minutes % 10) && ![12, 13, 14].includes(minutes % 100)) {
|
||
return 'минуты'
|
||
}
|
||
return 'минут'
|
||
}
|
||
|
||
/**
|
||
* Получение правильной формы слова "час" в зависимости от числа
|
||
* @param hours - Количество часов
|
||
*/
|
||
function getHoursForm(hours: number): string {
|
||
if (hours % 10 === 1 && hours % 100 !== 11) {
|
||
return 'час'
|
||
} else if ([2, 3, 4].includes(hours % 10) && ![12, 13, 14].includes(hours % 100)) {
|
||
return 'часа'
|
||
}
|
||
return 'часов'
|
||
}
|
||
|
||
/**
|
||
* Получение правильной формы слова "день" в зависимости от числа
|
||
* @param days - Количество дней
|
||
*/
|
||
function getDaysForm(days: number): string {
|
||
if (days % 10 === 1 && days % 100 !== 11) {
|
||
return 'день'
|
||
} else if ([2, 3, 4].includes(days % 10) && ![12, 13, 14].includes(days % 100)) {
|
||
return 'дня'
|
||
}
|
||
return 'дней'
|
||
}
|
||
|
||
/**
|
||
* Получение правильной формы слова "месяц" в зависимости от числа
|
||
* @param months - Количество месяцев
|
||
*/
|
||
function getMonthsForm(months: number): string {
|
||
if (months % 10 === 1 && months % 100 !== 11) {
|
||
return 'месяц'
|
||
} else if ([2, 3, 4].includes(months % 10) && ![12, 13, 14].includes(months % 100)) {
|
||
return 'месяца'
|
||
}
|
||
return 'месяцев'
|
||
}
|
||
|
||
/**
|
||
* Получение правильной формы слова "год" в зависимости от числа
|
||
* @param years - Количество лет
|
||
*/
|
||
function getYearsForm(years: number): string {
|
||
if (years % 10 === 1 && years % 100 !== 11) {
|
||
return 'год'
|
||
} else if ([2, 3, 4].includes(years % 10) && ![12, 13, 14].includes(years % 100)) {
|
||
return 'года'
|
||
}
|
||
return 'лет'
|
||
}
|
||
|
||
/**
|
||
* Получает иконку для роли пользователя
|
||
* @param role - Название роли
|
||
* @returns Иконка для роли
|
||
*/
|
||
function getRoleIcon(role: string): string {
|
||
switch (role.toLowerCase()) {
|
||
case 'admin':
|
||
return '👑' // корона для администратора
|
||
case 'moderator':
|
||
return '🛡️' // щит для модератора
|
||
case 'editor':
|
||
return '✏️' // карандаш для редактора
|
||
case 'author':
|
||
return '📝' // блокнот для автора
|
||
case 'user':
|
||
return '👤' // фигура для обычного пользователя
|
||
case 'subscriber':
|
||
return '📬' // почтовый ящик для подписчика
|
||
case 'guest':
|
||
return '👋' // рука для гостя
|
||
case 'banned':
|
||
return '🚫' // знак запрета для заблокированного
|
||
case 'vip':
|
||
return '⭐' // звезда для VIP
|
||
case 'verified':
|
||
return '✓' // галочка для верифицированного
|
||
default:
|
||
return '🔹' // точка для прочих ролей
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Компонент для отображения роли с иконкой
|
||
*/
|
||
const RoleBadge: Component<{ role: string }> = (props) => {
|
||
return (
|
||
<span class="role-badge" title={props.role}>
|
||
<span class="role-icon">{getRoleIcon(props.role)}</span>
|
||
<span class="role-name">{props.role}</span>
|
||
</span>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Форматирование даты
|
||
* @param timestamp - Временная метка
|
||
*/
|
||
function formatDate(timestamp?: number): string {
|
||
if (!timestamp) return 'Н/Д'
|
||
return new Date(timestamp * 1000).toLocaleString('ru')
|
||
}
|
||
|
||
/**
|
||
* Формирует массив номеров страниц для отображения в пагинации
|
||
* @returns Массив номеров страниц
|
||
*/
|
||
function getPageNumbers(): number[] {
|
||
const result: number[] = []
|
||
const maxVisible = 5 // Максимальное количество видимых номеров страниц
|
||
|
||
const paginationData = pagination()
|
||
const currentPage = paginationData.page
|
||
const totalPages = paginationData.totalPages
|
||
|
||
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2))
|
||
const endPage = Math.min(totalPages, startPage + maxVisible - 1)
|
||
|
||
// Если endPage достиг предела, сдвигаем startPage назад
|
||
if (endPage - startPage + 1 < maxVisible && startPage > 1) {
|
||
startPage = Math.max(1, endPage - maxVisible + 1)
|
||
}
|
||
|
||
// Генерируем номера страниц
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
result.push(i)
|
||
}
|
||
|
||
return result
|
||
}
|
||
|
||
/**
|
||
* Компонент пагинации
|
||
*/
|
||
const Pagination: Component = () => {
|
||
const paginationData = pagination()
|
||
const currentPage = paginationData.page
|
||
const total = paginationData.totalPages
|
||
|
||
return (
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
Показано {users().length} из {paginationData.total} пользователей
|
||
</div>
|
||
<div class="pagination-controls">
|
||
<button
|
||
class="pagination-button"
|
||
onClick={() => handlePageChange(currentPage - 1)}
|
||
disabled={currentPage === 1}
|
||
>
|
||
«
|
||
</button>
|
||
|
||
<For each={getPageNumbers()}>
|
||
{(page) =>
|
||
typeof page === 'number' ? (
|
||
<button
|
||
class={`pagination-button ${page === currentPage ? 'active' : ''}`}
|
||
onClick={() => handlePageChange(page)}
|
||
>
|
||
{page}
|
||
</button>
|
||
) : (
|
||
<span class="pagination-ellipsis">{page}</span>
|
||
)
|
||
}
|
||
</For>
|
||
|
||
<button
|
||
class="pagination-button"
|
||
onClick={() => handlePageChange(currentPage + 1)}
|
||
disabled={currentPage === total}
|
||
>
|
||
»
|
||
</button>
|
||
</div>
|
||
<div class="pagination-per-page">
|
||
<label>
|
||
Записей на странице:
|
||
<select
|
||
value={paginationData.limit}
|
||
onChange={(e) => handlePerPageChange(Number.parseInt(e.target.value))}
|
||
>
|
||
<option value={5}>5</option>
|
||
<option value={10}>10</option>
|
||
<option value={20}>20</option>
|
||
<option value={50}>50</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Компонент модального окна для управления ролями
|
||
*/
|
||
const RolesModal: Component = () => {
|
||
const user = selectedUser()
|
||
const [selectedRoles, setSelectedRoles] = createSignal<string[]>(user ? [...user.roles] : [])
|
||
const availableRoles = roles(); // Получаем список доступных ролей
|
||
|
||
// Получаем дополнительные описания ролей
|
||
const getRoleDescription = (roleId: string): string => {
|
||
// Иначе возвращаем стандартное описание
|
||
switch(roleId) {
|
||
case 'reader':
|
||
return 'Базовая роль. Позволяет авторизоваться и оставлять реакции.';
|
||
case 'expert':
|
||
return 'Эксперт. Позволяет оставлять комментарии и апрувить публикации для главной.';
|
||
case 'author':
|
||
return 'Расширенная роль. Позволяет создавать контент и голосовать за публикации для вывода на главную страницу.';
|
||
case 'editor':
|
||
return 'Редактор. Позволяет редактировать темы и публикации сообщества.';
|
||
case 'moderator':
|
||
return 'Модератор. Позволяет модерировать контент и управлять пользователями.';
|
||
case 'admin':
|
||
return 'Администратор. Позволяет управлять всеми функциями системы.';
|
||
default:
|
||
return 'Нет описания';
|
||
}
|
||
};
|
||
|
||
const toggleRole = (role: string) => {
|
||
const current = selectedRoles()
|
||
if (current.includes(role)) {
|
||
setSelectedRoles(current.filter((r) => r !== role))
|
||
} else {
|
||
setSelectedRoles([...current, role])
|
||
}
|
||
}
|
||
|
||
const saveRoles = () => {
|
||
if (user) {
|
||
// При сохранении ролей передаем правильный набор параметров
|
||
updateUserRoles(user.id, selectedRoles())
|
||
}
|
||
}
|
||
|
||
if (!user) return null
|
||
|
||
return (
|
||
<div class="modal-overlay">
|
||
<div class="modal-content">
|
||
<h2>Управление ролями пользователя</h2>
|
||
<p>Пользователь: {user.email}</p>
|
||
|
||
<div class="roles-list">
|
||
<For each={availableRoles}>
|
||
{(role) => (
|
||
<div class="role-item">
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedRoles().includes(role.id)}
|
||
onChange={() => toggleRole(role.id)}
|
||
/>
|
||
{role.id}
|
||
</label>
|
||
<p class="role-description">{getRoleDescription(role.id)}</p>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button class="cancel-button" onClick={closeRolesModal}>
|
||
Отмена
|
||
</button>
|
||
<button class="save-button" onClick={saveRoles}>
|
||
Сохранить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Загружает переменные окружения
|
||
*/
|
||
const loadEnvVariables = async () => {
|
||
try {
|
||
setEnvLoading(true)
|
||
setError(null)
|
||
|
||
const result = await query(props.apiUrl, `
|
||
query GetEnvVariables {
|
||
getEnvVariables {
|
||
name
|
||
description
|
||
variables {
|
||
key
|
||
value
|
||
description
|
||
type
|
||
isSecret
|
||
}
|
||
}
|
||
}
|
||
`)
|
||
|
||
if (result.getEnvVariables) {
|
||
setEnvSections(result.getEnvVariables as EnvSection[])
|
||
}
|
||
} catch (err) {
|
||
console.error('Ошибка загрузки переменных окружения:', err)
|
||
setError('Не удалось загрузить переменные окружения: ' + (err as Error).message)
|
||
|
||
// Если ошибка авторизации - перенаправляем на логин
|
||
if (
|
||
err instanceof Error &&
|
||
(err.message.includes('401') ||
|
||
err.message.includes('авторизации') ||
|
||
err.message.includes('unauthorized') ||
|
||
err.message.includes('Unauthorized'))
|
||
) {
|
||
handleLogout()
|
||
}
|
||
} finally {
|
||
setEnvLoading(false)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обновляет значение переменной окружения
|
||
*/
|
||
const updateEnvVariable = async (key: string, value: string) => {
|
||
try {
|
||
setError(null)
|
||
setSuccessMessage(null)
|
||
|
||
const result = await query(props.apiUrl, `
|
||
mutation UpdateEnvVariable($key: String!, $value: String!) {
|
||
updateEnvVariable(key: $key, value: $value)
|
||
}
|
||
`, { key, value })
|
||
|
||
if (result.updateEnvVariable) {
|
||
setSuccessMessage(`Переменная ${key} успешно обновлена`)
|
||
// Обновляем список переменных
|
||
await loadEnvVariables()
|
||
} else {
|
||
setError('Не удалось обновить переменную')
|
||
}
|
||
} catch (err) {
|
||
console.error('Ошибка обновления переменной:', err)
|
||
setError('Ошибка при обновлении переменной: ' + (err as Error).message)
|
||
|
||
// Если ошибка авторизации - перенаправляем на логин
|
||
if (
|
||
err instanceof Error &&
|
||
(err.message.includes('401') ||
|
||
err.message.includes('авторизации') ||
|
||
err.message.includes('unauthorized') ||
|
||
err.message.includes('Unauthorized'))
|
||
) {
|
||
handleLogout()
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Обработчик открытия модального окна редактирования переменной
|
||
*/
|
||
const openVariableModal = (variable: EnvVariable) => {
|
||
setEditingVariable({ ...variable })
|
||
setShowVariableModal(true)
|
||
}
|
||
|
||
/**
|
||
* Обработчик закрытия модального окна редактирования переменной
|
||
*/
|
||
const closeVariableModal = () => {
|
||
setEditingVariable(null)
|
||
setShowVariableModal(false)
|
||
}
|
||
|
||
/**
|
||
* Обработчик сохранения переменной
|
||
*/
|
||
const saveVariable = async () => {
|
||
const variable = editingVariable()
|
||
if (!variable) return
|
||
|
||
await updateEnvVariable(variable.key, variable.value)
|
||
closeVariableModal()
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения значения в модальном окне
|
||
*/
|
||
const handleVariableValueChange = (value: string) => {
|
||
const variable = editingVariable()
|
||
if (variable) {
|
||
setEditingVariable({ ...variable, value })
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Загружает список переменных среды при переключении на соответствующую вкладку
|
||
*/
|
||
const handleTabChange = (tab: string) => {
|
||
setActiveTab(tab)
|
||
setError(null)
|
||
setSuccessMessage(null)
|
||
|
||
if (tab === 'env' && envSections().length === 0) {
|
||
loadEnvVariables()
|
||
} else if (tab === 'shouts' && shouts().length === 0) {
|
||
loadShouts()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Кнопка копирования значения переменной окружения
|
||
* @param value - значение для копирования
|
||
*/
|
||
function CopyButton({ value }: { value: string }) {
|
||
/**
|
||
* Копирует значение в буфер обмена
|
||
* @param e - событие клика
|
||
*/
|
||
const handleCopy = async (e: MouseEvent) => {
|
||
e.preventDefault()
|
||
try {
|
||
await navigator.clipboard.writeText(value)
|
||
// Можно добавить всплывающее уведомление
|
||
} catch (err) {
|
||
alert('Ошибка копирования: ' + (err as Error).message)
|
||
}
|
||
}
|
||
return (
|
||
<a class="btn" title="Скопировать" type="button" style="margin-left: 6px" onClick={handleCopy}>
|
||
📋
|
||
</a>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Кнопка показать/скрыть значение переменной
|
||
* @param shown - показывать ли значение
|
||
* @param onToggle - обработчик переключения
|
||
*/
|
||
function ShowHideButton({ shown, onToggle }: { shown: boolean, onToggle: () => void }) {
|
||
return (
|
||
<a class="btn" title={shown ? 'Скрыть' : 'Показать'} type="button" style="margin-left: 6px" onClick={onToggle}>
|
||
{shown ? '🙈' : '👁️'}
|
||
</a>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Компонент модального окна для редактирования переменной окружения
|
||
*/
|
||
const VariableModal: Component = () => {
|
||
const variable = editingVariable()
|
||
|
||
if (!variable) return null
|
||
|
||
return (
|
||
<div class="modal-overlay">
|
||
<div class="modal-content">
|
||
<h2>Редактирование переменной</h2>
|
||
<p>Переменная: {variable.key}</p>
|
||
|
||
<div class="variable-edit-form">
|
||
<div class="form-group">
|
||
<label>Значение:</label>
|
||
<input
|
||
type={variable.isSecret ? 'password' : 'text'}
|
||
value={variable.value}
|
||
onInput={(e) => handleVariableValueChange(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<Show when={variable.description}>
|
||
<div class="variable-description">
|
||
<p>{variable.description}</p>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button class="cancel-button" onClick={closeVariableModal}>
|
||
Отмена
|
||
</button>
|
||
<button class="save-button" onClick={saveVariable}>
|
||
Сохранить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Компонент для отображения переменных окружения
|
||
*/
|
||
const EnvVariablesTab: Component = () => {
|
||
// Сигналы для показа/скрытия значений по ключу
|
||
const [shownVars, setShownVars] = createSignal<{ [key: string]: boolean }>({})
|
||
|
||
/**
|
||
* Переключает показ значения переменной
|
||
* @param key - ключ переменной
|
||
*/
|
||
const toggleShow = (key: string) => {
|
||
setShownVars((prev) => ({ ...prev, [key]: !prev[key] }))
|
||
}
|
||
|
||
return (
|
||
<div class="env-variables-container">
|
||
<Show when={envLoading()}>
|
||
<div class="loading">Загрузка переменных окружения...</div>
|
||
</Show>
|
||
|
||
<Show when={!envLoading() && envSections().length === 0}>
|
||
<div class="empty-state">Нет доступных переменных окружения</div>
|
||
</Show>
|
||
|
||
<Show when={!envLoading() && envSections().length > 0}>
|
||
<div class="env-sections">
|
||
<For each={envSections()}>
|
||
{(section) => (
|
||
<div class="env-section">
|
||
<h3 class="section-name">{section.name}</h3>
|
||
<Show when={section.description}>
|
||
<p class="section-description">{section.description}</p>
|
||
</Show>
|
||
<div class="variables-list">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Ключ</th>
|
||
<th>Значение</th>
|
||
<th>Описание</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<For each={section.variables}>
|
||
{(variable) => {
|
||
const shown = () => shownVars()[variable.key] || false
|
||
return (
|
||
<tr>
|
||
<td>{variable.key}</td>
|
||
<td>
|
||
{variable.isSecret && !shown()
|
||
? '••••••••'
|
||
: (variable.value || <span class="empty-value">не задано</span>)}
|
||
<CopyButton value={variable.value || ''} />
|
||
{variable.isSecret && (
|
||
<ShowHideButton shown={shown()} onToggle={() => toggleShow(variable.key)} />
|
||
)}
|
||
</td>
|
||
<td>{variable.description || '-'}</td>
|
||
<td class="actions">
|
||
<button
|
||
class="edit-button"
|
||
onClick={() => openVariableModal(variable)}
|
||
>
|
||
Изменить
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
)
|
||
}}
|
||
</For>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Вспомогательные функции для публикаций
|
||
function getShoutStatus(shout: Shout): string {
|
||
if (shout.deleted_at) return 'Удалена'
|
||
if (shout.published_at) return 'Опубликована'
|
||
return 'Черновик'
|
||
}
|
||
|
||
function getShoutStatusClass(shout: Shout): string {
|
||
if (shout.deleted_at) return 'status-deleted'
|
||
if (shout.published_at) return 'status-published'
|
||
return 'status-draft'
|
||
}
|
||
|
||
function truncateText(text: string, maxLength: number = 100): string {
|
||
if (!text || text.length <= maxLength) return text
|
||
return text.substring(0, maxLength) + '...'
|
||
}
|
||
|
||
/**
|
||
* Определяет язык контента (html или json)
|
||
*/
|
||
function detectLanguage(content: string): string {
|
||
// Пробуем распарсить как JSON
|
||
try {
|
||
JSON.parse(content)
|
||
return 'json'
|
||
} catch {
|
||
// Проверяем на наличие HTML тегов
|
||
if (/<[^>]*>/g.test(content)) {
|
||
return 'markup'
|
||
}
|
||
}
|
||
return 'plaintext'
|
||
}
|
||
|
||
/**
|
||
* Форматирует и подсвечивает код
|
||
*/
|
||
function formatCode(content: string): string {
|
||
const language = detectLanguage(content)
|
||
|
||
if (language === 'json') {
|
||
try {
|
||
// Форматируем JSON с отступами
|
||
const formatted = JSON.stringify(JSON.parse(content), null, 2)
|
||
return Prism.highlight(formatted, Prism.languages[language], language)
|
||
} catch {
|
||
return content
|
||
}
|
||
} else if (language === 'markup') {
|
||
// Для HTML используем как есть
|
||
return Prism.highlight(content, Prism.languages[language], language)
|
||
}
|
||
|
||
return content
|
||
}
|
||
|
||
/**
|
||
* Компонент модального окна для просмотра содержимого публикации
|
||
*/
|
||
const BodyModal: Component = () => {
|
||
const language = () => detectLanguage(selectedShoutBody())
|
||
const formattedCode = () => formatCode(selectedShoutBody())
|
||
|
||
return (
|
||
<Show when={showBodyModal()}>
|
||
<div class="modal-overlay" onClick={() => setShowBodyModal(false)}>
|
||
<div class="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
<div class="modal-header">
|
||
<div class="modal-title">
|
||
<h3>Содержимое публикации</h3>
|
||
<span class="language-badge">
|
||
{language() === 'markup' ? 'HTML' :
|
||
language() === 'json' ? 'JSON' :
|
||
'Plain Text'}
|
||
</span>
|
||
</div>
|
||
<button class="close-button" onClick={() => setShowBodyModal(false)}>×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre class="body-content">
|
||
<code class={`language-${language()}`} innerHTML={formattedCode()} />
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения страницы для публикаций
|
||
* @param page - Номер страницы
|
||
*/
|
||
function handleShoutsPageChange(page: number) {
|
||
setShoutsPagination({ ...shoutsPagination(), page })
|
||
loadShouts()
|
||
}
|
||
|
||
/**
|
||
* Обработчик изменения количества публикаций на странице
|
||
* @param limit - Количество элементов
|
||
*/
|
||
function handleShoutsPerPageChange(limit: number) {
|
||
setShoutsPagination({ ...shoutsPagination(), page: 1, limit })
|
||
loadShouts()
|
||
}
|
||
|
||
/**
|
||
* Компонент пагинации для публикаций
|
||
*/
|
||
const ShoutsPagination: Component = () => {
|
||
const pagination = shoutsPagination()
|
||
const totalPages = pagination.totalPages
|
||
const currentPage = pagination.page
|
||
|
||
// Генерируем массив страниц для отображения
|
||
const pages = []
|
||
const maxVisiblePages = 5 // Максимальное количество видимых страниц
|
||
|
||
// Всегда показываем первую страницу
|
||
pages.push(1)
|
||
|
||
// Вычисляем диапазон страниц вокруг текущей
|
||
let startPage = Math.max(2, currentPage - Math.floor(maxVisiblePages / 2))
|
||
let endPage = Math.min(totalPages - 1, startPage + maxVisiblePages - 2)
|
||
|
||
// Корректируем диапазон, если он выходит за границы
|
||
if (endPage - startPage < maxVisiblePages - 2) {
|
||
startPage = Math.max(2, endPage - maxVisiblePages + 2)
|
||
}
|
||
|
||
// Добавляем многоточие после первой страницы, если нужно
|
||
if (startPage > 2) {
|
||
pages.push('...')
|
||
}
|
||
|
||
// Добавляем страницы из диапазона
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
pages.push(i)
|
||
}
|
||
|
||
// Добавляем многоточие перед последней страницей, если нужно
|
||
if (endPage < totalPages - 1) {
|
||
pages.push('...')
|
||
}
|
||
|
||
// Всегда показываем последнюю страницу, если есть больше одной страницы
|
||
if (totalPages > 1) {
|
||
pages.push(totalPages)
|
||
}
|
||
|
||
return (
|
||
<div class="pagination">
|
||
<div class="pagination-info">
|
||
Показано {((currentPage - 1) * pagination.limit) + 1} - {Math.min(currentPage * pagination.limit, pagination.total)} из {pagination.total}
|
||
</div>
|
||
|
||
<div class="pagination-controls">
|
||
<button
|
||
class="pagination-button"
|
||
onClick={() => handleShoutsPageChange(currentPage - 1)}
|
||
disabled={currentPage === 1}
|
||
>
|
||
←
|
||
</button>
|
||
|
||
<For each={pages}>
|
||
{(page) => (
|
||
<>
|
||
{page === '...' ? (
|
||
<span class="pagination-ellipsis">...</span>
|
||
) : (
|
||
<button
|
||
class={`pagination-button ${page === currentPage ? 'active' : ''}`}
|
||
onClick={() => handleShoutsPageChange(Number(page))}
|
||
>
|
||
{page}
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
</For>
|
||
|
||
<button
|
||
class="pagination-button"
|
||
onClick={() => handleShoutsPageChange(currentPage + 1)}
|
||
disabled={currentPage === totalPages}
|
||
>
|
||
→
|
||
</button>
|
||
</div>
|
||
|
||
<div class="pagination-per-page">
|
||
На странице:
|
||
<select
|
||
value={pagination.limit}
|
||
onChange={(e) => handleShoutsPerPageChange(Number(e.target.value))}
|
||
>
|
||
<option value="10">10</option>
|
||
<option value="20">20</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Добавляем стили для пагинации
|
||
const styles = `
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.pagination-info {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
gap: 5px;
|
||
align-items: center;
|
||
}
|
||
|
||
.pagination-button {
|
||
padding: 5px 10px;
|
||
border: 1px solid #ddd;
|
||
background: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
min-width: 35px;
|
||
text-align: center;
|
||
}
|
||
|
||
.pagination-button:hover:not(:disabled) {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.pagination-button.active {
|
||
background: #007bff;
|
||
color: white;
|
||
border-color: #0056b3;
|
||
}
|
||
|
||
.pagination-button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.pagination-ellipsis {
|
||
padding: 5px;
|
||
color: #666;
|
||
}
|
||
|
||
.pagination-per-page {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.pagination-per-page select {
|
||
padding: 5px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
background: white;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 8px;
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.close-button {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
padding: 0 8px;
|
||
color: #666;
|
||
}
|
||
|
||
.close-button:hover {
|
||
color: #333;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 16px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.body-content {
|
||
font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
tab-size: 2;
|
||
hyphens: none;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
margin: 0;
|
||
padding: 16px;
|
||
background: #2d2d2d;
|
||
border-radius: 4px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.body-content code {
|
||
font-family: inherit;
|
||
background: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
white-space: inherit !important;
|
||
}
|
||
|
||
/* Улучшаем стили для Prism */
|
||
.token.comment,
|
||
.token.prolog,
|
||
.token.doctype,
|
||
.token.cdata {
|
||
color: #999;
|
||
}
|
||
|
||
.token.property,
|
||
.token.tag,
|
||
.token.boolean,
|
||
.token.number,
|
||
.token.constant,
|
||
.token.symbol {
|
||
color: #0099ff;
|
||
}
|
||
|
||
.token.selector,
|
||
.token.attr-name,
|
||
.token.string,
|
||
.token.char,
|
||
.token.builtin {
|
||
color: #92d692;
|
||
}
|
||
|
||
.token.operator,
|
||
.token.entity,
|
||
.token.url,
|
||
.language-css .token.string,
|
||
.token.variable,
|
||
.token.inserted {
|
||
color: #9a6e3a;
|
||
}
|
||
|
||
.token.keyword {
|
||
color: #e68ac6;
|
||
}
|
||
|
||
.modal-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.language-badge {
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
background: #f0f0f0;
|
||
color: #666;
|
||
}
|
||
`
|
||
|
||
return (
|
||
<div class="admin-page">
|
||
<style>{styles}</style>
|
||
<header>
|
||
<div class="header-container">
|
||
<h1>Панель администратора</h1>
|
||
<button class="logout-button" onClick={handleLogout}>
|
||
Выйти
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="admin-tabs">
|
||
<button class={activeTab() === 'users' ? 'active' : ''} onClick={() => handleTabChange('users')}>
|
||
Пользователи
|
||
</button>
|
||
<button class={activeTab() === 'shouts' ? 'active' : ''} onClick={() => handleTabChange('shouts')}>
|
||
Публикации
|
||
</button>
|
||
<button class={activeTab() === 'env' ? 'active' : ''} onClick={() => handleTabChange('env')}>
|
||
Переменные среды
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<Show when={error()}>
|
||
<div class="error-message">{error()}</div>
|
||
</Show>
|
||
|
||
<Show when={successMessage()}>
|
||
<div class="success-message">{successMessage()}</div>
|
||
</Show>
|
||
|
||
<Show when={activeTab() === 'users'}>
|
||
<Show when={loading()}>
|
||
<div class="loading">Загрузка данных...</div>
|
||
</Show>
|
||
|
||
<Show when={!loading() && users().length === 0 && !error()}>
|
||
<div class="empty-state">Нет данных для отображения</div>
|
||
</Show>
|
||
|
||
<Show when={!loading() && users().length > 0}>
|
||
<div class="users-controls">
|
||
<div class="search-container">
|
||
<div class="search-input-group">
|
||
<input
|
||
type="text"
|
||
placeholder="Поиск по email, имени или ID..."
|
||
value={searchQuery()}
|
||
onInput={handleSearchChange}
|
||
onKeyDown={handleSearchKeyDown}
|
||
class="search-input"
|
||
/>
|
||
<button class="search-button" onClick={handleSearch}>
|
||
Поиск
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="users-list">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Email</th>
|
||
<th>Имя</th>
|
||
<th>Создан</th>
|
||
<th>Роли</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<For each={users()}>
|
||
{(user) => (
|
||
<tr>
|
||
<td>{user.id}</td>
|
||
<td>{user.email}</td>
|
||
<td>{user.name || '-'}</td>
|
||
<td>{formatDateRelative(user.created_at)}</td>
|
||
<td class="roles-cell">
|
||
<div class="roles-container">
|
||
<For each={user.roles}>
|
||
{(role) => <RoleBadge role={role} />}
|
||
</For>
|
||
<div class="role-badge edit-role-badge" onClick={() => {
|
||
setSelectedUser(user)
|
||
setShowRolesModal(true)
|
||
}}
|
||
>
|
||
<span class="role-icon">🎭</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</For>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<Pagination />
|
||
</Show>
|
||
</Show>
|
||
|
||
<Show when={activeTab() === 'shouts'}>
|
||
<Show when={shoutsLoading()}>
|
||
<div class="loading">Загрузка публикаций...</div>
|
||
</Show>
|
||
|
||
<Show when={!shoutsLoading() && shouts().length === 0 && !error()}>
|
||
<div class="empty-state">Нет публикаций для отображения</div>
|
||
</Show>
|
||
|
||
<Show when={!shoutsLoading() && shouts().length > 0}>
|
||
<div class="shouts-controls">
|
||
<div class="search-container">
|
||
<div class="search-input-group">
|
||
<input
|
||
type="text"
|
||
placeholder="Поиск по заголовку, slug или ID..."
|
||
value={shoutsSearchQuery()}
|
||
onInput={(e) => setShoutsSearchQuery(e.currentTarget.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
loadShouts()
|
||
}
|
||
}}
|
||
class="search-input"
|
||
/>
|
||
<button class="search-button" onClick={loadShouts}>
|
||
Поиск
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-filter">
|
||
<select
|
||
value={shoutsStatus()}
|
||
onInput={(e) => {
|
||
setShoutsStatus(e.currentTarget.value)
|
||
loadShouts()
|
||
}}
|
||
>
|
||
<option value="all">Все</option>
|
||
<option value="published">Опубликованные</option>
|
||
<option value="draft">Черновики</option>
|
||
<option value="deleted">Удаленные</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shouts-list">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Заголовок</th>
|
||
<th>Slug</th>
|
||
<th>Статус</th>
|
||
<th>Авторы</th>
|
||
<th>Темы</th>
|
||
<th>Создан</th>
|
||
<th>Содержимое</th>
|
||
<th>Media</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<For each={shouts()}>
|
||
{(shout) => (
|
||
<tr>
|
||
<td>{shout.id}</td>
|
||
<td title={shout.title}>{truncateText(shout.title, 50)}</td>
|
||
<td title={shout.slug}>{truncateText(shout.slug, 30)}</td>
|
||
<td>
|
||
<span class={`status-badge ${getShoutStatusClass(shout)}`}>
|
||
{getShoutStatus(shout)}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<Show when={shout.authors && shout.authors.length > 0}>
|
||
<div class="authors-list">
|
||
<For each={shout.authors}>
|
||
{(author) => (
|
||
<span class="author-badge" title={author.email}>
|
||
{author.name || author.email || `ID:${author.id}`}
|
||
</span>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</Show>
|
||
<Show when={!shout.authors || shout.authors.length === 0}>
|
||
<span class="no-data">-</span>
|
||
</Show>
|
||
</td>
|
||
<td>
|
||
<Show when={shout.topics && shout.topics.length > 0}>
|
||
<div class="topics-list">
|
||
<For each={shout.topics}>
|
||
{(topic) => (
|
||
<span class="topic-badge" title={topic.slug}>
|
||
{topic.title || topic.slug}
|
||
</span>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</Show>
|
||
<Show when={!shout.topics || shout.topics.length === 0}>
|
||
<span class="no-data">-</span>
|
||
</Show>
|
||
</td>
|
||
<td>{formatDateRelative(shout.created_at)}</td>
|
||
<td
|
||
class="body-cell"
|
||
onClick={() => {
|
||
setSelectedShoutBody(shout.body)
|
||
setShowBodyModal(true)
|
||
}}
|
||
style="cursor: pointer; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
|
||
>
|
||
{truncateText(shout.body.replace(/<[^>]*>/g, ''), 100)}
|
||
</td>
|
||
<td>
|
||
<Show when={shout.media && shout.media.length > 0}>
|
||
<span class="media-count">{shout.media!.length} файл(ов)</span>
|
||
</Show>
|
||
<Show when={!shout.media || shout.media.length === 0}>
|
||
<span class="no-data">-</span>
|
||
</Show>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</For>
|
||
</tbody>
|
||
</table>
|
||
<ShoutsPagination />
|
||
</div>
|
||
</Show>
|
||
</Show>
|
||
|
||
<Show when={activeTab() === 'env'}>
|
||
<EnvVariablesTab />
|
||
</Show>
|
||
</main>
|
||
|
||
<Show when={showRolesModal()}>
|
||
<RolesModal />
|
||
</Show>
|
||
|
||
<Show when={showVariableModal()}>
|
||
<VariableModal />
|
||
</Show>
|
||
|
||
<BodyModal />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AdminPage
|