Bug fix/427 unresponsive form

fixes https://gitlab.ruhr-uni-bochum.de/FDM/rdm-system/antleaf-projectmanagement/-/issues/427#note_221996

We have handled the issue where the screen was clickable and user where able to add more entries to the form even when the form submission is in progress.

hyrax/app/assets/javascripts/work_show.js

@@ -28,9 +28,9 @@ $(document).on("ready", function () {
       if ($("#overlay").length === 0) {
         // Create overlay element
         $("body").append(`
-                <div id="overlay" class="overlay" style="display: flex;">
-                </div>
-            `);
+          <div id="overlay" class="overlay" style="display: flex;">
+          </div>
+        `);
 
         // Add CSS styles dynamically
         $("<style>")
@@ -38,32 +38,39 @@ $(document).on("ready", function () {
           .html(
             `
             #overlay {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.1); 
-                justify-content: center;                 
-                align-items: center;
-                z-index: 1000; 
-                display: flex;
-                pointer-events: none;
+              position: fixed;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background-color: rgba(0, 0, 0, 0.1); 
+              justify-content: center;                 
+              align-items: center;
+              z-index: 1000; 
+              display: flex;
+              pointer-events: auto; /* Allow pointer events on overlay */
+            }
+            body.disable-clicks > *:not(#overlay) {
+              pointer-events: none; /* Disable pointer events on everything except the overlay */
             }
             `
           )
           .appendTo("head");
       }
 
+      // Disable background clicks
+      $("body").addClass("disable-clicks");
+
       // Show the overlay
-      $("#overlay").fadeIn(); // Show the overlay when the button is clicked
+      $("#overlay").fadeIn();
 
-      // Hide the overlay when clicking on it
-      $("#overlay").click(function () {
-        $(this).fadeOut(function () {
-          $(this).remove(); // Remove the overlay from the DOM after fading out
-        });
-      });
+      // Hide the overlay and re-enable clicks when clicking on it
+      // $("#overlay").click(function () {
+      //   $(this).fadeOut(function () {
+      //     $(this).remove(); // Remove the overlay from the DOM after fading out
+      //     $("body").removeClass("disable-clicks"); // Re-enable clicks on background elements
+      //   });
+      // });
     });
   });