I’m working on a CRUD page where the user will spend a long time on the page (e.g. 30 mins). It is being used during a phone call to capture call notes.
I would like to implement auto-save on this page to allow the system to automatically save every X seconds so that the user doesn’t accidentally page away after spending 30 mins on the phone and loses all their notes.
What is the best way to implement auto-save on a form page?
To do something every X seconds you would use a Timer Component:
If you are having your client user log into something using the users service, I would implement some sort of users service indexed with a data table strategy:
If you are not going to implement that a user needs to log in and have a permanent id then you might use the browser cashe, sessions, or cookies for short-medium term storage.
You can use the events of the input components to start a timer. For example when a text area changes or a checkbox is clicked, their event will do self.auto_save_timer.interval = 1.
Then get the self.auto_save_timer.tick event to make the server call to save the current content and disable the timer with self.auto_save_timer.interval = 0.
This will save after one second after each burst of changes. Often enough that you don’t miss anything, but not so often that you save after every user interaction with the form components, like every keystroke on a text area.