matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add FormProgressbar Component and Refactor OpenForm.vue (#740)

This commit is contained in:
Chirag Chhatrala 2025-04-08 13:50:51 +05:30 committed by GitHub
parent 838ab8d846
commit bedd4541b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/components/open/forms/FormProgressbar.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<template v-if="form.show_progress_bar">
<div
v-if="isIframe"
class="mb-4 p-2"
>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden">
<div
class="h-full transition-all duration-300 rounded-r-full"
:class="{ 'w-0': formProgress === 0 }"
:style="{ width: formProgress + '%', background: form.color }"
/>
</div>
</div>
<div
v-else
class="fixed top-0 left-0 right-0 z-50"
>
<div class="w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden">
<div
class="h-full transition-all duration-300"
:class="{ 'w-0': formProgress === 0 }"
:style="{ width: formProgress + '%', background: form.color }"
/>
</div>
</div>
</template>
</template>
<script setup>
import { useIsIframe } from '~/composables/useIsIframe'
const props = defineProps({
form: {
type: Object,
required: true
},
fields: {
type: Array,
required: true
},
formData: {
type: Object,
required: true
}
})
const isIframe = useIsIframe()
const formProgress = computed(() => {
const requiredFields = props.fields.filter(field => field.required)
if (requiredFields.length === 0) {
return 100
}
const completedFields = requiredFields.filter(field => ![null, undefined, ''].includes(props.formData[field.id]))
const progress = (completedFields.length / requiredFields.length) * 100
return Math.round(progress)
})
</script>

43
client/components/open/forms/OpenForm.vue
View File

@ -13,32 +13,11 @@
ref="form-timer"
:form="form"
/>
<template v-if="form.show_progress_bar">
<div
v-if="isIframe"
class="mb-4 p-2"
>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden">
<div
class="h-full transition-all duration-300 rounded-r-full"
:class="{ 'w-0': formProgress === 0 }"
:style="{ width: formProgress + '%', background: form.color }"
/>
</div>
</div>
<div
v-else
class="fixed top-0 left-0 right-0 z-50"
>
<div class="w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden">
<div
class="h-full transition-all duration-300"
:class="{ 'w-0': formProgress === 0 }"
:style="{ width: formProgress + '%', background: form.color }"
/>
</div>
</div>
</template>
<FormProgressbar
:form="form"
:fields="fields"
:form-data="dataFormValue"
/>
<transition
name="fade"
mode="out-in"
@ -132,13 +111,14 @@ import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
import FormTimer from './FormTimer.vue'
import FormProgressbar from './FormProgressbar.vue'
import { storeToRefs } from 'pinia'
import { FormMode, createFormModeStrategy } from "~/lib/forms/FormModeStrategy.js"
import clonedeep from 'clone-deep'
export default {
name: 'OpenForm',
components: {draggable, OpenFormField, OpenFormButton, CaptchaInput, FormTimer},
components: {draggable, OpenFormField, OpenFormButton, CaptchaInput, FormTimer, FormProgressbar},
props: {
form: {
type: Object,
@ -245,15 +225,6 @@ export default {
isAdminPreview() {
return this.formModeStrategy.admin.showAdminControls
},
formProgress() {
const requiredFields = this.fields.filter(field => field.required)
if (requiredFields.length === 0) {
return 100
}
const completedFields = requiredFields.filter(field => ![null, undefined, ''].includes(this.dataFormValue[field.id]))
const progress = (completedFields.length / requiredFields.length) * 100
return Math.round(progress)
},
currentFields: {
get() {
return this.fieldGroups[this.formPageIndex]