Abdujamol
/
taskboard
mirror of https://github.com/etoyowimura/taskboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add task modal edit

Browse Source
dilmurod
Dilmurod 1 month ago
parent 3d09dd1897
commit 0b69b9f04f
4 changed files with 97 additions and 62 deletions
Show Stats Download Patch File Download Diff File

2
src/App.tsx
Unescape View File

@ -304,7 +304,7 @@ const App: React.FC = () => {
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
if (window.innerWidth <= 768) { if (window.innerWidth <= 1000) {
setCollapsed(true); setCollapsed(true);
} else { } else {
setCollapsed(false); setCollapsed(false);

25
src/Components/Tasks/AddTask.tsx
Unescape View File

@ -183,7 +183,7 @@ const AddTask = ({
<AddDriver id={companyId} open={driverOpen} setOpen={setDriverOpen} /> <AddDriver id={companyId} open={driverOpen} setOpen={setDriverOpen} />
<Modal <Modal
open={open} open={open}
width={720} width={600}
title="Add task" title="Add task"
okText="Create" okText="Create"
cancelText="Cancel" cancelText="Cancel"
@ -281,6 +281,7 @@ const AddTask = ({
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
marginTop: 5, marginTop: 5,
marginLeft: 3,
}} }}
disabled={!companyId} disabled={!companyId}
> >
@ -290,7 +291,17 @@ const AddTask = ({
</div> </div>
</Col> </Col>
<Col span={12}> <Col span={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={24}>
<FormAnt.Item <FormAnt.Item
label="Assigned to" label="Assigned to"
name="assigned_to_id" name="assigned_to_id"
@ -314,16 +325,6 @@ const AddTask = ({
</FormAnt.Item> </FormAnt.Item>
</Col> </Col>
<Col span={12}>
<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 : 12}> <Col span={isMobile ? 12 : 12}>
<FormAnt.Item <FormAnt.Item
label="Status" label="Status"

98
src/Components/Tasks/TaskModal.tsx
Unescape View File

@ -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)",
}} }}

34
src/Components/Tasks/TaskTable.tsx
Unescape View File

@ -327,24 +327,40 @@ const TaskTable = ({
{ {
title: "Created at", title: "Created at",
dataIndex: "created", dataIndex: "created",
width: "12%", width: "15%",
key: "10", key: "10",
responsive: ["xxl"], // responsive: ["xxl"],
ellipsis: { ellipsis: {
showTitle: false, showTitle: false,
}, },
render: (note: string) => ( render: (note: string, record: TTask) => (
<Tooltip placement="topLeft" title={note}> <div
{note} style={{
</Tooltip> display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 10,
}}
>
<Tooltip placement="topLeft" title={note}>
{note}
</Tooltip>
<div>
{record?.via_telegram && (
<Tooltip placement="topLeft" title={"Created via Telegram"}>
<img src={tgIcon} alt="" style={{ width: 20, height: 20 }} />
</Tooltip>
)}
</div>
</div>
), ),
}, },
{ {
title: "Actions", title: "Actions",
dataIndex: "action", dataIndex: "action",
width: isMobile ? "3%" : "10%", width: "10%",
key: "11", key: "11",
fixed: isMobile ? "right" : false, fixed: "right",
render: (text: string, record: TTask) => { render: (text: string, record: TTask) => {
return ( return (
<div style={{ zIndex: 1000 }}> <div style={{ zIndex: 1000 }}>
@ -429,7 +445,7 @@ const TaskTable = ({
columns={columns as any} columns={columns as any}
loading={isLoading} loading={isLoading}
rowClassName={rowClassName} rowClassName={rowClassName}
scroll={{ x: "768px" }} scroll={{ x: "800px" }}
bordered bordered
// pagination={{ // pagination={{
// pageSize: 10, // pageSize: 10,

Write Preview
Loading…
Cancel
Save