You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
450 lines
14 KiB
450 lines
14 KiB
import {
|
|
Modal,
|
|
Form as FormAnt,
|
|
Select,
|
|
Upload,
|
|
Switch,
|
|
Button,
|
|
Radio,
|
|
RadioChangeEvent,
|
|
Row,
|
|
Col,
|
|
} from "antd";
|
|
import { taskController } from "../../API/LayoutApi/tasks";
|
|
import { useEffect, useState } from "react";
|
|
import { useServiceData } from "../../Hooks/Services";
|
|
import { UploadOutlined } from "@ant-design/icons";
|
|
import { useTeamData } from "../../Hooks/Teams";
|
|
import { useCustomerByComanyData } from "../../Hooks/Customers";
|
|
// @ts-ignore
|
|
import zippy from "../../assets/zippyicon.svg";
|
|
// @ts-ignore
|
|
import evo from "../../assets/evoicon.png";
|
|
// @ts-ignore
|
|
import zeelog from "../../assets/zeelogicon.svg";
|
|
// @ts-ignore
|
|
import ontime from "../../assets/ontimeicon.svg";
|
|
// @ts-ignore
|
|
import tt from "../../assets/tticon.svg";
|
|
//@ts-ignore
|
|
import addicon from "../../assets/addiconpng.png";
|
|
import AddCustomer from "../Customers/AddCustomer";
|
|
import AddDriver from "../Companies/AddDriver";
|
|
import TextArea from "antd/es/input/TextArea";
|
|
import { isMobile } from "../../App";
|
|
import { companyController } from "../../API/LayoutApi/companies";
|
|
import { TCompany } from "../../types/Company/TCompany";
|
|
import { customerController } from "../../API/LayoutApi/customers";
|
|
import { TCustomer } from "../../types/Customer/TCustomer";
|
|
|
|
const { Option } = Select;
|
|
const AddTask = ({
|
|
open,
|
|
setOpen,
|
|
}: {
|
|
open: boolean;
|
|
setOpen(open: boolean): void;
|
|
}) => {
|
|
const [form] = FormAnt.useForm();
|
|
|
|
const handleCancel = () => {
|
|
setOpen(!open);
|
|
};
|
|
const [fileIds, setFileIds] = useState([]);
|
|
const [searchCompanyName, setSearchCompanyName] = useState<string>("");
|
|
const [customerName, setCustomerName] = useState<string>();
|
|
const [companyId, setCompanyId] = useState<number>();
|
|
const [driverOpen, setDriverOpen] = useState(false);
|
|
const [openDrive, setOpenDrive] = useState(false);
|
|
const [companyData, setCompanyData] = useState<TCompany[]>();
|
|
const [customerData, setCustomerData] = useState<TCustomer[]>();
|
|
const ServiceData = useServiceData();
|
|
const TeamData = useTeamData({});
|
|
|
|
// company and driver search
|
|
useEffect(() => {
|
|
companyController
|
|
.readPaginated({ name: searchCompanyName, page: 1, page_size: 3 })
|
|
.then((data) => {
|
|
setCompanyData(data.data);
|
|
});
|
|
}, [searchCompanyName]);
|
|
// const customerData = useCustomerByComanyData(
|
|
// { name: customerName, page: 1, page_size: 5 },
|
|
// companyId
|
|
// );
|
|
// console.log(customerData.data);
|
|
|
|
// team select
|
|
useEffect(() => {
|
|
if (companyId) {
|
|
const selectedCompany = companyData?.find(
|
|
(item) => item.id === companyId
|
|
);
|
|
form.setFieldsValue({
|
|
assigned_to_id: selectedCompany?.team?.id || undefined,
|
|
});
|
|
customerController
|
|
.customerByCompany(
|
|
{
|
|
name: customerName,
|
|
page: 1,
|
|
page_size: 5,
|
|
},
|
|
companyId
|
|
)
|
|
.then((data) => {
|
|
setCustomerData(data.data);
|
|
});
|
|
}
|
|
}, [companyId]);
|
|
|
|
// service select
|
|
const serviceOptions = ServiceData?.data?.map((item) => ({
|
|
label: item?.title,
|
|
value: item?.id,
|
|
}));
|
|
const sortByLabel = (a: any, b: any) => {
|
|
if (a.label === "Shift") return -1;
|
|
if (b.label === "Shift") return 1;
|
|
return 0;
|
|
};
|
|
|
|
const noteOptions = [
|
|
{ label: "No", value: "" },
|
|
{ label: "Empty", value: "Empty" },
|
|
{ label: "Bobtail", value: "Bobtail" },
|
|
];
|
|
const [note, setNote] = useState("");
|
|
const onChange = ({ target: { value } }: RadioChangeEvent) => {
|
|
setNote(value);
|
|
};
|
|
const noteOptions2 = [
|
|
{ label: "No", value: "" },
|
|
{ label: "+1 soat", value: "+1 soat" },
|
|
{ label: "+3 soat", value: "+3 soat" },
|
|
];
|
|
const [note2, setNote2] = useState("");
|
|
const onChange2 = ({ target: { value } }: RadioChangeEvent) => {
|
|
setNote2(value);
|
|
};
|
|
const [text, setText] = useState("");
|
|
const changeText = (e: any) => {
|
|
setText(e.target.value);
|
|
};
|
|
|
|
function handlePaste(event: any) {
|
|
const clipboardData = event.clipboardData || window.Clipboard;
|
|
if (clipboardData && clipboardData.items.length > 0) {
|
|
const clipboardItem = clipboardData.items[0];
|
|
if (clipboardItem.kind === "file") {
|
|
const file = clipboardItem.getAsFile();
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
taskController
|
|
.addTaskFile({ files: [file] })
|
|
.then((response) => {
|
|
const fileId = response.id;
|
|
setFileIds((prevFileIds): any => [...prevFileIds, fileId]);
|
|
const updatedValues = form.getFieldsValue();
|
|
updatedValues.attachment_ids = [
|
|
...updatedValues.attachment_ids,
|
|
fileId,
|
|
];
|
|
form.setFieldsValue(updatedValues);
|
|
})
|
|
.catch((error) => {});
|
|
}
|
|
}
|
|
}
|
|
|
|
const getImageSource = (source: string) => {
|
|
switch (source) {
|
|
case "Zippy":
|
|
return zippy;
|
|
case "EVO":
|
|
return evo;
|
|
case "Ontime":
|
|
return ontime;
|
|
case "Zeelog":
|
|
return zeelog;
|
|
case "TT":
|
|
return tt;
|
|
default:
|
|
return tt;
|
|
}
|
|
};
|
|
return (
|
|
<div onPaste={(event) => handlePaste(event)}>
|
|
{openDrive && <AddCustomer open={openDrive} setOpen={setOpenDrive} />}
|
|
<AddDriver id={companyId} open={driverOpen} setOpen={setDriverOpen} />
|
|
<Modal
|
|
open={open}
|
|
width={600}
|
|
title="Add task"
|
|
okText="Create"
|
|
cancelText="Cancel"
|
|
onCancel={handleCancel}
|
|
onOk={() => {
|
|
form.validateFields().then(async (values) => {
|
|
values.attachment_ids = fileIds;
|
|
values.note =
|
|
(text ? text + ", " : "") +
|
|
(note ? note + ", " : "") +
|
|
(note2 ? note2 + ", " : "");
|
|
form.resetFields();
|
|
await taskController.addTaskController(values);
|
|
setOpen(!open);
|
|
});
|
|
}}
|
|
>
|
|
<FormAnt
|
|
form={form}
|
|
layout={isMobile ? "vertical" : "horizontal"}
|
|
name="form_in_modal"
|
|
initialValues={{ modifier: "public" }}
|
|
>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={24}>
|
|
<FormAnt.Item
|
|
label="Company"
|
|
name="company_id"
|
|
rules={[{ required: true, message: "Please input company!" }]}
|
|
>
|
|
<Select
|
|
showSearch
|
|
placeholder="Search Company"
|
|
onSearch={(value: any) => setSearchCompanyName(value)}
|
|
options={companyData?.map((item) => ({
|
|
label: (
|
|
<div>
|
|
{item?.source && (
|
|
<img
|
|
style={{ width: 15, height: 20, paddingTop: 7 }}
|
|
src={getImageSource(item?.source)}
|
|
alt=""
|
|
/>
|
|
)}{" "}
|
|
{item?.name}
|
|
</div>
|
|
),
|
|
value: item?.id,
|
|
}))}
|
|
value={searchCompanyName}
|
|
filterOption={false}
|
|
autoClearSearchValue={false}
|
|
allowClear
|
|
onChange={(value: any) => setCompanyId(value)}
|
|
/>
|
|
</FormAnt.Item>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-around",
|
|
alignItems: isMobile ? "center" : "none",
|
|
}}
|
|
>
|
|
<FormAnt.Item
|
|
label="Driver"
|
|
name="customer_id"
|
|
style={{ width: "85%" }}
|
|
rules={[
|
|
{ required: true, message: "Please input service points!" },
|
|
]}
|
|
>
|
|
<Select
|
|
showSearch
|
|
placeholder="Search Driver"
|
|
onSearch={(value: any) => setCustomerName(value)}
|
|
options={customerData?.map((item) => ({
|
|
label: item?.name,
|
|
value: item?.id,
|
|
}))}
|
|
value={customerName}
|
|
filterOption={false}
|
|
autoClearSearchValue={false}
|
|
allowClear
|
|
/>
|
|
</FormAnt.Item>
|
|
<Button
|
|
onClick={(e) => setDriverOpen(true)}
|
|
type="primary"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
marginTop: isMobile ? 5 : 0,
|
|
}}
|
|
disabled={!companyId}
|
|
>
|
|
{isMobile && <img src={addicon} alt="" />}
|
|
{!isMobile && "Add"}
|
|
</Button>
|
|
</div>
|
|
</Col>
|
|
|
|
<Col span={isMobile ? 12 : 24}>
|
|
<FormAnt.Item
|
|
label="Service"
|
|
name="service_id"
|
|
rules={[{ required: true, message: "Please select service!" }]}
|
|
>
|
|
<Select options={serviceOptions?.sort(sortByLabel)} />
|
|
</FormAnt.Item>
|
|
</Col>
|
|
|
|
<Col span={isMobile ? 12 : 24}>
|
|
<FormAnt.Item
|
|
label="Assigned to"
|
|
name="assigned_to_id"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "Please select one of the teams!",
|
|
},
|
|
]}
|
|
>
|
|
<Select
|
|
placeholder="Teams"
|
|
options={TeamData?.data?.map((item) => ({
|
|
label: item?.name,
|
|
value: item?.id,
|
|
}))}
|
|
onChange={(value) =>
|
|
form.setFieldsValue({ assigned_to_id: value })
|
|
}
|
|
/>
|
|
</FormAnt.Item>
|
|
</Col>
|
|
|
|
<Col span={isMobile ? 12 : 12}>
|
|
<FormAnt.Item
|
|
label="Status"
|
|
name="status"
|
|
rules={[
|
|
{ required: false, message: "Please input service points!" },
|
|
]}
|
|
>
|
|
<Select defaultValue="New">
|
|
<Option value="New">New</Option>
|
|
<Option value="Checking">Checking</Option>
|
|
<Option value="Done">Done</Option>
|
|
</Select>
|
|
</FormAnt.Item>
|
|
</Col>
|
|
|
|
<Col span={isMobile ? 12 : 12}>
|
|
<FormAnt.Item
|
|
label="PTI"
|
|
name="pti"
|
|
rules={[
|
|
{ required: false, message: "Please input service points!" },
|
|
]}
|
|
>
|
|
<Switch />
|
|
</FormAnt.Item>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<FormAnt.Item
|
|
label="Note"
|
|
name="note"
|
|
rules={[
|
|
{ required: false, message: "Please input service points!" },
|
|
]}
|
|
>
|
|
<TextArea
|
|
style={{ padding: "7px 11px" }}
|
|
placeholder="note"
|
|
autoSize={{ minRows: isMobile ? 1 : 2, maxRows: 1 }}
|
|
onChange={changeText}
|
|
value={text}
|
|
/>
|
|
{!isMobile && (
|
|
<div
|
|
style={{
|
|
marginTop: 10,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Radio.Group
|
|
options={noteOptions}
|
|
onChange={onChange}
|
|
// value={value}
|
|
optionType="button"
|
|
defaultValue={""}
|
|
style={{ marginRight: 15 }}
|
|
/>
|
|
<Radio.Group
|
|
options={noteOptions2}
|
|
defaultValue={""}
|
|
onChange={onChange2}
|
|
// value={value}
|
|
optionType="button"
|
|
/>
|
|
</div>
|
|
)}
|
|
<br />
|
|
</FormAnt.Item>
|
|
</Col>
|
|
</Row>
|
|
</FormAnt>
|
|
<FormAnt>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={isMobile ? 6 : 24}>
|
|
<FormAnt.Item name="attachment">
|
|
<div>
|
|
<Upload.Dragger
|
|
name="file"
|
|
height={isMobile ? 100 : 150}
|
|
multiple={true}
|
|
customRequest={({ file, onSuccess }: any) => {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
taskController
|
|
.addTaskFile({ task_id: undefined, files: [file] })
|
|
.then((response) => {
|
|
const fileId = response.data.file_ids[0];
|
|
setFileIds((prevFileIds): any => [
|
|
...prevFileIds,
|
|
fileId,
|
|
]);
|
|
onSuccess();
|
|
});
|
|
}}
|
|
>
|
|
{!isMobile ? (
|
|
<p className={`ant-upload-drag-icon`}>
|
|
<UploadOutlined
|
|
style={{ color: "rgba(249, 158, 44, 1)" }}
|
|
/>
|
|
</p>
|
|
) : (
|
|
<UploadOutlined />
|
|
)}
|
|
{!isMobile && (
|
|
<p
|
|
className="ant-upload-text"
|
|
style={{ color: "rgba(249, 158, 44, 1)" }}
|
|
>
|
|
Click or drag a file here to upload (only .jpeg .jpg
|
|
.png .pdf)
|
|
</p>
|
|
)}
|
|
</Upload.Dragger>
|
|
</div>
|
|
</FormAnt.Item>
|
|
</Col>
|
|
</Row>
|
|
</FormAnt>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddTask;
|