Asynchronous Task Management with Vue and TypeScript

This challenge focuses on building a simple work loop component in Vue.js using TypeScript. The component should manage a series of asynchronous tasks, track their progress, and provide visual feedback to the user. This is a common pattern in applications that perform background operations like data processing, API calls, or complex calculations.

Problem Description

You are tasked with creating a Vue component called WorkLoop that manages and displays the progress of a series of asynchronous tasks. The component will receive an array of task functions as a prop. Each task function should accept a resolve and reject function (standard Promise conventions) and perform some asynchronous operation. The component should:

1. Initialize: Upon creation, the component should start executing the tasks sequentially.
2. Execute Tasks: Each task should be executed one after another. A task's execution should not begin until the previous task has completed (either successfully or with an error).
3. Track Progress: The component should maintain and display the current task index and the overall progress percentage.
4. Handle Errors: If a task fails (rejects its Promise), the component should stop executing further tasks and display an error message.
5. Completion: Once all tasks are completed successfully, the component should display a success message.
6. Provide Visual Feedback: The component should display a loading indicator while tasks are running and appropriate messages for success or failure.

Key Requirements:

• Use Vue.js 3 and TypeScript.
• The component should be reactive, updating the UI as tasks progress.
• Error handling is crucial.
• Sequential execution is mandatory.
• Clear and concise code.

Expected Behavior:

The component should render a loading indicator while tasks are running. It should display the current task index and progress percentage. If a task fails, it should display an error message and stop further execution. Upon successful completion of all tasks, it should display a success message.

Edge Cases to Consider:

• Empty task array: The component should handle this gracefully, displaying a message indicating no tasks were provided.
• Tasks that take a very long time to complete: Consider how to provide feedback to the user in this scenario.
• Tasks that reject with errors that are not strings: Ensure the error message displayed is user-friendly.

Examples

Example 1:

Input: tasks = [() => new Promise(resolve => setTimeout(() => resolve("Task 1 Complete"), 500)), () => new Promise(resolve => setTimeout(() => resolve("Task 2 Complete"), 300)), () => new Promise(resolve => setTimeout(() => resolve("Task 3 Complete"), 200))]
Output: The component displays:
    - Loading indicator
    - Task 1: 33.33%
    - Task 2: 66.67%
    - Task 3: 100%
    - Success message: "All tasks completed successfully!"
Explanation: Three tasks are executed sequentially with varying delays. The progress is updated accordingly, and a success message is displayed at the end.

Example 2:

Input: tasks = [() => new Promise(resolve => setTimeout(() => resolve("Task 1 Complete"), 500)), () => new Promise((_, reject) => setTimeout(() => reject("Task 2 Failed"), 300)), () => new Promise(resolve => setTimeout(() => resolve("Task 3 Complete"), 200))]
Output: The component displays:
    - Loading indicator
    - Task 1: 33.33%
    - Error message: "Task 2 failed: Task 2 Failed"
Explanation: The first task completes successfully. The second task rejects, causing the component to stop execution and display an error message.

Example 3: (Edge Case)

Input: tasks = []
Output: The component displays:
    - Message: "No tasks provided."
Explanation: The component handles the case where no tasks are provided gracefully.

Constraints

• The component should be implemented as a single Vue component.
• The task functions should be provided as an array of functions that return Promises.
• The component should update the UI at least every 500ms to provide feedback.
• The progress percentage should be calculated as (current task index / total number of tasks) * 100.
• Error messages should be displayed in a user-friendly format.

Notes

• Consider using async/await for cleaner asynchronous code.
• Think about how to handle different types of errors that might be thrown by the task functions.
• The visual feedback can be simple (e.g., text updates) or more elaborate (e.g., progress bar). Focus on the core logic of task execution and progress tracking.
• The component should be reusable and adaptable to different types of asynchronous tasks.