teammates icon indicating copy to clipboard operation
teammates copied to clipboard

[#12749] Autosave and restore progress if user navigates away

Open Respirayson opened this issue 1 year ago • 0 comments

Fixes #12749

Outline of Solution

Description

This PR introduces autosave functionality for this feedback session page. The way that I implemented it ensures that users' responses are automatically saved after they have made a change.

Some key changes

1. Autosave Implementation

  • Added autosave method + events to handle the autosaving of feedback responses to local storage
  • Used timeout that is started upon change in input because periodic intervals might create a potential window where the user refreshes the page before the save kicks in. And saving every input change might waste resources. So I feel that this is a best of both worlds approach to saving the data.

2. Loading autosaved data

  • Lazy loading of feedback session only when the question itself is in the viewport

3. Reset

  • Added a way for users to reset their response to the last submitted state so I like to think of it as a git reset --hard to help users get back to the original previous data that they had.
  • And I also made a few UI changes to add the buttons in to reset the data

Video Demo

Below is a video showcasing a really quick demo of what I've done: https://github.com/Respirayson/teammates/assets/88478542/5eb944dc-37b2-4925-9b49-f46c22991558

And some screenshots:

Tooltip for relevant info image

Reset button disabled when there are no changes image

Also updated the grouped and ungrouped questions' UI image

Respirayson avatar Jun 29 '24 19:06 Respirayson