Vue.js Task Scheduler with Recurring Events

This challenge asks you to implement a basic task scheduler within a Vue.js component. The scheduler should allow users to add tasks with specific start times, durations, and recurrence patterns (daily, weekly, monthly). This is a common requirement in many applications, such as calendar apps, appointment booking systems, and automated workflows.

Problem Description

You need to create a Vue.js component that manages a list of tasks. Each task has the following properties:

• id: A unique identifier (string).
• title: The task's title (string).
• startTime: The task's start time (Date object).
• duration: The task's duration in minutes (number).
• recurrence: The task's recurrence pattern (string, one of "daily", "weekly", "monthly", or "none").
• endDate: The task's end date (Date object, only applicable if recurrence is not "none").

The component should provide the following functionalities:

1. Add Task: Allow users to input the task title, start time, duration, recurrence pattern, and end date (if recurrence is not "none") and add a new task to the list.
2. Display Tasks: Display the list of tasks in a user-friendly format. Each task should show its title, start time, duration, and recurrence pattern.
3. Recurrence Handling: If a task has a recurrence pattern, calculate and display the next three occurrences of the task based on the startTime, duration, recurrence, and endDate. If endDate is not provided, assume the task recurs indefinitely.
4. Error Handling: Provide appropriate error messages if the user enters invalid input (e.g., invalid recurrence pattern, invalid date format).

Expected Behavior:

• The component should render a form for adding new tasks.
• The component should display a list of existing tasks.
• For recurring tasks, the component should dynamically calculate and display the next three occurrences.
• The component should handle invalid input gracefully and provide informative error messages.

Edge Cases to Consider:

• What happens when the endDate is before the startTime?
• How should the component handle tasks that recur on weekends only (if weekly recurrence is selected)? (This is not required, but a good consideration for a more advanced solution).
• What happens if the user tries to add a task with the same id as an existing task? (Consider preventing this).
• How to handle timezones? (Assume all times are in the user's local timezone for simplicity).

Examples

Example 1:

Input:
Tasks: [{id: "1", title: "Meeting", startTime: new Date("2024-01-27T10:00:00"), duration: 60, recurrence: "daily", endDate: new Date("2024-01-31")}]

Output:
Tasks:
- Meeting (2024-01-27 10:00:00) - Duration: 60 minutes - Recurrence: daily - Next Occurrences: 2024-01-28 10:00:00, 2024-01-29 10:00:00, 2024-01-30 10:00:00

Explanation: The task "Meeting" recurs daily from January 27th to January 31st. The next three occurrences are displayed.

Example 2:

Input:
Tasks: [{id: "2", title: "Workout", startTime: new Date("2024-01-28T16:00:00"), duration: 30, recurrence: "weekly", endDate: new Date("2024-03-24")}]

Output:
Tasks:
- Workout (2024-01-28 16:00:00) - Duration: 30 minutes - Recurrence: weekly - Next Occurrences: 2024-02-04 16:00:00, 2024-02-11 16:00:00, 2024-02-18 16:00:00

Explanation: The task "Workout" recurs weekly. The next three occurrences are displayed.

Example 3:

Input:
Tasks: [{id: "3", title: "Report", startTime: new Date("2024-01-29T09:00:00"), duration: 90, recurrence: "monthly", endDate: new Date("2024-05-29")}]

Output:
Tasks:
- Report (2024-01-29 09:00:00) - Duration: 90 minutes - Recurrence: monthly - Next Occurrences: 2024-02-29 09:00:00, 2024-03-29 09:00:00, 2024-04-29 09:00:00

Explanation: The task "Report" recurs monthly. The next three occurrences are displayed.

Constraints

• The component should be implemented using Vue.js 3 and TypeScript.
• The UI can be simple (e.g., using basic HTML elements). Focus on the logic and functionality.
• Date and time manipulation should be handled using JavaScript's built-in Date object.
• The component should be able to handle at least 10 tasks without significant performance degradation.
• All dates should be displayed in a consistent format (e.g., YYYY-MM-DD HH:mm:ss).

Notes

• Consider using Vue's reactivity system to automatically update the UI when tasks are added or modified.
• You can use a simple array to store the tasks.
• Focus on the core scheduling logic. Styling and advanced UI features are not required.
• Think about how to handle invalid date inputs and provide helpful error messages to the user.
• The endDate is crucial for recurring tasks. Ensure your calculations are correct based on this date.
• For the weekly recurrence, assume it recurs every week unless otherwise specified. No specific day of the week selection is required.