From 0dec765cdf49e299b85ac219a1925f7ddda08ce6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 5 Dec 2024 18:00:10 +0530
Subject: [PATCH] fix: Add option to enable and disable collapsible section

---
 frontend/src/components/Fields.vue                  |  1 +
 frontend/src/components/QuickEntryLayoutBuilder.vue | 11 +++++++++++
 frontend/src/components/Section.vue                 | 10 +++++++---
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 03cd73f7..3916887c 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -15,6 +15,7 @@
         :label="section.label"
         :hideLabel="section.hideLabel"
         :opened="section.opened"
+        :collapsible="section.collapsible"
         collapseIconPosition="right"
       >
         <div
diff --git a/frontend/src/components/QuickEntryLayoutBuilder.vue b/frontend/src/components/QuickEntryLayoutBuilder.vue
index 496dc08d..183c4b6c 100644
--- a/frontend/src/components/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/QuickEntryLayoutBuilder.vue
@@ -9,9 +9,15 @@
             >
               <div
                 v-if="!section.editingLabel"
+                class="flex items-center gap-2"
                 :class="{ 'text-ink-gray-3': section.hideLabel }"
               >
                 {{ __(section.label) || __('Untitled') }}
+                <FeatherIcon
+                  v-if="section.collapsible"
+                  name="chevron-down"
+                  class="h-4 transition-all duration-300 ease-in-out"
+                />
               </div>
               <div v-else class="flex gap-2 items-center">
                 <Input
@@ -166,6 +172,11 @@ function getOptions(section) {
       onClick: () => (section.editingLabel = true),
       condition: () => section.editable !== false,
     },
+    {
+      label: section.collapsible ? 'Uncollapsible' : 'Collapsible',
+      icon: section.collapsible ? 'chevron-up' : 'chevron-down',
+      onClick: () => (section.collapsible = !section.collapsible),
+    },
     {
       label: section.hideLabel ? 'Show Label' : 'Hide Label',
       icon: section.hideLabel ? 'eye' : 'eye-off',
diff --git a/frontend/src/components/Section.vue b/frontend/src/components/Section.vue
index d2ddf740..6fc178c3 100644
--- a/frontend/src/components/Section.vue
+++ b/frontend/src/components/Section.vue
@@ -4,10 +4,10 @@
       <div
         class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
         v-bind="$attrs"
-        @click="toggle()"
+        @click="collapsible && toggle()"
       >
         <FeatherIcon
-          v-if="collapseIconPosition === 'left'"
+          v-if="collapsible && collapseIconPosition === 'left'"
           name="chevron-right"
           class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
@@ -16,7 +16,7 @@
           {{ __(label) || __('Untitled') }}
         </span>
         <FeatherIcon
-          v-if="collapseIconPosition === 'right'"
+          v-if="collapsible && collapseIconPosition === 'right'"
           name="chevron-right"
           class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
@@ -54,6 +54,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
   collapseIconPosition: {
     type: String,
     default: 'left',