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 index 5ec55df8e037..3cb7db5a178d 100644 --- 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 index 7cd2d181a935..b0b1cf60ab9b 100644 --- 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.setFormSubmitInProgress(true); event?.preventDefault(); @@ -661,10 +664,18 @@ export default class IndexController extends Controller { console.error('Error saving activity:', error); }) .finally(() => { - this.saveInProgress = false; + this.setFormSubmitInProgress(false); }); } + private setFormSubmitInProgress(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.setFormSubmitInProgress(false); } private resetJournalsContainerMargins():void {