Auto save form response based on form config (#217)

* Auto save form response based on form config

* Move confetti and autosave to customization

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Http/Requests/UserFormRequest.php

@@ -74,6 +74,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'editable_submissions' => 'boolean|nullable',
             'editable_submissions_button_text' => 'string|min:1|max:50',
             'confetti_on_submission' => 'boolean',
+            'auto_save'=> 'boolean',
 
             // Properties
             'properties' => 'required|array',

app/Models/Forms/Form.php

@@ -81,6 +81,7 @@ class Form extends Model
         'editable_submissions',
         'editable_submissions_button_text',
         'confetti_on_submission',
+        'auto_save',
 
         // Security & Privacy
         'can_be_indexed',

database/migrations/2023_10_10_140600_add_auto_save_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('auto_save')->default(true);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('auto_save');
+        });
+    }
+};

resources/js/components/open/forms/OpenForm.vue

@@ -224,7 +224,7 @@ export default {
     dataForm: {
       deep: true,
       handler() {
-        if (this.isPublicFormPage && this.form && this.dataFormValue) {
+        if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) {
           try {
             window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
           } catch (e) {
@@ -310,7 +310,7 @@ export default {
           }
         }
       }
-      if (this.isPublicFormPage) {
+      if (this.isPublicFormPage && this.form.auto_save) {
         let pendingData
         try {
           pendingData = window.localStorage.getItem(this.formPendingSubmissionKey)

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -153,10 +153,6 @@
                             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>
@@ -173,7 +169,6 @@ export default {
     return {
       submissionOptions: {},
       isCollapseOpen: true,
-      isMounted: false
     }
   },
 
@@ -229,18 +224,5 @@ export default {
       }
     }
   },
-
-  mounted() {
-    this.isMounted = true
-  },
-
-  methods: {
-    onChangeConfettiOnSubmission(val) {
-      this.$set(this.form, 'confetti_on_submission', val)
-      if(this.isMounted && val){
-        this.playConfetti()
-      }
-    }
-  }
 }
 </script>

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -73,6 +73,14 @@
     <toggle-switch-input name="transparent_background" :form="form" class="mt-4"
                     label="Transparent Background" help="Only applies when form is embedded"
     />
+    <toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
+                         label="Confetti on successful submisison"
+                         @input="onChangeConfettiOnSubmission"
+    />
+    <toggle-switch-input name="auto_save" :form="form"
+                         label="Auto save form response"
+                         help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
+    />
   </collapse>
 </template>
 
@@ -86,6 +94,7 @@ export default {
   },
   data () {
     return {
+      isMounted: false,
       isCollapseOpen: true
     }
   },
@@ -105,9 +114,16 @@ export default {
   watch: {},
 
   mounted() {
+    this.isMounted = true
   },
 
   methods: {
+    onChangeConfettiOnSubmission(val) {
+      this.$set(this.form, 'confetti_on_submission', val)
+      if(this.isMounted && val){
+        this.playConfetti()
+      }
+    },
     openChat () {
       window.$crisp.push(['do', 'chat:show'])
       window.$crisp.push(['do', 'chat:open'])

resources/js/components/open/forms/fields/FormFieldEditSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="showSidebar"
-       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0">
+       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 overflow-x-hidden">
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
       <button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
         <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

resources/js/mixins/form_editor/initForm.js

@@ -27,6 +27,7 @@ export default {
         transparent_background: false,
         closes_at: null,
         closed_text: 'This form has now been closed by its owner and does not accept submissions anymore.',
+        auto_save: true,
 
         // Submission
         submit_button_text: 'Submit',