danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete task and update task

Browse Source
This commit is contained in:
hamid zarghami
2026-07-11 11:58:49 +03:30
parent 833ac2446f
commit c4150ab8ac
10 changed files with 306 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+3
View File
@@ -1009,6 +1009,9 @@
"add_new_task": "اضافه کردن تسک",
"add_task": "اضافه کردن",
"task_title": "عنوان تسک",
"delete_task": "حذف تسک",
"delete_task_confirm": "آیا از حذف این تسک اطمینان دارید؟",
"task_deleted": "تسک با موفقیت حذف شد",
"task_detail": {
"labels": "برچسب ها",
"user_management": "مدیریت کاربران",
src/pages/taskmanager/components/task-detail/TaskDetailDescription.tsx
+3 -1
View File
@@ -4,9 +4,10 @@ import { useTranslation } from "react-i18next";
type Props = {
value?: string;
onChange?: (value: string) => void;
onBlur?: () => void;
};
const TaskDetailDescription: FC<Props> = ({ value = "", onChange }) => {
const TaskDetailDescription: FC<Props> = ({ value = "", onChange, onBlur }) => {
const { t } = useTranslation("global");
return (
@@ -15,6 +16,7 @@ const TaskDetailDescription: FC<Props> = ({ value = "", onChange }) => {
<textarea
value={value}
onChange={(e) => onChange?.(e.target.value)}
onBlur={onBlur}
placeholder={t("taskmanager.task_detail.description_placeholder")}
rows={5}
className="w-full bg-white/25 rounded-xl px-4 py-3 text-xs outline-none resize-none placeholder:text-description"
src/pages/taskmanager/components/task-detail/TaskDetailHeader.tsx
+9 -1
View File
@@ -1,12 +1,15 @@
import { ArrowDown2, CloseCircle } from "iconsax-react";
import { type FC } from "react";
import TrashWithConfrim from "../../../../components/TrashWithConfrim";
type Props = {
statusLabel: string;
onClose: () => void;
onDelete?: () => void;
isDeleting?: boolean;
};
const TaskDetailHeader: FC<Props> = ({ statusLabel, onClose }) => {
const TaskDetailHeader: FC<Props> = ({ statusLabel, onClose, onDelete, isDeleting }) => {
return (
<div className="flex items-center justify-between border-b border-border pb-4">
<button type="button" className="flex items-center gap-1.5 bg-white/60 rounded-full px-4 py-2 text-xs font-medium cursor-pointer">
@@ -15,6 +18,11 @@ const TaskDetailHeader: FC<Props> = ({ statusLabel, onClose }) => {
</button>
<div className="flex items-center gap-2">
{onDelete ? (
<div className="size-8 rounded-full bg-white/60 flex items-center justify-center">
<TrashWithConfrim onDelete={onDelete} isLoading={isDeleting} color="#FF0000" />
</div>
) : null}
<button type="button" onClick={onClose} className="size-8 rounded-full bg-white/60 flex items-center justify-center cursor-pointer" aria-label="بستن">
<CloseCircle size={20} color="#292D32" />
</button>
src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx
+104 -9
View File
@@ -1,5 +1,11 @@
import { type FC, useEffect, useState } from "react";
import { type FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import DefaulModal from "../../../../components/DefaulModal";
import PageLoading from "../../../../components/PageLoading";
import { ErrorType } from "../../../../helpers/types";
import { useDeleteTask, useGetTaskDetail, useUpdateTask } from "../../task/hooks/useTaskData";
import type { TaskDetailType } from "../../task/types/TaskTypes";
import type { Task } from "../../types";
import AttachmentList from "./attachment/List";
import CheckLists from "./checklist/List";
@@ -16,37 +22,126 @@ type Props = {
};
const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
const { t } = useTranslation("global");
const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const initialTitleRef = useRef("");
const initialDescriptionRef = useRef("");
const getTaskDetail = useGetTaskDetail(task?.id ?? "", open && !!task?.id);
const updateTask = useUpdateTask();
const deleteTask = useDeleteTask();
const taskDetail: TaskDetailType | undefined =
getTaskDetail.data?.data?.task ?? getTaskDetail.data?.data;
useEffect(() => {
if (!open) {
setActiveTab(null);
setTitle("");
setDescription("");
initialTitleRef.current = "";
initialDescriptionRef.current = "";
}
}, [open]);
useEffect(() => {
if (!taskDetail) return;
setTitle(taskDetail.title);
setDescription(taskDetail.description ?? "");
initialTitleRef.current = taskDetail.title;
initialDescriptionRef.current = taskDetail.description ?? "";
}, [taskDetail]);
const handleTabChange = (tab: TaskDetailTab) => {
setActiveTab((prev) => (prev === tab ? null : tab));
};
const handleDelete = () => {
if (!task?.id) return;
deleteTask.mutate(
{ id: task.id, projectId: taskDetail?.projectId ?? "" },
{
onSuccess: () => {
toast.success(t("taskmanager.task_deleted"));
onClose();
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0]);
},
},
);
};
const saveField = (field: "title" | "description", value: string) => {
if (!task?.id) return;
const initialValue = field === "title" ? initialTitleRef.current : initialDescriptionRef.current;
if (value === initialValue) return;
updateTask.mutate(
{ id: task.id, params: { [field]: value } },
{
onSuccess: () => {
if (field === "title") {
initialTitleRef.current = value;
} else {
initialDescriptionRef.current = value;
}
toast.success(t("success"));
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0]);
if (field === "title") {
setTitle(initialTitleRef.current);
} else {
setDescription(initialDescriptionRef.current);
}
},
},
);
};
if (!task) return null;
return (
<DefaulModal open={open} close={onClose} width={680}>
<TaskDetailHeader statusLabel={statusLabel} onClose={onClose} />
{getTaskDetail.isPending ? (
<PageLoading />
) : (
<>
<TaskDetailHeader
statusLabel={statusLabel}
onClose={onClose}
onDelete={handleDelete}
isDeleting={deleteTask.isPending}
/>
<h2 className="mt-6 text-sm font-bold">{task.title}</h2>
<input
value={title}
onChange={(e) => setTitle(e.target.value)}
onBlur={() => saveField("title", title)}
className="mt-6 w-full text-sm font-bold bg-transparent outline-none"
/>
<div className="mt-4">
<TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} />
</div>
<div className="mt-4">
<TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} taskDetail={taskDetail} />
</div>
<TaskDetailDescription value={description} onChange={setDescription} />
<TaskDetailDescription
value={description}
onChange={setDescription}
onBlur={() => saveField("description", description)}
/>
<AttachmentList />
<AttachmentList attachments={taskDetail?.attachments} />
<CheckLists />
<CheckLists checklists={taskDetail?.checklists} />
</>
)}
</DefaulModal>
);
};
src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx
+43 -4
View File
@@ -1,8 +1,11 @@
import { type FC, useState } from "react";
import { type FC, useEffect, useState } from "react";
import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
import { DEFAULT_DATE_RANGE } from "./date/constants";
import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
import type DateObject from "react-date-object";
import DateObjectClass from "react-date-object";
import persian from "react-date-object/calendars/persian";
import persian_fa from "react-date-object/locales/persian_fa";
import { DEFAULT_CHECKLISTS } from "./checklist/constants";
import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
import type { TaskChecklist } from "./checklist/types";
@@ -14,13 +17,21 @@ import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
import type { TaskDetailTab } from "./types";
import { DEFAULT_USERS } from "./users/constants";
import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
import type { TaskDetailType } from "../../task/types/TaskTypes";
type Props = {
activeTab: TaskDetailTab | null;
onTabChange: (tab: TaskDetailTab) => void;
taskDetail?: TaskDetailType;
};
const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
const parseDate = (value?: string): DateObject | null => {
if (!value) return null;
const date = new DateObjectClass({ date: value, calendar: persian, locale: persian_fa });
return date.isValid ? date : null;
};
const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) => {
const [labelsView, setLabelsView] = useState<LabelsView>("list");
const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
@@ -29,8 +40,36 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
const [endDate, setEndDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.endDate);
useEffect(() => {
if (!taskDetail) return;
if (taskDetail.labels?.length) {
setLabels(taskDetail.labels);
setSelectedLabelIds(new Set(taskDetail.labels.map((label) => label.id)));
}
if (taskDetail.users?.length) {
setSelectedUserIds(new Set(taskDetail.users.map((user) => user.id)));
}
if (taskDetail.checklists?.length) {
setChecklists(taskDetail.checklists.map((checklist) => ({ id: checklist.id, title: checklist.title })));
}
const parsedStartDate = parseDate(taskDetail.startDate);
const parsedEndDate = parseDate(taskDetail.endDate);
if (parsedStartDate) setStartDate(parsedStartDate);
if (parsedEndDate) setEndDate(parsedEndDate);
}, [taskDetail]);
const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
const users = taskDetail?.users?.length
? taskDetail.users.map((user) => ({
id: user.id,
name: `${user.firstName} ${user.lastName}`.trim(),
}))
: DEFAULT_USERS;
const selectedUsers = users.filter((user) => selectedUserIds.has(user.id));
const isLabelsOpen = activeTab === "labels";
const isUsersOpen = activeTab === "users";
const isChecklistOpen = activeTab === "checklist";
@@ -129,7 +168,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
}
usersPopover={
isUsersOpen ? (
<TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
<TaskDetailUsersPopover users={users} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
) : null
}
checklistPopover={
src/pages/taskmanager/components/task-detail/attachment/List.tsx
+16 -18
View File
@@ -2,29 +2,27 @@ import { type FC } from "react";
import { useTranslation } from "react-i18next";
import AttachmentItem from "./AttachmentItem";
import type { TaskAttachment } from "./types";
import type { TaskAttachmentType } from "../../../task/types/TaskTypes";
const AttachmentList: FC = () => {
type Props = {
attachments?: TaskAttachmentType[];
};
const AttachmentList: FC<Props> = ({ attachments = [] }) => {
const { t } = useTranslation("global");
const attachments: TaskAttachment[] = [
{
id: "1",
title: "file.pdf",
fileName: "file.pdf",
createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
},
{
id: "2",
title: "لینک طرح",
url: "https://example.com",
createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
},
];
const mappedAttachments: TaskAttachment[] = attachments.map((item) => ({
id: item.id,
title: item.title,
fileName: item.fileName,
url: item.url,
createdAt: item.createdAt,
}));
const files = attachments.filter((item) => item.fileName);
const links = attachments.filter((item) => item.url);
const files = mappedAttachments.filter((item) => item.fileName);
const links = mappedAttachments.filter((item) => item.url);
if (attachments.length === 0) return null;
if (mappedAttachments.length === 0) return null;
return (
<div className="mt-6">
src/pages/taskmanager/components/task-detail/checklist/List.tsx
+20 -8
View File
@@ -1,14 +1,26 @@
import { Edit } from "iconsax-react";
import ProgressBar from "../../../../../components/ProgressBar";
import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
import type { TaskChecklistType } from "../../../task/types/TaskTypes";
import ChecklistItem from "./ChecklistItem";
const CheckLists = () => {
const items = [
{ id: "1", title: "آیتم ۱", checked: true },
{ id: "2", title: "آیتم ۱", checked: true },
{ id: "3", title: "آیتم ۱", checked: true },
];
type Props = {
checklists?: TaskChecklistType[];
};
const CheckLists = ({ checklists = [] }: Props) => {
const items = checklists.flatMap((checklist) =>
checklist.items.map((item) => ({
id: item.id,
title: item.title,
checked: item.isDone,
})),
);
const doneCount = items.filter((item) => item.checked).length;
const progress = items.length > 0 ? Math.round((doneCount / items.length) * 100) : 0;
if (checklists.length === 0) return null;
return (
<div className="mt-6">
@@ -19,8 +31,8 @@ const CheckLists = () => {
</div>
<div className="mt-4 flex gap-2 items-center">
<div className="text-xs shrink-0">۲۵٪</div>
<ProgressBar value={25} />
<div className="text-xs shrink-0">{progress}٪</div>
<ProgressBar value={progress} />
</div>
<div className="mt-4 flex flex-col gap-2">
src/pages/taskmanager/task/hooks/useTaskData.ts
+35 -2
View File
@@ -1,6 +1,14 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import * as api from "../service/TaskService";
import { CreateTaskType } from "../types/TaskTypes";
import { CreateTaskType, UpdateTaskType } from "../types/TaskTypes";
export const useGetTaskDetail = (id: string, enabled = true) => {
return useQuery({
queryKey: ["task-detail", id],
queryFn: () => api.getTaskDetail(id),
enabled: !!id && enabled,
});
};
export const useCreateTask = () => {
const queryClient = useQueryClient();
@@ -12,3 +20,28 @@ export const useCreateTask = () => {
},
});
};
export const useUpdateTask = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, params }: { id: string; params: UpdateTaskType }) => api.updateTask(id, params),
onSuccess: (_data, variables) => {
queryClient.invalidateQueries({ queryKey: ["task-detail", variables.id] });
queryClient.invalidateQueries({ queryKey: ["project"] });
},
});
};
export const useDeleteTask = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id }: { id: string; projectId: string }) => api.deleteTask(id),
onSuccess: (_data, variables) => {
queryClient.invalidateQueries({ queryKey: ["task-detail", variables.id] });
queryClient.invalidateQueries({ queryKey: ["project", variables.projectId] });
queryClient.invalidateQueries({ queryKey: ["project"] });
},
});
};
src/pages/taskmanager/task/service/TaskService.ts
+16 -1
View File
@@ -1,7 +1,22 @@
import axios from "../../../../config/axios";
import { CreateTaskType } from "../types/TaskTypes";
import { CreateTaskType, GetTaskDetailResponse, UpdateTaskType } from "../types/TaskTypes";
export const createTask = async (params: CreateTaskType) => {
const { data } = await axios.post(`/task-manager/tasks`, params);
return data;
};
export const getTaskDetail = async (id: string): Promise<GetTaskDetailResponse> => {
const { data } = await axios.get(`/task-manager/tasks/detail/${id}`);
return data;
};
export const updateTask = async (id: string, params: UpdateTaskType) => {
const { data } = await axios.patch(`/task-manager/tasks/${id}`, params);
return data;
};
export const deleteTask = async (id: string) => {
const { data } = await axios.delete(`/task-manager/tasks/${id}`);
return data;
};
src/pages/taskmanager/task/types/TaskTypes.ts
+57
View File
@@ -1,3 +1,5 @@
import { IResponse } from "../../../../types/response.types";
export type CreateTaskType = {
title: string;
taskPhaseId: string;
@@ -16,3 +18,58 @@ export type TaskItemType = {
checklistDone?: number;
checklistTotal?: number;
};
export type TaskLabelType = {
id: string;
title: string;
color: string;
};
export type TaskUserType = {
id: string;
firstName: string;
lastName: string;
};
export type TaskChecklistItemType = {
id: string;
title: string;
isDone: boolean;
};
export type TaskChecklistType = {
id: string;
title: string;
items: TaskChecklistItemType[];
};
export type TaskAttachmentType = {
id: string;
title: string;
fileName?: string;
url?: string;
createdAt?: string;
};
export type TaskDetailType = {
id: string;
title: string;
description?: string;
taskPhaseId: string;
order: number;
projectId: string;
startDate?: string;
endDate?: string;
labels?: TaskLabelType[];
users?: TaskUserType[];
checklists?: TaskChecklistType[];
attachments?: TaskAttachmentType[];
};
export type UpdateTaskType = Partial<
Pick<TaskDetailType, "title" | "description" | "taskPhaseId" | "order" | "startDate" | "endDate">
>;
export interface GetTaskDetailResponse extends IResponse<TaskDetailType> {
statusCode: number;
}