Confetti on form submission (#113)

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