From bedd4541b551ca62d18e0b8f8f6eab7e2d5038a6 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Tue, 8 Apr 2025 13:50:51 +0530
Subject: [PATCH] Add FormProgressbar Component and Refactor OpenForm.vue
 (#740)

---
 .../components/open/forms/FormProgressbar.vue | 59 +++++++++++++++++++
 client/components/open/forms/OpenForm.vue     | 43 +++-----------
 2 files changed, 66 insertions(+), 36 deletions(-)
 create mode 100644 client/components/open/forms/FormProgressbar.vue

diff --git a/client/components/open/forms/FormProgressbar.vue b/client/components/open/forms/FormProgressbar.vue
new file mode 100644
index 00000000..3a58be22
--- /dev/null
+++ b/client/components/open/forms/FormProgressbar.vue
@@ -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> 
\ No newline at end of file
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index e8b29948..ae52f351 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -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]