From e7bb91f2fa75d754269dc0c25769a54a1b42f24f Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Mon, 4 Mar 2024 09:05:26 +0100
Subject: [PATCH 1/3] feat: form progress bar

---
 client/components/open/forms/OpenForm.vue | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index d5619c1f7..e88d1ad54 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.nf_id]))
+      const progress = (completedFields.length / requiredFields.length) * 100
+      return Math.round(progress)
+    },
     currentFields: {
       get () {
         return this.fieldGroups[this.currentFieldGroupIndex]

From eb230f0e6e8cde65c9399c3b96df61523d957228 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 19:10:46 +0100
Subject: [PATCH 2/3] complete progress bar implementation

---
 app/Http/Requests/UserFormRequest.php         |  1 +
 app/Models/Forms/Form.php                     |  1 +
 client/components/open/forms/OpenForm.vue     |  2 +-
 .../form-components/FormCustomization.vue     |  3 ++
 .../2024_03_12_173732_show_progress_bar.php   | 32 +++++++++++++++++++
 5 files changed, 38 insertions(+), 1 deletion(-)
 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 7444b525a..bf45dfdef 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -72,6 +72,7 @@ public function rules()
             '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 31ed1183f..a1fcc22f7 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 e88d1ad54..27eea0056 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -170,7 +170,7 @@ export default {
       if (requiredFields.length === 0) {
         return 100
       }
-      const completedFields = requiredFields.filter(field => ![null, undefined, ''].includes(this.dataFormValue[field.nf_id]))
+      const completedFields = requiredFields.filter(field => ![null, undefined, ''].includes(this.dataFormValue[field.id]))
       const progress = (completedFields.length / requiredFields.length) * 100
       return Math.round(progress)
     },
diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index 0528f76ea..f193cd130 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 000000000..36ec56899
--- /dev/null
+++ b/database/migrations/2024_03_12_173732_show_progress_bar.php
@@ -0,0 +1,32 @@
+<?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');
+        });
+    }
+};

From b9ad20b0c892225629d5480d8d98e46592358311 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 19:12:43 +0100
Subject: [PATCH 3/3] fix  lint

---
 database/migrations/2024_03_12_173732_show_progress_bar.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/database/migrations/2024_03_12_173732_show_progress_bar.php b/database/migrations/2024_03_12_173732_show_progress_bar.php
index 36ec56899..549dfb8e2 100644
--- a/database/migrations/2024_03_12_173732_show_progress_bar.php
+++ b/database/migrations/2024_03_12_173732_show_progress_bar.php
@@ -4,8 +4,7 @@
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class extends Migration
-{
+return new class () extends Migration {
     /**
      * Run the migrations.
      *