Confetti on form submission (#113)

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