Merge branch 'main' into add-ctrl-s-save-to-edit-form

frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx

@@ -280,7 +280,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',
@@ -316,7 +317,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',
@@ -352,7 +354,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',

frontend/src/app/tasks/components/CreateTask.tsx

@@ -31,16 +31,21 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
     isTimerRunning,
     selectStartTime,
     handleSubmit,
-    formRef
+    formRef,
+    selectTemplate,
+    handleProject,
+    templateName
   } = useTaskForm()
 
   return (
     <>
       <Select
         name="templates"
         label="Select template"
-        value=""
-        onChange={() => {}}
+        value={templateName}
+        onChange={(templateId) => {
+          selectTemplate(parseInt(templateId), templates)
+        }}
         options={templates.map((template) => ({
           value: template.id.toString(),
           label: template.name
@@ -78,15 +83,12 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
         ref={formRef}
       >
         <Select
-          onChange={(value) => handleChange('projectId', value)}
-          value={task.projectId}
+          onChange={(value) => handleProject(value, projects)}
+          value={task.projectName}
           name="projectId"
           label="Select project"
           placeholder="Select project"
-          options={projects.map((project) => ({
-            label: project.description,
-            value: project.id.toString()
-          }))}
+          options={projects.map((project) => project.description)}
           required
         />
         <Stack flexDirection="row" sx={{ gap: { xs: '8px', sm: '30px' } }}>
@@ -131,7 +133,7 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
           label="Task description"
           sx={{ minHeight: '208px' }}
           placeholder="Task description..."
-          value={task.description}
+          value={task.description || ''}
         ></TextArea>
         <Select
           name="taskType"
@@ -142,7 +144,7 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
           placeholder="Select task type"
         />
         <Input
-          value={task.story}
+          value={task.story || ''}
           onChange={(e) => handleChange('story', e.target.value)}
           name="story"
           placeholder="Story"

frontend/src/app/tasks/components/EditTask.tsx

@@ -81,10 +81,10 @@ export const EditTask = ({ task, tasks, projects, taskTypes, closeForm }: EditTa
         onChange={(e) => handleChange('description', e.target.value)}
         label="Task description"
         placeholder="Task description..."
-        value={formState.description}
+        value={formState.description || ''}
       />
       <Input
-        value={formState.story}
+        value={formState.story || ''}
         onChange={(e) => handleChange('story', e.target.value)}
         name="story"
         placeholder="Story"

frontend/src/app/tasks/components/TaskBox.tsx

@@ -4,15 +4,20 @@ import { useState } from 'react'
 import Box from '@mui/joy/Box'
 import Button from '@mui/joy/Button'
 import Typography from '@mui/joy/Typography'
-import { Delete24Filled, Edit24Filled } from '@fluentui/react-icons'
+import {
+  Delete24Filled,
+  Edit24Filled,
+  ArrowMaximize24Filled,
+  ArrowMinimize24Filled
+} from '@fluentui/react-icons'
 
 import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
+import { Task } from '@/domain/Task'
 
 import { ScreenReaderOnly } from '@/ui/ScreenReaderOnly/ScreenReaderOnly'
 import { ConfirmationModal } from '@/ui/ConfirmationModal/ConfirmationModal'
 import { styled } from '@mui/joy/styles'
-import { Task } from '@/domain/Task'
 import { getTimeDifference, convertTimeToMinutes } from '../utils/time'
 
 import { EditTask } from './EditTask'
@@ -30,6 +35,7 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
 
   const [deleteModalOpen, setDeleteModalOpen] = useState(false)
   const [editMode, setEditMode] = useState(false)
+  const [expandedTask, setExpandedTask] = useState(false)
 
   const timeDifference = () => {
     const startMinutes = convertTimeToMinutes(task.startTime)
@@ -68,18 +74,39 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
             <Typography textColor="#1E2AA5" fontWeight="bold">
               {task.startTime}-{task.endTime} ({timeDifference()})
             </Typography>
+            {expandedTask && (
+              <>
+                <Typography textColor="#1E2AA5">{task.description}</Typography>
+                <Typography textColor="#1E2AA5">{task.story}</Typography>
+              </>
+            )}
           </>
         )}
       </Box>
       <Box display="flex" gap="8px">
-        <IconButton onClick={() => setEditMode(true)}>
+        <IconButton
+          onClick={() => {
+            setEditMode(true)
+            setExpandedTask(false)
+          }}
+        >
           <Edit24Filled color="#2f3338" />
           <ScreenReaderOnly>Edit task</ScreenReaderOnly>
         </IconButton>
         <IconButton onClick={() => setDeleteModalOpen(true)}>
           <Delete24Filled color="#2f3338" />
           <ScreenReaderOnly>Delete task {task.id}</ScreenReaderOnly>
         </IconButton>
+
+        <IconButton onClick={() => setExpandedTask((prevState) => !prevState)}>
+          {expandedTask ? (
+            <ArrowMinimize24Filled color="#2f3338" />
+          ) : (
+            <ArrowMaximize24Filled color="#2f3338" />
+          )}
+          <ScreenReaderOnly>Expand Task</ScreenReaderOnly>
+        </IconButton>
+
         <ConfirmationModal
           open={deleteModalOpen}
           closeModal={() => setDeleteModalOpen(false)}

frontend/src/app/tasks/hooks/useCreateTaskForm.ts

@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-import { useEffect, useRef, useCallback } from 'react'
+import { useEffect, useRef, useCallback, useState } from 'react'
 
 import { useForm } from '@/hooks/useForm/useForm'
 import { useTimer } from '@/hooks/useTimer/useTimer'
@@ -9,6 +9,8 @@ import { useGetTasks } from './useGetTasks'
 import { useCreateTask } from './useCreateTask'
 
 import { useAlert } from '@/ui/Alert/useAlert'
+import { Template } from '@/domain/Template'
+import { Project } from '@/domain/Project'
 import { TaskIntent, getOverlappingTasks } from '@/domain/Task'
 import { convertTimeToMinutes, getTimeDifference } from '../utils/time'
 
@@ -18,18 +20,20 @@ export const useTaskForm = () => {
   const { addTask } = useCreateTask()
   const { showError } = useAlert()
   const { tasks } = useGetTasks()
+  const [templateName, setTemplateName] = useState('')
 
   const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
-  const { formState, handleChange, resetForm } = useForm<TaskIntent>({
+  const { formState, handleChange, resetForm, setFormState } = useForm<TaskIntent>({
     initialValues: {
       userId,
-      projectId: '',
+      projectId: null,
+      projectName: '',
       taskType: '',
       story: '',
       description: '',
       startTime: '',
       endTime: '',
-      date: ''
+      date: format(new Date(), 'yyyy-MM-dd')
     }
   })
 
@@ -54,19 +58,41 @@ export const useTaskForm = () => {
     addTask(formState)
   }, [addTask, formState, showError, tasks])
 
-  const setDate = () => handleChange('date', format(new Date(), 'yyyy-MM-dd'))
+  const handleProject = (value: string, projects: Array<Project>) => {
+    const project = projects.find((project) => project.description === value)
+    handleChange('projectName', value)
+    if (project) {
+      handleChange('projectId', project.id)
+    } else {
+      handleChange('projectId', null)
+    }
+  }
+
+  const selectTemplate = (templateId: number, templates: Array<Template>) => {
+    const template = templates.find((t) => t.id === templateId)
+    if (template) {
+      setTemplateName(template.name)
+      setFormState((prevState) => ({
+        ...prevState,
+        taskType: template.taskType,
+        description: template.description || '',
+        startTime: template.startTime || '',
+        endTime: template.endTime || '',
+        projectId: template.projectId,
+        story: template.story || ''
+      }))
+    }
+  }
 
   const onStartTimer = () => {
     handleChange('startTime', format(new Date(), 'HH:mm'))
     handleChange('endTime', '')
 
-    setDate()
     startTimer()
   }
 
   const selectStartTime = (option: string) => {
     handleChange('startTime', option)
-    setDate()
   }
 
   const onStopTimer = () => {
@@ -113,7 +139,10 @@ export const useTaskForm = () => {
     loggedTime: makeLoggedTime(),
     isTimerRunning,
     selectStartTime,
+    handleProject,
     handleSubmit,
-    formRef
+    formRef,
+    selectTemplate,
+    templateName
   }
 }

frontend/src/app/tasks/hooks/useEditTask.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Task } from '@/domain/Task'
+import { TaskIntent, Task } from '@/domain/Task'
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useClientFetch } from '@/infra/lib/useClientFetch'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
@@ -11,7 +11,7 @@ export const useEditTask = ({ handleSuccess }: { handleSuccess: () => void }) =>
   const { id: userId } = useGetCurrentUser()
   const queryClient = useQueryClient()
 
-  const { mutate } = useMutation((task: Task) => editTask(task, apiClient), {
+  const { mutate } = useMutation((task: TaskIntent) => editTask(task, apiClient), {
     onSuccess: (data) => {
       queryClient.setQueryData<Array<Task>>(['tasks', userId], (prevData) =>
         prevData!.map((task) => {

frontend/src/app/tasks/hooks/useEditTaskForm.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react'
 
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useForm } from '@/hooks/useForm/useForm'
-import { Task, getOverlappingTasks } from '@/domain/Task'
+import { Task, TaskIntent, getOverlappingTasks } from '@/domain/Task'
 import { useEditTask } from './useEditTask'
 import { Project } from '@/domain/Project'
 
@@ -13,7 +13,7 @@ type UseEditTaskFormProps = {
 }
 
 export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps) => {
-  const { formState, handleChange, resetForm } = useForm<Task>({
+  const { formState, handleChange, resetForm } = useForm<TaskIntent>({
     initialValues: task
   })
   const formRef = useRef<HTMLFormElement>(null)
@@ -22,7 +22,7 @@ export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps
   const { editTask } = useEditTask({ handleSuccess: closeForm })
 
   const handleSubmit = useCallback(() => {
-    const validation = Task.safeParse(formState)
+    const validation = TaskIntent.safeParse(formState)
 
     if (!validation.success) {
       validation.error.issues.map(({ message }) => {
@@ -47,9 +47,11 @@ export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps
 
   const handleProject = (value: string, projects: Array<Project>) => {
     const project = projects.find((project) => project.description === value)
+    handleChange('projectName', value)
     if (project) {
       handleChange('projectId', project.id)
-      handleChange('projectName', value)
+    } else {
+      handleChange('projectId', null)
     }
   }