feat: debounced forms

2025-12-04 13:56:51 +01:00
parent 4596b88bee
commit 9dbb465106
3 changed files with 57 additions and 2 deletions
@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = ['button']
+    static classes = [ 'disabled' ]
+    static values = {
+        isSubmitting: Boolean,
+        submittingLabel: { type: String, default: 'wird versendet' }
+    }
+
+    debounce(e) {
+        if (true === this.isSubmittingValue) {
+            e.preventDefault()
+            e.stopPropagation()
+            return false
+        }
+        this.isSubmittingValue = true
+        this.buttonTarget.innerText = this.submittingLabelValue
+        if (this.hasDisabledClass) {
+            this.buttonTarget.classList.add(this.disabledClass)
+        }
+    }
+}
+
@@ -7,10 +7,18 @@
        </f:if>
        <f:if condition="{form.nextPage}">
            <f:then>
-                <f:form.button property="__currentPage" value="{form.nextPage.index}" class="button bg-button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button>
+                <f:form.button property="__currentPage"
+                               value="{form.nextPage.index}"
+                               data="{'form-debounce-target': 'button'}"
+                               class="button bg-button">
+                    {formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}
+                </f:form.button>
            </f:then>
            <f:else>
-                <f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button bg-button">
+                <f:form.button property="__currentPage"
+                               value="{form.pages -> f:count()}"
+                               data="{'form-debounce-target': 'button'}"
+                               class="button bg-button">
                    {formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')}
                </f:form.button>
            </f:else>
@@ -0,0 +1,22 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
+<formvh:renderRenderable renderable="{form}">
+        <formvh:form
+                object="{form}"
+                action="{form.renderingOptions.controllerAction}"
+                method="{form.renderingOptions.httpMethod}"
+                id="{form.identifier}"
+                section="{form.identifier}"
+                enctype="{form.renderingOptions.httpEnctype}"
+                addQueryString="{form.renderingOptions.addQueryString}"
+                argumentsToBeExcludedFromQueryString="{form.renderingOptions.argumentsToBeExcludedFromQueryString}"
+                additionalParams="{form.renderingOptions.additionalParams}"
+                additionalAttributes="{formvh:translateElementProperty(element: form, property: 'fluidAdditionalAttributes')}"
+                data="{'controller': 'form-debounce', 'action': 'form-debounce#debounce', 'form-debounce-disabled-class': 'cursor-not-allowed'}"
+        >
+            <f:render partial="{form.currentPage.templateName}" arguments="{page: form.currentPage}" />
+            <div class="actions">
+                <f:render partial="Form/Navigation" arguments="{form: form}" />
+            </div>
+        </formvh:form>
+</formvh:renderRenderable>
+</html>