Asynchronous Task Resumption in Vue.js

Resuming interrupted asynchronous tasks is crucial for providing a smooth user experience, especially in complex applications. This challenge asks you to implement a mechanism within a Vue.js component to pause and resume an asynchronous operation, allowing users to gracefully handle interruptions and continue where they left off. This is particularly useful for long-running processes like data imports or complex calculations.

Problem Description

You need to create a Vue.js component that manages an asynchronous task (simulated by a setTimeout function for simplicity). The component should provide the following functionality:

1. Start: Initiate the asynchronous task. The task should simulate a long-running process by using setTimeout to execute a callback after a specified delay.
2. Pause: Interrupt the currently running task. The component should store the current state of the task (e.g., the remaining time) so it can be resumed later.
3. Resume: Continue the paused task from where it was interrupted. The component should use the stored state to resume the setTimeout function.
4. Cancel: Completely stop the task and reset the component's state.
5. Status Display: Display the current status of the task (Running, Paused, Cancelled, Completed) and the remaining time (if running or paused).

The component should use reactive properties to manage the task state and update the UI accordingly. The setTimeout function should be cleared when pausing or cancelling the task to prevent memory leaks. The resumption should accurately reflect the remaining time from the original start.

Examples

Example 1:

Input: Component initialized with delay = 5000ms
Action: Start -> Pause after 2000ms -> Resume after 1000ms -> Cancel after 1500ms
Output:
- Initially: Status: "Running", Remaining Time: "5000ms"
- After Pause: Status: "Paused", Remaining Time: "3000ms"
- After Resume: Status: "Running", Remaining Time: "2000ms"
- After Cancel: Status: "Cancelled", Remaining Time: "0ms"

Explanation: The task started, paused after 2 seconds, resumed with 3 seconds remaining, and then cancelled, resetting the state.

Example 2:

Input: Component initialized with delay = 10000ms
Action: Start -> Pause after 5000ms -> Cancel after 7000ms
Output:
- Initially: Status: "Running", Remaining Time: "10000ms"
- After Pause: Status: "Paused", Remaining Time: "5000ms"
- After Cancel: Status: "Cancelled", Remaining Time: "0ms"

Explanation: The task started, paused, and then cancelled before completion.

Example 3: (Edge Case - Resuming after Cancellation)

Input: Component initialized with delay = 3000ms
Action: Start -> Cancel after 1000ms -> Resume after 500ms
Output:
- Initially: Status: "Running", Remaining Time: "3000ms"
- After Cancel: Status: "Cancelled", Remaining Time: "0ms"
- After Resume: Status: "Cancelled", Remaining Time: "0ms" (Should not attempt to resume)

Explanation: Attempting to resume after cancellation should not trigger any further actions and should maintain the "Cancelled" state.

Constraints

• The asynchronous task is simulated using setTimeout.
• The delay time for the task should be configurable via a prop (e.g., delay).
• The component should handle edge cases gracefully, such as attempting to resume a cancelled task.
• The component should be written in TypeScript.
• The UI should clearly display the task status and remaining time.
• The component should not leak memory. setTimeout callbacks should be cleared when pausing or cancelling.

Notes

• Consider using Vue's reactivity system (ref or reactive) to manage the task state.
• Think about how to store the task's state when it's paused.
• The setTimeout function's clearTimeout method is essential for preventing memory leaks.
• Error handling is not required for this challenge, focus on the core resumption logic.
• You can use a simple template for the UI; the focus is on the functionality.
• Consider how to prevent multiple simultaneous task starts.