feat: form progress bar (#334)

* feat: form progress bar

* complete progress bar implementation

* fix  lint

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenForm.vue

@@ -5,6 +5,24 @@
     </p>
   </div>
   <form v-else-if="dataForm" @submit.prevent="">
+    <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>
     <transition name="fade" mode="out-in">
       <div :key="currentFieldGroupIndex" class="form-group flex flex-wrap w-full">
         <draggable v-model="currentFields"
@@ -147,6 +165,15 @@ export default {
       groups.push(currentGroup)
       return groups
     },
+    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.currentFieldGroupIndex]

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -59,6 +59,9 @@
         <pro-tag class="ml-1" />
       </template>
     </toggle-switch-input>
+    <toggle-switch-input name="show_progress_bar" :form="form" class="mt-4"
+                         label="Show progress bar"
+    />
     <toggle-switch-input name="uppercase_labels" :form="form" class="mt-4"
                          label="Uppercase Input Labels"
     />