Confetti on form submission (#113)
This commit is contained in:
parent
92b2548add
commit
df68b20f82
|
@ -72,6 +72,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
|
|||
'max_submissions_reached_text' => 'string|nullable',
|
||||
'editable_submissions' => 'boolean|nullable',
|
||||
'editable_submissions_button_text' => 'string|min:1|max:50',
|
||||
'confetti_on_submission' => 'boolean',
|
||||
|
||||
// Properties
|
||||
'properties' => 'required|array',
|
||||
|
|
|
@ -78,6 +78,7 @@ class Form extends Model
|
|||
'max_submissions_reached_text',
|
||||
'editable_submissions',
|
||||
'editable_submissions_button_text',
|
||||
'confetti_on_submission',
|
||||
|
||||
// Security & Privacy
|
||||
'can_be_indexed',
|
||||
|
|
|
@ -84,7 +84,8 @@ class FormFactory extends Factory
|
|||
'password' => false,
|
||||
'tags' => [],
|
||||
'slack_webhook_url' => null,
|
||||
'editable_submissions_button_text' => 'Edit submission'
|
||||
'editable_submissions_button_text' => 'Edit submission',
|
||||
'confetti_on_submission' => false
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -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('confetti_on_submission')->default(false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('forms', function (Blueprint $table) {
|
||||
$table->dropColumn('confetti_on_submission');
|
||||
});
|
||||
}
|
||||
};
|
|
@ -25,6 +25,7 @@
|
|||
"vue": "^2.6.14",
|
||||
"vue-chartjs": "^4.1.0",
|
||||
"vue-clickaway": "^2.2.2",
|
||||
"vue-confetti": "^2.3.0",
|
||||
"vue-i18n": "^8.25.0",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-notion": "^0.4.0",
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue