|
|
|
@ -1,13 +1,5 @@
|
|
|
|
import { TTask } from "../../types/Tasks/TTasks";
|
|
|
|
import { TTask } from "../../types/Tasks/TTasks";
|
|
|
|
import {
|
|
|
|
import { Dropdown, MenuProps, Modal, Table, Tabs, Tooltip, theme } from "antd";
|
|
|
|
Dropdown,
|
|
|
|
|
|
|
|
MenuProps,
|
|
|
|
|
|
|
|
Modal,
|
|
|
|
|
|
|
|
Table,
|
|
|
|
|
|
|
|
Tabs,
|
|
|
|
|
|
|
|
Tooltip,
|
|
|
|
|
|
|
|
message,
|
|
|
|
|
|
|
|
} from "antd";
|
|
|
|
|
|
|
|
import TabPane from "antd/es/tabs/TabPane";
|
|
|
|
import TabPane from "antd/es/tabs/TabPane";
|
|
|
|
import { role, timeZone } from "../../App";
|
|
|
|
import { role, timeZone } from "../../App";
|
|
|
|
import { useTaskHistory } from "../../Hooks/Tasks";
|
|
|
|
import { useTaskHistory } from "../../Hooks/Tasks";
|
|
|
|
@ -16,7 +8,11 @@ import { useEffect, useState } from "react";
|
|
|
|
import { taskController } from "../../API/LayoutApi/tasks";
|
|
|
|
import { taskController } from "../../API/LayoutApi/tasks";
|
|
|
|
import { useTeamData } from "../../Hooks/Teams";
|
|
|
|
import { useTeamData } from "../../Hooks/Teams";
|
|
|
|
import { TTeam } from "../../types/Team/TTeam";
|
|
|
|
import { TTeam } from "../../types/Team/TTeam";
|
|
|
|
import { EditOutlined } from "@ant-design/icons";
|
|
|
|
import {
|
|
|
|
|
|
|
|
ArrowRightOutlined,
|
|
|
|
|
|
|
|
CaretRightOutlined,
|
|
|
|
|
|
|
|
EditOutlined,
|
|
|
|
|
|
|
|
} from "@ant-design/icons";
|
|
|
|
import { TSocket } from "../../types/common/TSocket";
|
|
|
|
import { TSocket } from "../../types/common/TSocket";
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
|
import closeIcon from "../../assets/closeIcon.png";
|
|
|
|
import closeIcon from "../../assets/closeIcon.png";
|
|
|
|
@ -71,13 +67,15 @@ const TaskModal = ({
|
|
|
|
socketData: TSocket | undefined;
|
|
|
|
socketData: TSocket | undefined;
|
|
|
|
}) => {
|
|
|
|
}) => {
|
|
|
|
const moment = require("moment-timezone");
|
|
|
|
const moment = require("moment-timezone");
|
|
|
|
const theme = localStorage.getItem("theme") === "true" ? true : false;
|
|
|
|
const themes = localStorage.getItem("theme") === "true" ? true : false;
|
|
|
|
const [text, setText] = useState<string | undefined>(recordTask?.note);
|
|
|
|
const [text, setText] = useState<string | undefined>(recordTask?.note);
|
|
|
|
const [pti, setPti] = useState<boolean | undefined>(recordTask?.pti);
|
|
|
|
const [pti, setPti] = useState<boolean | undefined>(recordTask?.pti);
|
|
|
|
const [status, setStatus] = useState(recordTask?.status);
|
|
|
|
const [status, setStatus] = useState(recordTask?.status);
|
|
|
|
const [teamName, setTeamName] = useState(recordTask?.assigned_to?.name);
|
|
|
|
const [teamName, setTeamName] = useState(recordTask?.assigned_to?.name);
|
|
|
|
const { data, isLoading } = useTaskHistory(recordTask?.id);
|
|
|
|
const { data, isLoading } = useTaskHistory(recordTask?.id);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { token } = theme.useToken();
|
|
|
|
|
|
|
|
|
|
|
|
const handleCancel = () => {
|
|
|
|
const handleCancel = () => {
|
|
|
|
setModalOpen(!modalOpen);
|
|
|
|
setModalOpen(!modalOpen);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -211,13 +209,13 @@ const TaskModal = ({
|
|
|
|
onCancel={handleCancel}
|
|
|
|
onCancel={handleCancel}
|
|
|
|
footer={null}
|
|
|
|
footer={null}
|
|
|
|
open={modalOpen}
|
|
|
|
open={modalOpen}
|
|
|
|
width={800}
|
|
|
|
width={700}
|
|
|
|
maskClosable={true}
|
|
|
|
maskClosable={true}
|
|
|
|
// style={{ position: "fixed", right: 0, top: 0, bottom: 0, height: 1000 }}
|
|
|
|
// style={{ position: "fixed", right: 0, top: 0, bottom: 0, height: 1000 }}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div className={!theme ? "TaskModal-header" : "TaskModal-header-dark"}>
|
|
|
|
<div className={!themes ? "TaskModal-header" : "TaskModal-header-dark"}>
|
|
|
|
<div className={!theme ? "TaskModal-title" : "TaskModal-title-dark"}>
|
|
|
|
<div className={!themes ? "TaskModal-title" : "TaskModal-title-dark"}>
|
|
|
|
<p className={!theme ? "p-driver" : "p-driver-dark"}>
|
|
|
|
<p className={!themes ? "p-driver" : "p-driver-dark"}>
|
|
|
|
{recordTask?.customer?.name}
|
|
|
|
{recordTask?.customer?.name}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<Dropdown
|
|
|
|
<Dropdown
|
|
|
|
@ -227,7 +225,11 @@ const TaskModal = ({
|
|
|
|
disabled={role === "Checker" && status === "Done"}
|
|
|
|
disabled={role === "Checker" && status === "Done"}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
style={{ marginLeft: 12, display: "flex", alignItems: "center" }}
|
|
|
|
style={{
|
|
|
|
|
|
|
|
marginLeft: 12,
|
|
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
|
|
|
}}
|
|
|
|
className={`status-${status}`}
|
|
|
|
className={`status-${status}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{status}
|
|
|
|
{status}
|
|
|
|
@ -247,16 +249,24 @@ const TaskModal = ({
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
disabled={recordTask?.status !== "New"}
|
|
|
|
disabled={recordTask?.status !== "New"}
|
|
|
|
style={{ marginRight: 12 }}
|
|
|
|
style={{
|
|
|
|
className={`btn-modal-action-${theme && "dark"}`}
|
|
|
|
marginRight: 12,
|
|
|
|
|
|
|
|
color: token.colorText,
|
|
|
|
|
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
className={`btn-modal-action-${themes && "dark"}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img src={forwardIcon} alt="" />
|
|
|
|
<img src={forwardIcon} alt="" />
|
|
|
|
Forward
|
|
|
|
Forward
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</Dropdown>
|
|
|
|
</Dropdown>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
style={{ marginLeft: 12 }}
|
|
|
|
style={{
|
|
|
|
className={`btn-modal-action-${theme && "dark"}`}
|
|
|
|
marginLeft: 12,
|
|
|
|
|
|
|
|
color: token.colorText,
|
|
|
|
|
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
className={`btn-modal-action-${themes && "dark"}`}
|
|
|
|
onClick={showUploadModal}
|
|
|
|
onClick={showUploadModal}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img src={uploadIcon} alt="" />
|
|
|
|
<img src={uploadIcon} alt="" />
|
|
|
|
@ -264,8 +274,12 @@ const TaskModal = ({
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
onClick={handleCancel}
|
|
|
|
onClick={handleCancel}
|
|
|
|
style={{ marginLeft: 20 }}
|
|
|
|
style={{
|
|
|
|
className={`btn-modal-action-${theme && "dark"}`}
|
|
|
|
marginLeft: 20,
|
|
|
|
|
|
|
|
color: token.colorText,
|
|
|
|
|
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
className={`btn-modal-action-${themes && "dark"}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img style={{ margin: 2 }} src={closeIcon} alt="" />
|
|
|
|
<img style={{ margin: 2 }} src={closeIcon} alt="" />
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
@ -301,36 +315,36 @@ const TaskModal = ({
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<div className="info-body">
|
|
|
|
<div className="info-body">
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Comapany</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Comapany</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{recordTask?.company?.name}
|
|
|
|
{recordTask?.company?.name}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Driver</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Driver</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{recordTask?.customer?.name}
|
|
|
|
{recordTask?.customer?.name}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Service</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Service</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{recordTask?.service?.title}
|
|
|
|
{recordTask?.service?.title}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Team</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Team</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>{teamName}</p>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>{teamName}</p>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Assignee</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Assignee</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{recordTask?.in_charge?.username}
|
|
|
|
{recordTask?.in_charge?.username}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>PTI</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>PTI</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{pti === false ? "Do" : "No need"}
|
|
|
|
{pti === false ? "Do" : "No need"}
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
@ -348,8 +362,8 @@ const TaskModal = ({
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<p className={!theme ? "sub" : "sub-dark"}>Created at</p>
|
|
|
|
<p className={!themes ? "sub" : "sub-dark"}>Created at</p>
|
|
|
|
<p className={!theme ? "info" : "info-dark"}>
|
|
|
|
<p className={!themes ? "info" : "info-dark"}>
|
|
|
|
{moment(
|
|
|
|
{moment(
|
|
|
|
recordTask?.created_at,
|
|
|
|
recordTask?.created_at,
|
|
|
|
"YYYY-MM-DD HH:mm:ss"
|
|
|
|
"YYYY-MM-DD HH:mm:ss"
|
|
|
|
@ -358,7 +372,7 @@ const TaskModal = ({
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style={{ marginTop: 20 }}>
|
|
|
|
<div style={{ marginTop: 20 }}>
|
|
|
|
<label className={!theme ? "sub" : "sub-dark"}>Note:</label>
|
|
|
|
<label className={!themes ? "sub" : "sub-dark"}>Note:</label>
|
|
|
|
<TextArea
|
|
|
|
<TextArea
|
|
|
|
style={{ padding: "7px 11px", marginTop: 10 }}
|
|
|
|
style={{ padding: "7px 11px", marginTop: 10 }}
|
|
|
|
placeholder="Description"
|
|
|
|
placeholder="Description"
|
|
|
|
@ -368,8 +382,12 @@ const TaskModal = ({
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
style={{ marginTop: 20 }}
|
|
|
|
style={{
|
|
|
|
className={`btn-modal-action-${theme && "dark"}`}
|
|
|
|
marginTop: 20,
|
|
|
|
|
|
|
|
color: token.colorText,
|
|
|
|
|
|
|
|
backgroundColor: token.colorBgContainer,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
className={`btn-modal-action-${themes && "dark"}`}
|
|
|
|
onClick={(e) => patchTask()}
|
|
|
|
onClick={(e) => patchTask()}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<img src={editIcon} alt="" />
|
|
|
|
<img src={editIcon} alt="" />
|
|
|
|
@ -495,7 +513,7 @@ const TaskModal = ({
|
|
|
|
alignItems: "center",
|
|
|
|
alignItems: "center",
|
|
|
|
justifyContent: "space-between",
|
|
|
|
justifyContent: "space-between",
|
|
|
|
borderRadius: 8,
|
|
|
|
borderRadius: 8,
|
|
|
|
color: !theme ? "rgba(15, 17, 28, 1)" : "#bbb",
|
|
|
|
color: !themes ? "rgba(15, 17, 28, 1)" : "#bbb",
|
|
|
|
border: "1px solid rgba(215, 216, 224, 1)",
|
|
|
|
border: "1px solid rgba(215, 216, 224, 1)",
|
|
|
|
boxShadow: "0px 1px 3px 0px rgba(20, 22, 41, 0.1)",
|
|
|
|
boxShadow: "0px 1px 3px 0px rgba(20, 22, 41, 0.1)",
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
|
Dilmurod