hamid zarghami
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { type FC, useEffect, useState } from "react";
|
|
import DefaulModal from "../../../../components/DefaulModal";
|
|
import type { Task } from "../../types";
|
|
import AttachmentList from "./attachment/List";
|
|
import CheckLists from "./checklist/List";
|
|
import TaskDetailDescription from "./TaskDetailDescription";
|
|
import TaskDetailHeader from "./TaskDetailHeader";
|
|
import TaskDetailToolbar from "./TaskDetailToolbar";
|
|
import type { TaskDetailTab } from "./types";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
task: Task | null;
|
|
statusLabel: string;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
|
|
const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
|
|
const [description, setDescription] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
setActiveTab(null);
|
|
setDescription("");
|
|
}
|
|
}, [open]);
|
|
|
|
const handleTabChange = (tab: TaskDetailTab) => {
|
|
setActiveTab((prev) => (prev === tab ? null : tab));
|
|
};
|
|
|
|
if (!task) return null;
|
|
|
|
return (
|
|
<DefaulModal open={open} close={onClose} width={680}>
|
|
<TaskDetailHeader statusLabel={statusLabel} onClose={onClose} />
|
|
|
|
<h2 className="mt-6 text-sm font-bold">{task.title}</h2>
|
|
|
|
<div className="mt-4">
|
|
<TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} />
|
|
</div>
|
|
|
|
<TaskDetailDescription value={description} onChange={setDescription} />
|
|
|
|
<AttachmentList />
|
|
|
|
<CheckLists />
|
|
</DefaulModal>
|
|
);
|
|
};
|
|
|
|
export default TaskDetailModal;
|