Confetti on form submission (#113)

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',

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',

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
         ];
     }
 

database/migrations/2023_04_04_093956_add_confetti_on_submission_to_forms.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->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');
+        });
+    }
+};

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",

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)
     }
   }
 }

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)

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"
       />
+      <toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
+                  label="Burst of confetti on successful submisison"
+                  @input="onChangeConfettiOnSubmission"
+      />
     </template>
   </collapse>
 </template>
@@ -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()
+      }
     }
   }
 }

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