diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx index 514305b6c..bdd4f9ef3 100644 --- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx +++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx @@ -1,47 +1,68 @@ import React from 'react' -import { useOrganizationProjects, useTimelogFilterOptions } from '@/app/hooks'; -import { ITaskIssue } from '@/app/interfaces'; +import { useOrganizationProjects, useOrganizationTeams, useTeamTasks, useTimelogFilterOptions } from '@/app/hooks'; +import { TimeLogType, TimerSource } from '@/app/interfaces'; import { clsxm } from '@/app/utils'; import { Modal } from '@/lib/components' -import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features'; +import { CustomSelect, TaskNameInfoDisplay } from '@/lib/features'; import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component'; import { TranslationHooks, useTranslations } from 'next-intl'; import { ToggleButton } from './EditTaskModal'; -import { PlusIcon } from '@radix-ui/react-icons'; +import { PlusIcon, ReloadIcon } from '@radix-ui/react-icons'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion'; import { DatePickerFilter } from './TimesheetFilterDate'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select'; +import { useTimesheet } from '@/app/hooks/features/useTimesheet'; export interface IAddTaskModalProps { isOpen: boolean; closeModal: () => void; } +interface Shift { + startTime: string; + endTime: string; + totalHours: string; + dateFrom: Date | any, +} + export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) { + const { tasks } = useTeamTasks(); const { generateTimeOptions } = useTimelogFilterOptions(); const { organizationProjects } = useOrganizationProjects(); + const { activeTeam } = useOrganizationTeams(); + const { createTimesheet, loadingCreateTimesheet } = useTimesheet({}); - const timeOptions = generateTimeOptions(15); + const timeOptions = generateTimeOptions(5); const t = useTranslations(); - const [notes, setNotes] = React.useState(''); - const [task, setTasks] = React.useState('') - const [isBillable, setIsBillable] = React.useState(true); - const [dateRange, setDateRange] = React.useState<{ from: Date | null }>({ - from: new Date(), + const [formState, setFormState] = React.useState({ + notes: '', + isBillable: true, + taskId: '', + employeeId: '', + projectId: '', + shifts: [ + { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() }, + ] as Shift[], }); - const handleFromChange = (fromDate: Date | null) => { - setDateRange((prev) => ({ ...prev, from: fromDate })); + const updateFormState = (field: keyof typeof formState, value: any) => { + setFormState((prevState) => ({ + ...prevState, + [field]: value, + })); }; + const projectItemsLists = { - Project: organizationProjects ?? [], + Project: organizationProjects || [], }; const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => { - // Handle value changes + if (!values.Project) return; + updateFormState('projectId', values.Project.id); }; + const selectedValues = { Project: null, }; - const handleChange = (field: string, selectedItem: Item | null) => { + const handleChange = () => { // Handle field changes }; @@ -56,6 +77,37 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) { }, ]; + const handleAddTimesheet = () => { + const payload = { + isBillable: formState.isBillable, + description: formState.notes, + projectId: formState.projectId, + logType: TimeLogType.MANUAL as any, + source: TimerSource.BROWSER as any, + taskId: formState.taskId, + employeeId: formState.employeeId + } + const createUtcDate = (baseDate: Date, time: string): Date => { + const [hours, minutes] = time.split(':').map(Number); + return new Date(Date.UTC(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate(), hours, minutes)); + }; + + formState.shifts.map((shift) => { + const baseDate = shift.dateFrom ?? new Date(); + const startedAt = createUtcDate(baseDate, shift.startTime.toString().slice(0, 5)); + const stoppedAt = createUtcDate(baseDate, shift.endTime.toString().slice(0, 5)); + createTimesheet({ + ...payload, + startedAt, + stoppedAt, + }).then(() => { + console.log('succes') + }).catch((error) => { + console.error(error) + }) + }) + } + return ( -
+
- setTasks(e.target?.value)} - className="w-full p-2 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md" - placeholder='Bug for creating calendar view' - required + updateFormState('taskId', value.id)} + classNameGroup='h-[40vh]' + ariaLabel='Task issues' + className='w-full font-medium' + options={tasks} + renderOption={(option) => ( +
+ +
+ )} /> +
-
+
items)} - renderOption={(option) => ( + className='w-full font-medium' + options={activeTeam?.members as any} + onChange={(value: any) => updateFormState('employeeId', value.id)} + renderOption={(option: any) => (
- - {option} + {option.employee.fullName}
)} />
updateFormState('shifts', e)} + shifts={formState.shifts} t={t} - dateRange={dateRange} timeOptions={timeOptions} - handleFromChange={handleFromChange} /> + />
@@ -129,13 +190,13 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) { }
setIsBillable(true)} + isActive={formState.isBillable} + onClick={() => updateFormState('isBillable', true)} label={t('pages.timesheet.BILLABLE.YES')} /> setIsBillable(false)} + isActive={!formState.isBillable} + onClick={() => updateFormState('isBillable', false)} label={t('pages.timesheet.BILLABLE.NO')} />
@@ -144,14 +205,14 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
{t('common.NOTES')}