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
GitHub
parent
30aee7813c
commit
a297f2db50
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ class Form extends Model
|
|||
'editable_submissions',
|
||||
'editable_submissions_button_text',
|
||||
'confetti_on_submission',
|
||||
'auto_save',
|
||||
|
||||
// Security & Privacy
|
||||
'can_be_indexed',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'])
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue