From 24200123cca349fffce75b932e294e456b598ed4 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 18 Mar 2024 16:28:01 +0100
Subject: [PATCH] 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         |  1 +
 app/Models/Forms/Form.php                     |  1 +
 client/components/open/forms/OpenForm.vue     | 27 ++++++++++++++++
 .../form-components/FormCustomization.vue     |  3 ++
 .../2024_03_12_173732_show_progress_bar.php   | 31 +++++++++++++++++++
 5 files changed, 63 insertions(+)
 create mode 100644 database/migrations/2024_03_12_173732_show_progress_bar.php

diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 74660646..e75796a9 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/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
diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php
index 31ed1183..a1fcc22f 100644
--- a/app/Models/Forms/Form.php
+++ b/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
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index d5619c1f..27eea005 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/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]
diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index 0528f76e..f193cd13 100644
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/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"
     />
diff --git a/database/migrations/2024_03_12_173732_show_progress_bar.php b/database/migrations/2024_03_12_173732_show_progress_bar.php
new file mode 100644
index 00000000..549dfb8e
--- /dev/null
+++ b/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');
+        });
+    }
+};