diff --git a/src/pages/taskmanager/task/types/TaskTypes.ts b/src/pages/taskmanager/task/types/TaskTypes.ts index 0f291e5..bc16039 100644 --- a/src/pages/taskmanager/task/types/TaskTypes.ts +++ b/src/pages/taskmanager/task/types/TaskTypes.ts @@ -5,6 +5,7 @@ export type CreateTaskType = { taskPhaseId: string; order: number; projectId: string; + userIds?: string[]; }; export type TaskItemType = { diff --git a/src/pages/ticket/components/CreateTaskFromTicket.tsx b/src/pages/ticket/components/CreateTaskFromTicket.tsx index 266be94..0f87986 100644 --- a/src/pages/ticket/components/CreateTaskFromTicket.tsx +++ b/src/pages/ticket/components/CreateTaskFromTicket.tsx @@ -1,5 +1,6 @@ import { FC, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' +import { CloseCircle } from 'iconsax-react' import DefaulModal from '../../../components/DefaulModal' import Select from '../../../components/Select' import Input from '../../../components/Input' @@ -11,7 +12,11 @@ import { useGetWorkspaces } from '../../taskmanager/workspace/hooks/useWorkspace import { WorkspaceItemType } from '../../taskmanager/workspace/types/WorkspaceTypes' import { useGetProjectsByWorkspace, useGetProject } from '../../taskmanager/project/hooks/useProjectData' import { ProjectItem, ProjectTaskPhaseType } from '../../taskmanager/project/types/ProjectTypes' -import { useCreateTask } from '../../taskmanager/task/hooks/useTaskData' +import { useCreateTask, useUpdateTask } from '../../taskmanager/task/hooks/useTaskData' +import { useGetUsers } from '../../users/hooks/useUserData' +import { UserItemType } from '../../users/types/UserTypes' +import UserAvatar from '../../taskmanager/components/UserAvatar' +import type { SelectedUser } from '../../taskmanager/project/components/CreateProjectSidebar' type Props = { ticketSubject: string @@ -24,11 +29,15 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { const [projectId, setProjectId] = useState('') const [taskPhaseId, setTaskPhaseId] = useState('') const [title, setTitle] = useState('') + const [selectedUsers, setSelectedUsers] = useState([]) + const [userSelectValue, setUserSelectValue] = useState('') const getWorkspaces = useGetWorkspaces() const getProjects = useGetProjectsByWorkspace(workspaceId) const getProject = useGetProject(projectId) + const getUsers = useGetUsers('') const createTask = useCreateTask() + const updateTask = useUpdateTask() const workspaces: WorkspaceItemType[] = getWorkspaces.data?.data?.workspaces ?? @@ -60,6 +69,14 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { value: phase.id, })) + const userItems = + getUsers.data?.data?.users + ?.filter((user: UserItemType) => !selectedUsers.some((selected) => selected.id === user.id)) + .map((user: UserItemType) => ({ + label: `${user.firstName} ${user.lastName}`, + value: user.id, + })) ?? [] + const selectedPhase = taskPhases.find((phase) => phase.id === taskPhaseId) const resetForm = () => { @@ -67,6 +84,32 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { setProjectId('') setTaskPhaseId('') setTitle('') + setSelectedUsers([]) + setUserSelectValue('') + } + + const handleUserSelect = (e: React.ChangeEvent) => { + const value = e.target.value + if (!value) return + + const user = getUsers.data?.data?.users?.find((item: UserItemType) => item.id === value) + + if (user) { + setSelectedUsers((prev) => [ + ...prev, + { + id: user.id, + name: `${user.firstName} ${user.lastName}`, + profilePic: user.profilePic, + }, + ]) + } + + setUserSelectValue('') + } + + const handleRemoveUser = (id: string) => { + setSelectedUsers((prev) => prev.filter((user) => user.id !== id)) } const handleClose = () => { @@ -80,7 +123,7 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { } }, [open, ticketSubject]) - const handleCreateTask = () => { + const handleCreateTask = async () => { const trimmedTitle = title.trim() if (!workspaceId) { @@ -103,26 +146,32 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { return } - createTask.mutate( - { + const userIds = selectedUsers.map((user) => user.id) + + try { + const response = await createTask.mutateAsync({ title: trimmedTitle, taskPhaseId, order: selectedPhase?.tasks?.length ?? 0, projectId, - }, - { - onSuccess: () => { - toast.success(t('ticket.create_task_success')) - handleClose() - }, - onError: (error: ErrorType) => { - toast.error(error.response?.data?.error?.message[0]) - }, - }, - ) + ...(userIds.length ? { userIds } : {}), + }) + + const taskId = response?.data?.task?.id ?? response?.data?.id + + if (taskId && userIds.length) { + await updateTask.mutateAsync({ id: taskId, params: { userIds } }) + } + + toast.success(t('ticket.create_task_success')) + handleClose() + } catch (error) { + toast.error((error as ErrorType).response?.data?.error?.message[0]) + } } const isLoadingOptions = getWorkspaces.isPending || getProjects.isPending || getProject.isPending + const isSubmitting = createTask.isPending || updateTask.isPending return (
@@ -193,11 +242,43 @@ const CreateTaskFromTicket: FC = ({ ticketSubject }) => { onChange={(e) => setTitle(e.target.value)} /> +
+