95 lines
2.7 KiB
TypeScript
95 lines
2.7 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);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
console.log(selectedViolation.status);
|
||
|
|
}, [selectedViolation]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setShowTabs(false);
|
||
|
|
}, [selectedViolation.id]);
|
||
|
|
|
||
|
|
if (!isInWork && !showTabs) {
|
||
|
|
return (
|
||
|
|
<div className="violation-info-choice">
|
||
|
|
<h4>Вы можете</h4>
|
||
|
|
<div className="violation-info-choice-buttons">
|
||
|
|
<button
|
||
|
|
className="violation-info-choice-btn"
|
||
|
|
onClick={() => {
|
||
|
|
setShowTabs(true);
|
||
|
|
setActiveTab('complaint');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Подать жалобу
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span>
|
||
|
|
или
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="violation-info-choice-btn"
|
||
|
|
onClick={() => {
|
||
|
|
setShowTabs(true);
|
||
|
|
setActiveTab('legal');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Подать притензию
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="violation-info-tabs-wrapper">
|
||
|
|
<div className="violation-info-tabs">
|
||
|
|
<button
|
||
|
|
className={`violation-info-tab ${activeTab === 'complaint' ? 'violation-info-tab--active' : ''}`}
|
||
|
|
onClick={() => setActiveTab('complaint')}
|
||
|
|
>
|
||
|
|
Жалоба
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
className={`violation-info-tab ${activeTab === 'legal' ? 'violation-info-tab--active' : ''}`}
|
||
|
|
onClick={() => setActiveTab('legal')}
|
||
|
|
>
|
||
|
|
Претензия
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="violation-info-content">
|
||
|
|
{activeTab === 'complaint' && (
|
||
|
|
<CaseComplaint
|
||
|
|
key={"complaint_" + selectedViolation.id}
|
||
|
|
selectedViolation={selectedViolation}
|
||
|
|
updateStatusHandler={updateStatusHandler}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{activeTab === 'legal' && (
|
||
|
|
<CaseLegal
|
||
|
|
key={"legal_" + selectedViolation.id}
|
||
|
|
selectedViolation={selectedViolation}
|
||
|
|
updateStatusHandler={updateStatusHandler}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|