add complain registration, add view complaint inforation, add status change for marches when user click on mat
This commit is contained in:
smanylov
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||||
import { useActionState, useEffect, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActions';
|
||||
import { toast } from 'sonner';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
interface complaintInfo {
|
||||
id: number,
|
||||
status: string,
|
||||
complaint_text: string,
|
||||
violation_id: number,
|
||||
email: string,
|
||||
created_at: string,
|
||||
updated_at: string,
|
||||
not_moderated: boolean
|
||||
}
|
||||
|
||||
export default function CaseComplaint({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
|
||||
const [showCreateCase, setShowCreateCase] = useState(false);
|
||||
const t = useTranslations('Global');
|
||||
const [state, formAction, isPending] = useActionState(createComplaint, undefined);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
|
||||
queryKey: ['complainInfo', selectedViolation.id],
|
||||
queryFn: () => fetchComplainInfo(selectedViolation.id),
|
||||
select: (data) => {
|
||||
if (data) {
|
||||
return data
|
||||
}
|
||||
},
|
||||
enabled: selectedViolation.status !== 'NEW' &&
|
||||
selectedViolation.status !== 'CREATED' &&
|
||||
selectedViolation.status !== 'SHOWED',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (state?.success) {
|
||||
toast.success('Жалоба зарегистрирована');
|
||||
queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['complainInfo', selectedViolation.id] });
|
||||
} else if (state && !state.success) {
|
||||
toast.warning('Жалоба не зарегистрирована');
|
||||
}
|
||||
}, [state, queryClient, selectedViolation.id]);
|
||||
|
||||
function toggleForm() {
|
||||
setShowCreateCase(!showCreateCase);
|
||||
}
|
||||
|
||||
if (selectedViolation.status === 'NEW' || selectedViolation.status === 'CREATED' || selectedViolation.status === 'SHOWED') {
|
||||
return (
|
||||
<div className="violation-info-case">
|
||||
{!showCreateCase ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-action btn-case"
|
||||
onClick={toggleForm}
|
||||
>
|
||||
Подача жалобы
|
||||
</button>
|
||||
) : (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-action btn-case"
|
||||
onClick={toggleForm}
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
|
||||
<div className="note-form">
|
||||
<form action={formAction}>
|
||||
<input type="hidden" name="violationId" value={selectedViolation.id} />
|
||||
<textarea
|
||||
name="note"
|
||||
className="note-textarea"
|
||||
placeholder="Текст нарушения...">
|
||||
</textarea>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-small btn-primary-small"
|
||||
disabled={isPending}
|
||||
>
|
||||
Отправить нарушение
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (isLoadingComplain) {
|
||||
return (
|
||||
<div className="violation-info-case">
|
||||
<div>Загрузка...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="violation-info-case">
|
||||
{complainInfo?.body.content ? (
|
||||
|
||||
<div>
|
||||
{complainInfo.body.content.map((item: complaintInfo) => {
|
||||
return (
|
||||
<div key={item.id}>
|
||||
<h3
|
||||
className="mb-3"
|
||||
>
|
||||
Информация о жалобе
|
||||
</h3>
|
||||
<div className="complaint-details">
|
||||
<p><strong>ID:</strong> {item.id}</p>
|
||||
<p><strong>Статус:</strong> {item.status}</p>
|
||||
<p><strong>Текст жалобы:</strong> {item.complaint_text}</p>
|
||||
<p><strong>ID нарушения:</strong> {item.violation_id}</p>
|
||||
<p><strong>Email:</strong> {item.email}</p>
|
||||
<p><strong>Дата создания:</strong> {item.created_at}</p>
|
||||
<p><strong>Дата обновления:</strong> {item.updated_at}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div>Нет информации о жалобе</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||||
|
||||
export default function CaseViolation({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="violation-info-case"
|
||||
>
|
||||
<button type="button" className="btn-action btn-case">
|
||||
Создание дела
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link';
|
||||
import { formatDate } from '@/app/lib/formatDate';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||||
import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
|
||||
import CaseViolation from '@/app/ui/file-page/violation-table/case-violation';
|
||||
import { updateMatchStatus } from '@/app/actions/violationActions';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
|
||||
const t = useTranslations('Global');
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
const updateStatus = async () => {
|
||||
if (selectedViolation && (selectedViolation.status === 'CREATED' || selectedViolation.status === 'NEW')) {
|
||||
const response = await updateMatchStatus(selectedViolation.id, 'SHOWED');
|
||||
if (response) {
|
||||
queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
updateStatus();
|
||||
}, [selectedViolation, queryClient]);
|
||||
|
||||
if (!selectedViolation) {
|
||||
return (
|
||||
<div>
|
||||
not found
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="violation-info"
|
||||
>
|
||||
<div
|
||||
className="violation-info-content"
|
||||
>
|
||||
<h3
|
||||
className="violation-info-title"
|
||||
>
|
||||
{selectedViolation?.page_title}
|
||||
</h3>
|
||||
|
||||
<div
|
||||
className="violation-info-header"
|
||||
>
|
||||
<div
|
||||
className="violation-info-image"
|
||||
>
|
||||
<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="violation-info-source"
|
||||
>
|
||||
<span>
|
||||
{t('source')}:
|
||||
</span>
|
||||
<Link
|
||||
href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
|
||||
className="source"
|
||||
target="_blank"
|
||||
scroll={false}
|
||||
>
|
||||
{selectedViolation?.page_url}
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="violation-info-source"
|
||||
>
|
||||
<span>
|
||||
{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{selectedViolation?.status}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="violation-info-case-grid"
|
||||
>
|
||||
<CaseComplaint selectedViolation={selectedViolation} />
|
||||
<CaseViolation selectedViolation={selectedViolation} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// app/ui/violations/file-page/violation-page-violations-list.tsx
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
|
||||
import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
|
||||
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
||||
|
||||
export default function FilePageViolationsList({
|
||||
currentPage,
|
||||
fileId
|
||||
}: {
|
||||
currentPage: number,
|
||||
fileId: string
|
||||
}) {
|
||||
const t = useTranslations('Global');
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
|
||||
const { data: fileViolations } = useFileViolations(fileId, currentPage);
|
||||
|
||||
if (!fileViolations?.violations) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
router.push(`${pathname}?page=${page}`, { scroll: false });
|
||||
};
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pages = [];
|
||||
const maxVisible = 5;
|
||||
const total = fileViolations.total_pages;
|
||||
|
||||
let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
|
||||
let end = Math.min(total, start + maxVisible - 1);
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
function selectHandler(violation: ViolationFileDetail) {
|
||||
setSelectedViolation(violation);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="block-wrapper">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">
|
||||
{t('all-file-violations')}
|
||||
</h3>
|
||||
<span>
|
||||
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="sources-list-wrapper"
|
||||
>
|
||||
<div className="sources-list">
|
||||
{fileViolations.violations.map(item => {
|
||||
return (
|
||||
<div
|
||||
className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
selectHandler(item);
|
||||
}}
|
||||
>
|
||||
{/* <div className="source-header">
|
||||
<div className="source-image">
|
||||
<img src={item.url} alt="" />
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
<div
|
||||
className="source-header-left"
|
||||
>
|
||||
<div className="source-image">
|
||||
<img src={item.url} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="source-meta"
|
||||
>
|
||||
{t('source')}:
|
||||
</span>
|
||||
<span className="source-url">
|
||||
{item.host}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="source-header-right"
|
||||
>
|
||||
<span className="source-status new">
|
||||
{item.status}
|
||||
</span>
|
||||
|
||||
<div className="source-actions">
|
||||
<Link
|
||||
href={item.page_url}
|
||||
className="btn-small btn-primary-small"
|
||||
target="_blank"
|
||||
scroll={false}
|
||||
>
|
||||
{t('open')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<FilePageViolationInfo selectedViolation={selectedViolation} />
|
||||
|
||||
</div>
|
||||
{fileViolations.total_pages > 1 && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
className="pagination-item pagination-item-prev"
|
||||
disabled={!fileViolations.has_previous}
|
||||
>
|
||||
{t('previous')}
|
||||
</button>
|
||||
|
||||
{getPageNumbers().map(pageNum => (
|
||||
<button
|
||||
key={pageNum}
|
||||
onClick={() => handlePageChange(pageNum)}
|
||||
className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
className="pagination-item pagination-item-next"
|
||||
disabled={!fileViolations.has_next}
|
||||
>
|
||||
{t('next')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user