bug/60719 disable wp comment submitter while the form request is in p…

…rogress https://community.openproject.org/work_packages/60719 Prevent possible repeate submissions that can arise from slow network connections, and the user double clicking the comment submit button
opf · Jan 23, 2025 · 221c664 · 221c664
1 parent bc2e6df
commit 221c664
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb
@@ -3,7 +3,7 @@
     flex_layout(my: 2, data: { test_selector: "op-work-package-journal-form" }) do |new_form_container|
       new_form_container.with_row(
         display: button_row_display_value,
-        data: { 
+        data: {
           "work-packages--activities-tab--index-target": "buttonRow"
         }) do
         flex_layout(justify_content: :space_between) do |button_row|
@@ -39,10 +39,10 @@
           id: "work-package-journal-form-element", # required for specs
           model: journal,
           method: :post,
-          data: { 
-            turbo: true, 
-            turbo_stream: true, 
-            "work-packages--activities-tab--index-target": "form", 
+          data: {
+            turbo: true,
+            turbo_stream: true,
+            "work-packages--activities-tab--index-target": "form",
             action: "submit->work-packages--activities-tab--index#onSubmit",
             "test_selector": "op-work-package-journal-form-element"
           },
@@ -61,7 +61,10 @@
                 icon: :"paper-airplane",
                 "aria-label": t("activities.work_packages.activity_tab.label_submit_comment"),
                 type: :submit,
-                data: { "test_selector": "op-submit-work-package-journal-form" }
+                data: {
+                  "test_selector": "op-submit-work-package-journal-form",
+                  "work-packages--activities-tab--index-target": "formSubmitButton"
+                }
               ))
             end
           end

diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts
@@ -24,14 +24,17 @@ export default class IndexController extends Controller {
     showConflictFlashMessageUrl: String,
   };
 
-  static targets = ['journalsContainer', 'buttonRow', 'formRow', 'form', 'reactionButton'];
+  static targets = ['journalsContainer', 'buttonRow', 'formRow', 'form', 'formSubmitButton', 'reactionButton'];
 
   declare readonly journalsContainerTarget:HTMLElement;
   declare readonly buttonRowTarget:HTMLInputElement;
   declare readonly formRowTarget:HTMLElement;
   declare readonly formTarget:HTMLFormElement;
+  declare readonly formSubmitButtonTarget:HTMLButtonElement;
   declare readonly reactionButtonTargets:HTMLElement[];
 
+  declare readonly hasFormSubmitButtonTarget:boolean;
+
   declare updateStreamsUrlValue:string;
   declare sortingValue:string;
   declare lastServerTimestampValue:string;
@@ -648,7 +651,7 @@ export default class IndexController extends Controller {
   async onSubmit(event:Event | null = null) {
     if (this.saveInProgress === true) return;
 
-    this.saveInProgress = true;
+    this.formSubmitInProgress = true;
 
     event?.preventDefault();
 
@@ -661,10 +664,18 @@ export default class IndexController extends Controller {
         console.error('Error saving activity:', error);
       })
       .finally(() => {
-        this.saveInProgress = false;
+        this.formSubmitInProgress = false;
       });
   }
 
+  private set formSubmitInProgress(inProgress:boolean) {
+    this.saveInProgress = inProgress;
+
+    if (this.hasFormSubmitButtonTarget) {
+      this.formSubmitButtonTarget.disabled = inProgress;
+    }
+  }
+
   private prepareFormData():FormData {
     const ckEditorInstance = this.getCkEditorInstance();
     const data = ckEditorInstance ? ckEditorInstance.getData({ trim: false }) : '';
@@ -711,7 +722,7 @@ export default class IndexController extends Controller {
       this.handleStemVisibility();
     }, 10);
 
-    this.saveInProgress = false;
+    this.formSubmitInProgress = false;
   }
 
   private resetJournalsContainerMargins():void {