issues Create an `unsaved changes` message when you make changes in user permissions or book settings without saving it #123

app/templates/book/settings.html

@@ -50,13 +50,13 @@
       <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
       <div>
         <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
-        <input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
+        <input value="{{book.label}}" type="text" name="label" id="label" class="book-label-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
       </div>
       <div>
         <label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
           Book about
         </label>
-        <textarea type="text" name="about" id="about" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
+        <textarea type="text" name="about" id="about" class="book-about-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
       </div>
       <div class="multiple-input-block mb-6">
         <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
@@ -66,7 +66,7 @@
         <input
           type="text"
           id="tags-input"
-          class="multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          class="book-tags-input multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder="e.g. Law   (press 'Enter' or Comma to add tag. Click on tag to edit it)"
           data-save-results-to="tags-to-submit"
         >
@@ -157,7 +157,7 @@
             </tbody>
           </table>
         </div>
-        <button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+        <button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="add-contributor-btn text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
           New Contributor
         </button>

src/main.ts

@@ -33,6 +33,7 @@ import {deleteInterpretation} from './deleteInterpretation';
 import {indeterminateInputs} from './indeterminateInputs';
 import {initRefreshAccessLevelTree} from './refreshAccessLevelTree';
 import {deleteContributor} from './deleteContributor';
+import {initUnsavedChangedAlerts} from './unsavedChangedAlert';
 
 initQuillReadOnly();
 initBooks();
@@ -69,3 +70,4 @@ deleteInterpretation();
 indeterminateInputs();
 initRefreshAccessLevelTree();
 deleteContributor();
+initUnsavedChangedAlerts();

src/unsavedChangedAlert.ts

@@ -0,0 +1,32 @@
+const initAlertOnClick = (element: HTMLElement) => {
+  element.addEventListener('click', () => {
+    window.addEventListener('beforeunload', function (e) {
+      var confirmationMessage =
+        'It looks like you have been editing something. ' +
+        'If you leave before saving, your changes will be lost.';
+
+      (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+      return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+    });
+  });
+};
+
+export const initUnsavedChangedAlerts = () => {
+  const elementsSelectors = [
+    '.book-label-input',
+    '.book-about-input',
+    '.book-tags-input',
+    '.multiple-input-word',
+    '.contributor-role-select',
+    '.edit-permissions-btn',
+    '.add-contributor-btn',
+  ];
+
+  elementsSelectors.forEach(selector => {
+    const elements: NodeListOf<HTMLElement> =
+      document.querySelectorAll(selector);
+    elements.forEach(element => {
+      initAlertOnClick(element);
+    });
+  });
+};