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>
This commit is contained in:
formsdev 2023-10-12 16:56:02 +05:30 committed by GitHub
parent 30aee7813c
commit a297f2db50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 56 additions and 23 deletions

View File

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

View File

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

View File

@ -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');
});
}
};

View File

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

View File

@ -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>

View File

@ -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
}
},
@ -104,10 +113,17 @@ export default {
watch: {},
mounted () {
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'])

View File

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

View File

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