statamic-peak icon indicating copy to clipboard operation
statamic-peak copied to clipboard

[PR pre-approval] Default success hook on forms

Open andjsch opened this issue 7 months ago • 0 comments

Is your feature request related to a problem? Please describe. A customer requested for forms to not reappear after a successful submission. Easy. Publish the form handler and remove the setTimeout-part. Done.

Describe the solution you'd like But what if we thought of the setTimeout() as the "default success hook"? We could put the setTimeout() into the successHook() method, which would still allow for additions, but also allow for it to be skipped by simply adding a return.

How it currently works:

submit() {
    this.submitted = true
    this.form.submit()
        .then(response => {
            this.form.reset()
            this.$refs.form.reset()
            this.success = true
            this.submitted = false
            this.successHook(response)
            setTimeout(() => {
                this.success = false
             }, 4500)
        })
        …
        })
}
successHook(response) {
    {{ success_hook }}
}

How it could work:

submit() {
    this.submitted = true
    this.form.submit()
        .then(response => {
            this.form.reset()
            this.$refs.form.reset()
            this.success = true
            this.submitted = false
            this.successHook(response)
        })
        …
        })
}
successHook(response) {
    {{ success_hook }}

    setTimeout(() => {
        this.success = false
    }, 4500)
}
{{# Call in the Peak Tools Alpine Based Precognition Form Handler. #}}
{{ partial:statamic-peak-tools::snippets/form_handler success_hook="return" }}

Describe alternatives you've considered The {{ success_hook }} could probably be placed within the then() method, but the current state is cleaner.

andjsch avatar Jul 02 '24 13:07 andjsch