From d20fedd4bbc4f3464a031fbada49a45c16f09061 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Dec 2024 17:58:09 +0530
Subject: [PATCH] fix: hide read_only fields if value is empty

---
 frontend/src/components/FieldLayout.vue | 30 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 3fc2621d..fa75b303 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -9,7 +9,7 @@
     <Tabs
       v-model="tabIndex"
       class="!h-full"
-      :tabs="tabs"
+      :tabs="_tabs"
       v-slot="{ tab }"
       :tablistClass="
         !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
@@ -44,16 +44,7 @@
               ]"
             >
               <div v-for="field in section.fields" :key="field.name">
-                <div
-                  class="settings-field"
-                  v-if="
-                    (field.type == 'Check' ||
-                      (field.read_only && data[field.name]) ||
-                      !field.read_only ||
-                      !field.hidden) &&
-                    (!field.depends_on || field.display_via_depends_on)
-                  "
-                >
+                <div class="settings-field">
                   <div
                     v-if="field.type != 'Check'"
                     class="mb-2 text-sm text-ink-gray-5"
@@ -278,6 +269,23 @@ const { getUser } = usersStore()
 
 const hasTabs = computed(() => !props.tabs[0].no_tabs)
 
+const _tabs = computed(() => {
+  return props.tabs.map((tab) => {
+    tab.sections = tab.sections.map((section) => {
+      section.fields = section.fields.filter(
+        (field) =>
+          (field.type == 'Check' ||
+            (field.read_only && props.data[field.name]) ||
+            !field.read_only) &&
+          (!field.depends_on || field.display_via_depends_on) &&
+          !field.hidden,
+      )
+      return section
+    })
+    return tab
+  })
+})
+
 const tabIndex = ref(0)
 
 function gridClass(columns) {