Notification of unsaved changes

[fredericalpers]

Initiative

Optimize the backend of the onOffice for WP-Websites Plugin for a better user experience

Epic

Notification of unsaved changes.

User story

As a real estate agent utilizing the onOffice for WP-Websites plugin, I often make configurations and adjustments in the settings to optimize my website. Currently, there is no notification system in place to alert me when I attempt to leave a settings page without saving changes. To prevent loss of modifications, I propose the implementation of a notification system that provides a clear alert when unsaved changes have been detected.

The absence of notifications for unsaved changes poses a risk of unintentional settings/data loss and can result in time-consuming reconfigurations. To address this concern, a notification system should be integrated into the onOffice for WP-Websites Plugin, ensuring that users are reminded to save their changes before navigating away from the page.

Tasks

• Develop a notification component that can be triggered when unsaved changes are detected
• Integrate the notification system with all relevant settings pages within the onOffice for WP-Websites Plugin
• Included options within the notification to allow users to either save their changes or discard them

By implementing this notification system, the onOffice for WP-Websites Plugin can enhance the user experience by minimizing the risk of unintended data loss and promoting a more user-centric approach to configuration changes.

Related links:
https://cloudscape.design/patterns/general/unsaved-changes/
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

[dai-eastgate]

@fredericalpers I have found a solution and I need 3 days to implement and test it. Thanks!

[dai-eastgate]

@fredericalpers I implemented the "Notification of unsaved changes" with the following screens: Addresses, List View, Detail View, Similar Estate, Unit List, Contact form, Interest form, Applicant Search Form, Owner form, and Settings. Please take a look at my video and let me know your opinions. Thanks!

https://files.fm/u/jgeruf6j6g#/view/wxuxy38eh8

Note: During testing, I found that the "beforeunload" event will not support the user behavior of "entering URL".

https://files.fm/u/jgeruf6j6g#/view/k85e593vhj
Is this too big a problem for you? Can we ignore it or not?
If you need me to fix it, I will investigate it and give you feedback on the research results.

[fredericalpers]

@dai-eastgate please investigate further thank you :)

[dai-eastgate]

@fredericalpers
After investigating, I have the following observations:

1. The document (https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) mentions an issue:
   "The main use case for this event is to trigger a browser-generated confirmation dialog that asks users to confirm if they really want to leave the page when they try to close or reload it, or navigate somewhere else. This is intended to help prevent loss of unsaved data."

=> When we use "beforeunload_event" and calling the event object's preventDefault() method, we can trigger a browser-generated confirmation dialog (meant: Showing the browser-native confirmation modal) to handle the "cancel" button to show the "Notification of unsaved changes"

2. According to the document ("https://cloudscape.design/patterns/general/unsaved-changes/)
   With the following 5 user behaviors:
   

• I tested and found the "Show the browser-native confirmation modal" feature is working normally in all browsers.
  

• However, In the Safari browser, the "Show the browser-native confirmation modal" feature does not support the user behavior "Modifying the URL in the browser address bar".
  => This is the cause of the bug when a user"Modifying the URL in the browser address bar" in Safari does not show "Notification of unsaved changes".
  => Therefore we cannot fix this bug.

Above are the results of my investigation. You can check it out and let me know your opinions. Thanks!

[fredericalpers]

@dai-eastgate please go ahead and implement all possible notifications. :)

[dai-eastgate]

@dai-eastgate please go ahead and implement all possible notifications. :)

We created a PR for this issue. Please help us to review it. Thanks!