update tanstak file managment table
This commit is contained in:
smanylov
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "no-copy-admin-panel-frontend",
|
||||
"version": "0.12.0",
|
||||
"version": "0.13.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 2996",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import ContentModerationTable from '@/app/ui/content/content-moderation-table';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="admin-content">
|
||||
|
||||
@@ -3,23 +3,34 @@
|
||||
import { getSessionData } from '@/app/actions/session';
|
||||
import { API_BASE_URL } from '@/app/actions/definitions';
|
||||
|
||||
export async function fetchModerationContentList(page?: number, size?: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string, nameQuery?: string) {
|
||||
export async function fetchModerationContentList(page?: number, size?: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string) {
|
||||
const token = await getSessionData('token');
|
||||
console.log('fetchModerationContentList');
|
||||
/* console.log(
|
||||
{
|
||||
action: 'files_for_moderation',
|
||||
page: page,
|
||||
page_size: size,
|
||||
sort_by: sortBy || '',
|
||||
sort_direction: sortDirection || 'asc',
|
||||
}
|
||||
) */
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/admin`, {
|
||||
const response = await fetch(`${API_BASE_URL}/api/admin/info`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
version: 1,
|
||||
msg_id: 20005,
|
||||
msg_id: 40001,
|
||||
message_body: {
|
||||
action: 'files_for_moderation',
|
||||
/* page: page,
|
||||
size: size,
|
||||
sort_by: sortBy || '',
|
||||
sort_direction: sortDirection || 'asc',
|
||||
full_name: nameQuery */
|
||||
page: page,
|
||||
page_size: size,
|
||||
/* sort_by: sortBy || '',
|
||||
sort_order: sortDirection || 'asc', */
|
||||
/* full_name: nameQuery, */
|
||||
/* fileName: '',
|
||||
userId: '' */
|
||||
}
|
||||
}),
|
||||
headers: {
|
||||
@@ -34,7 +45,48 @@ export async function fetchModerationContentList(page?: number, size?: number, s
|
||||
console.log(parsed);
|
||||
|
||||
if (parsed.message_code === 0) {
|
||||
return parsed.message_body;
|
||||
return parsed.message_body.message_body;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
} else {
|
||||
throw new Error(`${response.status}`);
|
||||
}
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function changeModerationContentStatus(fileId?: string, fileStatus?: string) {
|
||||
const token = await getSessionData('token');
|
||||
console.log(`changeModerationContentStatus - ${fileId} - ${fileStatus}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/admin/info`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
version: 1,
|
||||
msg_id: 40002,
|
||||
message_body: {
|
||||
action: 'change_file_status',
|
||||
file_id: fileId,
|
||||
file_status: fileStatus
|
||||
}
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const parsed = await response.json();
|
||||
console.log(parsed);
|
||||
|
||||
if (parsed.message_code === 0) {
|
||||
return parsed.message_body.message_body;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,43 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { fetchModerationContentList } from '@/app/actions/contentActions';
|
||||
|
||||
export interface ModerationFile {
|
||||
fileName: string;
|
||||
moderationInfo: {
|
||||
appealInfo: null | any;
|
||||
hasActiveAppeal: boolean;
|
||||
};
|
||||
userId: number;
|
||||
fileId: string;
|
||||
status: 'BLOCKED' | 'MODERATION' | string;
|
||||
}
|
||||
|
||||
export interface ContentForModeration {
|
||||
|
||||
files: ModerationFile[];
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
export const useContentForModeration = (page?: number, size?: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string, nameQuery?: string) => {
|
||||
export const useContentForModeration = (
|
||||
page?: number,
|
||||
size?: number,
|
||||
sortBy?: string,
|
||||
sortDirection?: 'asc' | 'desc' | string
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ['contentForModeration'],
|
||||
queryKey: ['contentForModeration', page, size, sortBy, sortDirection],
|
||||
queryFn: () => {
|
||||
return fetchModerationContentList(page, size, sortBy, sortDirection, nameQuery)
|
||||
return fetchModerationContentList(page, size, sortBy, sortDirection);
|
||||
},
|
||||
select: (data: any[] | null) => {
|
||||
select: (data: ContentForModeration | null) => {
|
||||
if (!data) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
return data;
|
||||
return data; // теперь возвращаем весь объект с пагинацией
|
||||
},
|
||||
retry: false
|
||||
refetchInterval: 30000,
|
||||
placeholderData: (previousData) => previousData // для оптимистичных обновлений
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
@use './variable.scss' as v;
|
||||
|
||||
.file-moderation-modal {
|
||||
padding: 1.5rem;
|
||||
min-width: 400px;
|
||||
|
||||
&__title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__info-section,
|
||||
&__status-section,
|
||||
&__status-change-section {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__label,
|
||||
&__status-label,
|
||||
&__status-change-label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&__status-change-label {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: #111827;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-cancel {
|
||||
@extend .file-moderation-modal__button;
|
||||
color: #374151;
|
||||
background-color: #f3f4f6;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-save {
|
||||
@extend .file-moderation-modal__button;
|
||||
color: white;
|
||||
background-color: #3b82f6;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
|
||||
&--blocked {
|
||||
@extend .status-badge;
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
&--moderation {
|
||||
@extend .status-badge;
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&--approved {
|
||||
@extend .status-badge;
|
||||
background-color: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
&--default {
|
||||
@extend .status-badge;
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
@use './variable.scss' as v;
|
||||
@use './edit-permissions-modal.scss';
|
||||
@use './animation.scss';
|
||||
@use './file-moderation-modal.scss';
|
||||
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import DropDownList from '@/app/components/dropDownList';
|
||||
import { changeModerationContentStatus } from '@/app/actions/contentActions';
|
||||
import { ModerationFile } from '@/app/hooks/react-query/useContentForModeration';
|
||||
|
||||
interface FileModerationModalProps {
|
||||
file: ModerationFile | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const StatusBadge = ({ status }: { status: string }) => {
|
||||
const getBadgeClass = () => {
|
||||
switch (status) {
|
||||
case 'BLOCKED':
|
||||
return 'status-badge--blocked';
|
||||
case 'MODERATION':
|
||||
return 'status-badge--moderation';
|
||||
case 'APPROVED':
|
||||
return 'status-badge--approved';
|
||||
default:
|
||||
return 'status-badge--default';
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = () => {
|
||||
switch (status) {
|
||||
case 'BLOCKED':
|
||||
return 'Заблокировано';
|
||||
case 'MODERATION':
|
||||
return 'На модерации';
|
||||
case 'APPROVED':
|
||||
return 'Одобрено';
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={getBadgeClass()}>
|
||||
{getLabel()}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FileModerationModal({ file, onClose }: FileModerationModalProps) {
|
||||
const [selectedStatus, setSelectedStatus] = useState<string>(file?.status || 'MODERATION');
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const changeStatusMutation = useMutation({
|
||||
mutationFn: async ({ fileId, fileStatus }: { fileId: string; fileStatus: string }) => {
|
||||
return await changeModerationContentStatus(fileId, fileStatus);
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
if (data) {
|
||||
toast.success('Статус файла успешно изменен');
|
||||
queryClient.invalidateQueries({ queryKey: ['contentForModeration'] });
|
||||
onClose();
|
||||
} else {
|
||||
toast.error('Не удалось изменить статус файла');
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Произошла ошибка при изменении статуса');
|
||||
},
|
||||
});
|
||||
|
||||
const handleStatusChange = () => {
|
||||
if (!file?.fileId) {
|
||||
toast.error('ID файла не найден');
|
||||
return;
|
||||
}
|
||||
|
||||
changeStatusMutation.mutate({
|
||||
fileId: file.fileId,
|
||||
fileStatus: selectedStatus,
|
||||
});
|
||||
};
|
||||
|
||||
if (!file) return null;
|
||||
|
||||
return (
|
||||
<div className="file-moderation-modal">
|
||||
<h2 className="file-moderation-modal__title">Управление файлом</h2>
|
||||
|
||||
<div className="file-moderation-modal__content">
|
||||
{/* Информация о файле */}
|
||||
<div className="file-moderation-modal__info-section">
|
||||
<label className="file-moderation-modal__label">Название файла</label>
|
||||
<p className="file-moderation-modal__value">{file.fileName}</p>
|
||||
</div>
|
||||
|
||||
<div className="file-moderation-modal__info-section">
|
||||
<label className="file-moderation-modal__label">User ID</label>
|
||||
<p className="file-moderation-modal__value">{file.userId}</p>
|
||||
</div>
|
||||
|
||||
<div className="file-moderation-modal__status-section">
|
||||
<label className="file-moderation-modal__status-label">Текущий статус</label>
|
||||
<StatusBadge status={file.status} />
|
||||
</div>
|
||||
|
||||
{/* Смена статуса */}
|
||||
<div className="file-moderation-modal__status-change-section">
|
||||
<label className="file-moderation-modal__status-change-label">Изменить статус</label>
|
||||
<DropDownList
|
||||
value={selectedStatus}
|
||||
callBack={(value: string) => setSelectedStatus(value)}
|
||||
>
|
||||
<li value="MODERATION">На модерации</li>
|
||||
<li value="BLOCKED">Заблокировано</li>
|
||||
</DropDownList>
|
||||
</div>
|
||||
|
||||
{/* Кнопки действий */}
|
||||
<div className="file-moderation-modal__actions">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="btn btn-secondary"
|
||||
disabled={changeStatusMutation.isPending}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStatusChange}
|
||||
className="btn btn-primary"
|
||||
disabled={changeStatusMutation.isPending || selectedStatus === file.status}
|
||||
>
|
||||
{changeStatusMutation.isPending ? 'Сохранение...' : 'Сохранить'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,47 +12,27 @@ import {
|
||||
ColumnFiltersState,
|
||||
} from '@tanstack/react-table';
|
||||
import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter } from '@/app/ui/icons/icons';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import DropDownList from '@/app/components/dropDownList';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import ModalWindow from '@/app/components/modalWindow';
|
||||
import { toast } from 'sonner';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { fetchUsesInfo } from '@/app/actions/usersActions';
|
||||
import { UserInfoModalWindow } from '@/app/ui/users/user-info-modal-window';
|
||||
import { useContentForModeration, ContentForModeration } from '@/app/hooks/react-query/useContentForModeration';
|
||||
import { useContentForModeration, ModerationFile, ContentForModeration } from '@/app/hooks/react-query/useContentForModeration';
|
||||
import FileModerationModal from './FileModerationModal';
|
||||
|
||||
// Форматирование даты из timestamp
|
||||
const formatDate = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}.${month}.${year}`;
|
||||
};
|
||||
|
||||
const formatDateTime = (timestamp: number) => {
|
||||
const date = new Date(timestamp);
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const cutFileName = (userId: string) => {
|
||||
const MAX_FILE_NAME_LENGTH = 26;
|
||||
const lastDotIndex = userId.lastIndexOf('.');
|
||||
const cutFileName = (fileName: string) => {
|
||||
const MAX_FILE_NAME_LENGTH = 30;
|
||||
const lastDotIndex = fileName.lastIndexOf('.');
|
||||
|
||||
if (lastDotIndex <= 0) {
|
||||
return userId.length > MAX_FILE_NAME_LENGTH ? userId.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : userId;
|
||||
return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
|
||||
}
|
||||
|
||||
const nameWithoutExtension = userId.substring(0, lastDotIndex);
|
||||
const extension = userId.substring(lastDotIndex);
|
||||
const nameWithoutExtension = fileName.substring(0, lastDotIndex);
|
||||
const extension = fileName.substring(lastDotIndex);
|
||||
|
||||
if (userId.length <= MAX_FILE_NAME_LENGTH) {
|
||||
return userId;
|
||||
if (fileName.length <= MAX_FILE_NAME_LENGTH) {
|
||||
return fileName;
|
||||
}
|
||||
|
||||
const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
|
||||
@@ -64,52 +44,49 @@ const cutFileName = (userId: string) => {
|
||||
return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
|
||||
}
|
||||
|
||||
const StatusBadge = ({ status }: { status: string }) => {
|
||||
const statusConfig: Record<string, { className: string; label: string }> = {
|
||||
'BLOCKED': { className: 'bg-red-100 text-red-800', label: 'Заблокировано' },
|
||||
'MODERATION': { className: 'bg-yellow-100 text-yellow-800', label: 'На модерации' },
|
||||
'APPROVED': { className: 'bg-green-100 text-green-800', label: 'Одобрено' },
|
||||
};
|
||||
|
||||
const config = statusConfig[status] || { className: 'bg-gray-100 text-gray-800', label: status };
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${config.className}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ContentModerationTable({ permission }: { permission: number }) {
|
||||
// Состояния
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
const [searchInputValue, setSearchInputValue] = useState<string>('');
|
||||
const [openWindow, setOpenWindow] = useState<boolean>(false);
|
||||
const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
|
||||
const debouncedSetSearchQuery = useDebouncedCallback(
|
||||
(value: string) => {
|
||||
setSearchQuery(value);
|
||||
setPagination(prev => ({ ...prev, pageIndex: 0 }));
|
||||
},
|
||||
500
|
||||
);
|
||||
|
||||
const handleSearchInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setSearchInputValue(value);
|
||||
debouncedSetSearchQuery(value);
|
||||
}, [debouncedSetSearchQuery]);
|
||||
const [selectedFile, setSelectedFile] = useState<ModerationFile | null>(null);
|
||||
|
||||
const t = useTranslations("Global");
|
||||
const locale = useLocale();
|
||||
|
||||
// Получаем параметры сортировки для API
|
||||
const getSortParams = useMemo(() => {
|
||||
if (sorting.length === 0) {
|
||||
return { sortBy: '', sortOrder: undefined };
|
||||
return { sortBy: '', sortDirection: undefined };
|
||||
}
|
||||
|
||||
const sort = sorting[0];
|
||||
const sortByMap: Record<string, string> = {
|
||||
'id': 'supportId',
|
||||
'userName': 'fullName',
|
||||
'email': 'email',
|
||||
'verificationStatus': 'verificationStatus',
|
||||
'fileName': 'fileName',
|
||||
'userId': 'userId',
|
||||
'status': 'status',
|
||||
'createdAt': 'createdAt',
|
||||
'tariff': 'tariff',
|
||||
'tokens': 'tokens',
|
||||
'userCompany': 'userCompany',
|
||||
};
|
||||
console.log(sortByMap[sort.id]);
|
||||
|
||||
return {
|
||||
sortBy: sortByMap[sort.id] || sort.id,
|
||||
@@ -117,273 +94,150 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
};
|
||||
}, [sorting]);
|
||||
|
||||
const { data: tableData,
|
||||
const {
|
||||
data: moderationData,
|
||||
isLoading,
|
||||
isError,
|
||||
isFetching,
|
||||
error
|
||||
} = useContentForModeration(pagination.pageIndex, pagination.pageSize, getSortParams?.sortBy, getSortParams?.sortDirection, searchQuery);
|
||||
} = useContentForModeration(
|
||||
pagination.pageIndex,
|
||||
pagination.pageSize,
|
||||
getSortParams.sortBy,
|
||||
getSortParams.sortDirection
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(tableData);
|
||||
}, [tableData])
|
||||
console.log('Moderation data:', moderationData);
|
||||
}, [moderationData]);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Определение колонок
|
||||
const columns = useMemo<ColumnDef<ContentForModeration>[]>(() => {
|
||||
const allColumns: ColumnDef<ContentForModeration>[] = [
|
||||
const handleViewFile = useCallback((file: ModerationFile) => {
|
||||
console.log('View file:', file);
|
||||
setSelectedFile(file);
|
||||
setOpenWindow(true);
|
||||
}, []);
|
||||
|
||||
const handleCloseModal = useCallback(() => {
|
||||
setOpenWindow(false);
|
||||
setSelectedFile(null);
|
||||
}, []);
|
||||
|
||||
const columns = useMemo<ColumnDef<ModerationFile>[]>(() => {
|
||||
const allColumns: ColumnDef<ModerationFile>[] = [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
accessorKey: 'fileName',
|
||||
header: ({ column }) => (
|
||||
<div className="column start">
|
||||
<span>
|
||||
ID
|
||||
Название файла
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
{column.getIsSorted() === 'asc' ?
|
||||
<span><IconArrowUp /></span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
<span><IconArrowDown /></span>
|
||||
: <span><IconFilter /></span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center table-item table-item-id">
|
||||
<div>
|
||||
<div className="font-medium w-full truncate" title={'row.original.id.toString()'}>
|
||||
{'row.original.id'}
|
||||
</div>
|
||||
<div className="flex items-center table-item">
|
||||
<div className="font-medium w-full truncate" title={row.original.fileName}>
|
||||
{cutFileName(row.original.fileName)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
enableColumnFilter: false,
|
||||
enableColumnFilter: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'userName',
|
||||
accessorKey: 'userId',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Пользователь
|
||||
User ID
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
{column.getIsSorted() === 'asc' ?
|
||||
<span><IconArrowUp /></span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
{'row.original.userName'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'userEmail',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
email
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold text-green-600`}>
|
||||
{'row.original.userEmail'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'verificationStatus',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
статус KYC
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
<span><IconArrowDown /></span>
|
||||
: <span><IconFilter /></span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">
|
||||
{'row.original.verificationStatus'}
|
||||
{row.original.userId}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'tariff',
|
||||
accessorKey: 'status',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Подписка
|
||||
Статус
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
{column.getIsSorted() === 'asc' ?
|
||||
<span><IconArrowUp /></span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
<span><IconArrowDown /></span>
|
||||
: <span><IconFilter /></span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">
|
||||
{'row.original.tariff'}
|
||||
<StatusBadge status={row.original.status} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'tokens',
|
||||
accessorKey: 'moderationInfo.hasActiveAppeal',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Токены
|
||||
Апелляция
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
{column.getIsSorted() === 'asc' ?
|
||||
<span><IconArrowUp /></span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
<span><IconArrowDown /></span>
|
||||
: <span><IconFilter /></span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
{'row.original.tokens'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}, {
|
||||
accessorKey: 'userSubscription',
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
Дата регистрации
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
className="sort-button"
|
||||
>
|
||||
{
|
||||
column.getIsSorted() === 'asc' ?
|
||||
<span>
|
||||
<IconArrowUp />
|
||||
</span>
|
||||
: column.getIsSorted() === 'desc' ?
|
||||
<span>
|
||||
<IconArrowDown />
|
||||
</span>
|
||||
: <span>
|
||||
<IconFilter />
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">
|
||||
{row.original.moderationInfo.hasActiveAppeal ? (
|
||||
<span className="text-blue-600">Активна</span>
|
||||
) : (
|
||||
<span className="text-gray-400">Нет</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className={`text-center font-semibold`}>
|
||||
<>
|
||||
{formatDate(0)}
|
||||
<br />
|
||||
{formatDateTime(0)}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
if (permission === 3) {
|
||||
allColumns.push({
|
||||
@@ -393,8 +247,9 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
<div className="actions">
|
||||
<div className="actions-group">
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="bg-blue-500 hover:bg-blue-600"
|
||||
onClick={() => handleViewFile(row.original)}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded"
|
||||
title="Просмотреть файл"
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
@@ -407,37 +262,18 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
}
|
||||
|
||||
return allColumns;
|
||||
}, [permission]);
|
||||
}, [permission, handleViewFile, t]);
|
||||
|
||||
// Фильтрация по типу файла и дате
|
||||
// Фильтрация данных (клиентская фильтрация, если нужно)
|
||||
const filteredData = useMemo(() => {
|
||||
/* let result = tableData?.users; */
|
||||
let result = [];
|
||||
return []
|
||||
if (!result) {
|
||||
if (!moderationData?.files) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase().trim();
|
||||
result = result.filter((item: any) => {
|
||||
// Ищем по всем строковым полям
|
||||
return Object.keys(item).some(key => {
|
||||
const value = item[key];
|
||||
if (typeof value === 'string') {
|
||||
return value.toLowerCase().includes(query);
|
||||
}
|
||||
// Если нужно искать по числам или другим типам
|
||||
if (typeof value === 'number' || typeof value === 'boolean') {
|
||||
return value.toString().toLowerCase().includes(query);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
let result = [...moderationData.files];
|
||||
|
||||
return result;
|
||||
}, [tableData, searchQuery]);
|
||||
}, [moderationData]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentPageRows = table.getRowModel().rows;
|
||||
@@ -460,8 +296,7 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
manualPagination: true,
|
||||
manualSorting: true,
|
||||
manualFiltering: true,
|
||||
/* pageCount: tableData?.pagination?.totalPages, */
|
||||
pageCount: 0,
|
||||
pageCount: moderationData?.totalPages || 0,
|
||||
onPaginationChange: setPagination,
|
||||
onSortingChange: (updater) => {
|
||||
const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
|
||||
@@ -473,31 +308,28 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
getPaginationRowModel: getPaginationRowModel()
|
||||
});
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="text-center text-red-600 p-4">
|
||||
Ошибка загрузки данных: {error?.message || 'Неизвестная ошибка'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tanstak-table-wrapper">
|
||||
<ModalWindow state={openWindow} callBack={setOpenWindow}>
|
||||
{openWindowChildren}
|
||||
<ModalWindow state={openWindow} callBack={handleCloseModal}>
|
||||
<FileModerationModal file={selectedFile} onClose={handleCloseModal} />
|
||||
</ModalWindow>
|
||||
|
||||
{/* Фильтры */}
|
||||
<div className="tanstak-table-filtres">
|
||||
<div className="table-filtres-wrapper">
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('search')}:</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchInputValue}
|
||||
onChange={handleSearchInputChange}
|
||||
placeholder="Поиск пользователей"
|
||||
className="table-filtres-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-filtres-item">
|
||||
<div className="table-filtres-label">{t('items-per-page')}:</div>
|
||||
<DropDownList
|
||||
value={table.getState().pagination.pageSize}
|
||||
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
|
||||
//@ts-ignore
|
||||
callBack={table.setPageSize}
|
||||
>
|
||||
{[5, 10, 20, 50, 100].map(pageSize => (
|
||||
@@ -516,9 +348,7 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
>
|
||||
<th key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: typeof header.column.columnDef.header === 'function'
|
||||
@@ -530,9 +360,15 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
))}
|
||||
</thead>
|
||||
<tbody className={`tanstak-table-body ${isFetching ? 'loading' : ''}`}>
|
||||
{table.getRowModel().rows.length > 0 ? (
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center py-8">
|
||||
Загрузка...
|
||||
</td>
|
||||
</tr>
|
||||
) : table.getRowModel().rows.length > 0 ? (
|
||||
table.getRowModel().rows.map(row => (
|
||||
<tr key={row.id}>
|
||||
<tr key={row.original.fileId}>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td key={cell.id}>
|
||||
{typeof cell.column.columnDef.cell === 'function'
|
||||
@@ -544,7 +380,7 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center">
|
||||
<td colSpan={columns.length} className="text-center py-8">
|
||||
{t('no-data-for-selected-filters')}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -554,16 +390,16 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
</div>
|
||||
|
||||
{/* Пагинация */}
|
||||
{/* <div className="tanstak-table-pagination">
|
||||
<div className="tanstak-table-pagination">
|
||||
<div className="pagination-info">
|
||||
<span className="pagination-info-pages">
|
||||
{t('page')}{' '}
|
||||
<strong>
|
||||
{(tableData?.pagination?.currentPage ?? 0) + 1} {t('out-of')} {tableData?.pagination?.totalPages ?? 1}
|
||||
{(moderationData?.currentPage ?? 0) + 1} {t('out-of')} {moderationData?.totalPages ?? 1}
|
||||
</strong>
|
||||
</span>
|
||||
<span className="pagination-info-files">
|
||||
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {tableData?.pagination?.totalElements ?? 0}
|
||||
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {moderationData?.totalCount ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -585,7 +421,7 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
|
||||
<div className="pagination-controls-pages">
|
||||
{(() => {
|
||||
const totalPages = tableData?.pagination?.totalPages;
|
||||
const totalPages = moderationData?.totalPages;
|
||||
if (!totalPages || totalPages === 0) return null;
|
||||
|
||||
const currentPageIndex = table.getState().pagination.pageIndex;
|
||||
@@ -626,7 +462,7 @@ export default function ContentModerationTable({ permission }: { permission: num
|
||||
<IconDoubleArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user