assign user in create task

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 = {

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<Props> = ({ ticketSubject }) => {
     const [projectId, setProjectId] = useState('')
     const [taskPhaseId, setTaskPhaseId] = useState('')
     const [title, setTitle] = useState('')
+    const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([])
+    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<Props> = ({ 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<Props> = ({ ticketSubject }) => {
         setProjectId('')
         setTaskPhaseId('')
         setTitle('')
+        setSelectedUsers([])
+        setUserSelectValue('')
+    }
+
+    const handleUserSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        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<Props> = ({ ticketSubject }) => {
         }
     }, [open, ticketSubject])
 
-    const handleCreateTask = () => {
+    const handleCreateTask = async () => {
         const trimmedTitle = title.trim()
 
         if (!workspaceId) {
@@ -103,26 +146,32 @@ const CreateTaskFromTicket: FC<Props> = ({ 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 (
         <div className='bg-white p-6 rounded-3xl mt-8'>
@@ -193,11 +242,43 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
                                 onChange={(e) => setTitle(e.target.value)}
                             />
 
+                            <div>
+                                <Select
+                                    label={t('taskmanager.users')}
+                                    placeholder={t('taskmanager.select_user')}
+                                    items={userItems}
+                                    value={userSelectValue}
+                                    onChange={handleUserSelect}
+                                    className='border'
+                                />
+
+                                <div className='mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]'>
+                                    {selectedUsers.length === 0 ? (
+                                        <div className='text-description w-full text-center text-xs'>
+                                            {t('taskmanager.no_users_added')}
+                                        </div>
+                                    ) : (
+                                        selectedUsers.map((user) => (
+                                            <div key={user.id} className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
+                                                <UserAvatar src={user.profilePic} alt={user.name} />
+                                                <div>{user.name}</div>
+                                                <CloseCircle
+                                                    variant='Bold'
+                                                    className='size-4 cursor-pointer'
+                                                    color='red'
+                                                    onClick={() => handleRemoveUser(user.id)}
+                                                />
+                                            </div>
+                                        ))
+                                    )}
+                                </div>
+                            </div>
+
                             <div className='flex justify-end'>
                                 <Button
                                     label={t('ticket.create_task')}
                                     onClick={handleCreateTask}
-                                    isLoading={createTask.isPending}
+                                    isLoading={isSubmitting}
                                     className='w-fit px-7'
                                 />
                             </div>