101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
|
|
import CaseLegal from '@/app/ui/file-page/violation-table/case-legal';
|
|
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
|
|
import { MatchStatus } from '@/app/actions/violationActions';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;
|
|
|
|
const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
|
|
|
|
type TabType = 'complaint' | 'legal'
|
|
|
|
export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
|
|
const [activeTab, setActiveTab] = useState<TabType>('complaint');
|
|
const [showTabs, setShowTabs] = useState(false);
|
|
const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);
|
|
|
|
const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
|
|
|
|
useEffect(() => {
|
|
setLocalViolation(selectedViolation);
|
|
}, [selectedViolation]);
|
|
|
|
useEffect(() => {
|
|
console.log(localViolation.status);
|
|
}, [localViolation]);
|
|
|
|
useEffect(() => {
|
|
setShowTabs(false);
|
|
}, [localViolation.id]);
|
|
|
|
if (!isInWork && !showTabs) {
|
|
return (
|
|
<div className="violation-info-choice">
|
|
<h4>Вы можете</h4>
|
|
<div className="violation-info-choice-buttons">
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => {
|
|
setShowTabs(true);
|
|
setActiveTab('complaint');
|
|
}}
|
|
>
|
|
Подать жалобу
|
|
</button>
|
|
|
|
<span>
|
|
или
|
|
</span>
|
|
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => {
|
|
setShowTabs(true);
|
|
setActiveTab('legal');
|
|
}}
|
|
>
|
|
Подать притензию
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="violation-info-tabs-wrapper">
|
|
<div className="violation-info-tabs">
|
|
<button
|
|
className={`btn-s btn-primary ${activeTab === 'complaint' ? 'active' : ''} ${localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
|
|
onClick={() => setActiveTab('complaint')}
|
|
>
|
|
{localViolation.status === 'COMPLAINT_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Жалоба' : 'Подать жалобу'}
|
|
</button>
|
|
<button
|
|
className={`btn-s btn-primary ${activeTab === 'legal' ? 'active' : ''} ${localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? '' : 'action'}`}
|
|
onClick={() => setActiveTab('legal')}
|
|
>
|
|
{localViolation.status === 'LEGAL_IN_WORK' || localViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Претензия' : 'Подать претензию'}
|
|
</button>
|
|
</div>
|
|
<div className="violation-info-content">
|
|
{activeTab === 'complaint' && (
|
|
<CaseComplaint
|
|
key={"complaint_" + localViolation.id}
|
|
selectedViolation={localViolation}
|
|
updateStatusHandler={updateStatusHandler}
|
|
/>
|
|
)}
|
|
{activeTab === 'legal' && (
|
|
<CaseLegal
|
|
key={"legal_" + localViolation.id}
|
|
selectedViolation={localViolation}
|
|
updateStatusHandler={updateStatusHandler}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |