feat: form progress bar (#334)

* feat: form progress bar

* complete progress bar implementation

* fix  lint

---------

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

app/Http/Requests/UserFormRequest.php

@@ -72,6 +72,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'editable_submissions' => 'boolean|nullable',
             'editable_submissions_button_text' => 'string|min:1|max:50',
             'confetti_on_submission' => 'boolean',
+            'show_progress_bar' => 'boolean',
             'auto_save' => 'boolean',
 
             // Properties

app/Models/Forms/Form.php

@@ -92,6 +92,7 @@ class Form extends Model implements CachableAttributes
         'editable_submissions',
         'editable_submissions_button_text',
         'confetti_on_submission',
+        'show_progress_bar',
         'auto_save',
 
         // Security & Privacy

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"
     />

database/migrations/2024_03_12_173732_show_progress_bar.php

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