From e231f3c1590de461876bdfce8abdd30e55f43d0a Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 2 May 2025 10:18:29 +0200 Subject: [PATCH 1/7] Submit forms with ajax --- lang/en/frontend.php | 8 ++++ lang/nl/frontend.php | 8 ++++ resources/js/components/FormConditions.vue | 43 +++++++++++++++++++-- resources/views/page_builder/form.blade.php | 4 +- src/RapidezStatamicServiceProvider.php | 12 +++++- 5 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 lang/en/frontend.php create mode 100644 lang/nl/frontend.php diff --git a/lang/en/frontend.php b/lang/en/frontend.php new file mode 100644 index 0000000..586097d --- /dev/null +++ b/lang/en/frontend.php @@ -0,0 +1,8 @@ + [ + 'success' => 'Form submitted successfully', + 'error' => 'Something went wrong, please try again later', + ], +]; diff --git a/lang/nl/frontend.php b/lang/nl/frontend.php new file mode 100644 index 0000000..f5664d3 --- /dev/null +++ b/lang/nl/frontend.php @@ -0,0 +1,8 @@ + [ + 'success' => 'Formulier verzonden', + 'error' => 'Er ging iets fout, probeer het later opnieuw', + ], +]; \ No newline at end of file diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index 92fca52..abc85c0 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -3,22 +3,59 @@ import '/public/vendor/statamic/frontend/js/helpers.js' Vue.prototype.Statamic = window.Statamic export default { - props: ['initialData'], + props: { + initialData: { + type: Object, + required: true, + }, + translations: { + type: Object, + default: () => ({}), + }, + callback: { + type: Function, + }, + }, data() { return { formData: this.initialData, + success: false, + error: false, }; }, render() { - return this.$scopedSlots.default({ formData: this.formData }); + return this.$scopedSlots.default({ formData: this.formData, submit: this.submit }); }, mounted() { + console.log(this.translations) let token = this.$root.csrfToken let csrfField = this.$el.querySelector('input[value="STATAMIC_CSRF_TOKEN"]') if (csrfField && token && token !== 'STATAMIC_CSRF_TOKEN') { csrfField.value = token } - } + }, + + methods: { + async submit(event) { + event.preventDefault() + + const response = await rapidezFetch(this.$el.action, { + method: this.$el.method, + body: new FormData(this.$el), + }) + + if (response.ok) { + this.success = true + Notify(this.translations.success, 'success') + if (this.callback) { + await this.callback() + } + } else { + this.error = true + Notify(this.translations.error, 'error') + } + }, + }, } diff --git a/resources/views/page_builder/form.blade.php b/resources/views/page_builder/form.blade.php index c04a33b..7f1e677 100644 --- a/resources/views/page_builder/form.blade.php +++ b/resources/views/page_builder/form.blade.php @@ -5,8 +5,8 @@ @return @endif - -
+ + @foreach($form['params'] as $name => $value) @endforeach diff --git a/src/RapidezStatamicServiceProvider.php b/src/RapidezStatamicServiceProvider.php index 0565125..19cadc5 100644 --- a/src/RapidezStatamicServiceProvider.php +++ b/src/RapidezStatamicServiceProvider.php @@ -78,12 +78,20 @@ public function boot() ->bootBuilder() ->bootSitemaps() ->bootStaticCaching() - ->bootStack(); + ->bootStack() + ->bootTranslations(); Vue::register(); Alternates::register(); } - + + protected function bootTranslations(): self + { + $this->loadTranslationsFrom(__DIR__ . '/../lang', 'rapidez-statamic'); + + return $this; + } + protected function bootBuilder(): self { config(['statamic.builder' => [ From df0db0d9a1dc9ce2e1f4f8904835994d345a1e09 Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 2 May 2025 10:19:06 +0200 Subject: [PATCH 2/7] Submit forms with ajax --- resources/views/page_builder/form.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/page_builder/form.blade.php b/resources/views/page_builder/form.blade.php index 7f1e677..c78d29d 100644 --- a/resources/views/page_builder/form.blade.php +++ b/resources/views/page_builder/form.blade.php @@ -5,7 +5,7 @@ @return @endif - + @foreach($form['params'] as $name => $value) From 8f50ae68566387d8873dfc66573a456bb3bbd3e9 Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 2 May 2025 12:55:43 +0200 Subject: [PATCH 3/7] Use new merged translations --- resources/js/components/FormConditions.vue | 9 ++------- resources/views/page_builder/form.blade.php | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index abc85c0..843ef39 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -8,10 +8,6 @@ export default { type: Object, required: true, }, - translations: { - type: Object, - default: () => ({}), - }, callback: { type: Function, }, @@ -27,7 +23,6 @@ export default { return this.$scopedSlots.default({ formData: this.formData, submit: this.submit }); }, mounted() { - console.log(this.translations) let token = this.$root.csrfToken let csrfField = this.$el.querySelector('input[value="STATAMIC_CSRF_TOKEN"]') @@ -47,13 +42,13 @@ export default { if (response.ok) { this.success = true - Notify(this.translations.success, 'success') + Notify(window.config.translations.packages.statamic.form.success, 'success') if (this.callback) { await this.callback() } } else { this.error = true - Notify(this.translations.error, 'error') + Notify(window.config.translations.packages.statamic.form.error, 'success') } }, }, diff --git a/resources/views/page_builder/form.blade.php b/resources/views/page_builder/form.blade.php index c78d29d..dd64243 100644 --- a/resources/views/page_builder/form.blade.php +++ b/resources/views/page_builder/form.blade.php @@ -5,7 +5,7 @@ @return @endif - + @foreach($form['params'] as $name => $value) From ea8827da138261d35a3219469023a9f80b4f54ad Mon Sep 17 00:00:00 2001 From: Bob Wezelman Date: Fri, 2 May 2025 13:13:18 +0200 Subject: [PATCH 4/7] Update resources/js/components/FormConditions.vue Co-authored-by: Jade Geels --- resources/js/components/FormConditions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index 843ef39..855ea44 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -20,7 +20,7 @@ export default { }; }, render() { - return this.$scopedSlots.default({ formData: this.formData, submit: this.submit }); + return this.$scopedSlots.default(this); }, mounted() { let token = this.$root.csrfToken From 9bd33d5e2760fbeb1c38cdcce1748cff25cf521b Mon Sep 17 00:00:00 2001 From: Bob Wezelman Date: Fri, 2 May 2025 13:13:24 +0200 Subject: [PATCH 5/7] Update resources/js/components/FormConditions.vue Co-authored-by: Jade Geels --- resources/js/components/FormConditions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index 855ea44..030961c 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -48,7 +48,7 @@ export default { } } else { this.error = true - Notify(window.config.translations.packages.statamic.form.error, 'success') + Notify(window.config.translations.packages.statamic.form.error, 'error') } }, }, From e3d0b9e8814d9ec290f917b0a6e9ad60ae2900cd Mon Sep 17 00:00:00 2001 From: Bob Date: Tue, 20 May 2025 15:14:16 +0200 Subject: [PATCH 6/7] Use config composer for translations --- resources/js/components/FormConditions.vue | 7 +++++-- src/Http/ViewComposers/ConfigComposer.php | 14 ++++++++++++++ src/RapidezStatamicServiceProvider.php | 3 +++ 3 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 src/Http/ViewComposers/ConfigComposer.php diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index 843ef39..053ca37 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -40,15 +40,18 @@ export default { body: new FormData(this.$el), }) + let data = await response.json() + if (response.ok) { this.success = true - Notify(window.config.translations.packages.statamic.form.success, 'success') + Notify(window.config.statamic.translations.form.success, 'success') if (this.callback) { await this.callback() } } else { this.error = true - Notify(window.config.translations.packages.statamic.form.error, 'success') + Notify(window.config.statamic.translations.form.error, 'success') + console.error(data?.errors) } }, }, diff --git a/src/Http/ViewComposers/ConfigComposer.php b/src/Http/ViewComposers/ConfigComposer.php new file mode 100644 index 0000000..13f6ddc --- /dev/null +++ b/src/Http/ViewComposers/ConfigComposer.php @@ -0,0 +1,14 @@ + Date: Wed, 21 May 2025 08:50:54 +0200 Subject: [PATCH 7/7] Error notification instead of success --- resources/js/components/FormConditions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/FormConditions.vue b/resources/js/components/FormConditions.vue index e65997e..711ba98 100644 --- a/resources/js/components/FormConditions.vue +++ b/resources/js/components/FormConditions.vue @@ -50,7 +50,7 @@ export default { } } else { this.error = true - Notify(window.config.statamic.translations.form.error, 'success') + Notify(window.config.statamic.translations.form.error, 'error') console.error(data?.errors) } },