create task by ticket

2026-07-20 15:38:08 +03:30
parent 2af7323a6a
commit 65154a1aab
17 changed files with 372 additions and 5 deletions
@@ -1,5 +1,5 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-VITE_BASE_URL = 'https://api.danakcorp.com'
+#VITE_BASE_URL = 'https://api.danakcorp.com'

-#VITE_BASE_URL = 'http://192.168.1.107:3500'
+VITE_BASE_URL = 'http://192.168.99.131:3500'
@@ -1077,7 +1077,14 @@
      "stop_tracking": "پایان",
      "time_history": "سابقه",
      "no_time_entries": "هنوز زمانی ثبت نشده",
-      "tracking_active": "در حال اجرا"
+      "tracking_active": "در حال اجرا",
+      "comments": "کامنت‌ها",
+      "add_comment": "ثبت کامنت",
+      "comment_placeholder": "کامنت خود را بنویسید...",
+      "no_comments": "هنوز کامنتی ثبت نشده",
+      "unknown_user": "کاربر",
+      "related_ticket": "تیکت مرتبط",
+      "view_ticket": "مشاهده تیکت"
    }
  }
 }
@@ -1,5 +1,8 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
 import { useEffect, useRef, type FC } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Pages } from "../../../config/Pages";
 import type { Task as TaskType } from "../types";

 type Props = {
@@ -9,6 +12,7 @@ type Props = {
 };

 const Task: FC<Props> = ({ task, isDragging, onClick }) => {
+  const { t } = useTranslation("global");
  const suppressClickRef = useRef(false);

  useEffect(() => {
@@ -37,6 +41,15 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
        {task.tag}
      </div>
      <div className="font-bold text-xs mt-2">{task.title}</div>
+      {task.ticketId ? (
+        <Link
+          to={Pages.ticket.detail + task.ticketId}
+          onClick={(e) => e.stopPropagation()}
+          className="mt-2 inline-flex items-center text-[10px] text-primary hover:underline"
+        >
+          {t("taskmanager.task_detail.related_ticket")}
+        </Link>
+      ) : null}
      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
        <div className="flex items-center gap-1 text-[10px] min-w-0">
          <Calendar size={16} color="#292D32" className="shrink-0" />
@@ -1,7 +1,9 @@
 import { Add } from "iconsax-react";
 import { type FC } from "react";
+import { Link } from "react-router-dom";
 import type DateObject from "react-date-object";
 import { useTranslation } from "react-i18next";
+import { Pages } from "../../../../config/Pages";
 import UserAvatar from "../UserAvatar";
 import { formatDateRange } from "./date/utils";
 import type { TaskLabel } from "./labels/types";
@@ -12,11 +14,12 @@ type Props = {
  selectedUsers: TaskUser[];
  startDate: DateObject | null;
  endDate: DateObject | null;
+  ticketId?: string | null;
  onAddLabel?: () => void;
  onAddUser?: () => void;
 };

-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, onAddLabel, onAddUser }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, ticketId, onAddLabel, onAddUser }) => {
  const { t } = useTranslation("global");
  const dateLabel = formatDateRange(startDate, endDate);

@@ -76,6 +79,18 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
          </span>
        ) : null}
      </div>
+
+      {ticketId ? (
+        <div className="col-span-2 sm:col-span-1 min-w-0">
+          <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.related_ticket")}</div>
+          <Link
+            to={Pages.ticket.detail + ticketId}
+            className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-primary hover:underline whitespace-nowrap"
+          >
+            {t("taskmanager.task_detail.view_ticket")}
+          </Link>
+        </div>
+      ) : null}
    </div>
  );
 };
@@ -10,6 +10,7 @@ import type { TaskDetailType } from "../../task/types/TaskTypes";
 import type { Column, Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
+import CommentList from "./comment/List";
 import TimeList from "./time/List";
 import TaskDetailCoverColorBar from "./cover/TaskDetailCoverColorBar";
 import TaskDetailDescription from "./TaskDetailDescription";
@@ -218,6 +219,8 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
          />

          <TimeList times={getTaskTimes.data?.data} />
+
+          <CommentList taskId={task.id} enabled={open && !!task.id} />
        </>
      )}
    </DefaulModal>
@@ -397,6 +397,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
        selectedUsers={selectedUsers}
        startDate={startDate}
        endDate={endDate}
+        ticketId={taskDetail?.ticketId}
        onAddLabel={handleAddLabelClick}
        onAddUser={handleAddUserClick}
      />
@@ -0,0 +1,128 @@
+import { Edit2 } from "iconsax-react";
+import moment from "moment-jalaali";
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "../../../../../components/Toast";
+import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import { ErrorType } from "../../../../../helpers/types";
+import { useDeleteTaskComment, useUpdateTaskComment } from "../../../task/hooks/useTaskCommentData";
+import type { TaskCommentType } from "../../../task/types/TaskCommentTypes";
+import UserAvatar from "../../UserAvatar";
+
+type Props = {
+  comment: TaskCommentType;
+  taskId: string;
+};
+
+const CommentItem: FC<Props> = ({ comment, taskId }) => {
+  const { t } = useTranslation("global");
+  const [isEditing, setIsEditing] = useState(false);
+  const [content, setContent] = useState(comment.content);
+  const updateComment = useUpdateTaskComment();
+  const deleteComment = useDeleteTaskComment();
+
+  const authorName = comment.user
+    ? `${comment.user.firstName} ${comment.user.lastName}`.trim()
+    : t("taskmanager.task_detail.unknown_user");
+
+  const handleSave = () => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent || trimmedContent === comment.content) {
+      setIsEditing(false);
+      setContent(comment.content);
+      return;
+    }
+
+    updateComment.mutate(
+      { id: comment.id, params: { content: trimmedContent }, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setIsEditing(false);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleCancel = () => {
+    setContent(comment.content);
+    setIsEditing(false);
+  };
+
+  const handleDelete = () => {
+    deleteComment.mutate(
+      { id: comment.id, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="bg-white/25 rounded-xl p-3">
+      <div className="flex items-start gap-2">
+        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="text-xs font-medium truncate">{authorName}</div>
+            <div className="text-[10px] text-description shrink-0">
+              {moment(comment.createdAt).format("jYYYY/jMM/jDD HH:mm")}
+            </div>
+          </div>
+
+          {isEditing ? (
+            <div className="mt-2">
+              <textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                rows={3}
+                className="w-full bg-white/50 rounded-lg px-3 py-2 text-xs outline-none resize-none"
+                autoFocus
+              />
+              <div className="flex gap-2 mt-2">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={updateComment.isPending || !content.trim()}
+                  className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+                >
+                  {t("save")}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  disabled={updateComment.isPending}
+                  className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white"
+                >
+                  {t("cancel")}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="mt-1 text-xs leading-6 whitespace-pre-line break-words">{comment.content}</div>
+          )}
+        </div>
+
+        {!isEditing ? (
+          <div className="flex items-center gap-1 shrink-0">
+            <button type="button" onClick={() => setIsEditing(true)} className="cursor-pointer">
+              <Edit2 size={16} color="#0047FF" />
+            </button>
+            <TrashWithConfrim onDelete={handleDelete} isLoading={deleteComment.isPending} size={16} color="#FF0000" />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CommentItem;
@@ -0,0 +1,76 @@
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "../../../../../components/Toast";
+import { ErrorType } from "../../../../../helpers/types";
+import { useCreateTaskComment, useGetTaskComments } from "../../../task/hooks/useTaskCommentData";
+import CommentItem from "./CommentItem";
+
+type Props = {
+  taskId: string;
+  enabled?: boolean;
+};
+
+const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
+  const { t } = useTranslation("global");
+  const [content, setContent] = useState("");
+  const getComments = useGetTaskComments(taskId, enabled);
+  const createComment = useCreateTaskComment();
+
+  const comments = getComments.data?.data ?? [];
+
+  const handleSubmit = () => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent) return;
+
+    createComment.mutate(
+      { content: trimmedContent, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setContent("");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="mt-6">
+      <div className="text-sm font-bold">{t("taskmanager.task_detail.comments")}</div>
+
+      <div className="mt-3 relative bg-white/25 rounded-xl">
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={createComment.isPending || !content.trim()}
+          className="absolute top-2 left-2 z-10 h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+        >
+          {t("taskmanager.task_detail.add_comment")}
+        </button>
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder={t("taskmanager.task_detail.comment_placeholder")}
+          rows={3}
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
+        />
+      </div>
+
+      {getComments.isPending ? (
+        <div className="mt-3 text-[10px] text-description text-center py-2">{t("loading")}</div>
+      ) : comments.length === 0 ? (
+        <div className="mt-3 text-[10px] text-description">{t("taskmanager.task_detail.no_comments")}</div>
+      ) : (
+        <div className="mt-3 flex flex-col gap-2">
+          {comments.map((comment) => (
+            <CommentItem key={comment.id} comment={comment} taskId={taskId} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CommentList;
@@ -0,0 +1,45 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/TaskCommentService";
+import { CreateTaskCommentType, UpdateTaskCommentType } from "../types/TaskCommentTypes";
+
+export const useGetTaskComments = (taskId: string, enabled = true) => {
+  return useQuery({
+    queryKey: ["task-comments", taskId],
+    queryFn: () => api.getTaskComments(taskId),
+    enabled: !!taskId && enabled,
+  });
+};
+
+export const useCreateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateTaskCommentType) => api.createTaskComment(variables),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useUpdateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateTaskCommentType; taskId: string }) =>
+      api.updateTaskComment(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useDeleteTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskComment(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
@@ -0,0 +1,31 @@
+import axios from "../../../../config/axios";
+import {
+  CreateTaskCommentResponse,
+  CreateTaskCommentType,
+  GetTaskCommentsResponse,
+  UpdateTaskCommentResponse,
+  UpdateTaskCommentType,
+} from "../types/TaskCommentTypes";
+
+export const getTaskComments = async (taskId: string): Promise<GetTaskCommentsResponse> => {
+  const { data } = await axios.get(`/task-manager/comments/task/${taskId}`);
+  return data;
+};
+
+export const createTaskComment = async (params: CreateTaskCommentType): Promise<CreateTaskCommentResponse> => {
+  const { data } = await axios.post(`/task-manager/comments`, params);
+  return data;
+};
+
+export const updateTaskComment = async (
+  id: string,
+  params: UpdateTaskCommentType,
+): Promise<UpdateTaskCommentResponse> => {
+  const { data } = await axios.patch(`/task-manager/comments/${id}`, params);
+  return data;
+};
+
+export const deleteTaskComment = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/comments/${id}`);
+  return data;
+};
@@ -0,0 +1,39 @@
+import { IResponse } from "../../../../types/response.types";
+
+export type TaskCommentAuthorType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  profilePic?: string | null;
+};
+
+export type TaskCommentType = {
+  id: string;
+  content: string;
+  taskId: string;
+  userId?: string;
+  user?: TaskCommentAuthorType;
+  createdAt: string;
+  updatedAt?: string;
+};
+
+export type CreateTaskCommentType = {
+  content: string;
+  taskId: string;
+};
+
+export type UpdateTaskCommentType = {
+  content: string;
+};
+
+export interface GetTaskCommentsResponse extends IResponse<TaskCommentType[]> {
+  statusCode: number;
+}
+
+export interface CreateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}
+
+export interface UpdateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}
@@ -6,6 +6,7 @@ export type CreateTaskType = {
  order: number;
  projectId: string;
  userIds?: string[];
+  ticketId?: string;
 };

 export type TaskItemType = {
@@ -25,6 +26,7 @@ export type TaskItemType = {
  attachments?: number;
  checklistDone?: number;
  checklistTotal?: number;
+  ticketId?: string | null;
 };

 export type TaskPhaseTasksPagerType = {
@@ -127,6 +129,7 @@ export type TaskDetailType = {
  checkListItemCount?: number;
  completedCheckListItemCount?: number;
  attachments?: TaskAttachmentType[];
+  ticketId?: string | null;
 };

 export type ChangeTaskPhaseType = {
@@ -12,4 +12,5 @@ export const mapTaskItemToTask = (task: TaskItemType, taskPhaseId: string, fallb
  attachments: task.attachments ?? 0,
  checklistDone: task.checklistDone ?? 0,
  checklistTotal: task.checklistTotal ?? 0,
+  ticketId: task.ticketId ?? null,
 });
@@ -16,6 +16,7 @@ export type Task = {
  attachments: number;
  checklistDone: number;
  checklistTotal: number;
+  ticketId?: string | null;
 };

 export type WorkspaceData = {
@@ -118,6 +118,7 @@ const Workspace: FC = () => {
          attachments: activeTask.attachments,
          checklistDone: activeTask.checklistDone,
          checklistTotal: activeTask.checklistTotal,
+          ticketId: activeTask.ticketId,
        },
        index,
      ),
@@ -314,6 +314,7 @@ const TicketDetail: FC = () => {
                            {
                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
                                <CreateTaskFromTicket
+                                    ticketId={id ?? ''}
                                    ticketSubject={getMessages.data?.data?.ticket?.subject ?? ''}
                                />
                            }
@@ -19,10 +19,11 @@ import UserAvatar from '../../taskmanager/components/UserAvatar'
 import type { SelectedUser } from '../../taskmanager/project/components/CreateProjectSidebar'

 type Props = {
+    ticketId: string
    ticketSubject: string
 }

-const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
+const CreateTaskFromTicket: FC<Props> = ({ ticketId, ticketSubject }) => {
    const { t } = useTranslation('global')
    const [open, setOpen] = useState(false)
    const [workspaceId, setWorkspaceId] = useState('')
@@ -154,6 +155,7 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
                taskPhaseId,
                order: selectedPhase?.tasks?.length ?? 0,
                projectId,
+                ticketId,
                ...(userIds.length ? { userIds } : {}),
            })