Angular - check if user is editing details and don't allow another user to enter them

I need to implement following feature:

• I've got a list of items in a table
• for every item user can go inside and edit it
• if user A is inside details of item X, on the list for user B "open" button for item X is disabled

I'm using angular 4 with redux (ngrx), backend is in Java with Spring.

What is the best way to implement this? I thought about two options:

1. Send information to server when user is entering the details, and later on send another request when he is navigating out of them. Problem is: how to make sure that there is no way to user to stop working on this without system noticing? (closing tab, closing browser, crash of system etc.)
2. Use setTimeout() and check if specific route is active (with item of the same id). If it's not, send information to server.
3. Use setTimeout() and send information to server that user is still in details of particular item.

Continue reading...