Skip to content

feat(AddTaskDialog): add DateTimePicker for start field #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
its-me-abhishek merged 1 commit into from
Jan 12, 2026
Merged

feat(AddTaskDialog): add DateTimePicker for start field #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion backend/utils/tw/add_task.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@ func AddTaskToTaskwarrior(req models.AddTaskRequestBody, dueDate string) error {
cmdArgs = append(cmdArgs, "due:"+dueDate)
}
if req.Start != "" {
cmdArgs = append(cmdArgs, "start:"+req.Start)
start, err := utils.ConvertISOToTaskwarriorFormat(req.Start)
if err != nil {
return fmt.Errorf("unexpected date format error: %v", err)
}
cmdArgs = append(cmdArgs, "start:"+start)
}
if len(req.Depends) > 0 {
dependsStr := strings.Join(req.Depends, ",")
Expand Down
22 changes: 17 additions & 5 deletions frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,15 +288,27 @@ export const AddTaskdialog = ({
Start
</Label>
<div className="col-span-3">
<DatePicker
date={newTask.start ? new Date(newTask.start) : undefined}
onDateChange={(date) => {
<DateTimePicker
date={
newTask.start
? new Date(
newTask.start.includes('T')
? newTask.start
: `${newTask.start}T00:00:00`
)
: undefined
}
onDateTimeChange={(date, hasTime) => {
setNewTask({
...newTask,
start: date ? format(date, 'yyyy-MM-dd') : '',
start: date
? hasTime
? date.toISOString()
: format(date, 'yyyy-MM-dd')
: '',
});
}}
placeholder="Select a start date"
placeholder="Select start date and time"
/>
</div>
</div>
Expand Down
265 changes: 185 additions & 80 deletions frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,25 @@ jest.mock('@/components/ui/date-picker', () => ({
),
}));

jest.mock('@/components/ui/date-time-picker', () => ({
DateTimePicker: ({ onDateTimeChange, placeholder }: any) => (
<div>
<input
data-testid="date-time-picker"
placeholder={placeholder}
onChange={(e) => {
if (e.target.value) {
const hasTime = e.target.value.includes('T');
onDateTimeChange(new Date(e.target.value), hasTime);
} else {
onDateTimeChange(undefined, false);
}
}}
/>
</div>
),
}));

jest.mock('@/components/ui/select', () => {
return {
Select: ({ children, onValueChange, value }: any) => {
Expand Down Expand Up @@ -374,102 +393,188 @@ describe('AddTaskDialog Component', () => {
});

describe('Date Fields', () => {
const dateFields = [
{ name: 'due', label: 'Due', placeholder: 'Select a due date' },
{ name: 'start', label: 'Start', placeholder: 'Select a start date' },
{ name: 'end', label: 'End', placeholder: 'Select an end date' },
{ name: 'entry', label: 'Entry', placeholder: 'Select an entry date' },
{ name: 'wait', label: 'Wait', placeholder: 'Select a wait date' },
];

test.each(dateFields.filter((field) => field.name !== 'due'))(
'renders $name date picker with correct placeholder',
({ placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

const datePicker = screen.getByPlaceholderText(placeholder);
expect(datePicker).toBeInTheDocument();
}
);

test('renders due date picker with correct placeholder', () => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
describe('DateTime Fields', () => {
const dateTimeFields = [
{ name: 'due', label: 'Due', placeholder: 'Select due date and time' },
{
name: 'start',
label: 'Start',
placeholder: 'Select start date and time',
},
];

const dueDateButton = screen.getByText('Select due date and time');
expect(dueDateButton).toBeInTheDocument();
});
test.each(dateTimeFields)(
'renders $name date-time picker with correct placeholder',
({ placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

test.each(dateFields.filter((field) => field.name !== 'due'))(
'updates $name when user selects a date',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
const picker = screen.getByPlaceholderText(placeholder);
expect(picker).toBeInTheDocument();
}
);

const datePicker = screen.getByPlaceholderText(placeholder);
fireEvent.change(datePicker, { target: { value: '2025-12-25' } });
test.each(dateTimeFields)(
'updates $name with date only when no time is selected',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

expect(mockProps.setNewTask).toHaveBeenCalledWith({
...mockProps.newTask,
[name]: '2025-12-25',
});
}
);
const picker = screen.getByPlaceholderText(placeholder);
fireEvent.change(picker, { target: { value: '2025-12-25' } });

// Special test for due date with DateTimePicker
test('updates due when user selects a date and time', () => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
expect(mockProps.setNewTask).toHaveBeenLastCalledWith({
...mockProps.newTask,
[name]: '2025-12-25',
});
}
);

test.each(dateTimeFields)(
'updates $name with full datetime when time is selected',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
const picker = screen.getByPlaceholderText(placeholder);

fireEvent.change(picker, {
target: { value: '2025-12-25T14:30:00' },
});
expect(mockProps.setNewTask).toHaveBeenLastCalledWith(
expect.objectContaining({
[name]: expect.any(String),
})
);

const callArgs = mockProps.setNewTask.mock.calls.at(-1)![0];
expect(callArgs[name]).toContain('T');
}
);

test.each(dateTimeFields)(
'allows empty $name date (optional field)',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

const picker = screen.getByPlaceholderText(placeholder);

fireEvent.change(picker, {
target: { value: '2025-12-25T14:30:00' },
});
mockProps.setNewTask.mockClear();
fireEvent.change(picker, { target: { value: '' } });

const dueDateButton = screen.getByText('Select due date and time');
expect(dueDateButton).toBeInTheDocument();
expect(mockProps.setNewTask).toHaveBeenLastCalledWith({
...mockProps.newTask,
[name]: '',
});
}
);

test.each(dateTimeFields)(
'submits task with $name date when provided',
({ name }) => {
mockProps.isOpen = true;
mockProps.newTask = {
...mockProps.newTask,
[name]: '2025-12-25T14:30:00.000Z',
};
render(<AddTaskdialog {...mockProps} />);

const picker = screen.getByPlaceholderText(
`Select ${name} date and time`
);
fireEvent.change(picker, {
target: { value: '2025-12-25T14:30:00' },
});

const submitButton = screen.getByRole('button', {
name: /add task/i,
});
fireEvent.click(submitButton);

expect(mockProps.onSubmit).toHaveBeenLastCalledWith(
expect.objectContaining({
[name]: '2025-12-25T14:30:00.000Z',
})
);
}
);
});

test.each(dateFields.filter((field) => field.name !== 'due'))(
'allows empty $name date (optional field)',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
describe('DatePicker fields', () => {
const dateOnlyFields = [
{ name: 'end', label: 'End', placeholder: 'Select an end date' },
{ name: 'entry', label: 'Entry', placeholder: 'Select an entry date' },
{ name: 'wait', label: 'Wait', placeholder: 'Select a wait date' },
];

const datePicker = screen.getByPlaceholderText(placeholder);
test.each(dateOnlyFields)(
'renders $name date picker with correct placeholder',
({ placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

fireEvent.change(datePicker, { target: { value: '2025-12-25' } });
mockProps.setNewTask.mockClear();
fireEvent.change(datePicker, { target: { value: '' } });
const datePicker = screen.getByPlaceholderText(placeholder);
expect(datePicker).toBeInTheDocument();
}
);

expect(mockProps.setNewTask).toHaveBeenCalledWith({
...mockProps.newTask,
[name]: '',
});
}
);
test.each(dateOnlyFields)(
'updates $name when user selects a date',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

// Special test for due date with DateTimePicker
test('allows empty due date (optional field)', () => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);
const datePicker = screen.getByPlaceholderText(placeholder);
fireEvent.change(datePicker, { target: { value: '2025-12-25' } });

const dueDateButton = screen.getByText('Select due date and time');
expect(dueDateButton).toBeInTheDocument();
});
expect(mockProps.setNewTask).toHaveBeenCalledWith({
...mockProps.newTask,
[name]: '2025-12-25',
});
}
);

test.each(dateOnlyFields)(
'allows empty $name date (optional field)',
({ name, placeholder }) => {
mockProps.isOpen = true;
render(<AddTaskdialog {...mockProps} />);

const datePicker = screen.getByPlaceholderText(placeholder);

test.each(dateFields)(
'submits task with $name date when provided',
({ name }) => {
mockProps.isOpen = true;
mockProps.newTask = {
...mockProps.newTask,
[name]: '2025-12-25',
};
render(<AddTaskdialog {...mockProps} />);
fireEvent.change(datePicker, { target: { value: '2025-12-25' } });
mockProps.setNewTask.mockClear();
fireEvent.change(datePicker, { target: { value: '' } });

const submitButton = screen.getByRole('button', { name: /add task/i });
fireEvent.click(submitButton);
expect(mockProps.setNewTask).toHaveBeenCalledWith({
...mockProps.newTask,
[name]: '',
});
}
);

expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
}
);
test.each(dateOnlyFields)(
'submits task with $name date when provided',
({ name }) => {
mockProps.isOpen = true;
mockProps.newTask = {
...mockProps.newTask,
[name]: '2025-12-25',
};
render(<AddTaskdialog {...mockProps} />);

const submitButton = screen.getByRole('button', {
name: /add task/i,
});
fireEvent.click(submitButton);

expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
}
);
});
});

describe('Depends Field', () => {
Expand Down
Loading