Vue Task Scheduler with Priorities

This challenge focuses on implementing a priority-based task scheduler within a Vue.js application. You will create a system that allows tasks to be added with different priority levels, ensuring that higher-priority tasks are executed before lower-priority ones, even if they are added later. This is crucial for applications where timely execution of critical operations is paramount.

Problem Description

You need to build a Vue component that manages a list of tasks. Each task has a name and a priority level (e.g., "high", "medium", "low"). The scheduler should process these tasks in order of their priority, from highest to lowest. If multiple tasks have the same priority, they should be processed in the order they were added.

Key Requirements:

1. Task Addition: Users should be able to add new tasks with a specified name and priority.
2. Priority Levels: Support at least three distinct priority levels: "high", "medium", and "low".
3. Execution Order: Tasks must be executed based on priority. "high" > "medium" > "low".
4. FIFO within Priority: Tasks with the same priority should execute in a First-In, First-Out (FIFO) manner.
5. Visual Feedback: The UI should clearly display the list of pending tasks, their priorities, and indicate which task is currently being executed.
6. Simulated Execution: Task execution can be simulated using a simple setTimeout to mimic asynchronous operations.

Expected Behavior:

When a task is added, it should be placed in a queue. The scheduler continuously checks the queue and executes the highest-priority available task. Once a task finishes (simulated), the next highest-priority task should be picked up.

Edge Cases:

• Adding multiple tasks with the same priority.
• Adding tasks in a mixed order of priorities.
• What happens if the task list is empty?

Examples

Example 1: Basic Priority Execution

Input:
1. Add Task "Process Payment" (priority: high)
2. Add Task "Send Email" (priority: medium)
3. Add Task "Update UI" (priority: low)

Output:
- UI shows tasks: ["Process Payment" (high), "Send Email" (medium), "Update UI" (low)]
- Scheduler starts executing "Process Payment".
- After "Process Payment" finishes, scheduler executes "Send Email".
- After "Send Email" finishes, scheduler executes "Update UI".

Example 2: Later High Priority Task Interrupts

Input:
1. Add Task "Load Data" (priority: low)
2. Add Task "Fetch Settings" (priority: medium)
3. Add Task "Save Configuration" (priority: high)

Output:
- UI shows tasks: ["Load Data" (low), "Fetch Settings" (medium), "Save Configuration" (high)]
- Scheduler starts executing "Fetch Settings" (as it was added second and is higher than "Load Data").
- Immediately after, "Save Configuration" is added.
- After "Fetch Settings" finishes, scheduler executes "Save Configuration" (high priority).
- Finally, "Load Data" executes.

Example 3: Multiple Tasks with Same Priority

Input:
1. Add Task "Task A" (priority: medium)
2. Add Task "Task B" (priority: low)
3. Add Task "Task C" (priority: medium)

Output:
- UI shows tasks: ["Task A" (medium), "Task B" (low), "Task C" (medium)]
- Scheduler starts executing "Task A".
- After "Task A" finishes, scheduler executes "Task C" (as it's the next medium priority task added).
- Finally, "Task B" executes.

Constraints

• Priority levels are strings: "high", "medium", "low".
• Task names are strings and are unique within the current pending list.
• The scheduler should handle up to 100 concurrent tasks in the queue.
• Simulated task execution time should be between 50ms and 500ms.

Notes

• Consider how you will map the string priority levels to a numerical or comparable order.
• A good data structure will be key to efficiently managing the priority queue.
• Think about how to update the UI to reflect the current state of the scheduler (pending tasks, executing task).
• You can use Vue's Composition API or Options API.