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(() => {
const handleResize = () => {
if (window.innerWidth <= 768) {
if (window.innerWidth <= 1000) {
setCollapsed(true);
} else {
setCollapsed(false);

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

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

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

@ -1,13 +1,5 @@
import { TTask } from "../../types/Tasks/TTasks";
import {
Dropdown,
MenuProps,
Modal,
Table,
Tabs,
Tooltip,
message,
} from "antd";
import { Dropdown, MenuProps, Modal, Table, Tabs, Tooltip, theme } from "antd";
import TabPane from "antd/es/tabs/TabPane";
import { role, timeZone } from "../../App";
import { useTaskHistory } from "../../Hooks/Tasks";
@ -16,7 +8,11 @@ import { useEffect, useState } from "react";
import { taskController } from "../../API/LayoutApi/tasks";
import { useTeamData } from "../../Hooks/Teams";
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";
// @ts-ignore
import closeIcon from "../../assets/closeIcon.png";
@ -71,13 +67,15 @@ const TaskModal = ({
socketData: TSocket | undefined;
}) => {
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 [pti, setPti] = useState<boolean | undefined>(recordTask?.pti);
const [status, setStatus] = useState(recordTask?.status);
const [teamName, setTeamName] = useState(recordTask?.assigned_to?.name);
const { data, isLoading } = useTaskHistory(recordTask?.id);
const { token } = theme.useToken();
const handleCancel = () => {
setModalOpen(!modalOpen);
};
@ -211,13 +209,13 @@ const TaskModal = ({
onCancel={handleCancel}
footer={null}
open={modalOpen}
width={800}
width={700}
maskClosable={true}
// style={{ position: "fixed", right: 0, top: 0, bottom: 0, height: 1000 }}
>
<div className={!theme ? "TaskModal-header" : "TaskModal-header-dark"}>
<div className={!theme ? "TaskModal-title" : "TaskModal-title-dark"}>
<p className={!theme ? "p-driver" : "p-driver-dark"}>
<div className={!themes ? "TaskModal-header" : "TaskModal-header-dark"}>
<div className={!themes ? "TaskModal-title" : "TaskModal-title-dark"}>
<p className={!themes ? "p-driver" : "p-driver-dark"}>
{recordTask?.customer?.name}
</p>
<Dropdown
@ -227,7 +225,11 @@ const TaskModal = ({
disabled={role === "Checker" && status === "Done"}
>
<button
style={{ marginLeft: 12, display: "flex", alignItems: "center" }}
style={{
marginLeft: 12,
display: "flex",
alignItems: "center",
}}
className={`status-${status}`}
>
{status}
@ -247,16 +249,24 @@ const TaskModal = ({
>
<button
disabled={recordTask?.status !== "New"}
style={{ marginRight: 12 }}
className={`btn-modal-action-${theme && "dark"}`}
style={{
marginRight: 12,
color: token.colorText,
backgroundColor: token.colorBgContainer,
}}
className={`btn-modal-action-${themes && "dark"}`}
>
<img src={forwardIcon} alt="" />
Forward
</button>
</Dropdown>
<button
style={{ marginLeft: 12 }}
className={`btn-modal-action-${theme && "dark"}`}
style={{
marginLeft: 12,
color: token.colorText,
backgroundColor: token.colorBgContainer,
}}
className={`btn-modal-action-${themes && "dark"}`}
onClick={showUploadModal}
>
<img src={uploadIcon} alt="" />
@ -264,8 +274,12 @@ const TaskModal = ({
</button>
<button
onClick={handleCancel}
style={{ marginLeft: 20 }}
className={`btn-modal-action-${theme && "dark"}`}
style={{
marginLeft: 20,
color: token.colorText,
backgroundColor: token.colorBgContainer,
}}
className={`btn-modal-action-${themes && "dark"}`}
>
<img style={{ margin: 2 }} src={closeIcon} alt="" />
</button>
@ -301,36 +315,36 @@ const TaskModal = ({
</p>
<div className="info-body">
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Comapany</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>Comapany</p>
<p className={!themes ? "info" : "info-dark"}>
{recordTask?.company?.name}
</p>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Driver</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>Driver</p>
<p className={!themes ? "info" : "info-dark"}>
{recordTask?.customer?.name}
</p>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Service</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>Service</p>
<p className={!themes ? "info" : "info-dark"}>
{recordTask?.service?.title}
</p>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Team</p>
<p className={!theme ? "info" : "info-dark"}>{teamName}</p>
<p className={!themes ? "sub" : "sub-dark"}>Team</p>
<p className={!themes ? "info" : "info-dark"}>{teamName}</p>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Assignee</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>Assignee</p>
<p className={!themes ? "info" : "info-dark"}>
{recordTask?.in_charge?.username}
</p>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>PTI</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>PTI</p>
<p className={!themes ? "info" : "info-dark"}>
{pti === false ? "Do" : "No need"}
</p>
<button
@ -348,8 +362,8 @@ const TaskModal = ({
</button>
</tr>
<tr>
<p className={!theme ? "sub" : "sub-dark"}>Created at</p>
<p className={!theme ? "info" : "info-dark"}>
<p className={!themes ? "sub" : "sub-dark"}>Created at</p>
<p className={!themes ? "info" : "info-dark"}>
{moment(
recordTask?.created_at,
"YYYY-MM-DD HH:mm:ss"
@ -358,7 +372,7 @@ const TaskModal = ({
</tr>
</div>
<div style={{ marginTop: 20 }}>
<label className={!theme ? "sub" : "sub-dark"}>Note:</label>
<label className={!themes ? "sub" : "sub-dark"}>Note:</label>
<TextArea
style={{ padding: "7px 11px", marginTop: 10 }}
placeholder="Description"
@ -368,8 +382,12 @@ const TaskModal = ({
/>
</div>
<button
style={{ marginTop: 20 }}
className={`btn-modal-action-${theme && "dark"}`}
style={{
marginTop: 20,
color: token.colorText,
backgroundColor: token.colorBgContainer,
}}
className={`btn-modal-action-${themes && "dark"}`}
onClick={(e) => patchTask()}
>
<img src={editIcon} alt="" />
@ -495,7 +513,7 @@ const TaskModal = ({
alignItems: "center",
justifyContent: "space-between",
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)",
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",
dataIndex: "created",
width: "12%",
width: "15%",
key: "10",
responsive: ["xxl"],
// responsive: ["xxl"],
ellipsis: {
showTitle: false,
},
render: (note: string) => (
<Tooltip placement="topLeft" title={note}>
{note}
</Tooltip>
render: (note: string, record: TTask) => (
<div
style={{
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",
dataIndex: "action",
width: isMobile ? "3%" : "10%",
width: "10%",
key: "11",
fixed: isMobile ? "right" : false,
fixed: "right",
render: (text: string, record: TTask) => {
return (
<div style={{ zIndex: 1000 }}>
@ -429,7 +445,7 @@ const TaskTable = ({
columns={columns as any}
loading={isLoading}
rowClassName={rowClassName}
scroll={{ x: "768px" }}
scroll={{ x: "800px" }}
bordered
// pagination={{
// pageSize: 10,

Write Preview
Loading…
Cancel
Save