From df68b20f82243e0adaa48469ba09747d8b8f4d3a Mon Sep 17 00:00:00 2001 From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com> Date: Wed, 12 Apr 2023 16:47:05 +0530 Subject: [PATCH] Confetti on form submission (#113) --- app/Http/Requests/UserFormRequest.php | 1 + app/Models/Forms/Form.php | 1 + database/factories/FormFactory.php | 3 +- ...56_add_confetti_on_submission_to_forms.php | 32 +++++++++++++++++++ package.json | 1 + resources/js/base.js | 13 ++++++++ .../open/forms/OpenCompleteForm.vue | 6 ++++ .../form-components/FormAboutSubmission.vue | 14 +++++++- resources/js/mixins/form_editor/initForm.js | 1 + 9 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 database/migrations/2023_04_04_093956_add_confetti_on_submission_to_forms.php diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php index 033bc4b..824aa6a 100644 --- a/app/Http/Requests/UserFormRequest.php +++ b/app/Http/Requests/UserFormRequest.php @@ -72,6 +72,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest 'max_submissions_reached_text' => 'string|nullable', 'editable_submissions' => 'boolean|nullable', 'editable_submissions_button_text' => 'string|min:1|max:50', + 'confetti_on_submission' => 'boolean', // Properties 'properties' => 'required|array', diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php index fe50e63..4e8897f 100644 --- a/app/Models/Forms/Form.php +++ b/app/Models/Forms/Form.php @@ -78,6 +78,7 @@ class Form extends Model 'max_submissions_reached_text', 'editable_submissions', 'editable_submissions_button_text', + 'confetti_on_submission', // Security & Privacy 'can_be_indexed', diff --git a/database/factories/FormFactory.php b/database/factories/FormFactory.php index 79086db..18a900b 100644 --- a/database/factories/FormFactory.php +++ b/database/factories/FormFactory.php @@ -84,7 +84,8 @@ class FormFactory extends Factory 'password' => false, 'tags' => [], 'slack_webhook_url' => null, - 'editable_submissions_button_text' => 'Edit submission' + 'editable_submissions_button_text' => 'Edit submission', + 'confetti_on_submission' => false ]; } diff --git a/database/migrations/2023_04_04_093956_add_confetti_on_submission_to_forms.php b/database/migrations/2023_04_04_093956_add_confetti_on_submission_to_forms.php new file mode 100644 index 0000000..706b597 --- /dev/null +++ b/database/migrations/2023_04_04_093956_add_confetti_on_submission_to_forms.php @@ -0,0 +1,32 @@ +boolean('confetti_on_submission')->default(false); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down() + { + Schema::table('forms', function (Blueprint $table) { + $table->dropColumn('confetti_on_submission'); + }); + } +}; diff --git a/package.json b/package.json index 4014b20..f539701 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "vue": "^2.6.14", "vue-chartjs": "^4.1.0", "vue-clickaway": "^2.2.2", + "vue-confetti": "^2.3.0", "vue-i18n": "^8.25.0", "vue-meta": "^2.4.0", "vue-notion": "^0.4.0", diff --git a/resources/js/base.js b/resources/js/base.js index f674b4f..6e56a52 100644 --- a/resources/js/base.js +++ b/resources/js/base.js @@ -2,6 +2,9 @@ * Base mixin for all Vue components */ import debounce from 'debounce' +import Vue from 'vue' +import VueConfetti from 'vue-confetti' +Vue.use(VueConfetti) export default { @@ -78,6 +81,16 @@ export default { confirmationProceed: null, confirmationCancel: null } + }, + + /** + * Display confetti + */ + playConfetti () { + this.$confetti.start({ defaultSize: 6 }) + setTimeout(() => { + this.$confetti.stop() + }, 3000) } } } diff --git a/resources/js/components/open/forms/OpenCompleteForm.vue b/resources/js/components/open/forms/OpenCompleteForm.vue index 2945741..4e96762 100644 --- a/resources/js/components/open/forms/OpenCompleteForm.vue +++ b/resources/js/components/open/forms/OpenCompleteForm.vue @@ -239,6 +239,12 @@ export default { this.loading = false this.submitted = true this.$emit('submitted', true) + + // If enabled display confetti + if(this.form.confetti_on_submission){ + this.playConfetti() + } + }).catch((error) => { if (error.response.data && error.response.data.message) { this.alertError(error.response.data.message) diff --git a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue index 76c09ab..9bcf7a9 100644 --- a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue +++ b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue @@ -149,6 +149,10 @@ help="This message will be shown when the form will have the maximum number of submissions" :required="false" /> + @@ -164,7 +168,8 @@ export default { data() { return { submissionOptions: {}, - isCollapseOpen: true + isCollapseOpen: true, + isMounted: false } }, @@ -222,11 +227,18 @@ export default { }, mounted() { + this.isMounted = true }, methods: { onClickCollapse(e) { this.isCollapseOpen = e + }, + onChangeConfettiOnSubmission(val) { + this.$set(this.form, 'confetti_on_submission', val) + if(this.isMounted && val){ + this.playConfetti() + } } } } diff --git a/resources/js/mixins/form_editor/initForm.js b/resources/js/mixins/form_editor/initForm.js index 72fb015..4786128 100644 --- a/resources/js/mixins/form_editor/initForm.js +++ b/resources/js/mixins/form_editor/initForm.js @@ -42,6 +42,7 @@ export default { max_submissions_count: null, max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.', editable_submissions_button_text: 'Edit submission', + confetti_on_submission: false, // Security & Privacy can_be_indexed: true