Confetti on form submission (#113)

This commit is contained in:
Chirag Chhatrala 2023-04-12 16:47:05 +05:30 committed by GitHub
parent 92b2548add
commit df68b20f82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 70 additions and 2 deletions

View File

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

View File

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

View File

@ -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
];
}

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

View File

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

13
resources/js/base.js vendored
View File

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

View File

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

View File

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

View File

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